/* ==========================================================================
   page-werbespot.css · Leistung KI-Werbespot (/ki-werbevideo, /en/ai-commercial)
   Quelle: artifact-v3/assets/css/page-werbespot.css. Nur Komposition dieser Seite; Komponenten (Monitor, .proof,
   .sheet, .wcard, Making-of-Regler .ba, .acc-list, .rev-strip, .inq, Formular) stehen in site.css.
   Abschnitts-IDs DE und EN (umfang/scope, auftrag/client-work, ablauf/process, fragen/faq).
   Produktionsänderungen: Anfrage-Überschrift = site.css .inq-title („Ihr nächster Film beginnt hier.“ /
   „Your next film starts here.“) mit Kicker darüber (statt .ws-inq-h); zweiter Kosten-Link im Lieferumfang (.ws-umfang-links).
   Signatur: Style Frame → Shot mit echtem Klassenlotterie-Paar im Ablauf (K12 + M11). Hier keine weiteren Animationen,
   nur Zustandswechsel auf Hover (transform/opacity/color).
   ========================================================================== */

/* ---------- Hero: Text links, Monitor rechts (LCP = Monitor-Poster ab Frame 1) ---------- */
.ws-hero { padding-block: clamp(1.75rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3rem); }
.ws-hero-grid { display: grid; gap: clamp(2rem, 5vw, 2.5rem); align-items: center; }
@media (min-width: 1000px) {
  .ws-hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: clamp(2.5rem, 4vw, 4.5rem); }
}
.ws-hero-copy { display: grid; justify-items: start; }
.ws-hero-copy .slate { margin-bottom: 1.1rem; }
.page-hero .ws-h1 { font-size: clamp(2.1rem, 3.5vw, 3.25rem); max-width: 14.5em; }
.ws-h1-b { display: block; color: var(--muted); }
.ws-hero-copy .lead { margin-top: 1.15rem; max-width: 31em; }

/* Preisanker: Zahl groß, Netto-Zeile als Mono-Fußnote (einziges „netto zzgl. USt.“ nahe den Preisen) */
.ws-offer { display: grid; gap: 0.35rem; margin-top: 1.6rem; padding-left: 0.9rem; border-left: 2px solid var(--acc); }
.ws-price { display: flex; align-items: baseline; gap: 0.45rem; }
.ws-price .ab { font-size: var(--t-small); color: var(--muted); }
.ws-price b { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-net { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.ws-label { margin-top: 0.85rem; font-size: var(--t-small); }
.ws-label a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; color: var(--muted); text-decoration: none; transition: color var(--d-ui); }
.ws-label a::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--acc); flex: none; }
.ws-label a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--acc); text-underline-offset: 3px; }
.ws-hero-copy .hero-ctas { margin-top: 1.1rem; }
/* Konzept-Check (Entscheidung 3): eine Zeile unter dem Haupt-CTA, leiser als die Knöpfe */
.ws-kc { margin-top: 0.85rem; font-size: var(--t-small); }
.ws-kc .link { font-weight: 600; }

.ws-mon { align-self: center; }

/* ---------- Sprungleiste K8: Marker auf einem Timeline-Lineal ---------- */
.ws-jump { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.ws-jump ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .ws-jump ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Lineal je Eintrag: trägt die 2 × 2-Anordnung mobil und läuft am Desktop durch */
.ws-jump li { position: relative; border-top: 1px solid var(--line); }
.ws-jump li::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 7px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 14px);
}
.ws-jump a { position: relative; display: grid; gap: 0.15rem; align-content: start; min-height: 3.5rem; padding: 1rem 1rem 0.5rem 0; text-decoration: none; }
.ws-jump a::before {
  content: ""; position: absolute; left: 0; top: -1px; width: 0.7rem; height: 0.55rem;
  background: var(--acc); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0; transition: transform var(--d-ui) var(--ease-spring);
}
.ws-jump-tc { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.ws-jump-t { font-weight: 700; justify-self: start; background: linear-gradient(var(--acc), var(--acc)) 0 100% / 0 1.5px no-repeat; transition: background-size var(--d-enter) var(--ease-out); }
.ws-jump a:hover::before, .ws-jump a:focus-visible::before { transform: scale(1.35); }
.ws-jump a:hover .ws-jump-t, .ws-jump a:focus-visible .ws-jump-t { background-size: 100% 1.5px; }

/* ---------- Was Sie bekommen: Call-Sheet mit Kopfzeile ---------- */
#umfang .col .lead, #scope .col .lead { color: var(--muted); }
.ws-sheet { display: grid; gap: 0.7rem; min-width: 0; }
.ws-sheet-k { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ws-sheet-k span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; }
.ws-sheet-k span:first-child::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--rec); }
.ws-sheet .sheet dd { font-weight: 500; }
.ws-sheet-price dd b { font-weight: 900; letter-spacing: -0.01em; }
.ws-sheet-sub { display: block; margin-top: 0.3rem; font-weight: 400; font-size: var(--t-small); color: var(--muted); max-width: 30em; }
/* zwei Kosten-Links untereinander (Spalte 5/12, .link--wrap aus site.css): bricht der lange Link am Handy um,
   folgt der Unterstrich jeder Zeile */
.ws-umfang-links { display: grid; justify-items: start; gap: 0.35rem; }

/* ---------- Kundenprojekte ---------- */
#auftrag .sec-head, #client-work .sec-head { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.ws-links { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* ---------- Selbst generieren oder erstellen lassen? ---------- */
.ws-selbst-head { display: grid; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
@media (min-width: 1000px) { .ws-selbst-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: end; } }
.ws-claim { font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; max-width: 26em; }
.ws-trio { display: grid; border-top: 1px solid var(--ink); }
.ws-trio > div { display: grid; gap: 0.7rem; align-content: start; padding: 1.4rem 0 1.6rem; border-bottom: 1px solid var(--line); }
.ws-trio dt { font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 900; letter-spacing: -0.035em; line-height: 1; }
.ws-trio dd { color: var(--muted); max-width: 25em; }
.ws-trio dd b { color: var(--ink); font-weight: 700; }
@media (min-width: 860px) {
  .ws-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .ws-trio > div { padding: 1.6rem clamp(1.25rem, 2.5vw, 2.25rem) 1.75rem; border-bottom: 0; }
  .ws-trio > div + div { border-left: 1px solid var(--line); }
  .ws-trio > div:first-child { padding-left: 0; }
  .ws-trio > div:last-child { padding-right: 0; }
}
/* „Im Detail“ unter dem Trio (zweite Lesetiefe, N3/L9): Kennung links, Akkordeon rechts im Raster des Kopfs */
.ws-deep { display: grid; gap: 0.6rem; margin-top: clamp(2.5rem, 5vw, 3.75rem); }
@media (min-width: 1000px) { .ws-deep { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .ws-deep .slate { padding-top: 1.05rem; } }
.ws-deep .acc-body b { color: var(--ink); font-weight: 700; }
.ws-guide { display: grid; gap: 0.6rem; }
.ws-guide .h3 { margin-top: 1rem; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink); }
.ws-guide .h3:first-of-type { margin-top: 0.4rem; }
.ws-guide b { color: var(--ink); font-weight: 700; }
.ws-guide ul { display: grid; gap: 0.45rem; padding-left: 1.1rem; list-style: square; }
.ws-guide li::marker { color: var(--accent); }

/* ---------- Ablauf + Signatur „Storyboard → Shot“ ----------
   Unter der Bühne: Stufen 01–02 gestrichelt (Skizze), 03–04 durchgezogen in Phosphor (Shot).
   Im statischen 50-%-Split stehen sie genau unter ihrer Bildhälfte. */
#ablauf .sec-head, #process .sec-head { margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem); }
/* Making-of-Regler im Ablauf: am Desktop als Breitbild (beide Bilder gleich beschnitten, bleiben deckungsgleich) */
@media (min-width: 860px) { .ws-ba .ba-stage { aspect-ratio: 21 / 9; } .ws-ba .ba-stage img, .ws-ba .ba-stage video { object-position: 50% 42%; } }
.ws-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem clamp(0.75rem, 2vw, 1.5rem); margin-top: clamp(1.75rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .ws-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ws-steps li { display: grid; gap: 0.4rem; align-content: start; padding-top: 0.85rem; font-weight: 700; line-height: 1.3; border-top: 2px solid var(--acc); }
.ws-steps li:nth-child(-n + 2) { border-top: 2px dashed rgba(236, 231, 217, 0.45); }
.ws-step-n { font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.06em; color: var(--muted); }
.ws-steps li:nth-child(n + 3) .ws-step-n { color: var(--acc); }
.ws-ablauf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); padding-top: 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); }

/* ---------- Formate im Detail (Tiefe, Akkordeon): drei Kacheln + Social breit ---------- */
.ws-sum-meta { margin-left: auto; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.acc-list .ws-formats-body { max-width: none; padding: 0.75rem 0 2.25rem; color: var(--ink); }
.ws-formats-body .ws-formats { width: 100%; }
.ws-formats { display: grid; gap: clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .ws-formats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-fmt { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.35rem; border-top: 1px solid var(--ink); min-width: 0; }
.ws-fmt p { color: var(--muted); max-width: 27em; }
.ws-glyph { width: 5.25rem; height: auto; margin-bottom: 0.5rem; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; overflow: visible; }
.ws-glyph .ws-g-acc { stroke: var(--accent); }
.ws-glyph .ws-g-fill { fill: var(--accent); stroke: none; }

.ws-fmt--social { grid-column: 1 / -1; gap: 2rem; padding-top: clamp(1.75rem, 3vw, 2.25rem); }
@media (min-width: 860px) { .ws-fmt--social { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: clamp(2rem, 5vw, 5rem); } }
.ws-social-copy { display: grid; gap: 0.75rem; align-content: start; }
.ws-social-copy .h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.ws-fmt .ws-clip-price { color: var(--ink); font-weight: 700; padding-top: 0.6rem; border-top: 1px solid var(--line); max-width: none; }

/* Hochformat-Endbild + Formate als Mono-Chips (keine leeren Rahmen) */
.ws-cuts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: end; margin: 0; }
@media (min-width: 860px) { .ws-cuts { justify-self: end; } }
.ws-cut { position: relative; display: block; }
.ws-cut--916 { width: clamp(7.25rem, 13vw, 10rem); aspect-ratio: 9 / 16; overflow: hidden; background: var(--coal); }
.ws-cut--916 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-cut--916 .tag--ai { left: 0.4rem; top: 0.4rem; font-size: 0.58rem; }
.ws-cut-cap { display: grid; gap: 0.6rem; align-content: end; font-size: var(--t-small); color: var(--muted); }
.ws-cut-k { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ws-cut-fmts { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.72rem; }
.ws-cut-fmts b, .ws-cut-fmts i { font-style: normal; font-weight: 500; padding: 0.3rem 0.5rem; border: 1px solid var(--line); }
.ws-cut-fmts b { border-color: var(--ink); color: var(--ink); }

/* ---------- Kennzeichnung (K6): Prüfliste vor Produktionsstart ---------- */
@media (min-width: 900px) { .ws-stick { position: sticky; top: calc(var(--head-h) + 2rem); align-self: start; } }
.ws-kennz { min-width: 0; }
.ws-check { border-top: 1px solid var(--ink); }
.ws-check > div { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.2rem 0.9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.ws-check > div::before {
  content: ""; grid-row: span 2; width: 0.75rem; height: 0.42rem; margin-top: 0.42rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.ws-check dt { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.ws-check dd { min-width: 0; max-width: 36em; }
@media (min-width: 700px) {
  .ws-check > div { grid-template-columns: 1.4rem minmax(8.5rem, 2fr) 5fr; }
  .ws-check > div::before { grid-row: auto; }
}
.ws-legal { margin-top: 1rem; font-size: var(--t-small); color: var(--muted); max-width: 40em; }
/* Quellen zur Kennzeichnung (N7/GEO-11): Primärquelle + WKO, als Zeile unter dem Rechtshinweis */
.ws-src { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0 1rem; margin-top: 0.6rem; font-size: var(--t-small); color: var(--muted); max-width: 40em; }
.ws-src-k { grid-row: 1 / span 2; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ws-src .tlink { grid-column: 2; justify-self: start; padding-block: 0.35rem; line-height: 1.5; }
.ws-praxis { margin-top: 1.75rem; }

/* ---------- FAQ + Autorenzeile (E-E-A-T, wie Kostenseite .pp-author) ---------- */
#fragen .split, #faq .split { align-items: start; }
.ws-author { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--muted); max-width: 24rem; }
.ws-author-img { position: relative; width: 4rem; aspect-ratio: 4 / 5; overflow: hidden; background: #070f0e; }
.ws-author-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.ws-author-copy { display: grid; gap: 0.35rem; justify-items: start; }
.ws-author b { color: var(--ink); font-weight: 700; }
.ws-author .link { min-height: 2.5rem; font-size: 0.92rem; }
@media (max-width: 899px) {
  #fragen .col, #faq .col { display: contents; }
  #fragen .acc-list, #faq .acc-list { order: 1; }
  .ws-author { order: 2; margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ---------- Anfrage: Klappe, Kicker, .inq-title (site.css) ---------- */
.inq-main { display: grid; align-content: start; }