Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: complete Svelte 5 migration to eliminate all deprecation warnings
All checks were successful
CI / update (push) Successful in 1m35s
Details

Browse Source 
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.
This commit is contained in:
Alexander Bocken
2026-01-05 23:39:33 +01:00
parent 2de51ee492
commit f66334290a
21 changed files with 120 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/Card.svelte
View File

@@ -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}

78
src/lib/components/CreateIngredientList.svelte
View File

@@ -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="mL..." bind:value={new_ingredient.unit} on:keydown={(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)}>
<button on:click={() => add_new_ingredient()} class=action_button>
<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} onkeydown={(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 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)}>
<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="mL..." bind:value={edit_ingredient.unit} on:keydown={(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)}>
<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}>
<div class=add_ingredient role="group">
<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} onkeydown={(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 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)} >
<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}>
<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 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>

63
src/lib/components/CreateStepList.svelte
View File

@@ -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>
<button on:click={() => add_new_step()} class=action_button>
<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 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>
<button class=action_button on:click="{() => edit_step_and_close_modal()}" >
<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 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)}>
<button on:click={edit_subheading_steps_and_close_modal} class=action_button>
<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 onclick={edit_subheading_steps_and_close_modal} class=action_button>
<Check fill=white style="height: 2rem; width: 2rem"></Check>
</button>
</div>

7
src/lib/components/DebtBreakdown.svelte
View File

@@ -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;

2
src/lib/components/HefeSwapper.svelte
View File

@@ -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>

35
src/lib/components/IngredientsPage.svelte
View File

@@ -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>

31
src/lib/components/PaymentModal.svelte
View File

@@ -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);

2
src/lib/components/SeasonSelect.svelte
View File

@@ -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>

18
src/lib/components/SplitMethodSelector.svelte
View File

@@ -142,10 +142,11 @@
<h3>Custom Split Amounts</h3>
{#each users as user}
<div class="split-input">
<label>{user}</label>
<input
type="number"
step="0.01"
<label for="split_{user}">{user}</label>
<input
id="split_{user}"
type="number"
step="0.01"
name="split_{user}"
bind:value={splitAmounts[user]}
placeholder="0.00"
@@ -161,10 +162,11 @@
<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>
<input
type="number"
step="0.01"
<label for="personal_{user}">{user}</label>
<input
id="personal_{user}"
type="number"
step="0.01"
min="0"
name="personal_{user}"
bind:value={personalAmounts[user]}

2
src/lib/components/TagFilter.svelte
View File

@@ -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(

4
src/lib/components/TitleImgParallax.svelte
View File

@@ -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>

12
src/lib/components/TranslationApproval.svelte
View File

@@ -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)"

6
src/lib/components/TranslationFieldComparison.svelte
View File

@@ -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}

6
src/routes/+layout.svelte
View File

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

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

@@ -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)"

12
src/routes/cospend/+layout.svelte
View File

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

18
src/routes/cospend/+page.svelte
View File

@@ -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);
}

8
src/routes/cospend/payments/add/+page.svelte
View File

@@ -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;

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

@@ -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;
}

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

@@ -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;
}

30
src/routes/glaube/rosenkranz/+page.svelte
View File

@@ -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>
<p>Der Plan ohne lichtreiche Geheimnisse ist wie folgt:</p>
<div class=table>
<table>
<tbody>