{#if visible}
{#each steps as _, i}
goToStep(i)} aria-label={`Schritt ${i + 1}`} aria-current={i === step ? 'step' : undefined} class="flex items-center justify-center p-2.5" >
{/each}
{currentStep.icon}
{currentStep.title}
{#if currentStep.kind === 'text'}
{currentStep.body}
{:else}
Du kannst die Wahl jederzeit unter „Mein Konto" ändern.
{#each THEME_OPTIONS as opt (opt.value)} {@const selected = $themePreference === opt.value}
themePreference.set(opt.value)} class="flex w-full cursor-pointer items-center gap-3 rounded-xl border-2 p-3 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-200 {selected ? 'border-blue-600 bg-blue-50 dark:border-blue-500 dark:bg-blue-950/40' : 'border-gray-200 hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800'}" >
{opt.icon}
{opt.label}
{opt.hint}
{#if selected}
{/if}
{/each}
{/if}
Überspringen
{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
{/if}