/*
 * Gemeinsames Responsive-System für die aktuelle Start- und Product Page.
 * Mobile bleibt unverändert die Referenz; alle Regeln beginnen erst ab Tablet.
 * Der interne 3D-Scroll-Hero wird bewusst nicht adressiert.
 */

:root {
  --responsive-content: 1180px;
  --responsive-wide: 1360px;
  --responsive-gutter: clamp(32px, 5.5vw, 76px);
}

.approved-preview-home img,
.premium-product img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .approved-preview-home,
  .premium-product,
  .premium-product-page .footer {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-shadow: none;
  }

  .film-page .nav,
  .premium-product-page .product-page-nav {
    left: 0;
    right: 0;
    width: 100%;
    min-height: 78px;
    padding: 16px var(--responsive-gutter);
    transform: none;
  }

  .film-page .nav__logo-img,
  .premium-product-page .product-page-nav .nav__logo-img {
    width: 94px !important;
    height: 48px !important;
  }

  .film-page .nav__links,
  .premium-product-page .product-page-nav .nav__links {
    display: none;
  }

  .film-page .nav__hamburger,
  .premium-product-page .product-page-nav .nav__hamburger {
    display: flex;
  }

  .approved-preview-home {
    overflow: clip;
  }

  .approved-preview-home .approved-preview-section {
    width: 100%;
  }

  .homepage-intro__content,
  .homepage-training__content,
  .homepage-freedom__content,
  .homepage-product-story__content,
  .homepage-experience__content,
  .homepage-features__content {
    width: min(100%, 780px);
    margin-inline: auto;
    padding: 104px var(--responsive-gutter) 46px;
  }

  .homepage-intro__content h2,
  .homepage-training__content h2,
  .homepage-freedom__content h2,
  .homepage-product-story__content h2,
  .homepage-experience__content h2,
  .homepage-features__content h2 {
    max-width: 11ch;
    font-size: clamp(58px, 7.6vw, 82px);
  }

  .homepage-intro__content p,
  .homepage-training__content p,
  .homepage-freedom__content p,
  .homepage-product-story__content p,
  .homepage-experience__content p,
  .homepage-features__content p {
    max-width: 42ch;
    font-size: clamp(18px, 2.25vw, 22px);
  }

  .homepage-intro__visual,
  .homepage-training__visual,
  .homepage-freedom__visual,
  .homepage-experience__visual {
    width: min(calc(100% - (2 * var(--responsive-gutter))), 760px);
    margin: 0 auto 76px;
    overflow: hidden;
    border-radius: 30px;
  }

  .homepage-product-story {
    padding-bottom: 92px;
  }

  .homepage-product-story__visual {
    width: min(calc(100% - (2 * var(--responsive-gutter))), 820px);
    margin-inline: auto;
  }

  .homepage-product-story__claim {
    margin-top: 34px;
    font-size: clamp(38px, 6vw, 64px);
  }

  .homepage-features {
    padding-bottom: 94px;
  }

  .homepage-features__grid {
    width: min(calc(100% - (2 * var(--responsive-gutter))), 920px);
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .homepage-feature-card {
    min-height: 190px;
  }

  .homepage-faq {
    padding: 92px var(--responsive-gutter) 84px;
  }

  .homepage-faq header,
  .homepage-faq .faq__list {
    max-width: 760px;
  }

  .homepage-purchase {
    padding: 104px var(--responsive-gutter) 100px;
  }

  .homepage-purchase__content,
  .homepage-purchase__social-proof,
  .homepage-purchase__offer,
  .homepage-purchase__trust,
  .homepage-purchase__welcome {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .homepage-purchase__visual {
    margin-inline: auto;
  }

  .premium-product-page .product-hero-content {
    width: min(100%, 800px);
    margin-inline: auto;
    padding: 126px 44px 46px;
  }

  .premium-product-page .product-hero-media {
    width: 100%;
    margin: 30px 0 0;
    border-radius: 30px;
  }

  .premium-product-page .product-hero--html .product-color-hotspots {
    width: 100%;
    margin-inline: 0;
    gap: 14px;
  }

  .premium-product-page .product-hero-buy,
  .premium-product-page .product-hero-content > .payment-trust-row {
    width: min(100%, 620px);
  }

  .premium-product-page .product-community,
  .premium-product-page .product-bluetooth,
  .premium-product-page .product-dive-clean,
  .premium-product-page .product-contents,
  .premium-product-page .product-comparison,
  .premium-product-page .product-steps,
  .premium-product-page .product-reviews,
  .premium-product-page .product-faq,
  .premium-product-page .product-final {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .premium-product-page .product-bluetooth,
  .premium-product-page .product-dive-clean,
  .premium-product-page .product-contents,
  .premium-product-page .product-steps,
  .premium-product-page .product-faq,
  .premium-product-page .product-final {
    padding-inline: var(--responsive-gutter);
  }

  .premium-product-page .product-community__header,
  .premium-product-page .product-comparison__header,
  .premium-product-page .product-reviews header {
    padding-inline: var(--responsive-gutter);
  }

  .premium-product-page .product-bluetooth__header,
  .premium-product-page .product-dive-clean__header,
  .premium-product-page .product-contents__copy,
  .premium-product-page .product-comparison__header,
  .premium-product-page .product-steps__header,
  .premium-product-page .product-reviews header {
    max-width: 760px;
    margin-inline: auto;
  }

  .premium-product-page .product-bluetooth__visual,
  .premium-product-page .product-dive-clean__visual {
    width: min(100%, 760px);
    margin: 32px auto 24px;
  }

  .premium-product-page .bluetooth-benefits,
  .premium-product-page .product-contents__grid,
  .premium-product-page .product-steps__list,
  .premium-product-page .product-benefits,
  .premium-product-page .product-final > * {
    width: min(100%, 880px);
    margin-inline: auto;
  }

  .premium-product-page .bluetooth-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  .premium-product-page .bluetooth-benefit,
  .premium-product-page .bluetooth-benefit:last-child {
    align-content: start;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
  }

  .premium-product-page .product-contents__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .premium-product-page .product-contents__item--main {
    grid-column: 1 / -1;
  }

  .premium-product-page .comparison-table-wrap {
    width: min(calc(100% - (2 * var(--responsive-gutter))), 920px);
    margin-inline: auto;
    padding-inline: 0;
  }

  .premium-product-page .product-comparison__source {
    width: min(calc(100% - (2 * var(--responsive-gutter))), 920px);
    margin-inline: auto;
  }

  .premium-product-page .product-steps__list {
    gap: 16px;
  }

  .premium-product-page .review-carousel {
    grid-auto-columns: min(52%, 430px);
    padding-inline: var(--responsive-gutter);
    scroll-padding-inline: var(--responsive-gutter);
  }

  .premium-product-page .review-trust {
    width: min(calc(100% - (2 * var(--responsive-gutter))), 880px);
    margin-inline: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .premium-product-page .product-final__visual img {
    width: min(100%, 660px);
  }

  .premium-product-page .product-final__variants,
  .premium-product-page .product-final-buy,
  .premium-product-page .product-final > .payment-trust-row,
  .premium-product-page .product-final__trust {
    max-width: 720px;
  }

  .premium-product-page .footer__inner,
  .film-page .footer__inner {
    max-width: var(--responsive-content);
  }

  .premium-product-page .community-carousel {
    grid-auto-columns: min(32%, 390px);
    align-items: start;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .film-page .premium-menu,
  .premium-product-page .premium-menu {
    display: block;
  }
}

@media (min-width: 1024px) {
  .film-page .nav,
  .premium-product-page .product-page-nav {
    min-height: 86px;
    padding-inline: max(var(--responsive-gutter), calc((100vw - var(--responsive-content)) / 2));
    background: rgba(0, 7, 13, .82);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .film-page .nav__links,
  .premium-product-page .product-page-nav .nav__links {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2vw, 34px);
  }

  .film-page .nav__links li:nth-child(1),
  .premium-product-page .nav__links li:nth-child(1) { order: 1; }
  .film-page .nav__links li:nth-child(4),
  .premium-product-page .nav__links li:nth-child(4) { order: 2; }
  .film-page .nav__links li:nth-child(3),
  .premium-product-page .nav__links li:nth-child(3) { order: 3; }
  .film-page .nav__links li:nth-child(5),
  .premium-product-page .nav__links li:nth-child(5) { order: 4; }
  .film-page .nav__links li:nth-child(2),
  .premium-product-page .nav__links li:nth-child(2) { order: 5; }
  .film-page .nav__links li:nth-child(6),
  .premium-product-page .nav__links li:nth-child(6) { order: 6; }

  .film-page .nav__links a,
  .premium-product-page .product-page-nav .nav__links a {
    color: rgba(255, 255, 255, .78);
    font-family: Manrope, var(--font-body);
    font-size: 11px;
    letter-spacing: .14em;
    transition: color 180ms ease;
  }

  .film-page .nav__links a:hover,
  .film-page .nav__links a:focus-visible,
  .premium-product-page .product-page-nav .nav__links a:hover,
  .premium-product-page .product-page-nav .nav__links a:focus-visible {
    color: #8ff5ff;
    outline: none;
  }

  .film-page .nav__hamburger,
  .premium-product-page .product-page-nav .nav__hamburger {
    display: none;
  }

  .film-page .premium-menu,
  .premium-product-page .premium-menu {
    display: none;
  }

  .homepage-intro,
  .homepage-training,
  .homepage-freedom,
  .homepage-experience {
    display: grid;
    min-height: min(860px, calc(100svh - 40px));
    grid-template-columns: minmax(0, 1fr) minmax(480px, 1.12fr);
    align-items: center;
    gap: clamp(42px, 6vw, 96px);
    padding-inline: max(var(--responsive-gutter), calc((100vw - var(--responsive-content)) / 2));
  }

  .homepage-intro__content,
  .homepage-training__content,
  .homepage-freedom__content,
  .homepage-experience__content {
    width: auto;
    margin: 0;
    padding: 90px 0;
  }

  .homepage-intro__visual,
  .homepage-training__visual,
  .homepage-freedom__visual,
  .homepage-experience__visual {
    width: 100%;
    margin: 72px 0;
    border-radius: 34px;
  }

  .homepage-training__visual,
  .homepage-experience__visual {
    grid-column: 1;
    grid-row: 1;
  }

  .homepage-training__content,
  .homepage-experience__content {
    grid-column: 2;
    grid-row: 1;
  }

  .homepage-product-story {
    display: grid;
    grid-template-columns: minmax(360px, .8fr) minmax(520px, 1.2fr);
    align-items: center;
    gap: clamp(48px, 7vw, 110px);
    padding: 118px max(var(--responsive-gutter), calc((100vw - var(--responsive-content)) / 2));
  }

  .homepage-product-story__content {
    width: auto;
    padding: 0;
  }

  .homepage-product-story__visual {
    width: 100%;
    margin: 0;
  }

  .homepage-product-story__claim {
    grid-column: 1 / -1;
    margin: 12px 0 0;
  }

  .homepage-features {
    padding: 118px max(var(--responsive-gutter), calc((100vw - var(--responsive-content)) / 2));
  }

  .homepage-features__content {
    width: min(100%, 840px);
    padding: 0;
  }

  .homepage-features__grid {
    width: 100%;
    margin-top: 54px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .homepage-purchase {
    display: grid;
    grid-template-columns: minmax(360px, .78fr) minmax(500px, 1.22fr);
    grid-template-areas:
      "content offer"
      "proof offer"
      "trust trust"
      "welcome welcome";
    align-items: center;
    gap: 44px clamp(58px, 8vw, 128px);
    padding-inline: max(var(--responsive-gutter), calc((100vw - var(--responsive-content)) / 2));
    text-align: left;
  }

  .homepage-purchase__content { grid-area: content; width: auto; margin: 0; }
  .homepage-purchase__social-proof { grid-area: proof; width: auto; margin: 0; }
  .homepage-purchase__offer { grid-area: offer; width: auto; margin: 0; padding: 42px; border: 1px solid rgba(225, 239, 247, .14); border-radius: 30px; }
  .homepage-purchase__trust { grid-area: trust; width: 100%; margin-top: 8px; }
  .homepage-purchase__welcome { grid-area: welcome; width: 100%; margin-top: 22px; text-align: center; }
  .homepage-purchase__avatars { justify-content: flex-start; }

  .premium-product-page .product-hero-content {
    display: grid;
    width: min(calc(100% - (2 * var(--responsive-gutter))), var(--responsive-content));
    padding: 138px 0 84px;
    grid-template-columns: minmax(400px, .82fr) minmax(500px, 1.18fr);
    grid-template-areas:
      "badge media"
      "heading media"
      "sub media"
      "info media"
      "options media"
      "quantity media"
      "buy media"
      "payment media"
      "trust media";
    align-items: start;
    column-gap: clamp(52px, 6vw, 104px);
  }

  .premium-product-page .product-hero-badge { grid-area: badge; }
  .premium-product-page .product-hero-heading { grid-area: heading; }
  .premium-product-page .product-hero-subheadline { grid-area: sub; }
  .premium-product-page .product-hero-media { grid-area: media; position: sticky; top: 108px; width: 100%; margin: 0; align-self: start; }
  .premium-product-page .product-hero-info { grid-area: info; }
  .premium-product-page .product-hero-options { grid-area: options; }
  .premium-product-page .product-quantity--hero { grid-area: quantity; }
  .premium-product-page .product-hero-buy { grid-area: buy; width: 100%; }
  .premium-product-page .product-hero-content > .payment-trust-row { grid-area: payment; width: 100%; }
  .premium-product-page .product-hero-trust { grid-area: trust; }

  .premium-product-page .product-hero-heading {
    font-size: clamp(60px, 5vw, 82px);
  }

  .premium-product-page .product-hero-subheadline {
    max-width: 39ch;
    font-size: 18px;
  }

  .premium-product-page .product-hero--html .product-color-hotspots,
  .premium-product-page .product-hero--html .product-color-hotspot {
    min-height: 176px;
  }

  .premium-product-page .product-hero--html .product-color-hotspot img {
    height: 104px;
  }

  .premium-product-page .product-hero--html .product-color-hotspot > span {
    min-height: 62px;
  }

  .premium-product-page .product-hero-trust {
    max-width: 520px;
  }

  .premium-product-page .product-community__header,
  .premium-product-page .product-bluetooth__header,
  .premium-product-page .product-dive-clean__header,
  .premium-product-page .product-contents__copy,
  .premium-product-page .product-comparison__header,
  .premium-product-page .product-steps__header,
  .premium-product-page .product-reviews header {
    max-width: var(--responsive-content);
  }

  .premium-product-page .product-bluetooth,
  .premium-product-page .product-dive-clean {
    display: grid;
    grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr);
    align-items: center;
    gap: 28px clamp(54px, 7vw, 110px);
    padding-inline: max(var(--responsive-gutter), calc((100vw - var(--responsive-content)) / 2));
  }

  .premium-product-page .product-bluetooth__header,
  .premium-product-page .product-dive-clean__header {
    margin: 0;
  }

  .premium-product-page .product-bluetooth__visual,
  .premium-product-page .product-dive-clean__visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    margin: 0;
  }

  .premium-product-page .bluetooth-benefits {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    margin-top: 34px;
  }

  .premium-product-page .product-contents__copy,
  .premium-product-page .product-contents__grid,
  .premium-product-page .product-steps__header,
  .premium-product-page .product-steps__list,
  .premium-product-page .product-benefits,
  .premium-product-page .product-final > * {
    max-width: var(--responsive-content);
  }

  .premium-product-page .product-contents__grid {
    grid-template-columns: 1.4fr repeat(2, 1fr);
  }

  .premium-product-page .product-contents__item--main {
    grid-column: auto;
  }

  .premium-product-page .product-steps__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .premium-product-page .step-card__toggle {
    min-height: 94px;
  }

  .premium-product-page .review-carousel {
    grid-auto-columns: min(31%, 400px);
  }

  .premium-product-page .product-final {
    display: grid;
    grid-template-columns: minmax(420px, .95fr) minmax(420px, 1.05fr);
    grid-template-areas:
      "header visual"
      "rating visual"
      "price visual"
      "variants visual"
      "quantity visual"
      "buy visual"
      "payment visual"
      "trust trust"
      "welcome welcome";
    align-items: center;
    column-gap: clamp(54px, 7vw, 110px);
    padding-inline: max(var(--responsive-gutter), calc((100vw - var(--responsive-content)) / 2));
    text-align: left;
  }

  .premium-product-page .product-final__header { grid-area: header; width: 100%; }
  .premium-product-page .product-final__visual { grid-area: visual; width: 100%; }
  .premium-product-page .product-final__rating { grid-area: rating; width: 100%; justify-content: flex-start; }
  .premium-product-page .product-final__rating > span { width: auto; }
  .premium-product-page .product-final__price-group { grid-area: price; width: 100%; }
  .premium-product-page .product-final__variants { grid-area: variants; width: 100%; }
  .premium-product-page .product-quantity--final { grid-area: quantity; margin-inline: 0; }
  .premium-product-page .product-final-buy { grid-area: buy; width: 100%; }
  .premium-product-page .product-final > .payment-trust-row { grid-area: payment; width: 100%; }
  .premium-product-page .product-final__trust { grid-area: trust; width: 100%; max-width: none; }
  .premium-product-page .product-final__welcome { grid-area: welcome; width: 100%; max-width: none; text-align: center; }
  .premium-product-page .product-final__header h2,
  .premium-product-page .product-final__header p { margin-inline: 0; }

  .premium-product-page .footer__grid,
  .film-page .footer__grid {
    grid-template-columns: 1.3fr repeat(3, 1fr);
  }
}

@media (min-width: 1440px) {
  :root {
    --responsive-content: 1280px;
    --responsive-gutter: clamp(64px, 6vw, 112px);
  }

  .homepage-intro,
  .homepage-training,
  .homepage-freedom,
  .homepage-experience {
    min-height: 900px;
  }

  .homepage-intro__content h2,
  .homepage-training__content h2,
  .homepage-freedom__content h2,
  .homepage-product-story__content h2,
  .homepage-experience__content h2,
  .homepage-features__content h2 {
    font-size: clamp(74px, 5.4vw, 94px);
  }

  .premium-product-page .product-hero-content {
    grid-template-columns: minmax(450px, .8fr) minmax(620px, 1.2fr);
  }

  .premium-product-page .community-carousel,
  .premium-product-page .review-carousel {
    padding-inline: max(var(--responsive-gutter), calc((100vw - var(--responsive-wide)) / 2));
    scroll-padding-inline: max(var(--responsive-gutter), calc((100vw - var(--responsive-wide)) / 2));
  }
}

@media (min-width: 1920px) {
  :root {
    --responsive-content: 1380px;
    --responsive-wide: 1540px;
  }
}