---
import Base from '../layouts/Base.astro';
import KontoApp from '../components/KontoApp';
---
<Base title="Mein Konto · Klarbild">
  <section class="seite">
    <header class="seitenkopf">
      <h1>Mein Konto</h1>
      <p class="lead">E-Mail-Adresse und Benachrichtigungen.</p>
    </header>
    <KontoApp client:load />
  </section>
  <style>
    .seite { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 80px; }
    .seitenkopf { margin-bottom: 18px; }
    .seitenkopf h1 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin: 0 0 6px; letter-spacing: -0.02em; }
    .lead { margin: 0; color: var(--ink-soft); line-height: 1.6; font-size: 0.95rem; }
    @media (max-width: 640px) { .seite { padding: 18px 14px 90px; } }
  </style>
</Base>