/* Etappa · Website – Startseite als gestapelte Karten („sticky stacking“)

   Stufen, jede für sich stabil:
   1. Immer: Abschnitte sind Panels mit runder Oberkante, die sich leicht
      über das vorige schieben (statisch, normales Scrollen).
   2. Breite und hohe Fenster, Bewegung erlaubt: Panels kleben unter der
      Kopfzeile (position: sticky), das nächste gleitet darüber. Inhalte
      sind so bemessen, dass ein Panel ins Fenster passt – sonst bliebe
      sein unteres Ende verdeckt. Kleine Fenster und Handys stapeln nicht.
   3. Mit Scroll-driven Animations (Chrome, Safari 26): verdecktes Panel
      tritt zurück, Inhalte gleiten herein. Ohne Unterstützung (z. B.
      Safari 18) bleibt Stufe 2 ohne Animation.
   „Bewegung reduzieren“: nur Stufe 1. Animiert werden nur transform,
   opacity und filter. Kein JavaScript. */

:root {
  --header-h: 64px;
  --panel-radius: clamp(24px, 3vw, 40px);
  --tone-light: #FAF8F3;
  --stack-backdrop: #D9D0BE;
  --recede-dim: 0.86;
  --panel-shadow: 0 -1px 0 rgba(23, 35, 59, 0.05), 0 -22px 44px -28px rgba(23, 35, 59, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tone-light: #1A2436;
    --stack-backdrop: #080C14;
    --recede-dim: 0.62;
    --panel-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06), 0 -22px 44px -24px rgba(0, 0, 0, 0.8);
  }
}

/* Stufe 1: Panels */

.panel { position: relative; }
.hero { background: var(--bg); padding-bottom: var(--panel-radius); }
.tone-base { background: var(--bg); }
.tone-sand { background: var(--bg-alt); }
.tone-light { background: var(--tone-light); }

.panel:not(.hero) {
  margin-top: calc(-1 * var(--panel-radius));
  border-radius: var(--panel-radius) var(--panel-radius) 0 0;
  box-shadow: var(--panel-shadow);
}

.panel-feature { padding: clamp(64px, 10vw, 112px) 0 calc(clamp(64px, 10vw, 112px) + var(--panel-radius)); }

/* Anker vor klebenden Panels: Sprungziele liegen im normalen Fluss */
.anchor { display: block; height: 0; scroll-margin-top: calc(var(--header-h) + var(--panel-radius)); }

/* Stufe 2: Stapeln */

@media (prefers-reduced-motion: no-preference) and (min-width: 1000px) and (min-height: 720px) {
  :root {
    --stack-h: calc(100svh - var(--header-h));
    --pad-y: clamp(24px, 5svh, 56px);
    --content-h: calc(var(--stack-h) - 2 * var(--pad-y) - var(--panel-radius));
  }

  main { background: var(--stack-backdrop); }

  .panel.stick {
    position: sticky;
    top: var(--header-h);
    min-height: var(--stack-h);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: var(--pad-y);
    padding-bottom: calc(var(--pad-y) + var(--panel-radius));
    transform-origin: 50% 0;
  }

  /* Hero: Inhalt mittig, Panorama am unteren Rand */
  .hero.stick { justify-content: flex-end; padding-bottom: 0; }
  .hero .hero-copy { padding-bottom: 9vw; }
  .hero .hero-panorama { margin-top: -9vw; }

  /* Bei knapper Höhe passt der Hero (v. a. Deutsch) nicht sicher ins
     Fenster: dann scrollt er normal weg, die übrigen Panels stapeln. */
  @media (max-height: 799px) {
    .hero.stick { position: relative; top: auto; }
  }
  .hero .hero-grid { margin-block: auto; }
  .hero .phone-hero { width: min(320px, calc(var(--content-h) * 0.44)); }

  /* Funktionen: Bildfläche an die Fensterhöhe anpassen */
  .panel-feature .media-tile { height: min(560px, var(--content-h)); }
  .panel-first .section-head { max-width: none; margin-bottom: 24px; }
  .panel-first .section-head h2 { font-size: clamp(28px, 2.8vw, 40px); }
  .panel-first .media-tile { height: min(520px, calc(var(--content-h) - 112px)); }

  /* iPad: Breite aus der verfügbaren Höhe (4:3 plus Bildunterschrift) */
  .panel-ipad .ipad { width: min(100%, calc((var(--content-h) - 44px) * 4 / 3)); }

  .panel .section-head { margin-bottom: clamp(24px, 4svh, 48px); }
  .panel .promise-item { padding: 16px 0; }
  .panel-beta .beta-card { padding-top: clamp(28px, 5svh, 56px); padding-bottom: calc(clamp(28px, 5svh, 56px) + 9%); }
}

/* Stufe 3: Scroll-driven Animations */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Inhalte gleiten herein; fertig, sobald sie ganz im Bild sind */
    .panel:not(.hero) :is(.section-head, .feature-copy, .feature-media, .ipad-figure, .tile, .promise-item, .promise-foot, .beta-inner, .faq-list) {
      animation: panel-reveal linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 100%;
    }

    .panel-feature .feature-media { animation-name: panel-reveal-media; }
  }

  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) and (min-height: 720px) {
    /* Verdecktes Panel tritt zurück, während das nächste darübergleitet.
       view() eines klebenden Panels steht still, solange es klebt – deshalb
       treibt das Hereingleiten des nächsten Panels (s2 … s10, benannte
       Timelines, über timeline-scope für Geschwister sichtbar) die Animation. */
    main { timeline-scope: --s2, --s3, --s4, --s5, --s6, --s7, --s9, --s10; }
    .s2, .s3, .s4, .s5, .s6, .s7, .s9, .s10 { view-timeline-axis: block; view-timeline-inset: var(--header-h) 0px; }
    .s2 { view-timeline-name: --s2; }
    .s3 { view-timeline-name: --s3; }
    .s4 { view-timeline-name: --s4; }
    .s5 { view-timeline-name: --s5; }
    .s6 { view-timeline-name: --s6; }
    .s7 { view-timeline-name: --s7; }
    .s9 { view-timeline-name: --s9; }
    .s10 { view-timeline-name: --s10; }

    .panel.stick { animation: panel-recede linear both; animation-range: entry 0% entry 100%; }
    .stick.s1 { animation-timeline: --s2; }
    .stick.s2 { animation-timeline: --s3; }
    .stick.s3 { animation-timeline: --s4; }
    .stick.s4 { animation-timeline: --s5; }
    .stick.s5 { animation-timeline: --s6; }
    .stick.s6 { animation-timeline: --s7; }
    .stick.s8 { animation-timeline: --s9; }
    .stick.s9 { animation-timeline: --s10; }
  }
}

@keyframes panel-reveal {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}

@keyframes panel-reveal-media {
  from { opacity: 0; transform: translateY(72px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes panel-recede {
  to { transform: scale(0.94); filter: brightness(var(--recede-dim)); }
}