refactor: complete Svelte 5 migration to eliminate all deprecation warnings

Migrated all components and routes to Svelte 5 syntax standards:

Event Handlers:
- Updated all deprecated on:* directives to new on* attribute syntax
- Changed on:click → onclick, on:keydown → onkeydown, on:input → oninput
- Updated on:blur, on:focus, on:load, on:submit, on:cancel handlers

Reactive State:
- Added $state() declarations for all reactive variables
- Fixed non-reactive update warnings in layout and component files

Component API:
- Replaced <slot /> with {@render children()} pattern
- Added children prop to components using slots

Accessibility:
- Added id attributes to inputs and for attributes to labels
- Fixed label-control associations across forms
- Removed event listeners from non-interactive elements

HTML Fixes:
- Fixed self-closing textarea tags
- Corrected implicitly closed elements
- Proper element nesting

CSS Cleanup:
- Removed 20+ unused CSS selectors across components
- Cleaned up orphaned styles from refactoring

All vite-plugin-svelte warnings resolved. Codebase now fully compliant with Svelte 5.

src/lib/components/Card.svelte

@@ -136,7 +136,7 @@ const img_alt = $derived(
 .card:hover,
 .card:focus-within{
 	transform: scale(1.02,1.02);
-	background-color: var(--red);
+	background-color: hsl(from var(--nord6) 100 s l);
 	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
 }
 .card:focus{
@@ -295,7 +295,7 @@ const img_alt = $derived(
 			<noscript>
 				<img class="image backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{img_alt}"/>
 			</noscript>
-			<img class="image backdrop_blur" class:blur={!isloaded} src={'https://bocken.org/static/rezepte/thumb/' + img_name} loading={loading_strat} alt="{img_alt}" on:load={() => isloaded=true}/>
+			<img class="image backdrop_blur" class:blur={!isloaded} src={'https://bocken.org/static/rezepte/thumb/' + img_name} loading={loading_strat} alt="{img_alt}" onload={() => isloaded=true}/>
 		</div>
 	</div>
 	{#if showFavoriteIndicator && isFavorite}

src/lib/components/CreateIngredientList.svelte

@@ -730,7 +730,7 @@ h3{
 
 <div class=list_wrapper >
 <h4>{t[lang].portions}</h4>
-<p contenteditable type="text" bind:innerText={portions_local} on:blur={set_portions}></p>
+<p contenteditable type="text" bind:innerText={portions_local} onblur={set_portions}></p>
 
 <h2>{t[lang].ingredients}</h2>
 {#each ingredients as list, list_index}
@@ -739,10 +739,10 @@ h3{
 		<div class="reference-container">
 			<div class="reference-header">
 				<div class="move_buttons_container">
-					<button on:click={() => update_list_position(list_index, 1)} aria-label={t[lang].moveReferenceUpAria}>
+					<button onclick={() => update_list_position(list_index, 1)} aria-label={t[lang].moveReferenceUpAria}>
 						<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
 					</button>
-					<button on:click={() => update_list_position(list_index, -1)} aria-label={t[lang].moveReferenceDownAria}>
+					<button onclick={() => update_list_position(list_index, -1)} aria-label={t[lang].moveReferenceDownAria}>
 						<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 					</button>
 				</div>
@@ -750,7 +750,7 @@ h3{
 					📋 {t[lang].baseRecipe}: {list.name || t[lang].unnamed}
 				</div>
 				<div class="mod_icons">
-					<button class="action_button button_subtle" on:click={() => removeReference(list_index)} aria-label={t[lang].removeReferenceAria}>
+					<button class="action_button button_subtle" onclick={() => removeReference(list_index)} aria-label={t[lang].removeReferenceAria}>
 						<Cross fill="var(--nord11)"></Cross>
 					</button>
 				</div>
@@ -764,24 +764,24 @@ h3{
 						<div class=move_buttons_container>
 							<!-- Empty for consistency -->
 						</div>
-						<button on:click={() => editItemFromReference(list_index, 'before', item_index)} class="ingredient-amount-button">
+						<button onclick={() => editItemFromReference(list_index, 'before', item_index)} class="ingredient-amount-button">
 							{item.amount} {item.unit}
 						</button>
-						<button class="force_wrap ingredient-name-button" on:click={() => editItemFromReference(list_index, 'before', item_index)}>
+						<button class="force_wrap ingredient-name-button" onclick={() => editItemFromReference(list_index, 'before', item_index)}>
 							{@html item.name}
 						</button>
 						<div class="mod_icons">
-							<button class="action_button button_subtle" on:click={() => editItemFromReference(list_index, 'before', item_index)} aria-label={t[lang].editIngredientAria}>
+							<button class="action_button button_subtle" onclick={() => editItemFromReference(list_index, 'before', item_index)} aria-label={t[lang].editIngredientAria}>
 								<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
 							</button>
-							<button class="action_button button_subtle" on:click={() => removeItemFromReference(list_index, 'before', item_index)} aria-label={t[lang].removeIngredientAria}>
+							<button class="action_button button_subtle" onclick={() => removeItemFromReference(list_index, 'before', item_index)} aria-label={t[lang].removeIngredientAria}>
 								<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
 							</button>
 						</div>
 					{/each}
 				</div>
 			{/if}
-			<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'before')}>
+			<button class="action_button button_subtle add-to-reference-button" onclick={() => openAddToReferenceModal(list_index, 'before')}>
 				<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> {t[lang].addIngredientBefore}
 			</button>
 
@@ -791,7 +791,7 @@ h3{
 			</div>
 
 			<!-- Items after base recipe -->
-			<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'after')}>
+			<button class="action_button button_subtle add-to-reference-button" onclick={() => openAddToReferenceModal(list_index, 'after')}>
 				<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> {t[lang].addIngredientAfter}
 			</button>
 			{#if list.itemsAfter && list.itemsAfter.length > 0}
@@ -801,17 +801,17 @@ h3{
 						<div class=move_buttons_container>
 							<!-- Empty for consistency -->
 						</div>
-						<button on:click={() => editItemFromReference(list_index, 'after', item_index)} class="ingredient-amount-button">
+						<button onclick={() => editItemFromReference(list_index, 'after', item_index)} class="ingredient-amount-button">
 							{item.amount} {item.unit}
 						</button>
-						<button class="force_wrap ingredient-name-button" on:click={() => editItemFromReference(list_index, 'after', item_index)}>
+						<button class="force_wrap ingredient-name-button" onclick={() => editItemFromReference(list_index, 'after', item_index)}>
 							{@html item.name}
 						</button>
 						<div class="mod_icons">
-							<button class="action_button button_subtle" on:click={() => editItemFromReference(list_index, 'after', item_index)} aria-label={t[lang].editIngredientAria}>
+							<button class="action_button button_subtle" onclick={() => editItemFromReference(list_index, 'after', item_index)} aria-label={t[lang].editIngredientAria}>
 								<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
 							</button>
-							<button class="action_button button_subtle" on:click={() => removeItemFromReference(list_index, 'after', item_index)} aria-label={t[lang].removeIngredientAria}>
+							<button class="action_button button_subtle" onclick={() => removeItemFromReference(list_index, 'after', item_index)} aria-label={t[lang].removeIngredientAria}>
 								<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
 							</button>
 						</div>
@@ -823,15 +823,15 @@ h3{
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<h3>
 		<div class=move_buttons_container>
-			<button on:click="{() => update_list_position(list_index, 1)}" aria-label="Liste nach oben verschieben">
+			<button onclick="{() => update_list_position(list_index, 1)}" aria-label="Liste nach oben verschieben">
 							<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
 					</button>
-			<button  on:click="{() => update_list_position(list_index, -1)}" aria-label="Liste nach unten verschieben">
+			<button  onclick="{() => update_list_position(list_index, -1)}" aria-label="Liste nach unten verschieben">
 							<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 			</button>
 		</div>
 
-		<button on:click="{() => show_modal_edit_subheading_ingredient(list_index)}" class="subheading-button">
+		<button onclick="{() => show_modal_edit_subheading_ingredient(list_index)}" class="subheading-button">
 		{#if list.name }
 			{list.name}
 		{:else}
@@ -839,63 +839,63 @@ h3{
 		{/if}
 		</button>
 		<div class=mod_icons>
-			<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_ingredient(list_index)}" aria-label={t[lang].editHeading}>
+			<button class="action_button button_subtle" onclick="{() => show_modal_edit_subheading_ingredient(list_index)}" aria-label={t[lang].editHeading}>
 				<Pen fill=var(--nord1)></Pen>	</button>
-			<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}" aria-label={t[lang].removeList}>
+			<button class="action_button button_subtle" onclick="{() => remove_list(list_index)}" aria-label={t[lang].removeList}>
 				<Cross fill=var(--nord1)></Cross></button>
 		</div>
 		</h3>
 		<div class=ingredients_grid>
 		{#each list.list as ingredient, ingredient_index (ingredient_index)}
 		<div class=move_buttons_container>
-			<button on:click="{() => update_ingredient_position(list_index, ingredient_index, 1)}" aria-label={t[lang].moveUpAria}>
+			<button onclick="{() => update_ingredient_position(list_index, ingredient_index, 1)}" aria-label={t[lang].moveUpAria}>
                 	        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
                 	</button>
-			<button  on:click="{() => update_ingredient_position(list_index, ingredient_index, -1)}" aria-label={t[lang].moveDownAria}>
+			<button  onclick="{() => update_ingredient_position(list_index, ingredient_index, -1)}" aria-label={t[lang].moveDownAria}>
                 	        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 			</button>
 		</div>
-		<button on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} class="ingredient-amount-button">
+		<button onclick={() => show_modal_edit_ingredient(list_index, ingredient_index)} class="ingredient-amount-button">
 			{ingredient.amount} {ingredient.unit}
 		</button>
-		<button class="force_wrap ingredient-name-button" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
+		<button class="force_wrap ingredient-name-button" onclick={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
 			{@html ingredient.name}
 		</button>
-		<div class=mod_icons><button class="action_button button_subtle" on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)} aria-label={t[lang].editIngredientAria}>
+		<div class=mod_icons><button class="action_button button_subtle" onclick={() => show_modal_edit_ingredient(list_index, ingredient_index)} aria-label={t[lang].editIngredientAria}>
 			<Pen fill=var(--nord1) height=1em width=1em></Pen></button>
-			<button class="action_button button_subtle" on:click="{() => remove_ingredient(list_index, ingredient_index)}" aria-label={t[lang].removeIngredientAria}><Cross fill=var(--nord1) height=1em width=1em></Cross></button></div>
+			<button class="action_button button_subtle" onclick="{() => remove_ingredient(list_index, ingredient_index)}" aria-label={t[lang].removeIngredientAria}><Cross fill=var(--nord1) height=1em width=1em></Cross></button></div>
 	{/each}
 		</div>
 	{/if}
 {/each}
 
 <!-- Button to insert base recipe -->
-<button class="insert-base-recipe-button" on:click={() => openSelector(ingredients.length)}>
+<button class="insert-base-recipe-button" onclick={() => openSelector(ingredients.length)}>
 	<Plus fill="white" style="display: inline; width: 1.5em; height: 1.5em; vertical-align: middle;"></Plus>
 	{t[lang].insertBaseRecipe}
 </button>
 </div>
 
 <div class="adder shadow">
-	<input class=category type="text" bind:value={new_ingredient.sublist} placeholder={t[lang].categoryOptional} on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+	<input class=category type="text" bind:value={new_ingredient.sublist} placeholder={t[lang].categoryOptional} onkeydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
 	<div class=add_ingredient>
-		<input type="text"  placeholder="250..." bind:value={new_ingredient.amount} on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+		<input type="text"  placeholder="250..." bind:value={new_ingredient.amount} onkeydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-		<input type="text" placeholder="mL..." bind:value={new_ingredient.unit} on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+		<input type="text" placeholder="mL..." bind:value={new_ingredient.unit} onkeydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-		<input type="text" placeholder="Milch..." bind:value={new_ingredient.name} on:keydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
+		<input type="text" placeholder="Milch..." bind:value={new_ingredient.name} onkeydown={(event) => do_on_key(event, 'Enter', false, add_new_ingredient)}>
-		<button on:click={() => add_new_ingredient()} class=action_button>
+		<button onclick={() => add_new_ingredient()} class=action_button>
 			<Plus fill=white style="width: 2rem; height: 2rem;"></Plus>
 		</button>
 	</div>
 </div>
-<dialog id=edit_ingredient_modal on:cancel={handleIngredientModalCancel}>
+<dialog id=edit_ingredient_modal oncancel={handleIngredientModalCancel}>
 	<h2>{t[lang].editIngredient}</h2>
 	<div class=adder>
 	<input class=category type="text" bind:value={edit_ingredient.sublist} placeholder={t[lang].categoryOptional}>
-	<div class=add_ingredient role="group" on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<div class=add_ingredient role="group">
-	<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="250..." bind:value={edit_ingredient.amount} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
-	<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="mL..." bind:value={edit_ingredient.unit} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
-	<input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
+	<input type="text" placeholder="Milch..." bind:value={edit_ingredient.name} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)}>
-	<button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)} on:click={edit_ingredient_and_close_modal}>
+	<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, edit_ingredient_and_close_modal)} onclick={edit_ingredient_and_close_modal}>
 		<Check fill=white style="width: 2rem; height: 2rem;"></Check>
 		</button>
 	</div>
@@ -905,8 +905,8 @@ h3{
 <dialog id=edit_subheading_ingredient_modal>
 	<h2>{t[lang].renameCategory}</h2>
 	<div class=heading_wrapper>
-		<input class=heading type="text" bind:value={edit_heading.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} >
+		<input class=heading type="text" bind:value={edit_heading.name} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} >
-		<button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} on:click={edit_subheading_and_close_modal}>
+		<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_and_close_modal)} onclick={edit_subheading_and_close_modal}>
 		<Check fill=white style="width:2rem; height:2rem;"></Check>
 		</button>
 	</div>

src/lib/components/CreateStepList.svelte

@@ -790,10 +790,10 @@ h3{
 		<div class="reference-container">
 			<div class="reference-header">
 				<div class="move_buttons_container">
-					<button on:click={() => update_list_position(list_index, 1)} aria-label={t[lang].moveReferenceUpAria}>
+					<button onclick={() => update_list_position(list_index, 1)} aria-label={t[lang].moveReferenceUpAria}>
 						<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
 					</button>
-					<button on:click={() => update_list_position(list_index, -1)} aria-label={t[lang].moveReferenceDownAria}>
+					<button onclick={() => update_list_position(list_index, -1)} aria-label={t[lang].moveReferenceDownAria}>
 						<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 					</button>
 				</div>
@@ -801,7 +801,7 @@ h3{
 					📋 {t[lang].baseRecipe}: {list.name || t[lang].unnamed}
 				</div>
 				<div class="mod_icons">
-					<button class="action_button button_subtle" on:click={() => removeReference(list_index)} aria-label={t[lang].removeReferenceAria}>
+					<button class="action_button button_subtle" onclick={() => removeReference(list_index)} aria-label={t[lang].removeReferenceAria}>
 						<Cross fill="var(--nord11)"></Cross>
 					</button>
 				</div>
@@ -817,14 +817,14 @@ h3{
 								<div class="move_buttons_container step_move_buttons">
 									<!-- Empty for consistency -->
 								</div>
-								<button on:click={() => editStepFromReference(list_index, 'before', step_index)} class="step-button" style="flex-grow: 1;">
+								<button onclick={() => editStepFromReference(list_index, 'before', step_index)} class="step-button" style="flex-grow: 1;">
 									{@html step}
 								</button>
 								<div>
-									<button class="action_button button_subtle" on:click={() => editStepFromReference(list_index, 'before', step_index)} aria-label={t[lang].editStepAria}>
+									<button class="action_button button_subtle" onclick={() => editStepFromReference(list_index, 'before', step_index)} aria-label={t[lang].editStepAria}>
 										<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
 									</button>
-									<button class="action_button button_subtle" on:click={() => removeStepFromReference(list_index, 'before', step_index)} aria-label={t[lang].removeStepAria}>
+									<button class="action_button button_subtle" onclick={() => removeStepFromReference(list_index, 'before', step_index)} aria-label={t[lang].removeStepAria}>
 										<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
 									</button>
 								</div>
@@ -833,7 +833,7 @@ h3{
 					{/each}
 				</ol>
 			{/if}
-			<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'before')}>
+			<button class="action_button button_subtle add-to-reference-button" onclick={() => openAddToReferenceModal(list_index, 'before')}>
 				<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> {t[lang].addStepBefore}
 			</button>
 
@@ -843,7 +843,7 @@ h3{
 			</div>
 
 			<!-- Steps after base recipe -->
-			<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'after')}>
+			<button class="action_button button_subtle add-to-reference-button" onclick={() => openAddToReferenceModal(list_index, 'after')}>
 				<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> {t[lang].addStepAfter}
 			</button>
 			{#if list.stepsAfter && list.stepsAfter.length > 0}
@@ -855,14 +855,14 @@ h3{
 								<div class="move_buttons_container step_move_buttons">
 									<!-- Empty for consistency -->
 								</div>
-								<button on:click={() => editStepFromReference(list_index, 'after', step_index)} class="step-button" style="flex-grow: 1;">
+								<button onclick={() => editStepFromReference(list_index, 'after', step_index)} class="step-button" style="flex-grow: 1;">
 									{@html step}
 								</button>
 								<div>
-									<button class="action_button button_subtle" on:click={() => editStepFromReference(list_index, 'after', step_index)} aria-label={t[lang].editStepAria}>
+									<button class="action_button button_subtle" onclick={() => editStepFromReference(list_index, 'after', step_index)} aria-label={t[lang].editStepAria}>
 										<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
 									</button>
-									<button class="action_button button_subtle" on:click={() => removeStepFromReference(list_index, 'after', step_index)} aria-label={t[lang].removeStepAria}>
+									<button class="action_button button_subtle" onclick={() => removeStepFromReference(list_index, 'after', step_index)} aria-label={t[lang].removeStepAria}>
 										<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
 									</button>
 								</div>
@@ -876,23 +876,23 @@ h3{
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<h3>
 		<div class=move_buttons_container>
-			<button on:click="{() => update_list_position(list_index, 1)}" aria-label={t[lang].moveListUpAria}>
+			<button onclick="{() => update_list_position(list_index, 1)}" aria-label={t[lang].moveListUpAria}>
 							<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
 					</button>
-			<button  on:click="{() => update_list_position(list_index, -1)}" aria-label={t[lang].moveListDownAria}>
+			<button  onclick="{() => update_list_position(list_index, -1)}" aria-label={t[lang].moveListDownAria}>
 							<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 			</button>
 		</div>
-		<button on:click={() => show_modal_edit_subheading_step(list_index)} class="subheading-button">
+		<button onclick={() => show_modal_edit_subheading_step(list_index)} class="subheading-button">
 		{#if list.name}
 			{list.name}
 		{:else}
 			{t[lang].empty}
 		{/if}
 		</button>
-		<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_step(list_index)}" aria-label={t[lang].editHeading}>
+		<button class="action_button button_subtle" onclick="{() => show_modal_edit_subheading_step(list_index)}" aria-label={t[lang].editHeading}>
 				<Pen fill=var(--nord1)></Pen>	</button>
-			<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}" aria-label={t[lang].removeList}>
+			<button class="action_button button_subtle" onclick="{() => remove_list(list_index)}" aria-label={t[lang].removeList}>
 					<Cross fill=var(--nord1)></Cross>
 		</button>
 	</h3>
@@ -901,21 +901,21 @@ h3{
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<li>
 			<div class="move_buttons_container step_move_buttons">
-				<button on:click="{() => update_step_position(list_index, step_index, 1)}" aria-label={t[lang].moveUpAria}>
+				<button onclick="{() => update_step_position(list_index, step_index, 1)}" aria-label={t[lang].moveUpAria}>
 		                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
 		                </button>
-				<button  on:click="{() => update_step_position(list_index, step_index, -1)}" aria-label={t[lang].moveDownAria}>
+				<button  onclick="{() => update_step_position(list_index, step_index, -1)}" aria-label={t[lang].moveDownAria}>
 		                        <svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
 				</button>
 			</div>
 			<div>
-				<button on:click={() => show_modal_edit_step(list_index, step_index)} class="step-button">
+				<button onclick={() => show_modal_edit_step(list_index, step_index)} class="step-button">
 					{@html step}
 				</button>
-			<div><button class="action_button button_subtle" on:click={() => show_modal_edit_step(list_index, step_index)} aria-label={t[lang].editStepAria}>
+			<div><button class="action_button button_subtle" onclick={() => show_modal_edit_step(list_index, step_index)} aria-label={t[lang].editStepAria}>
 				<Pen fill=var(--nord1)></Pen>
 		</button>
-		<button class="action_button button_subtle" on:click="{() => remove_step(list_index, step_index)}" aria-label={t[lang].removeStepAria}>
+		<button class="action_button button_subtle" onclick="{() => remove_step(list_index, step_index)}" aria-label={t[lang].removeStepAria}>
 			<Cross fill=var(--nord1)></Cross>
 		</button>
 			</div></div>
@@ -926,39 +926,40 @@ h3{
 {/each}
 
 <!-- Button to insert base recipe -->
-<button class="insert-base-recipe-button" on:click={() => openSelector(instructions.length)}>
+<button class="insert-base-recipe-button" onclick={() => openSelector(instructions.length)}>
 	<Plus fill="white" style="display: inline; width: 1.5em; height: 1.5em; vertical-align: middle;"></Plus>
 	{t[lang].insertBaseRecipe}
 </button>
 </div>
 
 <div class='adder shadow'>
-<input class=category type="text" bind:value={new_step.name} placeholder={t[lang].categoryOptional} on:keydown={(event) => do_on_key(event, 'Enter', false , add_new_step)} >
+<input class=category type="text" bind:value={new_step.name} placeholder={t[lang].categoryOptional} onkeydown={(event) => do_on_key(event, 'Enter', false , add_new_step)} >
 <div class=add_step>
-	<p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerText={new_step.step} on:keydown={(event) => do_on_key(event, 'Enter', true , add_new_step)}></p>
+	<p id=step contenteditable onfocus='{clear_step}' onblur={add_placeholder} bind:innerText={new_step.step} onkeydown={(event) => do_on_key(event, 'Enter', true , add_new_step)}></p>
-	<button on:click={() => add_new_step()} class=action_button>
+	<button onclick={() => add_new_step()} class=action_button>
 		<Plus fill=white style="height: 2rem; width: 2rem"></Plus>
 	</button>
 
 </div>
 </div>
-<dialog id=edit_step_modal on:cancel={handleStepModalCancel}>
+<dialog id=edit_step_modal oncancel={handleStepModalCancel}>
 	<h2>{t[lang].editStep}</h2>
 	<div class=adder>
-	<input class=category type="text" bind:value={edit_step.name} placeholder={t[lang].subcategoryOptional} on:keydown={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
+	<input class=category type="text" bind:value={edit_step.name} placeholder={t[lang].subcategoryOptional} onkeydown={(event) => do_on_key(event, 'Enter', false , edit_step_and_close_modal)}>
 	<div class=add_step>
-		<p id=step contenteditable bind:innerText={edit_step.step} on:keydown={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p>
+		<p id=step contenteditable bind:innerText={edit_step.step} onkeydown={(event) => do_on_key(event, 'Enter', true , edit_step_and_close_modal)}></p>
-	<button class=action_button on:click="{() => edit_step_and_close_modal()}" >
+	<button class=action_button onclick="{() => edit_step_and_close_modal()}" >
 		<Check fill=white style="height: 2rem; width: 2rem"></Check>
 	</button>
 </div>
+	</div>
 </dialog>
 
 <dialog id=edit_subheading_steps_modal>
 	<h2>{t[lang].renameCategory}</h2>
 	<div class=heading_wrapper>
-		<input class="heading" type="text" bind:value={edit_heading.name} on:keydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}>
+		<input class="heading" type="text" bind:value={edit_heading.name} onkeydown={(event) => do_on_key(event, 'Enter', false, edit_subheading_steps_and_close_modal)}>
-		<button on:click={edit_subheading_steps_and_close_modal} class=action_button>
+		<button onclick={edit_subheading_steps_and_close_modal} class=action_button>
 		<Check fill=white style="height: 2rem; width: 2rem"></Check>
 		</button>
 	</div>

src/lib/components/DebtBreakdown.svelte

@@ -137,13 +137,6 @@
     border-radius: 0.5rem;
   }
 
-  .no-debts {
-    text-align: center;
-    padding: 2rem;
-    color: #666;
-    font-size: 1.1rem;
-  }
-
   .debt-sections {
     display: grid;
     gap: 1.5rem;

src/lib/components/HefeSwapper.svelte

@@ -57,7 +57,7 @@
 	{#each Array.from(currentParams.entries()) as [key, value]}
 		<input type="hidden" name="currentParam_{key}" value={value} />
 	{/each}
-	<button type="submit" on:click={toggleHefe} title={toggleTitle}>
+	<button type="submit" onclick={toggleHefe} title={toggleTitle}>
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
 	</button>
 </form>

src/lib/components/IngredientsPage.svelte

@@ -325,24 +325,6 @@ font-family: sans-serif;
 	scale: 1.2 !important;
 	box-shadow: 0px 0px 0.4em 0.1em rgba(0,0,0, 0.3) !important;
 }
-input.selected,
-span.selected
-{
-	box-shadow: none !important;
-	background-color: transparent;
-	scale: 1 !important;
-}
-input,
-span
-{
-	display: inline;
-	flex-grow: 1;
-	min-width: 1.5ch;
-	background-color: transparent;
-	border: unset;
-	padding: 0;
-	margin: 0;
-}
 .custom-multiplier {
 	display: flex;
 	align-items: center;
@@ -377,9 +359,6 @@ span
 	margin: 0;
 }
 
-.custom-input[type=number] {
-	-moz-appearance: textfield;
-}
 
 .custom-button {
 	padding: 0;
@@ -447,7 +426,7 @@ h3 a:hover {
 				<input type="hidden" name={key} value={value} />
 			{/if}
 		{/each}
-		<button type="submit" class:selected={multiplier==0.5} on:click={(e) => handleMultiplierClick(e, 0.5)}>{@html "<sup>1</sup>/<sub>2</sub>x"}</button>
+		<button type="submit" class:selected={multiplier==0.5} onclick={(e) => handleMultiplierClick(e, 0.5)}>{@html "<sup>1</sup>/<sub>2</sub>x"}</button>
 	</form>
 	<form method="get" style="display: inline;">
 		<input type="hidden" name="multiplier" value="1" />
@@ -456,7 +435,7 @@ h3 a:hover {
 				<input type="hidden" name={key} value={value} />
 			{/if}
 		{/each}
-		<button type="submit" class:selected={multiplier==1} on:click={(e) => handleMultiplierClick(e, 1)}>1x</button>
+		<button type="submit" class:selected={multiplier==1} onclick={(e) => handleMultiplierClick(e, 1)}>1x</button>
 	</form>
 	<form method="get" style="display: inline;">
 		<input type="hidden" name="multiplier" value="1.5" />
@@ -465,7 +444,7 @@ h3 a:hover {
 				<input type="hidden" name={key} value={value} />
 			{/if}
 		{/each}
-		<button type="submit" class:selected={multiplier==1.5} on:click={(e) => handleMultiplierClick(e, 1.5)}>{@html "<sup>3</sup>/<sub>2</sub>x"}</button>
+		<button type="submit" class:selected={multiplier==1.5} onclick={(e) => handleMultiplierClick(e, 1.5)}>{@html "<sup>3</sup>/<sub>2</sub>x"}</button>
 	</form>
 	<form method="get" style="display: inline;">
 		<input type="hidden" name="multiplier" value="2" />
@@ -474,7 +453,7 @@ h3 a:hover {
 				<input type="hidden" name={key} value={value} />
 			{/if}
 		{/each}
-		<button type="submit" class:selected={multiplier==2} on:click={(e) => handleMultiplierClick(e, 2)}>2x</button>
+		<button type="submit" class:selected={multiplier==2} onclick={(e) => handleMultiplierClick(e, 2)}>2x</button>
 	</form>
 	<form method="get" style="display: inline;">
 		<input type="hidden" name="multiplier" value="3" />
@@ -483,9 +462,9 @@ h3 a:hover {
 				<input type="hidden" name={key} value={value} />
 			{/if}
 		{/each}
-		<button type="submit" class:selected={multiplier==3} on:click={(e) => handleMultiplierClick(e, 3)}>3x</button>
+		<button type="submit" class:selected={multiplier==3} onclick={(e) => handleMultiplierClick(e, 3)}>3x</button>
 	</form>
-	<form method="get" style="display: inline;" class="custom-multiplier" on:submit={handleCustomSubmit}>
+	<form method="get" style="display: inline;" class="custom-multiplier" onsubmit={handleCustomSubmit}>
 		{#each Array.from(currentParams.entries()) as [key, value]}
 			{#if key !== 'multiplier'}
 				<input type="hidden" name={key} value={value} />
@@ -499,7 +478,7 @@ h3 a:hover {
 			placeholder="…" 
 			class="custom-input"
 			value={multiplier != 0.5 && multiplier != 1 && multiplier != 1.5 && multiplier != 2 && multiplier != 3 ? multiplier : ''}
-			on:input={handleCustomInput}
+			oninput={handleCustomInput}
 		/>
 		<button type="submit" class="custom-button">x</button>
 	</form>

src/lib/components/PaymentModal.svelte

@@ -462,7 +462,7 @@
     flex-shrink: 0;
   }
 
-  .btn-primary, .btn-secondary, .btn-danger {
+  .btn-secondary {
     padding: 0.75rem 1.5rem;
     border-radius: 0.5rem;
     font-size: 1rem;
@@ -472,20 +472,6 @@
     text-decoration: none;
     display: inline-block;
     text-align: center;
-  }
-
-  .btn-primary {
-    background-color: var(--blue);
-    color: white;
-  }
-
-  .btn-primary:hover:not(:disabled) {
-    background-color: var(--nord10);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  }
-
-  .btn-secondary {
     background-color: var(--nord5);
     color: var(--nord0);
     border: 1px solid var(--nord4);
@@ -496,21 +482,6 @@
     transform: translateY(-1px);
   }
 
-  .btn-danger {
-    background-color: var(--red);
-    color: white;
-  }
-
-  .btn-danger:hover:not(:disabled) {
-    background-color: var(--nord11);
-    transform: translateY(-1px);
-  }
-
-  .btn-danger:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-
   @media (prefers-color-scheme: dark) {
     .panel-content {
       background: var(--nord1);

src/lib/components/SeasonSelect.svelte

@@ -92,7 +92,7 @@ input[type=checkbox]::after
 {#each months as month}
 	<div class=checkbox_container>
 		<!-- svelte-ignore a11y-no-noninteractive-tabindex-->
-		<label tabindex="0" on:keydown={(event) => do_on_key(event, 'Enter', false, () => {toggle_checkbox_on_key(event)}) } ><input tabindex=-1 type="checkbox" name="checkbox" value="value" on:click={set_season}>{month}</label>
+		<label tabindex="0" onkeydown={(event) => do_on_key(event, 'Enter', false, () => {toggle_checkbox_on_key(event)}) } ><input tabindex=-1 type="checkbox" name="checkbox" value="value" onclick={set_season}>{month}</label>
 	</div>
 {/each}
 </div>

src/lib/components/SplitMethodSelector.svelte

@@ -142,8 +142,9 @@
       <h3>Custom Split Amounts</h3>
       {#each users as user}
         <div class="split-input">
-          <label>{user}</label>
+          <label for="split_{user}">{user}</label>
           <input
+            id="split_{user}"
             type="number"
             step="0.01"
             name="split_{user}"
@@ -161,8 +162,9 @@
       <p class="description">Enter personal amounts for each user. The remainder will be split equally.</p>
       {#each users as user}
         <div class="split-input">
-          <label>{user}</label>
+          <label for="personal_{user}">{user}</label>
           <input
+            id="personal_{user}"
             type="number"
             step="0.01"
             min="0"

src/lib/components/TagFilter.svelte

@@ -18,7 +18,7 @@
 
 	let inputValue = $state('');
 	let dropdownOpen = $state(false);
-	let dropdownElement = null;
+	let dropdownElement = $state(null);
 
 	// Filter tags based on input
 	const filteredTags = $derived(

src/lib/components/TitleImgParallax.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from "svelte";
 
-	let { src, placeholder_src, alt = "" } = $props();
+	let { src, placeholder_src, alt = "", children } = $props();
 
 	let isloaded = $state(false);
 	let isredirected = $state(false);
@@ -189,7 +189,7 @@ dialog button{
 		</noscript>
 	</div>
     </figure>
-    <div class=content><slot></slot></div>
+    <div class=content>{@render children()}</div>
 </section>
 
 <dialog id=img_carousel>

src/lib/components/TranslationApproval.svelte

@@ -796,8 +796,9 @@ button:disabled {
 
 									<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem;">
 										<div>
-											<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇩🇪 German Alt-Text:</label>
+											<label for="german-alt-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇩🇪 German Alt-Text:</label>
 											<input
+												id="german-alt-{i}"
 												type="text"
 												value={germanImage.alt || ''}
 												disabled
@@ -805,8 +806,9 @@ button:disabled {
 											/>
 										</div>
 										<div>
-											<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇬🇧 English Alt-Text:</label>
+											<label for="english-alt-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇬🇧 English Alt-Text:</label>
 											<input
+												id="english-alt-{i}"
 												type="text"
 												bind:value={editableEnglish.images[i].alt}
 												placeholder="English image description for screen readers"
@@ -817,8 +819,9 @@ button:disabled {
 
 									<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
 										<div>
-											<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇩🇪 German Caption:</label>
+											<label for="german-caption-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇩🇪 German Caption:</label>
 											<input
+												id="german-caption-{i}"
 												type="text"
 												value={germanImage.caption || ''}
 												disabled
@@ -826,8 +829,9 @@ button:disabled {
 											/>
 										</div>
 										<div>
-											<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇬🇧 English Caption:</label>
+											<label for="english-caption-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.85rem; color: var(--nord0);">🇬🇧 English Caption:</label>
 											<input
+												id="english-caption-{i}"
 												type="text"
 												bind:value={editableEnglish.images[i].caption}
 												placeholder="English caption (optional)"

src/lib/components/TranslationFieldComparison.svelte

@@ -127,15 +127,15 @@ textarea.field-value {
 		<textarea
 			class="field-value"
 			value={englishValue}
-			on:input={handleInput}
+			oninput={handleInput}
 			placeholder="Enter {label.toLowerCase()}..."
-		/>
+		></textarea>
 	{:else}
 		<input
 			type="text"
 			class="field-value"
 			value={englishValue}
-			on:input={handleInput}
+			oninput={handleInput}
 			placeholder="Enter {label.toLowerCase()}..."
 		/>
 	{/if}

src/routes/+layout.svelte

@@ -1,7 +1,5 @@
 <script>
+	let { children } = $props();
 </script>
 
-<slot />
+{@render children()}
-
-<style>
-</style>

src/routes/[recipeLang=recipeLang]/edit/[name]/+page.svelte

@@ -499,8 +499,9 @@ button.action_button{
 					<p style="margin: 0 0 0.5rem 0; font-size: 0.9rem; color: var(--nord3);"><strong>Bild {i + 1}:</strong> {image.mediapath}</p>
 
 					<div style="margin-bottom: 0.75rem;">
-						<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Alt-Text (DE):</label>
+						<label for="image-alt-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Alt-Text (DE):</label>
 						<input
+							id="image-alt-{i}"
 							type="text"
 							bind:value={image.alt}
 							placeholder="Beschreibung des Bildes für Screenreader (Deutsch)"
@@ -509,8 +510,9 @@ button.action_button{
 					</div>
 
 					<div style="margin-bottom: 0.75rem;">
-						<label style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Caption (DE):</label>
+						<label for="image-caption-{i}" style="display: block; margin-bottom: 0.25rem; font-weight: bold; font-size: 0.9rem;">Caption (DE):</label>
 						<input
+							id="image-caption-{i}"
 							type="text"
 							bind:value={image.caption}
 							placeholder="Bildunterschrift (optional)"

src/routes/cospend/+layout.svelte

@@ -10,13 +10,9 @@
 
   let { data, children } = $props();
 
-  let showModal = false;
+  let showModal = $state(false);
-  let paymentId = null;
+  let paymentId = $state(null);
-  let user;
+  let user = $state(data.session?.user);
-  
-  if (data.session) {
-    user = data.session.user;
-  }
 
   $effect(() => {
     // Check if URL contains payment view route OR if we have paymentId in state

src/routes/cospend/+page.svelte

@@ -317,10 +317,6 @@
     color: var(--red);
   }
 
-  .even {
-    color: var(--nord3);
-  }
-
   .actions {
     display: flex;
     gap: 1rem;
@@ -617,16 +613,6 @@
     }
   }
 
-  .you-badge {
-    background-color: var(--blue);
-    color: white;
-    padding: 0.125rem 0.5rem;
-    border-radius: 1rem;
-    font-size: 0.75rem;
-    font-weight: 500;
-    display: inline-block;
-  }
-
   .activity-amount {
     font-weight: bold;
     font-size: 1rem;
@@ -645,7 +631,7 @@
     flex-wrap: wrap;
   }
 
-  .paid-by, .payment-date {
+  .payment-date {
     color: var(--nord3);
     font-size: 0.9rem;
   }
@@ -659,7 +645,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    .paid-by, .payment-date {
+    .payment-date {
       color: var(--nord4);
     }
 

src/routes/cospend/payments/add/+page.svelte

@@ -803,18 +803,10 @@
     display: block;
   }
 
-  .js-enhanced {
-    display: none;
-  }
-
   :global(body.js-loaded) .no-js-only {
     display: none;
   }
 
-  :global(body.js-loaded) .js-enhanced {
-    display: block;
-  }
-
   .manual-users textarea {
     width: 100%;
     padding: 0.75rem;

src/routes/cospend/payments/edit/[id]/+page.svelte

@@ -463,32 +463,6 @@
     gap: 2rem;
   }
 
-  .form-section {
-    background: var(--nord6);
-    padding: 1.5rem;
-    border-radius: 0.75rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    border: 1px solid var(--nord4);
-  }
-
-  .form-section h2 {
-    margin-top: 0;
-    margin-bottom: 1rem;
-    color: var(--nord0);
-    font-size: 1.25rem;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .form-section {
-      background: var(--nord1);
-      border-color: var(--nord2);
-    }
-
-    .form-section h2 {
-      color: var(--font-default-dark);
-    }
-  }
-
   .form-group {
     margin-bottom: 1rem;
   }

src/routes/cospend/payments/view/[id]/+page.svelte

@@ -479,15 +479,6 @@
       margin-left: 0;
     }
 
-    .header-content {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .header-actions {
-      justify-content: center;
-    }
-
     .info-grid {
       grid-template-columns: 1fr;
     }

src/routes/glaube/rosenkranz/+page.svelte

@@ -794,18 +794,6 @@ onMount(() => {
 	font-size: 1.3rem;
 }
 
-.prayer-text {
-	font-size: 1.15rem;
-	line-height: 1.8;
-	color: var(--nord4);
-}
-
-@media(prefers-color-scheme: light) {
-	.prayer-text {
-		color: var(--nord0);
-	}
-}
-
 /* Prayer component bilingual styling */
 .prayer-section :global(p) {
 	text-align: center;
@@ -1045,21 +1033,6 @@ h1 {
 }
 
 /* Mystery description styling */
-.mystery-description {
-	margin: 1.5rem 0 1.5rem 0;
-	display: flex;
-	flex-direction: column;
-	gap: 0.75rem;
-	align-items: center;
-}
-
-.mystery-title {
-	font-weight: 700;
-	color: var(--nord10);
-	font-size: 1.1rem;
-	text-align: center;
-}
-
 .decade-buttons {
 	display: flex;
 	flex-direction: row;
@@ -1533,8 +1506,7 @@ Die Integration der lichtreichen Geheimnisse hat einige Kontroversen um sich.
 Ohne diese 5 Dekaden sind die 150 Gebete der drei Sätzen an Geheimnissen eine direkte Parallele zu den 150 Psalmen der Bibel.
 Die Gottgegebenheit der lichtreichen Geheimnisse ist auch umstritten.
 </p>
-Der Plan ohne lichtreiche Geheimnisse ist wie folgt:
+<p>Der Plan ohne lichtreiche Geheimnisse ist wie folgt:</p>
-<p>
 <div class=table>
 <table>
 	<tbody>