/* ============================================================
   Homepage — page-local LAYOUT only. All colors/space/type are
   design-system tokens (from styles.css). No rounded corners.

   Only the hero and the closing CTA band live here. The sections
   in between are owned by the nested apps and bring their own CSS:
     board  → website_services/board.css
     geo    → website_geodata/home_section.css + at_map.css
     wir    → website_about/wir.css
     news   → website_news/news.css
   The partner marks in the "wir" strip additionally need the shared
   website/partner-logos.css (same file the Vernetzen page links).
   ============================================================ */

.hero { position: relative; padding-block: var(--space-9) var(--space-10); }
.hero__eyebrow { margin-bottom: var(--space-4); }
.hero h1 { font: var(--type-display); font-size: clamp(2.6rem, 6vw, 4.6rem); letter-spacing: var(--tracking-tight); color: var(--ink); }
.hero h1 .hue { color: var(--magenta-500); }
.hero__sub { font: var(--type-body-lg); color: var(--text-body); max-width: 54ch; margin-top: var(--space-5); }
.hero__cta { margin-top: var(--space-6); display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
.hero__note { margin-left: var(--space-3); display: inline-flex; align-items: center; gap: 6px; }

/* ---- CTA band ---- */
.cta { background: var(--magenta-500); color: var(--gray-0); }
.cta h2 { color: var(--gray-0); }
.cta .kb-eyebrow { color: rgba(255,255,255,.8); }
.cta .kb-eyebrow::before { background: var(--gray-0); }