/* Snap/Fade – Minimal, konfliktarm */
:root { --snap-offset: 0px; }

html.snap-enabled {
    scroll-snap-type: y mandatory;
    /* TEMPORARILY DISABLED */
    /* scroll-padding-top: var(--snap-offset, var(--header-height, 90px)); */
}

body.no-scroll, html.no-scroll {
    overflow: hidden;
}

/* Basis für Sections */
.lp-section {
    transition: opacity 0.4s ease-in-out, visibility 0.4s;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    opacity: 1;
    visibility: visible;
    position: relative; /* keep sections in document flow for native scroll */
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
    background: transparent;
    /* TEMPORARILY DISABLED */
    /* scroll-margin-top: var(--snap-offset, var(--header-height, 90px)); */
    min-height: calc(100vh - var(--snap-offset, var(--header-height, 90px)));
}

.lp-section.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.lp-section.is-exiting {
    position: relative;
}

/* --- MINIMAL: only set scroll-margin/top on the sections.
     DO NOT add padding-top or margin-top to #page-container or #main-content
     (header script already sets mainContent.style.marginTop). --- */
.lp-section {
    /* ...existing properties kept ... */
    /* ensure full viewport sections don't get obscured */
    min-height: calc(100vh - var(--snap-offset, var(--header-height, 90px)));
    /* IMPORTANT: do not add top padding/margin on global wrappers here */
}

/* REMOVE any global padding rules previously added:
   #page-container, #main-content, .main-container { padding-top: ... } */

/* REMOVE the ::before spacer approach if present (it caused double offsets).
   If you need per-section inner offset, prefer an inner wrapper (.section-inner)
   with padding-top, but only IF header script does not set mainContent.marginTop. */

/* Make main-content the containing block for absolute sections */
#main-content { position: relative; }

/* Base: stack all sections on top of each other and hide non-active ones */
.lp-section {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  min-height: calc(100vh - var(--snap-offset, 90px));
  background: transparent;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Only animate opacity */
  transition: opacity 0.45s ease-in-out;
  will-change: opacity;
  z-index: 0;
}

/* set stacking & interaction immediately when becoming active */
.lp-section.is-active {
    visibility: visible;
    pointer-events: auto;
    z-index: 30;
}

/* the actual visible state — toggled after a frame to trigger opacity transition */
.lp-section.is-active.is-visible {
    opacity: 1;
}

/* fading-out state: keep visible until opacity finishes */
.lp-section.is-exiting {
    visibility: visible;
    pointer-events: none;
    z-index: 20;
    opacity: 0; /* fade target */
}

/* Ensure no parent creates unexpected stacking context */
#page-container, #main-header, .info-box, #info-text {
  transform: none !important;
}