/* ============================================================
   Layout · Container, Grids, Sections
   Mobile-first, klare Hierarchie über Spacing.
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container--sm { max-width: var(--container-sm); }
.container--md { max-width: var(--container-md); }
.container--xl { max-width: var(--container-xl); }

section {
  padding-block: clamp(64px, 9vw, 120px);
  position: relative;
}
section + section { border-top: 1px solid var(--line); }
section.section--soft { background: var(--bg-soft); }
section.section--inverted {
  background: linear-gradient(135deg, #0B1B3A, #130F2D);
  color: var(--fg-on-dark);
  border-top: 0;
}
section.section--inverted h1,
section.section--inverted h2,
section.section--inverted h3,
section.section--inverted h4 { color: var(--fg-on-dark); }
section.section--hero { padding-block: clamp(96px, 14vw, 180px); }
@media (max-width: 768px) { section.section--hero { padding-block: 36px 48px; } }

.section-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-6);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.section-head h2 { max-width: 22ch; margin: var(--space-3) 0 0; }
.section-head p   { color: var(--fg-muted); max-width: 50ch; margin: 0; }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: var(--space-4); }
}

.tag, .eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-uppercase);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  color: var(--fg-muted);
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-blue);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Grids */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Stack */
.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Flex utilities (sparsam) */
.row { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

/* Site Header / Footer Layout */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-med) var(--ease-out), border-color var(--t-med);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 16px;
}
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-8) var(--space-9);
  background: var(--bg-soft);
  color: var(--fg-muted);
  font-size: var(--fs-meta);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }