.hero--split {
  padding: var(--space-3) clamp(var(--space-3), 3vw, var(--space-6)) var(--space-8);
}

#konfigurator {
  scroll-margin-top: calc(var(--header-height) + var(--space-3));
}

.hero__pane {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(var(--space-8), 7vw, var(--space-16)) clamp(var(--space-6), 6vw, var(--space-12));
}

.hero__pane--white {
  order: 1;
  background: var(--color-surface);
}

@media (max-width: 63.9375rem) {
  .hero__pane--white {
    align-items: stretch;
    padding: var(--space-3) max(var(--space-1-5), env(safe-area-inset-right)) var(--space-4) max(var(--space-1-5), env(safe-area-inset-left));
  }
}

@media (max-width: 29.9375rem) {
  .hero__pane--white {
    padding-inline: max(var(--space-1), env(safe-area-inset-right)) max(var(--space-1), env(safe-area-inset-left));
    padding-block: var(--space-2) var(--space-3);
  }
}

@media (min-width: 64rem) {
  .hero--split {
    padding-block: var(--space-4) var(--space-10);
  }

  .hero__pane--white {
    order: 2;
    justify-content: flex-start;
    padding-inline: clamp(var(--space-10), 8vw, var(--space-20));
  }
}