/* B6a-1 - zusaetzlicher Sicherheitsabstand fuer Sticky-Header und Ankerziele. */
html {
  scroll-padding-top: calc(var(--scroll-target-offset, 8rem) + clamp(2rem, 3.2vw, 4rem));
}

.stage {
  position: relative;
  padding-block: var(--space-9);
  scroll-margin-top: calc(var(--scroll-target-offset, 8rem) + clamp(2.25rem, 3.6vw, 4.5rem));
}

.stage:not(.stage-hero) {
  padding-top: clamp(1rem, 1.7vw, 1.7rem);
}

.stage-shell {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

.stage-shell--hero,
.stage-shell--editorial,
.stage-shell--cards,
.stage-shell--compare,
.stage-shell--process,
.stage-shell--faq,
.stage-shell--cta {
  min-height: 100%;
}

.stage-backdrop,
.stage-atmosphere,
.stage-orb,
.stage-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage-inner {
  position: relative;
  width: min(100% - 2rem, var(--container-stage));
  margin-inline: auto;
  z-index: 2;
}

.stage-shell:not(.stage-shell--hero) > .stage-inner {
  padding-top: clamp(1rem, 1.6vw, 1.55rem);
  padding-bottom: clamp(1.4rem, 2.2vw, 2.25rem);
}

.stage-orb,
.stage-beam {
  z-index: 1;
}

.stage-orb {
  inset: auto;
  width: min(38rem, 46vw);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(26px);
  opacity: 0.4;
  background: radial-gradient(circle at center, rgb(var(--color-accent) / 0.24), transparent 68%);
  transform: translate3d(0, 0, 0);
}

.stage-orb--hero {
  top: 8%;
  right: -10%;
}

.stage-orb--editorial {
  bottom: 4%;
  right: 10%;
  width: min(26rem, 34vw);
  opacity: 0.24;
}

.stage-orb--compare {
  top: 14%;
  right: -4%;
  width: min(24rem, 30vw);
  opacity: 0.20;
}

.stage-orb--process {
  top: 12%;
  left: -4%;
  width: min(24rem, 30vw);
  opacity: 0.22;
}

.stage-orb--faq {
  top: 14%;
  left: -2%;
  width: min(22rem, 28vw);
  opacity: 0.2;
}

.stage-orb--cta {
  top: 50%;
  left: 50%;
  width: min(34rem, 42vw);
  transform: translate3d(-50%, -50%, 0);
  opacity: 0.22;
}

.stage-beam {
  opacity: 0.26;
}

.stage-beam--hero {
  inset: auto -6% 10% auto;
  width: min(44rem, 54vw);
  height: min(24rem, 30vw);
  background: radial-gradient(circle at center, rgb(var(--color-accent-strong) / 0.16), transparent 64%);
  filter: blur(26px);
}

.stage-beam--cards {
  inset: 18% auto auto 6%;
  width: min(30rem, 38vw);
  height: min(16rem, 22vw);
  background: radial-gradient(circle at center, rgb(var(--color-accent) / 0.10), transparent 68%);
  filter: blur(30px);
}

.stage-beam--compare {
  inset: auto auto 10% 8%;
  width: min(34rem, 42vw);
  height: min(18rem, 22vw);
  background: radial-gradient(circle at center, rgb(var(--color-accent) / 0.12), transparent 68%);
  filter: blur(34px);
}

.stage-beam--process {
  inset: auto 2% 8% auto;
  width: min(36rem, 42vw);
  height: min(18rem, 24vw);
  background: radial-gradient(circle at center, rgb(var(--color-accent-strong) / 0.12), transparent 66%);
  filter: blur(32px);
}

.stage-beam--faq {
  inset: auto 8% 8% auto;
  width: min(34rem, 40vw);
  height: min(18rem, 22vw);
  background: radial-gradient(circle at center, rgb(var(--color-accent-strong) / 0.12), transparent 66%);
  filter: blur(32px);
}

.surface-panel {
  position: relative;
  background: rgb(var(--color-panel) / var(--alpha-panel));
  border: 1px solid rgb(var(--color-line) / var(--alpha-line));
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

[data-reveal] {
  --reveal-x: 0px;
  --reveal-y: 1.15rem;
  --parallax-y: 0px;
  opacity: 0;
  transform: translate3d(var(--reveal-x), calc(var(--reveal-y) + var(--parallax-y)), 0);
  transition:
    opacity var(--motion-slow) var(--ease-soft),
    transform var(--motion-slow) var(--ease-soft);
  transition-delay: calc(var(--reveal-delay, 0) * 1s);
}

[data-reveal="left"] {
  --reveal-x: -1.4rem;
  --reveal-y: 0px;
}

[data-reveal="right"] {
  --reveal-x: 1.4rem;
  --reveal-y: 0px;
}

[data-reveal].is-visible {
  --reveal-x: 0px;
  --reveal-y: 0px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 640px) {
  .stage:not(.stage-hero) {
    padding-top: 0.85rem;
  }
}

/* F22 - Layout-Stabilisierung nach erster Sichtprüfung
   Ziel: Ankerziele nicht unter den Sticky-Header schieben und den oberen Bühnenraum berechenbarer halten. */
html {
  scroll-padding-top: var(--scroll-target-offset, 12rem);
}

.stage {
  scroll-margin-top: var(--scroll-target-offset, 12rem);
}

.stage:not(.stage-hero) {
  padding-top: clamp(2.2rem, 3vw, 3.8rem);
}

.stage-shell:not(.stage-shell--hero) > .stage-inner {
  padding-top: clamp(1.1rem, 1.8vw, 2rem);
}