/* ==========================================================================
   page-filmproduktion.css · /ki-filmproduktion und /en/ai-film-production
   Nur Komposition dieser Seiten. Komponenten (Monitor, .proof, .wcard, .sheet,
   .acc-list, .revs, .inq, Formular) kommen aus site.css.
   Signatur: Playhead durch den Ablauf (M10), hier als eigene Spur .pf mit
   Scrubber-Knopf, synchron zu einer Leselinie bei 60 % der Viewport-Höhe.
   Reines CSS (Scroll-Timeline), kein Skript. Nur transform/opacity,
   Reduced Motion und ohne Scroll-Timeline = statisch voll.
   ========================================================================== */

/* ---------- Hero: Text links, Monitor rechts ---------- */
.fp-hero { padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2.25rem, 4.5vw, 3.5rem); }
.fp-hero .crumbs { margin-bottom: clamp(0.75rem, 2.5vw, 2rem); }
.fp-hero-grid { display: grid; gap: 2.25rem; align-items: center; }
@media (min-width: 1000px) { .fp-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2.5rem, 4.5vw, 4.5rem); } }
.fp-hero-copy { display: grid; justify-items: start; min-width: 0; }
.fp-hero .slate { margin-bottom: 1.1rem; }
.fp-hero .h1 { font-size: clamp(2.15rem, 3.7vw, 3.35rem); max-width: 15em; }
.fp-hero .lead { margin-top: 1.25rem; max-width: 31em; }

/* Preisanker: zwei Spalten mit Haarlinie, Ziffern groß */
.fp-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2rem); width: 100%; max-width: 30rem; margin-top: clamp(1.5rem, 3vw, 2rem); }
.fp-rate { display: grid; gap: 0.3rem; align-content: space-between; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.fp-rate:first-child { border-top-color: var(--accent); }
.fp-rate span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); line-height: 1.35; }
.fp-rate b { font-size: clamp(1.55rem, 2.3vw, 2.05rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-net { margin-top: 0.8rem; font-size: var(--t-small); color: var(--muted); }
.fp-kenn-note { margin-top: 0.35rem; font-size: var(--t-small); color: var(--muted); max-width: 34em; }
.fp-hero .hero-ctas { margin-top: clamp(1.5rem, 3vw, 2rem); }
/* Konzept-Check: eine Zeile unter dem Haupt-CTA (Entscheidung 3), ruhig, ohne zweiten Knopf */
.fp-check { margin-top: 0.9rem; font-size: var(--t-small); line-height: 1.5; max-width: 34em; }
.fp-check .tlink { display: inline-block; padding-block: 0.3rem; font-weight: 600; }
.fp-nw { white-space: nowrap; }

/* Sprungleiste K8 (Szenen-Leiste): ruhig, nicht klebend; je Szene Titel + eine Zeile Eckdaten */
.scenes { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line); }
.scenes ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
@media (min-width: 700px) { .scenes ol { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; } }
.scenes a {
  position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 3.75rem; padding-block: 0.6rem;
  text-decoration: none; color: var(--ink);
}
.scenes-t { display: grid; gap: 0.15rem; font-weight: 700; line-height: 1.2; }
.scenes-m { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.02em; color: var(--muted); font-variant-numeric: tabular-nums; }
.scenes .arr { margin-left: auto; font-weight: 400; color: var(--muted); transition: transform var(--d-ui) var(--ease-out), color var(--d-ui); }
.scenes a::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--acc);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-enter) var(--ease-out);
}
.scenes a:hover::before, .scenes a:focus-visible::before { transform: none; }
.scenes a:hover .arr, .scenes a:focus-visible .arr { transform: translateY(2px); color: var(--acc); }
@media (max-width: 699px) { .scenes li:nth-child(n+3) a { border-top: 1px solid var(--line-soft); } }

/* ---------- 01 Technikfilm (Sand): Call-Sheet links, Kundenfall rechts ---------- */
.fp-tech { display: grid; gap: clamp(3rem, 6vw, 4rem); }
@media (min-width: 1000px) {
  .fp-tech { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 5vw, 5.5rem); align-items: start; }
  .fp-case { position: sticky; top: calc(var(--head-h) + 2rem); }
}
.fp-tech-main { display: grid; gap: 1.25rem; justify-items: start; min-width: 0; }
.fp-tech-main .lead { color: var(--ink); }
.fp-sheet-top {
  display: flex; justify-content: space-between; gap: 1rem; width: 100%; margin-top: 0.75rem; padding: 0.55rem 0;
  border-top: 2px solid var(--ink);
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.fp-sheet { width: 100%; border-top-color: var(--line); }
.fp-sheet .is-price dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.fp-sheet .is-price b { font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fp-tech-main > .btn { margin-top: 0.5rem; }
/* DE: Teaser ohne Call Sheet (die Tiefe steht auf /ki-erklaerfilm): Preiszeile wie die Preis-Zeile des Call Sheets */
.fp-tech-price {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; width: 100%;
  margin-top: 0.5rem; padding-top: 0.9rem; border-top: 2px solid var(--ink);
}
.fp-tech-price b { font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
/* DE: Weg zur Seite /ki-erklaerfilm + Direktanfrage nebeneinander, am Handy untereinander */
.fp-tech-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 0.5rem; }
.fp-deep { display: grid; gap: 0.6rem; width: 100%; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.fp-case { display: grid; gap: 1.1rem; min-width: 0; }
.fp-case-note { padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--t-small); max-width: 34em; }

/* ---------- 02 Agenturen (dunkel) ---------- */
.fp-ag { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 1000px) { .fp-ag { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 5vw, 5.5rem); align-items: start; } }
.fp-ag-head { display: grid; justify-items: start; }
.fp-ag-head .lead { margin-top: 1.1rem; color: var(--muted); }
.fp-ag-body { display: grid; gap: 1.25rem; justify-items: start; }
.fp-ag-list { width: 100%; border-top: 1px solid var(--line); }
.fp-ag-list li {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35;
}
.fp-ag-list li::before { content: ""; width: 1.25rem; height: 2px; background: var(--accent); transform: translateY(-0.3em); }
.fp-ag-note { color: var(--muted); }

/* ---------- 03 Ablauf mit Playhead (Signatur) ---------- */
.fp-flow-head { display: grid; justify-items: start; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.fp-flow-grid { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 1000px) {
  .fp-flow-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .fp-sf { position: sticky; top: calc(var(--head-h) + 2rem); }
}

/* Spur: Haarlinie + Phosphor-Füllung (scaleY) + Scrubber-Knopf (translateY), beide auf derselben Leselinie */
.pf { position: relative; padding-left: 2.75rem; }
.pf-track { position: absolute; left: 0; top: 0.35rem; bottom: 0; width: 1rem; pointer-events: none; }
.pf-track::before { content: ""; position: absolute; left: calc(50% - 0.5px); top: 0; bottom: 0; width: 1px; background: var(--line); }
.pf-fill { position: absolute; left: calc(50% - 1px); top: 0; bottom: 0; width: 2px; background: var(--accent); transform-origin: 50% 0; box-shadow: 0 0 10px rgba(60, 232, 130, 0.45); }
[data-block="sand"] .pf-fill { box-shadow: none; }
.pf-knob { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.pf-knob::before {
  content: ""; position: absolute; left: 50%; top: 0; width: 0.85rem; height: 0.85rem; translate: -50% -50%;
  border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 4px rgba(60, 232, 130, 0.16), 0 0 18px rgba(60, 232, 130, 0.65);
}
.pf-knob::after {
  content: ""; position: absolute; left: 50%; top: -1px; width: 2.25rem; height: 2px; background: linear-gradient(90deg, var(--acc), rgba(60, 232, 130, 0));
}

.pf-steps { display: grid; }
.pf-step { position: relative; display: grid; gap: 0.45rem; align-content: start; padding: 0 0 clamp(1.75rem, 3.5vw, 2.5rem); }
.pf-step + .pf-step { padding-top: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line-soft); }
.pf-step:last-child { padding-bottom: 0.25rem; }
/* Knoten auf der Spur */
.pf-step::before {
  content: ""; position: absolute; left: calc(-2.75rem + 0.5rem - 0.3125rem); top: 0.45rem; width: 0.625rem; height: 0.625rem;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--accent);
}
.pf-step + .pf-step::before { top: calc(clamp(1.25rem, 2.5vw, 1.75rem) + 0.45rem); }
.pf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
.pf-n { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pf-key {
  display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.pf-key::before { content: ""; width: 0.45rem; height: 0.45rem; background: var(--accent); transform: rotate(45deg); }
.pf-step .h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); }
.pf-step p { color: var(--muted); max-width: 32em; }

/* Scroll-getrieben (Chrome, Safari 26+): Leselinie bei 60 % der Viewport-Höhe.
   cover 40vh = Oberkante erreicht die Linie · cover calc(100% - 60vh) = Unterkante erreicht sie. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .pf { view-timeline: --pf block; }
    .pf-step { view-timeline: --pfs block; }
    .pf-fill { animation: pf-fill linear both; animation-timeline: --pf; animation-range: cover 40vh cover calc(100% - 60vh); }
    .pf-knob { opacity: 1; animation: pf-knob linear both; animation-timeline: --pf; animation-range: cover 40vh cover calc(100% - 60vh); }
    .pf-step::before { animation: pf-node linear both; animation-timeline: --pfs; animation-range: cover calc(40vh - 2px) cover calc(40vh + 2.5rem); }
    .pf-step .pf-n, .pf-step .pf-key::before { animation: pf-lit linear both; animation-timeline: --pfs; animation-range: cover calc(40vh - 2px) cover calc(40vh + 2.5rem); }
  }
}
@keyframes pf-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pf-knob { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes pf-node { from { opacity: 0.35; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes pf-lit { from { opacity: 0.3; } to { opacity: 1; } }

/* Band „Vom Style Frame zum Shot“ (Loop-Figur mit Sucherecken) */
.fp-sf .loopfig { border: 1px solid var(--line); }
.fp-sf .finder { inset: 6% 3.5%; }
.fp-sf .finder i { width: 1.1rem; height: 1.1rem; }
.fp-kenn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.1rem; border-top: 1px solid var(--line-soft); color: var(--muted); }
.fp-kenn .link { min-height: 2.75rem; }

/* ---------- Tiefe: Warum ein Filmemacher (kompaktes Band) ---------- */
.sec.fp-why, .sec[data-block="dark"] + .sec.fp-why { padding-block: clamp(2rem, 4vw, 3rem); }
.fp-why .acc-list { border-top: 0; }
.fp-why .acc-list details { border-bottom: 0; }
.fp-why summary { justify-content: flex-start; gap: 1.1rem; min-height: 4.5rem; }
.fp-why summary::after { margin-left: auto; }
.fp-face { position: relative; flex: none; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: 50%; background: var(--petrol-3); box-shadow: 0 0 0 1px var(--line); }
.fp-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.fp-why .acc-body { padding-left: calc(3.5rem + 1.1rem); max-width: calc(40em + 4.6rem); }
@media (max-width: 599px) { .fp-why .acc-body { padding-left: 0; } .fp-face { width: 2.75rem; height: 2.75rem; } }
.fp-why .acc-list details + details { border-top: 1px solid var(--line); }
/* Möglichkeiten der KI-Videoproduktion: vier kurze Punkte, 2 × 2 */
.fp-why .acc-body.fp-poss { padding: 0.5rem 0 2rem; max-width: none; display: grid; gap: 1.25rem 2.5rem; }
@media (min-width: 760px) { .fp-why .acc-body.fp-poss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-poss > div { display: grid; gap: 0.35rem; align-content: start; padding-top: 0.9rem; border-top: 1px solid var(--line-soft); }
.fp-poss .h3 { font-size: clamp(1.05rem, 1.3vw, 1.2rem); color: var(--ink); }
.fp-ag-note b { color: var(--ink); }

/* ---------- Preise im Überblick (Sand) ---------- */
.fp-price { display: grid; gap: clamp(2rem, 4vw, 2.5rem); }
@media (min-width: 1000px) { .fp-price { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(3rem, 5vw, 5.5rem); align-items: start; } }
.fp-price-head { display: grid; gap: 1rem; justify-items: start; }
.fp-price-meta { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); }
.fp-ratecard { border-top: 2px solid var(--ink); }
.fp-ratecard > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t p" "d p";
  gap: 0.2rem 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.fp-ratecard dt { grid-area: t; font-weight: 800; font-size: clamp(1.1rem, 1.5vw, 1.3rem); letter-spacing: -0.01em; line-height: 1.2; }
.fp-ratecard .rc-d { grid-area: d; color: var(--muted); font-size: var(--t-small); }
.fp-ratecard .rc-p { grid-area: p; justify-self: end; text-align: right; }
.fp-ratecard .rc-p b { font-size: clamp(1.6rem, 2.6vw, 2.35rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fp-ratecard .rc-p b.req { font-size: clamp(1.05rem, 1.5vw, 1.3rem); letter-spacing: -0.01em; white-space: normal; }
@media (max-width: 519px) {
  .fp-ratecard > div { grid-template-areas: "t" "p" "d"; grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .fp-ratecard .rc-p { justify-self: start; text-align: left; }
}

/* ---------- Fragen (dunkel): Kopf klebt links ---------- */
.fp-faq .split { align-items: start; }
.fp-faq .col .link { white-space: normal; line-height: 1.35; }
/* Weiterführende Links unter der FAQ-Überschrift (Werbung, Beispiele, Tool-Stack) */
.fp-more { display: grid; gap: 0.55rem; }
@media (min-width: 900px) { .fp-faq .col { position: sticky; top: calc(var(--head-h) + 2rem); } }

/* ---------- Stimmen + Querverweis Filmspektakel ---------- */
.fp-classic { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); }
.fp-classic .q { font-size: var(--t-h3); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; }

/* ---------- Anfrage: Klappe + Kicker über dem Modul ---------- */
.inq-main { display: grid; align-content: start; }
.inq-head .slate { margin-bottom: -0.15rem; }