{{-- Hub-style settings layout: sidebar nav + content panel --}}
<div class="grid items-start gap-6 md:grid-cols-[220px_1fr]">
    <aside class="panel">
        <div class="panel-head">
            <span class="section-eyebrow">{{ __('Mein Konto') }}</span>
        </div>
        <nav class="p-2">
            <flux:navlist>
                <flux:navlist.item :href="route('settings.profile')" wire:navigate>
                    {{ __('Profile') }}
                </flux:navlist.item>
                <flux:navlist.item :href="route('settings.password')" wire:navigate>
                    {{ __('Password') }}
                </flux:navlist.item>
                <flux:navlist.item :href="route('settings.appearance')" wire:navigate>
                    {{ __('Appearance') }}
                </flux:navlist.item>
            </flux:navlist>
        </nav>
    </aside>

    <div class="space-y-6 min-w-0">
        <article class="panel">
            <div class="panel-head">
                <span class="section-eyebrow">{{ $heading ?? '' }}</span>
            </div>
            <div class="p-5 space-y-1">
                @if (! empty($subheading))
                    <p class="text-[12.5px] text-[color:var(--color-ink-3)] m-0">
                        {{ $subheading }}
                    </p>
                @endif

                <div class="pt-4">
                    {{ $slot }}
                </div>
            </div>
        </article>
    </div>
</div>