/* Startseite · wie-wir-arbeiten (Owner: wdf-section-builder, Auftrag P7-home-50) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Mobil zuerst, Erweiterungen mit min-width.
   Aus base.css kommen: .abschnitt, .kapitel-kopf, .eyebrow(--hell), .heading-3, .nutzen-tag, .nutzen(--fortschritt), .chip, .stempel(--warm),
   .live, .app-karte/.app-kopf/.app-titel/.app-meta, .zeilen, .person(--ohne-linie), .entscheidung, .vereinfacht, .szene/.szene-bild/.szene-ui.
   Hier: Raster, Stationen und die Stations-Inhalte der App-Karten (Kundenmanager, Pflichtenheft, Agenten-Kette, Monatskacheln, Bildschirme).
   Grundzustand im CSS = Endzustand der Bewegung (alle Agenten durchlaufen, Pflichtenheft freigegeben), damit ohne Bewegung alles lesbar ist.
   cqi-Werte zeichnen den Kundenmanager im Maß des Bildes (wie die Beispiel-Website, erlaubt laut tokens.css).
   Fünf Maße stehen als Token-Verweis mit Prototyp-Wert als Rückfall, bis tokens.css sie führt (Anfrage P7-home-50):
   --size-stage-card, --size-stage-card-doc, --size-stage-card-chain, --size-stage-doc-h(-md/-sm). */

/* ---------- Raster und Stationen ---------- */
.ablauf-raster { display: grid; gap: var(--space-48); margin-top: var(--space-64); }
.stationen { position: relative; display: grid; gap: var(--space-64); }
.station { position: relative; display: grid; gap: var(--space-12); align-content: start; min-width: 0; }
.station > p:not(.eyebrow) { max-width: 46ch; color: var(--color-text-secondary); text-wrap: pretty; }
.station > .nutzen-tag { margin-top: var(--space-4); }
.station .szene-inline { margin-top: var(--space-16); }

/* Nutzen-Leiste: statisch als Liste unter den Stationen, im Film auf der Bühne */
.nutzen-liste { margin-top: var(--space-24); }
.ablauf-bild { display: none; }

/* ---------- Monatskacheln (Jour fixe) ---------- */
.monate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.monat { display: grid; gap: var(--space-6); padding: var(--space-9) var(--space-10); border-radius: var(--radius-md); background: var(--color-fill-subtle); box-shadow: var(--ring-tile); }
.monat .mono { font-size: var(--font-size-mono-2xs); color: var(--color-text-tertiary); }
.monat .punktreihe { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-3); }
.monat .punktreihe i { aspect-ratio: 1; border-radius: var(--radius-hairline); background: var(--color-fill-track); }
.monat .punktreihe i.jf { background: var(--color-accent); box-shadow: var(--glow-calendar); }

/* ---------- Kundenmanager, vereinfacht gezeichnet (austauschbar gegen echte Screenshots), vor der Milchglas-Fläche im Bild ---------- */
.km {
  position: absolute; left: 8%; right: 8%; top: 15%; bottom: 9%;
  display: grid; grid-template-columns: 23% minmax(0, 1fr); overflow: hidden; border-radius: 1.6cqi;
  background: var(--color-app-solid); color: var(--color-text); font-size: 1.75cqi; line-height: var(--leading-snug);
  box-shadow: var(--shadow-app-window);
}
.km-seite { display: grid; align-content: start; gap: 1.2cqi; padding: 2.4cqi 1.8cqi; background: var(--color-app-side); border-right: 1px solid var(--color-line); }
.km-seite .wdg {
  display: flex; align-items: center; gap: .8cqi; margin-bottom: 1.2cqi; white-space: nowrap;
  font: var(--font-weight-medium) 1.2cqi / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono-tight); text-transform: uppercase; color: var(--color-text-tertiary);
}
.km-seite .wdg img { width: 2.6cqi; height: auto; }
.km-seite span { display: flex; align-items: center; gap: .9cqi; padding: .8cqi 1cqi; border-radius: .8cqi; color: var(--color-text-secondary); }
.km-seite span svg { width: 1.9cqi; height: 1.9cqi; color: var(--color-text-tertiary); }
.km-seite span.an { background: var(--color-accent-a12); color: var(--color-text); }
.km-seite span.an svg { color: var(--color-accent); }
.km-haupt { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 1.6cqi; padding: 2.4cqi 2.6cqi; min-width: 0; }
.km-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqi; }
.km-kopf b { font: var(--font-weight-display) 2.3cqi / var(--leading-mono) var(--font-display); letter-spacing: var(--tracking-title); }
.km-kopf span { font: var(--font-weight-medium) 1.35cqi / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-accent-soft); }
.km-etappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqi; }
.km-etappen i { height: .6cqi; border-radius: 1cqi; background: var(--color-fill-step); }
.km-etappen i.f { background: var(--color-accent); }
.km-etappen i.h { background: linear-gradient(90deg, var(--color-accent) 55%, var(--color-fill-step) 55%); }
.km-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2cqi; min-height: 0; }
.km-spalte { display: grid; align-content: start; gap: 1cqi; padding: 1.2cqi; border-radius: 1.2cqi; background: var(--color-fill-column); box-shadow: var(--ring-column); }
.km-spalte > .mono { font-size: 1.3cqi; color: var(--color-text-tertiary); }
.km .ticket { position: relative; padding: 1.1cqi 1.2cqi; border-radius: .9cqi; background: var(--color-app-ticket); box-shadow: var(--ring-ticket); font-size: 1.7cqi; line-height: var(--leading-snug); color: var(--color-text); }
.km .ticket small {
  display: block; margin-top: .5cqi;
  font: var(--font-weight-medium) 1.25cqi / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono-tag); text-transform: uppercase; color: var(--color-text-tertiary);
}
.km .ticket.aktiv { box-shadow: var(--ring-ticket-active); }

/* ---------- Start: die Beispiel-Website auf Laptop und Telefon im Studio-Bild (Bildschirme vermessen, Prozent des 1376 : 768-Rahmens) ---------- */
.schirm { position: absolute; overflow: hidden; background: var(--color-device-screen); }
.schirm img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.schirm--laptop { left: 44.53%; top: 31.8%; width: 30.53%; height: 33.59%; border-radius: .3cqi; }
.schirm--telefon { left: 83.85%; top: 40.67%; width: 7.23%; height: 29.04%; border-radius: 1cqi; }

/* ---------- Agentisches Framework: Bernd, darunter die Kette der sieben Agenten (mobil senkrecht, ab 1024 px waagrecht).
   Lichtpunkt .k-lauf in CI-Blau (Film), Bernstein nur am Auditor und im Stempel. ---------- */
.kette-chef .chef-bild { position: relative; flex: none; width: var(--size-person); height: var(--size-person); }
.kette-chef .chef-bild img { display: block; }
.kette-chef .chef-ring { position: absolute; inset: calc(-1 * var(--space-4)); border-radius: var(--radius-round); box-shadow: var(--ring-lead); }
.kette { position: relative; padding-top: var(--space-12); border-top: 1px solid var(--color-line); }
.kette-reihe { position: relative; display: grid; grid-auto-rows: 1fr; }
.kette-reihe li { position: relative; display: flex; align-items: center; gap: var(--space-12); padding: var(--space-5) 0; min-width: 0; }
.kette-reihe li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(var(--size-chain-icon) / 2); top: calc(50% + var(--size-chain-icon) / 2);
  width: 1px; height: calc(100% - var(--size-chain-icon)); background: var(--color-line-strong);
}
.k-ico {
  position: relative; z-index: var(--z-raised); flex: none; display: grid; place-items: center;
  width: var(--size-chain-icon); height: var(--size-chain-icon); border-radius: var(--radius-round);
  background: var(--color-surface-2); box-shadow: var(--ring-hairline); color: var(--color-text-secondary);
}
.k-ico svg { position: relative; z-index: var(--z-content); width: var(--size-icon-sm); height: var(--size-icon-sm); }
.k-an { position: absolute; inset: 0; border-radius: var(--radius-round); background: var(--color-accent-a16); box-shadow: var(--ring-chain-on); opacity: .42; }
.k-auditor .k-an { background: var(--color-warm-a14); box-shadow: var(--ring-chain-auditor); opacity: 1; }
.k-ok {
  position: absolute; z-index: var(--z-raised); right: calc(-1 * var(--space-5)); bottom: calc(-1 * var(--space-4));
  display: grid; place-items: center; width: var(--size-icon-sm); height: var(--size-icon-sm); border-radius: var(--radius-round);
  background: var(--color-warm); color: var(--color-on-warm); box-shadow: var(--ring-cutout);
}
.k-ok svg { width: var(--space-9); height: var(--space-9); }
.k-txt { display: grid; gap: var(--space-1); min-width: 0; line-height: var(--leading-title); }
.k-txt b { font-size: var(--font-size-ui-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }
.k-txt small { font-size: var(--font-size-micro); color: var(--color-text-tertiary); }
.k-lauf {
  position: absolute; z-index: var(--z-content); left: 0; top: var(--space-12); display: grid; place-items: center;
  width: var(--size-chain-icon); height: calc((100% - var(--space-12)) / 7); pointer-events: none; opacity: 0;
}
.k-lauf i { width: var(--space-9); height: var(--space-9); border-radius: var(--radius-round); background: var(--color-runner-core); box-shadow: var(--glow-runner); }

/* ---------- Pflichtenheft: digital im Kundenmanager, mit eigenem Agenten. Endzustand: Frage, Antwort, eingearbeiteter Punkt,
   „Freigegeben“, PDF („In Abstimmung“ und Tipp-Punkte liegen unsichtbar bereit). Mobil Dokument über Dialog, ab 1024 px nebeneinander. ---------- */
.ph-karte { gap: var(--space-14); }
.ph-titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-10) var(--space-16); }
.ph-status { display: grid; }
.ph-st {
  grid-area: 1 / 1; justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-6) var(--space-11); border-radius: var(--radius-status);
  font-size: var(--font-size-small); line-height: var(--leading-snug); font-weight: var(--font-weight-medium);
}
.ph-st--offen { align-self: center; background: var(--color-accent-a10); box-shadow: var(--ring-status); color: var(--color-accent-soft); opacity: 0; visibility: hidden; }
.ph-st--offen i { flex: none; width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-accent); box-shadow: var(--glow-status); }
.ph-st--frei { background: var(--color-warm-a10); box-shadow: var(--ring-stamp-warm); color: var(--color-warm-soft); }
.ph-st--frei svg { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-warm); }
.ph-inhalt { display: grid; gap: var(--space-14); }
.ph-doc { display: grid; gap: var(--space-2); }
.ph-doc li {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-10); padding: var(--space-5) var(--space-8); border-radius: var(--radius-status);
  font-size: var(--font-size-small); line-height: var(--leading-ui); color: var(--color-text-secondary);
}
.ph-nr {
  flex: none; display: grid; place-items: center; width: var(--space-20); height: var(--space-20); margin-top: calc(-1 * var(--space-1));
  border-radius: var(--radius-sm); background: var(--color-surface-2); box-shadow: var(--ring-hairline);
  font: var(--font-weight-medium) var(--font-size-mono) / var(--leading-none) var(--font-mono); color: var(--color-text-tertiary);
}
.ph-neu { background: var(--color-accent-a10); box-shadow: var(--ring-stamp); }
.ph-neu .ph-nr { background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; }
.ph-neu-txt { display: grid; gap: var(--space-3); color: var(--color-text); }
.ph-neu-txt small { display: inline-flex; align-items: center; gap: var(--space-6); font-size: var(--font-size-small); color: var(--color-accent-soft); }
.ph-neu-txt small svg { width: var(--space-14); height: var(--space-14); color: var(--color-accent); }
.ph-glanz { position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--ring-highlight); opacity: 0; pointer-events: none; }
.ph-chat { display: grid; gap: var(--space-8); align-content: start; padding-top: var(--space-12); border-top: 1px solid var(--color-line); }
.ph-chat-kopf {
  display: flex; align-items: center; gap: var(--space-8);
  font: var(--font-weight-medium) var(--font-size-mono-sm) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-tertiary);
}
.ph-agent { flex: none; display: grid; place-items: center; width: var(--size-icon-lg); height: var(--size-icon-lg); border-radius: var(--radius-round); background: var(--color-accent-a10); box-shadow: var(--ring-agent); color: var(--color-accent); }
.ph-agent svg { width: var(--size-icon-xs); height: var(--size-icon-xs); }
.ph-msg { max-width: 88%; padding: var(--space-8) var(--space-12); border-radius: var(--radius-lg); font-size: var(--font-size-small); line-height: var(--leading-ui); color: var(--color-text); text-wrap: pretty; }
.ph-msg--sie { justify-self: end; background: var(--color-surface-3); border-bottom-right-radius: var(--radius-focus); }
.ph-msg--agent { justify-self: start; max-width: 100%; background: var(--color-accent-a14); box-shadow: var(--ring-bubble); border-bottom-left-radius: var(--radius-focus); }
.ph-slot { position: relative; display: grid; justify-items: start; max-width: 88%; }
.ph-tippt {
  position: absolute; left: 0; top: 0; display: flex; gap: var(--space-4); padding: var(--space-13) var(--space-14);
  border-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-focus); background: var(--color-accent-a14); box-shadow: var(--ring-bubble);
  opacity: 0; visibility: hidden;
}
.ph-tippt i { width: var(--space-6); height: var(--space-6); border-radius: var(--radius-round); background: var(--color-accent-soft); }
.ph-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--color-line); }
.ph-pdf {
  display: inline-flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-10); border-radius: var(--radius-stamp); box-shadow: var(--ring-hairline);
  font: var(--font-weight-medium) var(--font-size-mono) / var(--leading-none) var(--font-mono); letter-spacing: var(--tracking-mono); color: var(--color-text);
}
.ph-pdf svg { width: var(--space-14); height: var(--space-14); color: var(--color-accent); }
.ph-hinweis { font: var(--font-weight-medium) var(--font-size-mono-xs) / var(--leading-mono) var(--font-mono); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--color-text-tertiary); text-align: right; }

/* ==========================================================================
   Ab 1024 px: Szenen im Bühnen-Format (gilt für die Stationsszenen der statischen Fassung
   und für die Bühne im Film; sichtbar ist jeweils nur eine der beiden)
   ========================================================================== */
@media (min-width: 1024px) {
  .ablauf .szene-ui { width: min(var(--size-stage-card, 400px), 58%); max-width: none; margin: calc(-1 * var(--space-96)) 0 0 var(--space-32); }

  /* Agenten-Kette waagrecht, breitere Karte, nur die Namen */
  .ablauf .szene--agenten .szene-ui { width: min(var(--size-stage-card-chain, 620px), calc(100% - var(--space-32))); }
  .ablauf .kette-reihe { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .ablauf .kette-reihe li { flex-direction: column; gap: var(--space-8); padding: 0; text-align: center; }
  .ablauf .kette-reihe li:not(:last-child)::after { left: calc(50% + var(--size-chain-icon) / 2); top: calc(var(--size-chain-icon) / 2); width: calc(100% - var(--size-chain-icon)); height: 1px; }
  .ablauf .k-txt small { display: none; }
  .ablauf .k-txt b { font-size: var(--font-size-micro); white-space: nowrap; }
  .ablauf .k-lauf { width: calc(100% / 7); height: var(--size-chain-icon); }

  /* Pflichtenheft: Dokument und Dialog nebeneinander */
  .ablauf .szene--pflichtenheft .szene-ui { width: min(var(--size-stage-card-doc-wide, 660px), calc(100% - var(--space-32))); }
  .ablauf .ph-karte { gap: var(--space-12); }
  .ablauf .ph-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  .ablauf .ph-chat { padding: 0 0 0 var(--space-16); border-top: 0; border-left: 1px solid var(--color-line); }
  .ablauf .ph-doc li { padding: var(--space-4) var(--space-8); }
  .ablauf .ph-fuss { padding-top: var(--space-10); }

  /* Statische Fassung: jede Station als Zeile, Text links (vertikal mittig zur Szene), Szene rechts – Raster 4 : 7 wie die Bühne */
  :root:not(.film) .stationen { gap: var(--space-96); }
  :root:not(.film) .station {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: minmax(0, 1fr) repeat(4, auto) minmax(0, 1fr);
    column-gap: var(--gap-story2); align-content: stretch;
  }
  :root:not(.film) .station > * { grid-column: 1; }
  :root:not(.film) .station > .eyebrow { grid-row: 2; }
  :root:not(.film) .station > h3 { grid-row: 3; }
  :root:not(.film) .station > p:not(.eyebrow) { grid-row: 4; }
  :root:not(.film) .station > .nutzen-tag { grid-row: 5; }
  :root:not(.film) .station > .szene-inline { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
  :root:not(.film) .nutzen-liste { margin-top: var(--space-64); }

  /* Film (P8 animiert): Bühne läuft mitlaufend rechts, Stationen links (je ≥ 56 vh, Pflichtenheft ≥ 80 vh für die Schritte a–d) */
  .film .ablauf-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--gap-story2); align-items: start; }
  .film .stationen { gap: var(--space-64); }
  .film .station { min-height: 56vh; align-content: center; }
  .film .station[data-i="1"] { min-height: 80vh; }
  .film .station .szene-inline { display: none; }
  .film .nutzen-liste { display: none; }
  /* Live-Fix 12.11.: Chips nicht mehr absolut über der Bühne (bei zwei Chip-Zeilen, z. B. iPad quer, lagen sie auf der Karte),
     sondern als eigene Zeile darunter; die Bühne nimmt den Rest der Höhe. */
  .film .ablauf-bild { display: flex; flex-direction: column; gap: var(--space-16); position: sticky; top: calc(var(--kopf-h) + 4vh); height: calc(100svh - var(--kopf-h) - 8vh); }
  .ablauf-buehne { position: relative; flex: 1 1 auto; min-height: 0; }
  .ablauf-buehne .szene { position: absolute; inset: 0; align-content: center; }
  .ablauf-bild .nutzen { position: static; flex: none; justify-content: center; }
  /* Bild + Karte (Höhe --ph-h, 96 px Überlappung) müssen in die Bühne passen: auf niedrigen Bildschirmen wird nur das Bild schmaler (rechtsbündig) */
  .ablauf-buehne .szene--pflichtenheft { --ph-h: var(--size-stage-doc-h, 400px); }
  .ablauf-buehne .szene--pflichtenheft .szene-bild {
    justify-self: end;
    width: min(100%, calc((100svh - var(--kopf-h) - 8vh - var(--space-64) - var(--ph-h) + var(--space-96) - var(--space-14)) * 16 / 9));
  }
}

/* 1024–1279 px: Pflichtenheft-Karte kompakter (PDF neben dem Status, „Darstellung vereinfacht“ in die Kopfzeile, keine Fußzeile, kurze Agenten-Überschrift) */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .ablauf .ph-karte { grid-template-columns: minmax(0, 1fr) auto; }
  .ablauf .ph-karte > .app-kopf { grid-column: 1 / -1; grid-row: 1; }
  .ablauf .ph-karte .app-titel { grid-column: 1 / -1; grid-row: 2; }
  .ablauf .ph-inhalt { grid-column: 1 / -1; grid-row: 4; }
  .ablauf .ph-titelzeile, .ablauf .ph-fuss { display: contents; }
  .ablauf .ph-status { grid-column: 1; grid-row: 3; }
  .ablauf .ph-pdf { grid-column: 2; grid-row: 3; align-self: start; margin-top: var(--space-3); }
  .ablauf .ph-hinweis { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: center; }
  .ablauf .ph-karte > .app-kopf > span:last-child { visibility: hidden; }
  .ablauf .ph-lang { display: none; }
  .ablauf-buehne .szene--pflichtenheft { --ph-h: var(--size-stage-doc-h-md, 380px); padding-bottom: var(--space-40); }
}
@media (min-width: 1280px) {
  .ablauf-buehne .szene--pflichtenheft { --ph-h: var(--size-stage-doc-h-sm, 345px); }
}