/* Integration of the approved sections. */
:root { --site-header-height:80px; }
html { scroll-behavior:smooth; }
.site-header { position:sticky; top:0; z-index:30; background:#171b20; color:#fff; border-bottom:1px solid #303740; }
.site-header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:80px; }
.site-header .brand { padding-block:20px; }
.brand-lockup { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.brand-credit { color:#a8b2bd; font:12px/1.4 Arial,sans-serif; white-space:nowrap; }
.site-navigation { display:flex; align-items:center; gap:24px; font-size:15px; }
.site-navigation a { padding:12px 0; text-decoration:none; border-bottom:2px solid transparent; }
.site-navigation a:hover, .site-navigation a[aria-current] { color:#90bbda; border-color:#467fa9; }
.menu-toggle { display:none; align-items:center; gap:12px; border:1px solid #6d7a87; background:transparent; color:#fff; min-height:44px; padding:8px 12px; font-size:15px; }
.onepager .section { scroll-margin-top:calc(var(--site-header-height) + 16px); }
.onepager .section-title { font-size:var(--horvak-size-title); line-height:1.15; max-width:22ch; margin-bottom:24px; }
.onepager .scenario-title { font-size:var(--horvak-size-heading); line-height:1.25; margin-bottom:24px; }
.onepager .architecture-legend h3 { font-size:20px; margin-bottom:12px; }
.onepager .architecture-scene, .onepager .architecture-figure { scroll-margin-top:calc(var(--site-header-height) + 24px); }
.onepager .is-scroll-story .architecture-scene { top:calc(var(--site-header-height) + 24px); }
.onepager .is-scroll-story .architecture-board { height:clamp(420px,calc(100svh - var(--site-header-height) - 160px),700px); }
.site-footer { padding-block:28px; color:#bcc5ce; background:#171b20; border-top:1px solid #303740; font-size:14px; }
.site-footer .container { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-footer a:hover { color:#fff; }
@media(max-width:991.98px) {
 .site-header-inner { min-height:72px; flex-wrap:wrap; gap:0 20px; }
 .site-header .brand img { width:160px; }
 .brand-lockup { gap:12px; }
 .brand-credit { font-size:11px; }
 .brand-credit span { display:block; }
 .site-navigation { width:100%; flex-wrap:wrap; padding-bottom:16px; gap:8px 24px; }
 .site-header.is-enhanced .menu-toggle { display:flex; }
 .site-header.is-enhanced .site-navigation { display:none; position:absolute; top:100%; left:0; right:0; background:#171b20; padding:16px 24px 24px; border-bottom:1px solid #46515d; }
 .site-header.is-enhanced .site-navigation.is-open { display:grid; grid-template-columns:1fr 1fr; }
 .site-navigation a { display:block; padding:12px 0; }
 .onepager .is-scroll-story .architecture-board { height:calc(100svh - var(--site-header-height) - 160px); min-height:420px; max-height:760px; }
}
@media(max-width:520px) { .site-footer .container { flex-wrap:wrap; } .onepager .architecture-legend h3 { margin-bottom:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .site-header,.site-footer,.menu-toggle { display:none; } }

@media(max-width:359.98px) { .site-header-inner { gap:0 8px; } .site-header .brand img { width:128px; } .brand-lockup { gap:10px; } }

/* Start occupies the available screen; subsequent sections begin below it. */
.onepager #einstieg { min-height:calc(100vh - var(--site-header-height)); min-height:calc(100svh - var(--site-header-height)); display:flex; align-items:center; }
.onepager #einstieg .hero-layout { min-height:0; }
.onepager .eyebrow::before { display:none; }

@media(max-width:575.98px) { .site-header-inner { column-gap:8px; } .menu-toggle { width:44px; justify-content:center; padding:8px; } .menu-toggle span { display:none; } }

/* Alternating charcoal tones across the remaining four sections. */
.onepager #einstieg, .onepager #vernetzung { background:#171b20; }
.onepager #aufbau, .onepager #kontakt { background:#232a32; }
.onepager #vernetzung .network-figure figcaption { color:#bcc5ce; }
.onepager #vernetzung svg text[fill="#171b20"] { fill:#f0f3f5; }
.onepager #vernetzung svg rect[fill="#f0f3f5"] { fill:#303b47; }
.onepager #vernetzung svg g[stroke="#205278"] { stroke:#90bbda; }

.onepager #einstieg .hero-emphasis { color:#90bbda; font-weight:700; }