/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ============================================================
   MOBILE OPTIMIZATIONS — TABLET (max-width: 1024px)
   ============================================================ */
@media (max-width: 1400px) {
  .step-icon{
    width: 80%;
    height: 80%;
  }
}

@media (max-width: 1024px) {
  /* Headlines */
  .fw-h, .how-h, .section-title, .pricing-h-stick {
    font-size: 48px !important;
  }
  .lena-h, .award-title {
    font-size: 38px !important;
  }
  .cta-headline {
    font-size: 56px !important;
  }
  
  /* Section paddings */
  .fuer-wen { padding: 100px 0 80px !important; }
  .dream-section { padding: 80px 0 80px !important; }
  
  /* Hero content padding */
  .hero-content {
    padding: 8vh 30px !important;
  }
  
  /* Hero h2 */
  .hero-content-bottom .hero-h2 { font-size: 24px !important; }
  
  /* Final CTA */
  .final-cta { padding: 8vh 30px 0 !important; }
  
  /* Container widths */
  .pricing-stage,
  .lena-text {
    max-width: 90% !important;
  }
}

@media (max-width: 900px) {
  .hero-content-bottom .hero-h2 { font-size: 22px; }
}

@media (max-width: 800px) {
  .cta-portal-arch {
    width: 70vw;
    height: calc(70vw * 1.4);
    border-radius: 35vw 35vw 0 0;
    box-shadow: 
      0 0 100px rgba(255,255,255,0.8),
      0 0 200px rgba(192,132,252,0.5),
      inset 0 0 80px rgba(192,132,252,0.3);
  }
}

/* ============================================================
   MOBILE OPTIMIZATIONS — PHONE (max-width: 768px)
   ============================================================ */

@media(max-height: 650px) {
  .bcurve-sticky {
  overflow: visible;
}
  .timelapse-caption-block {
    bottom: -5vh;
  }

  .bcurve-progress {
  bottom: -7vh; left: 50%;
}

.pricing-stage {
  margin-top: -0px;

}

.pricing-footnote-stick {
  bottom: -3vh;

}

.pricing-card-3d {
    height: 400px !important;
  }

  .card-tier-name {
    font-size: 30px !important;
  }

  .card-scenarios {
    font-size: 14px !important;
    line-height: 1.25 !important;
  }

  .card-price {
    font-size: 34px !important;
  }

  .card-price small {
    font-size: 14px !important;
  }

  .card-models {
    margin: 18px 0 !important;
  }

  .card-cta {
    margin-top: 20px !important;
  }
}

@media (max-width: 768px) {
  /* === HEADLINES — viel kleiner für Mobile === */
  .fw-h, .how-h, .section-title, .pricing-h-stick {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }
  .lena-h, .award-title {
    font-size: 30px !important;
  }
  .cta-headline {
    font-size: 42px !important;
  }
  .timelapse-title { font-size: 18px !important; }
  
  /* === EYEBROWS === */
  .eyebrow, .section-eyebrow, .lena-eyebrow, 
  .dream-eyebrow, .pricing-eyebrow {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  
  /* === SECTION PADDINGS === */
  .fuer-wen { padding: 60px 0 60px !important; }
  .dream-section { padding: 60px 0 60px !important; }
  
  /* === HERO — center layout statt space-between === */
  .hero-content {
    padding: 4vh 20px !important;
    gap: 18px !important;
  }
  .eyebrow {
    margin-top: 0%;
  }
  .hero-content-top {
    margin-bottom: 8vh !important;
  }
  .hero-content-middle {
    flex: 0 !important;
    height: 0 !important;
  }
  .hero-content-bottom {
    margin-top: 8vh !important;
    gap: 12px !important;
  }
  .hero-content-bottom .hero-h2 { 
    font-size: 18px !important;
  }
  .badges {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .badge {
    font-size: 13px !important;
    padding: 6px 10px !important;
  }
  
  /* === NAV === */
  nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 24px) !important;
    max-width: 420px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .nav-pill {
    max-width: 100% !important;
    padding: 0 14px !important;
    justify-content: center !important;
  }

  .nav-pill:nth-child(2) {
    width: 100% !important;
  }

  .nav-links {
    width: 100% !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .nav-link {
    font-size: 11px !important;
    padding: 6px 7px !important;
  }

  .nav-cta {
    font-size: 11px !important;
    padding: 6px 9px !important;
  }

  @media (max-width: 768px) {
  .how-slides-block {
    height: 100vh !important;
    overflow: hidden !important;
  }

  .how-bg-img {
    width: auto !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: left bottom !important;
  }

  .how-header-overlay {
    top: 11vh !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    padding: 0 24px !important;
    text-align: center !important;
  }

  .how-h {
    font-size: 34px !important;
    line-height: 1.05 !important;
  }

  .step-slide {
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 22vh 24px 12vh !important;
  }

  .step-side {
    display: none !important;
  }

  .step-icon-wrap {
    width: 140px !important;
    height: 140px !important;
  }

  .step-icon {
    width: 100% !important;
    height: 100% !important;
  }

  .step-text {
    max-width: 280px !important;
    text-align: center !important;
  }

  .step-nr {
    font-size: 42px !important;
    margin-bottom: 4px !important;
  }

  .step-title {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }

  .step-body {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
  }

  .how-nav-arrow {
    bottom: 32px !important;
  }

  .how-dots-bar {
    bottom: 32px !important;
  }
}
  
  /* === FÜR WEN PANELS — vertikal stapeln === */
  .fw-h {
    margin-bottom: 60px !important;
  }
  .fw-panels {
    flex-direction: column !important;
    aspect-ratio: auto !important;
    max-height: none !important;
    height: auto !important;
  }
  .fw-panel {
    height: 60vw !important;
    min-height: 300px !important;
  }
  .fw-panel-title-center .title {
    font-size: 32px !important;
  }
  .fw-panel-content .title {
    font-size: 24px !important;
  }
  .fw-panel-content .body {
    font-size: 14px !important;
  }
  
  /* === HOW SECTION === */
  .how-step {
    padding: 30px 24px !important;
  }
  
  /* === BCURVE === */
  .bcurve-svg {
    max-width: 100% !important;
  }
  .timelapse-display-block {
    padding: 0 20px !important;
  }
  
  /* === LENA === */
  .lena-text {
    padding: 0 24px !important;
    top: 4vh !important;
  }
  .lena-sub { font-size: 14px !important; }
  
  /* === DREAM BIG === */
  .dream-stage {
    padding: 0 20px !important;
  }
  
  /* === SETUP BUBBLES === */
  .bubble-stage {
    padding: 0 20px !important;
  }
  
  /* === PRICING === */
  .pricing-stage {
    max-width: 100% !important;
    padding: 0 20px !important;
  }
  .mode-tab {
    font-size: 12px !important;
    padding: 8px 14px !important;
  }
  
  /* === AWARD === */
  .award-image-wrap {
    width: 240px !important;
    height: 240px !important;
  }
  .award-phase-text {
    font-size: 56px !important;
  }
  .award-subtitle { font-size: 14px !important; }
  
  /* === FINAL CTA === */
  .final-cta { 
    padding: 6vh 20px 0 !important;
  }
  .cta-portal-arch {
    width: 175px !important;
    height: 245px !important;
    border-radius: 88px 88px 0 0 !important;
    box-shadow: 
      0 0 70px rgba(255,255,255,0.8),
      0 0 140px rgba(192,132,252,0.5),
      inset 0 0 50px rgba(192,132,252,0.3) !important;
  }
  
  /* === FOOTER === */
  .cta-footer {
    padding: 60px 24px 80px !important;
    gap: 32px !important;
  }
  .cta-footer-logo-pill {
    height: 70px !important;
    padding: 0 28px !important;
  }
  .cta-footer-logo {
    height: 36px !important;
  }
  .cta-footer-address-lines {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }
  /* === HOW SECTION — Background nicht zuschneiden === */
  .how-bg-img {
    object-fit: contain !important;
    object-position: center bottom !important;
    height: auto !important;
    width: 100% !important;
    max-height: 50vh !important;
  }
  .how-step {
    padding: 24px 20px !important;
    font-size: 14px !important;
  }
  .step-title {
    font-size: 22px !important;
  }
  .step-text {
    font-size: 14px !important;
  }

  /* === PRICING FOOTNOTE — Mobile-tauglich === */
  .pricing-footnote-stick {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    max-width: 100% !important;
    padding: 24px 24px 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: #999 !important;
    margin-top: 24px !important;
  }

    /* === BCURVE — Mobile-Optimiert (scroll-driven) === */
  .bcurve-section {
    height: 500vh !important; /* same as desktop: 5 step runway */
  }
  .bcurve-sticky {
    padding: 10vh 0 6vh !important;
  }
  .section-header {
    margin-bottom: 4vh !important;
    padding: 0 20px !important;
  }
  .bcurve-stage {
    padding: 0 20px !important;
  }
  .timelapse-display-block {
    padding: 0 20px !important;
    margin-top: 0 !important;
    top:20%;
  }
  .timelapse-caption-block {
    padding: 0 20px !important;
    bottom: 5vh;
  }
  .bcurve-progress {
    bottom: 3vh !important;
  }
  .cta-footer {
    padding: 80px 30px 100px;
    gap: 40px;
  }
  .cta-footer-logo-pill {
    height: 80px;
    padding: 0 32px;
  }
  .cta-footer-logo { height: 40px; }
  .cta-footer-address-lines { font-size: 12px; }
  .cta-social-icon { width: 44px; height: 44px; }
}


/* ============================================================
   MOBILE OPTIMIZATIONS — SMALL PHONE (max-width: 480px)
   ============================================================ */

@media (max-width: 480px) {
  /* Headlines noch kleiner */
  .fw-h, .how-h, .section-title, .pricing-h-stick {
    font-size: 30px !important;
  }
  .lena-h, .award-title {
    font-size: 34px !important;
  }
  .award-eyebrow {
    font-size: 16px;
  }
  .cta-headline {
    font-size: 54px !important;
  }

.plus-icon {
  width: 34px;
  height: 34px;
}

  .dream-modal-stage {
    inset: auto 16px !important;
    top: 50% !important;
    height: 56vw !important; /* close to 16:9 */
    max-height: 72vh !important;
    min-height: 260px !important;
    transform: translateY(-50%) scale(0.96) !important;
    border-radius: 18px !important;
  }

  .dream-modal.open .dream-modal-stage {
    transform: translateY(-50%) scale(1) !important;
  }

  .dream-modal-img {
    object-fit: cover !important;
  }

  .dream-modal-content {
    left: 24px !important;
    right: 24px !important;
    bottom: 24px !important;
    max-width: none !important;
  }

  .dream-modal-title {
    font-size: 34px !important;
  }

  .dream-modal-sub {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .dream-modal-pill {
    font-size: 10px !important;
    margin-bottom: 12px !important;
  }
  
  /* Hero */
  .hero-content-bottom .hero-h2 {
    font-size: 16px !important;
  }
  
  /* Final CTA */
  .cta-portal-arch {
    width: 140px !important;
    height: 196px !important;
    border-radius: 70px 70px 0 0 !important;
  }
  .cta-lets-talk {
    font-size: 100px;
  }

  .pricing-card-3d {
    height: 350px !important;
    width: 300px;
  }
  .pricing-stage {
  perspective: 750px;
  margin-top: 0px;
}

.card-tier-name {
  font-size: 28px;
  letter-spacing: 0.0em;
  line-height: 1;
  margin-bottom: 10px;
}

.card-scenarios {
  font-size: 14px;
  letter-spacing: 0.0em;
  margin-bottom: 10px;
}

.card-divider {
  height: 0.5px;
  margin: 0 -8px 15px;
}

.card-models {
  margin-bottom: 18px;
  min-height: 40px;
  gap: 8px;
}

.card-models li {
  font-size: 14px;
  gap: 5px;
}

.card-models.empty {
  font-size: 12px;
}

.card-price-block {
  margin-bottom: 10px;
}

.card-price {
  font-size: 28px;
  line-height: 1;
}

.card-price small {
  font-size: 16px;
  margin-top: 1px;
}

.card-price-secondary {
  font-size: 12px;
  margin-top: 8px;
}

.card-cta {
  gap: 8px;
  padding: 13px 30px;
  font-size: 13px;
}
  
  /* Award */
  .award-image-wrap {
    width: 200px !important;
    height: 200px !important;
  }
  .award-phase-text {
    font-size: 80px !important;
  }
  
  /* FW Panel titles */
  .fw-panel-content .title {
    font-size: 20px !important;
  }
}