/* Shared landing-page width & spacing (loads after page inline styles) */

:root {
  --page-pad-x: clamp(24px, 5vw, 72px);
  --content-max: min(1360px, calc(100vw - 2 * var(--page-pad-x)));
  --content-prose: min(840px, 100%);
  --section-gap-y: clamp(56px, 6vw, 80px);
  --block-gap: clamp(36px, 4.5vw, 52px);
}

/* ── Hero: full bleed, wider text ── */
.hero {
  max-width: none;
  width: 100%;
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.hero p {
  max-width: var(--content-prose);
}

.hero.da-vis-bg--hero .da-vis-bg__content {
  max-width: min(1040px, 100%);
}

.hero.da-vis-bg--hero .da-vis-bg__img {
  width: min(1180px, 96vw);
}

/* ── Sections ── */
section {
  max-width: var(--content-max);
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.section-sub {
  max-width: var(--content-prose);
}

.school-head {
  max-width: min(960px, 100%);
}

.sim-spec__lead {
  max-width: none;
}

/* ── Hub (index) ── */
.hub-intro {
  max-width: var(--content-prose);
  padding-top: var(--section-gap-y);
  padding-bottom: clamp(40px, 4vw, 56px);
}

.hub-grid {
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.hub-teaser {
  max-width: none;
  margin-top: var(--block-gap);
  margin-bottom: 0;
  padding: 32px 40px;
}

.da-vis-showcase {
  max-width: var(--content-max);
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
  padding-top: clamp(48px, 5vw, 64px);
  padding-bottom: var(--section-gap-y);
}

.da-vis-showcase .section-sub {
  max-width: min(780px, 100%);
}

.da-vis-showcase .da-vis-feature-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#hub-audiences {
  padding-top: var(--section-gap-y);
  padding-bottom: var(--section-gap-y);
}

/* ── Rennsimulation ── */
.rs-hero__inner {
  max-width: min(1040px, 100%);
}

.rs-hero__sub {
  max-width: var(--content-prose);
}

.rs-section {
  max-width: var(--content-max);
  padding-left: var(--page-pad-x);
  padding-right: var(--page-pad-x);
}

.rs-section--dark .rs-section__inner {
  max-width: var(--content-max);
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1100px) {
  .da-vis-showcase .da-vis-feature-cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  .hub-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .da-vis-bg--section .da-vis-bg__img,
  .sim-spec.da-vis-bg .da-vis-bg__img {
    width: 130vw;
    right: 50%;
  }
}

@media (max-width: 600px) {
  .hero,
  section,
  .da-vis-showcase {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hub-teaser {
    padding: 22px 20px;
    margin-top: clamp(28px, 6vw, 40px);
  }

  #hub-audiences {
    padding-bottom: clamp(48px, 8vw, 64px);
  }
}