/* Hero preview, selected film and benefit overview on the public homepage. */
@layer marketing {
  .film-shell [hidden] { display: none; }
  .home-page.film-home .chapter-next-link[hidden] { display: none; }
  .home-page.film-home #main-content > .chapter {
    min-height: calc(100svh - var(--site-nav-height) - var(--journey-scroll-margin, 53px));
  }
  .film-stage {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 16px; overflow: hidden; background: var(--marketing-cream);
  }
  .home-page.film-home :is(.hero-assistant-scene, .hero-messenger-links) { display: none; }
  .home-page.film-home .hero-aside { width: 100%; min-width: 0; }
  /* Die Filmvorschau zeigt, was der lange Einstiegstext aufzählt: Kurzfassung links, Film breiter und oben bündig. */
  @media (min-width: 900px) {
    .home-page.film-home .hero-intro-full { display: none; }
    .home-page.film-home .hero-intro-compact { display: block; }
    .home-page.film-home:not(.film-expanded) .hero-copy {
      grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
      column-gap: clamp(40px, 4vw, 64px);
    }
    .home-page.film-home:not(.film-expanded) .hero-aside { align-self: start; margin-top: 10px; }
  }
  .home-page.film-home #main-content > .film-stage {
    position: relative; width: 100%; height: calc(100svh - var(--site-nav-height));
    min-height: 0; margin: 0; padding: 0; aspect-ratio: auto; border-radius: 0;
    background: var(--marketing-cream);
  }
  .film-shell { position: relative; width: 100%; height: 100%; min-width: 0; color: var(--ink); }
  .film-shell:focus { outline: none; }
  .home-page.film-transitioning .hero { overflow: visible; }
  .home-page.film-transitioning .film-stage,
  .home-page.film-transitioning #main-content > .film-stage {
    overflow: visible; background: transparent; z-index: var(--z-sticky);
  }
  .film-transitioning .film-shell { overflow: hidden; transform-origin: top left; will-change: width, height, transform; }
  .film-transitioning .film-chrome { opacity: 0; pointer-events: none; }
  .film-frame { position: relative; width: 100%; height: 100%; background: var(--marketing-cream); }
  .film-frame video {
    display: block; width: 100%; height: 100%;
    object-fit: contain; border-radius: inherit; background: var(--marketing-cream);
  }
  .film-shell button {
    min-height: 44px; cursor: pointer; color: var(--ink);
    font: 500 .9375rem var(--display); line-height: 1.3;
  }
  .film-shell button svg {
    flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .film-shell :is(button,input,a):focus-visible {
    outline: 3px solid var(--focus-ring-neutral); outline-offset: 3px;
  }
  .film-picture-open {
    position: absolute; inset: 0; width: 100%; height: 100%;
    padding: 0; border: 0; border-radius: inherit; background: transparent;
    text-align: left;
  }
  .film-invite {
    position: absolute; left: 20px; bottom: 20px;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 5px 18px 5px 5px; border-radius: 40px;
    background: var(--surface); border: 1px solid var(--hairline);
    font-size: 1rem; font-weight: 600;
  }
  .film-play-icon {
    display: grid; place-items: center; width: 48px; height: 48px;
    border-radius: 50%; background: var(--action-fill); color: var(--action-foreground);
    transition: background var(--motion-fast);
  }
  .film-play-icon svg { width: 24px; height: 24px; }
  .film-picture-open:hover .film-play-icon { background: var(--action-fill-hover); }
  .film-duration { color: var(--ink-soft); font-size: .8125rem; font-weight: 400; font-variant-numeric: tabular-nums; }
  .film-shell .film-teaser-toggle {
    position: absolute; right: 12px; top: 12px;
    display: grid; place-items: center; width: 44px; padding: 0;
    border-radius: 50%; border: 1px solid var(--hairline);
    color: var(--ink-soft); background: var(--surface);
  }

  .film-heading {
    position: absolute; inset: 0 0 auto; z-index: var(--z-raised);
    display: flex; align-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 40px max(24px, env(safe-area-inset-left));
    background: linear-gradient(var(--marketing-cream), transparent);
    pointer-events: none;
  }
  .film-heading button {
    display: inline-flex; justify-content: center; align-items: center; gap: 10px;
    padding: 0 16px; border: 1px solid var(--hairline);
    border-radius: 24px; background: var(--marketing-cream); pointer-events: auto;
  }
  .film-heading button:hover { background: var(--surface); }
  .film-player-controls {
    position: absolute; inset: auto 0 0; z-index: var(--z-raised);
    padding: 40px max(28px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
    background: linear-gradient(transparent, var(--marketing-cream) 38%);
  }
  .film-chrome { opacity: 1; transition: opacity var(--motion-standard); }
  .film-idle { cursor: none; }
  .film-idle .film-chrome { opacity: 0; pointer-events: none; }
  .film-idle .film-chrome button { pointer-events: none; }
  .film-progress-row { display: flex; align-items: center; gap: 16px; }
  .film-progress-row input {
    min-width: 0; width: 100%; height: 44px; margin: 0;
    accent-color: var(--action-fill); cursor: pointer;
  }
  .film-progress-row span {
    flex: none; color: var(--ink-soft); font: .8125rem var(--display);
    font-variant-numeric: tabular-nums;
  }
  .film-control-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .film-control-row button {
    display: inline-flex; justify-content: center; align-items: center; gap: 6px;
    padding: 0 12px; border: 1px solid transparent; border-radius: var(--control-radius);
    background: transparent;
  }
  .film-control-row button:hover { background: var(--surface); }
  .film-control-row button[aria-pressed='true'] { border-color: var(--selection-border); background: var(--selection-surface); color: var(--selection-text); font-weight: 700; }
  .film-shell .film-player-status { margin: 8px 0 4px; color: var(--ink-soft); font-size: .875rem; }
  .film-captions {
    position: absolute; left: 5%; right: 5%; bottom: 126px;
    width: fit-content; max-width: 90%; margin-inline: auto; padding: 6px 12px;
    border-radius: 4px; background: var(--marketing-cream); color: var(--ink);
    font: 500 clamp(16px, 1.6vw, 24px)/1.4 var(--display);
    text-align: center; white-space: pre-line; pointer-events: none;
  }
  .film-idle .film-captions { bottom: max(28px, env(safe-area-inset-bottom)); }

  @media (max-width: 639.98px) {
    .film-invite { left: 16px; bottom: 20px; gap: 8px; padding: 3px 12px 3px 3px; font-size: .875rem; }
    .film-play-icon { width: 40px; height: 40px; }
    .film-shell .film-teaser-toggle { top: 8px; right: 8px; }
    .film-heading { padding: max(12px, env(safe-area-inset-top)) 12px 32px; }
    .film-heading button { padding-inline: 12px; font-size: .8125rem; }
    .film-player-controls { padding: 32px 12px max(12px, env(safe-area-inset-bottom)); }
    .film-progress-row { gap: 8px; }
    .film-control-row button { padding-inline: 8px; font-size: .8125rem; }
    .film-control-row { gap: 4px; }
  }
  /* Only a selected film moves the original message below the player. */
  .home-page.film-expanded #main-content > .hero { min-height: 0; padding-block: 72px; }
  .home-page.film-expanded .hero-aside { display: none; }
  .home-page.film-expanded .hero-actions { margin-top: 0; }
  @media (min-width: 900px) {
    .home-page.film-expanded .hero-copy {
      grid-template-areas: "title intro" "actions intro";
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto 1fr; gap: 28px 64px;
    }
    .home-page.film-expanded .hero .sub { margin-top: 0; }
  }

  /* Six benefits share one overview that fits one screen; every card opens its chapter. */
  .home-page.film-home #main-content > .film-benefits {
    display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100svh - var(--site-nav-height) - var(--journey-scroll-margin, 53px));
    scroll-margin-top: var(--journey-scroll-margin, 53px);
    padding-block: clamp(40px, 5vh, 64px); background: var(--marketing-cream);
  }
  /* Zwei zusätzliche, gleich helle Flächen, damit alle sechs Karten unterscheidbar bleiben. */
  .film-benefits { --benefit-sky: #E4EDF3; --benefit-lilac: #EEE8F1; }
  .film-benefits .path-heading { padding: 0; border: 0; background: none; }
  .film-benefits .path-heading h2 { font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.15; }
  .film-benefits .film-benefits-intro { margin-top: 12px; max-width: 80ch; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }
  .film-benefits .journey-navigation { display: block; margin-top: 24px; padding: 0; border: 0; background: none; }
  .film-benefits .journey-path { display: none; }
  .film-benefits .journey-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; min-height: 0; }
  .film-benefits .journey-link {
    position: static; display: flex; flex-direction: column; align-items: stretch;
    grid-column: span 2; width: auto; min-height: 0; gap: 0; padding: 20px 22px 22px;
    border: 1px solid transparent; border-radius: 16px; background: var(--surface);
  }
  .film-benefits .journey-link:nth-of-type(1) { background: var(--marketing-blush); }
  .film-benefits .journey-link:nth-of-type(2) { background: var(--marketing-sand); }
  .film-benefits .journey-link:nth-of-type(3) { background: var(--marketing-mint); }
  .film-benefits .journey-link:nth-of-type(4) { background: var(--marketing-stone); }
  .film-benefits .journey-link:nth-of-type(5) { background: var(--benefit-sky); }
  .film-benefits .journey-link:nth-of-type(6) { background: var(--benefit-lilac); }
  .film-benefits .journey-link { transition: transform var(--motion-fast); }
  .film-benefits .journey-link:hover { transform: translateY(-2px); }
  .film-benefits .journey-link:hover,
  .film-benefits .journey-link:focus-visible { outline: 2px solid var(--focus-ring-neutral); outline-offset: 3px; }
  .film-benefit-head { display: flex; align-items: center; gap: 10px; }
  .film-benefit-head strong { font-size: .875rem; line-height: 1.4; }
  .film-benefits .film-benefit-head small { display: none; }
  .film-benefits .journey-link .journey-number { flex: none; width: 32px; height: 32px; background: var(--surface); }
  .film-benefits .journey-link h3 { margin: 14px 0 8px; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.015em; }
  .film-benefits .journey-link p { margin: 0; font-size: .9375rem; line-height: 1.65; color: var(--ink-soft); }
  @media (max-width: 899.98px) {
    .home-page.film-expanded #main-content > .hero { padding-block: 40px; }
    .home-page.film-expanded .hero-copy { gap: 20px; }
    .home-page.film-expanded .hero .sub { margin-top: 0; }
    .film-benefits .journey-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .film-benefits .journey-link,
    .film-benefits .journey-link:nth-of-type(n+4) { grid-column: auto; padding: 20px; }
    .film-benefits .path-heading h2 { font-size: 2rem; }
  }
  @media (max-width: 639.98px) {
    /* Auf dem Handy zeigt die Übersicht alle sechs Bereiche auf einen Blick; die Beschreibung steht im Kapitel. */
    .film-benefits .journey-links { gap: 10px; }
    .film-benefits .journey-link,
    .film-benefits .journey-link:nth-of-type(n+4) { padding: 14px 14px 16px; border-radius: 14px; }
    .film-benefits .journey-link p { display: none; }
    .film-benefits .journey-link h3 { margin: 10px 0 0; font-size: 1rem; line-height: 1.3; }
    .film-benefit-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .film-benefit-head strong { font-size: .75rem; }
    .film-benefits .journey-link .journey-number { width: 26px; height: 26px; font-size: .75rem; }
    .film-benefits .journey-navigation { margin-top: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .film-shell * { transition: none !important; }
    .film-benefits .journey-link { transition: none; }
    .film-benefits .journey-link:hover { transform: none; }
  }
}