/* ===========================================================
   Stellkurs — Website Story Sections
   -----------------------------------------------------------
   Same visual handwriting as the App-Store slides, but
   responsive. Each section tells one step of a day with
   Stellkurs (morning → late morning → golden hour → magic
   hour → night with embers).
   =========================================================== */

:root {
  --story-serif: "New York", "Playfair Display", Georgia, serif;
  --story-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

.story {
  position: relative;
  overflow: hidden;
  padding: 72px 24px 96px;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  isolation: isolate;
  color: #f5f5f5;
}

.story + .story { margin-top: 0; }

.story-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story-headline {
  font-family: var(--story-serif);
  font-weight: 600;
  font-size: clamp(32px, 7.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.6px;
  margin: 0;
  /* Override the site's global h2 styling (uppercase, muted, tiny). */
  text-transform: none;
  color: #f5f5f5;
}

.story-headline em {
  font-style: normal;
  background: linear-gradient(135deg, #f5f5f5 0%, #fbbf24 60%, #e8943a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.story-sub {
  font-family: var(--story-sans);
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
  margin: 18px 0 0;
  max-width: 480px;
}

.story-phones {
  margin-top: 44px;
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.story-phone {
  display: inline-block;
  padding: 5px;
  background: linear-gradient(160deg, #2a2a2e, #0a0a0c);
  border-radius: 36px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.5),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
}

.story-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  border-radius: 30px;
  background: #141517;
  object-fit: cover;
}

/* Single hero-size phone */
.story-phone.size-lg { width: 220px; }
.story-phone.size-md { width: 170px; }
.story-phone.size-sm { width: 140px; }

@media (min-width: 720px) {
  .story-phone.size-lg { width: 280px; }
  .story-phone.size-md { width: 220px; }
  .story-phone.size-sm { width: 180px; }
  .story { padding: 88px 32px 120px; }
  .story-inner { max-width: 740px; }
  .story-sub { max-width: 560px; }
  .story-phones { margin-top: 56px; }
}

/* Phone trio (planner) — overlapping fan */
.story-phones.trio {
  justify-content: center;
  gap: 0;
}
.story-phones.trio .story-phone.main {
  z-index: 3;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
.story-phones.trio .story-phone.left {
  margin-right: -32px;
  transform: rotate(-10deg);
  z-index: 1;
  opacity: 0.9;
}
.story-phones.trio .story-phone.right {
  margin-left: -32px;
  transform: rotate(10deg);
  z-index: 1;
  opacity: 0.9;
}

@media (min-width: 720px) {
  .story-phones.trio .story-phone.left { margin-right: -40px; }
  .story-phones.trio .story-phone.right { margin-left: -40px; }
}

/* Phone duo — hero + peek-from-behind (Sonnenkarte/Sun-Map) */
.story-phones.duo {
  justify-content: center;
  gap: 0;
}
.story-phones.duo .story-phone.back {
  margin-right: -28px;
  transform: rotate(-8deg) translateY(22px);
  z-index: 1;
  opacity: 0.92;
}
.story-phones.duo .story-phone.front {
  transform: rotate(3deg);
  z-index: 2;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (min-width: 720px) {
  .story-phones.duo .story-phone.back { margin-right: -36px; }
}

/* ===========================================================
   Atmospheres — same 5-step day arc as the App Store slides
   =========================================================== */

/* Slide 1 — Sunrise */
.atmosphere-1 {
  background:
    radial-gradient(ellipse 85% 48% at 50% 108%,
      rgba(255,225,140,0.50) 0%,
      rgba(255,195,110,0.28) 28%,
      rgba(230,135,75,0.12) 50%,
      transparent 68%),
    linear-gradient(180deg,
      #080816 0%, #0e0d18 25%, #1a120e 55%,
      #322010 80%, #553410 100%);
}

/* Slide 2 — Late morning */
.atmosphere-2 {
  background:
    radial-gradient(ellipse 85% 48% at 50% 108%,
      rgba(255,205,135,0.50) 0%,
      rgba(250,170,95,0.28) 28%,
      rgba(225,120,60,0.12) 50%,
      transparent 68%),
    linear-gradient(180deg,
      #0a0a1a 0%, #110f1c 25%, #1c1410 55%,
      #362310 80%, #58380f 100%);
}

/* Slide 3 — Golden hour */
.atmosphere-3 {
  background:
    radial-gradient(ellipse 85% 48% at 50% 108%,
      rgba(255,175,95,0.52) 0%,
      rgba(240,135,70,0.30) 28%,
      rgba(205,85,40,0.14) 50%,
      transparent 68%),
    linear-gradient(180deg,
      #120a14 0%, #1a0e18 25%, #24121a 50%,
      #3a200e 80%, #5c320e 100%);
}

/* Slide 4 — Magic hour */
.atmosphere-4 {
  background:
    radial-gradient(ellipse 85% 48% at 50% 108%,
      rgba(255,170,85,0.55) 0%,
      rgba(235,125,60,0.32) 26%,
      rgba(190,75,40,0.14) 48%,
      transparent 68%),
    linear-gradient(180deg,
      #0b0a1e 0%, #12102a 20%, #1a1230 40%,
      #221525 58%, #2e1620 74%, #421a14 88%, #58200a 100%);
}

/* Slide 5 — Night with embers */
.atmosphere-5 {
  background:
    radial-gradient(ellipse 78% 42% at 50% 108%,
      rgba(255,145,75,0.48) 0%,
      rgba(215,90,45,0.26) 28%,
      rgba(150,55,30,0.12) 50%,
      transparent 66%),
    linear-gradient(180deg,
      #060418 0%, #0a0620 20%, #100820 40%,
      #180a1a 58%, #220d15 74%, #301110 88%, #461208 100%);
}

/* Subtle abstract mountains (CSS clip-path, no assets) */
.story-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  pointer-events: none;
  z-index: 1;
}
.story-mountains::before,
.story-mountains::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
}
.story-mountains::before {
  background: linear-gradient(180deg, rgba(14,10,12,0.35) 0%, rgba(14,10,12,0.75) 100%);
  clip-path: polygon(
    0% 100%, 0% 55%, 14% 30%, 32% 48%, 50% 18%,
    68% 42%, 84% 25%, 100% 40%, 100% 100%
  );
}
.story-mountains::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
  clip-path: polygon(
    0% 100%, 0% 72%, 20% 55%, 40% 66%, 58% 42%,
    78% 58%, 100% 50%, 100% 100%
  );
}

/* Dezente Stellkurs-Wortmarke am unteren Rand jedes Slides */
.story-wordmark {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--story-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 6px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
}