/* Basis-Layout Visitenkarte: eine Seite mit Abschnitten und Sprungmenü, mittig, Violett. */
:root {
    --akzent: #6741d9;
    --flaeche: #f4f0ff;
    --linie: #e6e0f5;
    --radius: 10px;
    --breite: 980px;
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
.layout-visitenkarte .kopf { position: sticky; top: 0; z-index: 5; }
.layout-visitenkarte .held { text-align: center; background: radial-gradient(circle at 50% 0, #ebe4ff, var(--grund) 70%); margin-bottom: 0; }
.layout-visitenkarte .held h1, .layout-visitenkarte .held-text { margin-left: auto; margin-right: auto; }
.sprungmenue ul { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.sprungmenue a { display: inline-block; padding: 6px 16px; border: 1px solid var(--akzent); border-radius: 999px; text-decoration: none; background: var(--grund); }
.sprungmenue a:hover { background: var(--akzent); color: var(--akzent-text); }
.layout-visitenkarte .abschnitt { padding: var(--abstand) 0 calc(var(--abstand) - 24px); }
.layout-visitenkarte .abschnitt:nth-of-type(even) { background: var(--flaeche); }
.layout-visitenkarte .abschnitt h2 { text-align: center; }
.layout-visitenkarte .abschnitt h2::after { content: ""; display: block; width: 40px; height: 3px; margin: 10px auto 0; background: var(--akzent); border-radius: 2px; }
.layout-visitenkarte .kontaktdaten, .layout-visitenkarte .block-button { text-align: center; }
.layout-visitenkarte .block-text.breite-drittel, .layout-visitenkarte .block-text.breite-viertel { text-align: center; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}
@media (max-width: 800px) {
    .layout-visitenkarte .kopf { position: static; }
}