/* Werke — Cinema Scroll-Film (baut auf home-film.css) */

.books-film {
  --film-void: #080705;
  --film-cream: #f3e6c8;
  --film-cream-soft: rgba(243, 230, 200, 0.82);
  --film-gold: #c9943a;
  --film-ease: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--film-void);
}

.books-film #main {
  background: var(--film-void);
}

.books-film .site-header.hp-header--light {
  background: transparent;
}

.books-film .site-header.hp-header--light .nav-links a,
.books-film .site-header.hp-header--light .menu-toggle {
  color: rgba(243, 230, 200, 0.88);
}

.books-film .site-header.hp-header--light .nav-links a:hover,
.books-film .site-header.hp-header--light .nav-links a.active {
  color: var(--film-cream);
}

.books-film .site-header.hp-header--light .logo-emblem {
  filter: none;
  opacity: 1;
}

.books-film .site-footer {
  background: var(--film-void);
  border-top: 1px solid rgba(232, 176, 96, 0.14);
}

.books-film .book-nav-strip {
  width: min(100% - 2.5rem, 68rem);
  padding: 0.55rem 1.1rem 0.7rem;
  border: 0;
  border-radius: 0 0 1.35rem 1.35rem;
  background:
    linear-gradient(
      180deg,
      rgba(8, 7, 5, 0.42) 0%,
      rgba(8, 7, 5, 0.22) 55%,
      rgba(8, 7, 5, 0.08) 100%
    );
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  box-shadow:
    0 1px 0 rgba(232, 176, 96, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.18);
}

.books-film .werk-subnav__context {
  color: rgba(220, 200, 160, 0.62);
  font-size: 0.8rem;
}

.books-film .werk-subnav__context strong {
  color: rgba(232, 176, 96, 0.92);
}

.books-film .book-nav-strip a {
  border-color: rgba(201, 148, 58, 0.2);
  color: rgba(232, 200, 150, 0.78);
  background: rgba(8, 7, 5, 0.18);
}

.books-film .book-nav-strip a:hover,
.books-film .book-nav-strip a.active {
  border-color: rgba(232, 176, 96, 0.55);
  color: var(--film-cream);
  background: rgba(201, 148, 58, 0.14);
  box-shadow: 0 0 18px rgba(201, 148, 58, 0.12);
}

.books-film .story-progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  z-index: 350;
  pointer-events: none;
  background: linear-gradient(180deg, var(--film-gold), rgba(232, 176, 96, 0.35));
}

.books-film .story-nav {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
}

.books-film .story-nav a {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(220, 200, 160, 0.38);
  padding: 0.35rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.books-film .story-nav a.is-active,
.books-film .story-nav a:hover {
  color: var(--film-gold);
  border-color: rgba(201, 148, 58, 0.35);
  background: rgba(201, 148, 58, 0.08);
}

.books-film .hp-film {
  min-height: min(100svh, 980px);
}

.books-film .hp-film .hp-film__inner {
  padding-block: 0;
}

.books-film .hp-film--tall {
  min-height: min(108svh, 1100px);
}

.books-film .hp-film--tall .hp-film__inner {
  min-height: min(108svh, 1100px);
}

/* data-film-pos: Werte, die home-film nicht kennt */
.books-film .hp-film__media img[data-film-pos="58% 45%"] { object-position: 58% 45%; }
.books-film .hp-film__media img[data-film-pos="32% 48%"] { object-position: 32% 48%; }
.books-film .hp-film__media img[data-film-pos="62% 48%"] { object-position: 62% 48%; }
.books-film .hp-film__media img[data-film-pos="35% 45%"] { object-position: 35% 45%; }
.books-film .hp-film__media img[data-film-pos="center 38%"] { object-position: center 38%; }
.books-film .hp-film__media img[data-film-pos="62% 45%"] { object-position: 62% 45%; }
.books-film .hp-film__media img[data-film-pos="38% 48%"] { object-position: 38% 48%; }
.books-film .hp-film__media img[data-film-pos="58% 42%"] { object-position: 58% 42%; }
.books-film .hp-film__media img[data-film-pos="68% 48%"] { object-position: 68% 48%; }
.books-film .hp-film__media img[data-film-pos="28% 48%"] { object-position: 28% 48%; }
.books-film .hp-film__media img[data-film-pos="68% 58%"] { object-position: 68% 58%; }

/* Credits — wie About-Filmabspann */
.books-film .bf-credits {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-height: min(100svh, 980px);
  padding-inline: clamp(1.75rem, 7vw, 5.5rem);
  padding-block: clamp(5.5rem, 12vh, 7.5rem);
}

.books-film .hp-film--tall .bf-credits {
  min-height: min(108svh, 1100px);
  justify-content: center;
  padding-block: clamp(6.5rem, 14vh, 9rem) clamp(5.5rem, 12vh, 8rem);
}

.books-film .bf-credits--end {
  justify-content: flex-end;
  padding-bottom: clamp(4.5rem, 11vh, 7rem);
}

.books-film .bf-credits--left {
  align-items: flex-start;
  text-align: left;
  padding-left: clamp(2.5rem, 10vw, 8.5rem);
  padding-right: clamp(2rem, 32vw, 26rem);
}

.books-film .bf-credits--right {
  align-items: flex-end;
  text-align: left;
  padding-right: clamp(2.5rem, 10vw, 8.5rem);
  padding-left: clamp(2rem, 32vw, 26rem);
}

.books-film .bf-credits--right > * {
  width: min(100%, 38rem);
}

.books-film .bf-credits--center {
  align-items: center;
  text-align: center;
}

/* Veils: Textseite dunkeln */
.books-film .hp-film[data-credit="left"] .hp-film__veil {
  background:
    linear-gradient(
      95deg,
      rgba(8, 6, 4, 0.9) 0%,
      rgba(8, 6, 4, 0.72) 34%,
      rgba(8, 6, 4, 0.28) 58%,
      rgba(8, 6, 4, 0.2) 100%
    ),
    linear-gradient(180deg, rgba(8, 6, 4, 0.35) 0%, transparent 22%, transparent 72%, rgba(8, 6, 4, 0.55) 100%);
}

.books-film .hp-film[data-credit="right"] .hp-film__veil {
  background:
    linear-gradient(
      265deg,
      rgba(8, 6, 4, 0.9) 0%,
      rgba(8, 6, 4, 0.72) 34%,
      rgba(8, 6, 4, 0.28) 58%,
      rgba(8, 6, 4, 0.2) 100%
    ),
    linear-gradient(180deg, rgba(8, 6, 4, 0.35) 0%, transparent 22%, transparent 72%, rgba(8, 6, 4, 0.55) 100%);
}

.books-film #verlag .hp-film__veil {
  background:
    linear-gradient(
      265deg,
      rgba(8, 6, 4, 0.92) 0%,
      rgba(8, 6, 4, 0.78) 36%,
      rgba(8, 6, 4, 0.32) 60%,
      rgba(8, 6, 4, 0.18) 100%
    ),
    linear-gradient(180deg, rgba(8, 6, 4, 0.28) 0%, transparent 18%, transparent 48%, rgba(8, 6, 4, 0.72) 100%);
}

.books-film #verlag .bf-credits--end {
  padding-bottom: clamp(5.5rem, 12vh, 8rem);
}

.books-film #verlag .hp-title {
  max-width: 18ch;
}

.books-film #verlag .hp-actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.books-film #verlag .hp-actions .btn {
  min-width: min(100%, 15.5rem);
  justify-content: center;
  text-align: center;
}

.books-film #start .hp-film__veil {
  background:
    linear-gradient(
      95deg,
      rgba(8, 6, 4, 0.92) 0%,
      rgba(8, 6, 4, 0.78) 36%,
      rgba(8, 6, 4, 0.32) 60%,
      rgba(8, 6, 4, 0.16) 100%
    ),
    linear-gradient(180deg, rgba(8, 6, 4, 0.42) 0%, transparent 20%, transparent 48%, rgba(8, 6, 4, 0.78) 100%);
}

.books-film #start .bf-credits--end {
  padding-bottom: clamp(5.5rem, 12vh, 8rem);
}

.books-film #start .hp-title {
  max-width: 12ch;
}

.books-film #start .hp-lead {
  max-width: 32rem;
}

.books-film #start .hp-actions {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.books-film #start .hp-actions .btn {
  min-width: min(100%, 15.5rem);
  justify-content: center;
  text-align: center;
}

.books-film .bf-credits--left > * {
  width: min(100%, 38rem);
}

.books-film .hp-kicker {
  margin: 0 0 0.85rem;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 176, 96, 0.88);
}

.books-film .hp-kicker span {
  color: var(--film-gold);
  margin-right: 0.45rem;
}

.books-film .hp-title {
  margin: 0 0 0.85rem;
  font-family: Cinzel, "Times New Roman", serif;
  font-size: clamp(1.95rem, 5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--film-cream);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
  max-width: 14ch;
  text-wrap: balance;
}

.books-film .hp-title em {
  font-style: italic;
  color: var(--film-gold);
}

.books-film .bf-credits--right .hp-title {
  max-width: 16ch;
}

.books-film .hp-lead {
  margin: 0;
  max-width: 34rem;
  font-family: "EB Garamond", Garamond, Georgia, serif;
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.55;
  color: var(--film-cream-soft);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.books-film .btn-outline {
  color: var(--film-cream);
  border-color: rgba(232, 176, 96, 0.4);
}

.books-film .hp-lead a {
  color: var(--film-gold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.books-film .hp-lead + .hp-lead {
  margin-top: 0.85rem;
}

.books-film .bf-status {
  margin: 0.85rem 0 0;
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232, 176, 96, 0.78);
}

.books-film .hp-actions {
  margin-top: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}

.books-film .bf-credits--right .hp-actions {
  justify-content: flex-start;
}

.books-film .hp-link {
  color: rgba(232, 176, 96, 0.9);
}

/* Floating cover card */
.books-film .bf-cover {
  position: absolute;
  z-index: 4;
  width: min(11.5rem, 26vw);
  margin: 0;
  pointer-events: none;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
}

.books-film .bf-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid rgba(201, 148, 58, 0.32);
  background: #120e0a;
}

.books-film .bf-cover--right {
  right: clamp(1.75rem, 7vw, 5.5rem);
  bottom: clamp(4.5rem, 12vh, 7.5rem);
}

.books-film .bf-cover--left {
  left: clamp(1.75rem, 7vw, 5.5rem);
  bottom: clamp(4.5rem, 12vh, 7.5rem);
}

/* Kapitel mit Cover: Text nicht unter Cover schieben */
.books-film #haus .bf-credits--left,
.books-film #ecosabil .bf-credits--left {
  padding-right: clamp(2rem, 38vw, 28rem);
}

.books-film #bauplan .bf-credits--right {
  padding-left: clamp(2rem, 38vw, 28rem);
}

.books-film .bf-bridge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 0;
  width: min(42rem, 100%);
}

.books-film .bf-bridge article {
  padding: 1rem 1.1rem;
  border: 1px solid rgba(201, 148, 58, 0.22);
  border-radius: 1.25rem;
  background: rgba(8, 7, 5, 0.5);
  backdrop-filter: blur(8px);
  text-align: left;
}

.books-film .bf-bridge h3 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--film-cream);
}

.books-film .bf-bridge p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(243, 230, 200, 0.7);
}

.books-film .bf-eco {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.15rem;
}

.books-film .bf-eco a {
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(232, 176, 96, 0.88);
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(201, 148, 58, 0.3);
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease;
}

.books-film .bf-eco a:hover {
  background: rgba(201, 148, 58, 0.15);
  color: var(--film-cream);
}

@media (max-width: 900px) {
  .books-film .story-nav {
    display: none;
  }

  .books-film .hp-film--tall,
  .books-film .hp-film--tall .hp-film__inner,
  .books-film .hp-film--tall .bf-credits {
    min-height: min(92svh, 920px);
  }

  .books-film .bf-credits,
  .books-film .bf-credits--left,
  .books-film .bf-credits--right {
    padding-inline: 1.35rem;
    align-items: flex-start;
    text-align: left;
  }

  .books-film #haus .bf-credits--left,
  .books-film #ecosabil .bf-credits--left,
  .books-film #bauplan .bf-credits--right {
    padding-inline: 1.35rem;
  }

  .books-film .bf-credits--right > * {
    width: 100%;
  }

  .books-film .bf-cover {
    position: relative;
    right: auto;
    left: auto;
    bottom: auto;
    width: min(9.5rem, 42vw);
    margin: 1.35rem 0 0;
    pointer-events: auto;
  }

  .books-film #verlag .hp-actions {
    align-items: stretch;
  }

  .books-film #verlag .hp-actions .btn {
    min-width: 0;
    width: 100%;
  }

  .books-film #start .hp-actions {
    align-items: stretch;
  }

  .books-film #start .hp-actions .btn {
    min-width: 0;
    width: 100%;
  }

  .books-film .bf-bridge {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

html.hp-animate .books-film .hp-film .hp-film__inner > * {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.85s var(--film-ease),
    transform 0.85s var(--film-ease);
}

html.hp-animate .books-film .hp-film.is-visible .hp-film__inner > * {
  opacity: 1;
  transform: none;
}

html.hp-animate .books-film .hp-film.is-visible .hp-film__inner > *:nth-child(1) { transition-delay: 0.05s; }
html.hp-animate .books-film .hp-film.is-visible .hp-film__inner > *:nth-child(2) { transition-delay: 0.12s; }
html.hp-animate .books-film .hp-film.is-visible .hp-film__inner > *:nth-child(3) { transition-delay: 0.18s; }
html.hp-animate .books-film .hp-film.is-visible .hp-film__inner > *:nth-child(4) { transition-delay: 0.24s; }
html.hp-animate .books-film .hp-film.is-visible .hp-film__inner > *:nth-child(5) { transition-delay: 0.3s; }
html.hp-animate .books-film .hp-film.is-visible .hp-film__inner > *:nth-child(6) { transition-delay: 0.36s; }

html.hp-animate .books-film .bf-cover {
  opacity: 0;
  transform: translateY(1.25rem) scale(0.96);
  transition:
    opacity 0.9s var(--film-ease) 0.28s,
    transform 0.9s var(--film-ease) 0.28s;
}

html.hp-animate .books-film .hp-film.is-visible .bf-cover {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .books-film .hp-film .hp-film__inner > *,
  .books-film .bf-cover {
    opacity: 1 !important;
    transform: none !important;
  }
}