/* Marketing-Seite: nutzt Tokens, Basis- und Komponenten-CSS; nur Layout der Seite. */
.site-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); max-width: 64rem; margin: 0 auto; }
main { max-width: 64rem; margin: 0 auto; padding: 0 var(--space-5) var(--space-8); }
.hero { padding-block: var(--space-8) var(--space-7); }
.hero h1 { font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.1; max-width: 18ch; text-wrap: balance; }
.hero__lead { font-size: var(--font-size-2); max-width: 36ch; color: var(--color-text-muted); }
.band { padding-block: var(--space-6); border-top: 1px solid var(--color-border); }
.grid3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.site-footer { max-width: 64rem; margin: 0 auto; padding: var(--space-5); }