/* Beweiskette, dritte Fassung (13.09.2026): Herleitung statt Einblendung.
   ---------------------------------------------------------------------------
   Eine Antwort, aus der alles herausgearbeitet wird. Der Block wird auf dem
   Desktop angeheftet (ScrollTrigger, pin), der Leser fährt mit dem Rad durch
   sieben Zustände — vor und zurück. Nichts liegt am Ende über etwas anderem:
   Die Kette schrumpft zur Spur, der Befund steht allein daneben.

   Zwei Zustände:
   1. Ruhe (kein JS, kein GSAP, reduzierte Bewegung, Handy): alle Teile
      stehen untereinander im Fluss, nichts ist versteckt.
   2. .bk3-animiert (setzt das Skript): die Bühne ist eine feste Fläche,
      jedes Teil hat seinen Platz, GSAP arbeitet die Teile heraus.

   Farben und Schrift kommen aus den Tokens der Seite.                     */

.bk3 {
  --k-flaeche: var(--bg-2, #121214);
  --k-rand: var(--hairline, rgba(236,231,227,0.12));
  --k-rand-2: rgba(236,231,227,0.30);
  --k-akzent: var(--accent, #e0472b);
  --k-gruen: #2e9a5c;
  --k-text: var(--ink, #ece7e3);
  --k-text-2: var(--ink-body, #a9a19b);
  --k-text-3: var(--ink-mono, #8b837d);
  --k-buehne: 640px;
  --k-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  overflow: hidden;
}
.bk3::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 76% 40%, rgba(224,71,43,0.07), transparent 70%);
}
.bk3 .wrap { position: relative; }
.bk3-raster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* --- links: Text und Schrittleiste --------------------------------------- */
.bk3-text h2 { margin: 0 0 18px; }
.bk3-text h2 .leise { color: var(--k-text-2); font-weight: 500; }
.bk3-text .lead { color: var(--k-text-2); font-size: 17px; line-height: 1.55; max-width: 44ch; margin: 0; }
.bk3-text .klein { color: var(--k-text-3); font-size: 14px; margin: 14px 0 0; }

.bk3-nav { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--k-rand); position: relative; }
.bk3-nav li { border-bottom: 1px solid var(--k-rand); position: relative; }
.bk3-nav button {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 14px;
  width: 100%; padding: 11px 4px; font-family: var(--sans); font-size: 15px; color: var(--k-text-3);
  transition: color 260ms var(--k-ease);
}
.bk3-nav button:hover { color: var(--k-text); }
.bk3-nav button:focus-visible { outline: 2px solid var(--k-akzent); outline-offset: 2px; }
.bk3-nav .nr { font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--k-text-3); width: 24px; }
.bk3-nav .was { font-size: 12.5px; color: var(--k-text-3); margin-left: auto; opacity: 0; transform: translateX(6px); transition: opacity 260ms, transform 360ms var(--k-ease); }
/* Der Füllstand: eine Linie am linken Rand, die mit dem Fortschritt wächst. */
.bk3-nav .fuell { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: var(--k-akzent); transform: scaleY(0); transform-origin: top; }
.bk3-nav [aria-current="step"] { color: var(--k-text); }
.bk3-nav [aria-current="step"] .nr { color: var(--k-akzent); }
.bk3-nav [aria-current="step"] .was { opacity: 1; transform: none; }
.bk3-nav li.war button { color: var(--k-text-2); }
.bk3-hinweis { margin: 20px 0 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--k-text-3); display: inline-flex; align-items: center; gap: 10px; }
.bk3-hinweis::before { content: ""; width: 18px; height: 1px; background: var(--k-rand-2); }
.bk3-nav-mobil { display: none; margin: 24px 0 0; font-size: 13px; color: var(--k-text-3); }
.bk3-nav-mobil b { color: var(--k-text); font-weight: 500; }

/* --- rechts: die Bühne --------------------------------------------------- */
.bk3-buehne { position: relative; display: flex; flex-direction: column; gap: 12px; }
.bk3-buehne > * { position: relative; }
.bk3-spur, .bk3-faden, .bk3-marker, .bk3-zeichen { display: none; }

.bk3-karte {
  background: var(--k-flaeche); border: 1px solid var(--k-rand); border-radius: 4px;
  padding: 16px 18px; color: var(--k-text); font-size: 15px; line-height: 1.5;
}
.bk3-etikett { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-text-3); margin: 0 0 8px; display: flex; gap: 10px; align-items: center; }
.bk3-etikett::before { content: ""; width: 5px; height: 5px; background: var(--k-akzent); flex: none; }
.bk3-meta { font-size: 12.5px; color: var(--k-text-3); margin: 10px 0 0; line-height: 1.5; }
.bk3-meta .ok { color: var(--k-gruen); }

/* Frage: eine Zeile wie ein Prompt, kein Kasten. */
.bk3-frage { padding: 0 0 14px; border-bottom: 1px solid var(--k-rand); }
.bk3-frage .text { margin: 0; font-size: 17px; font-weight: 500; color: var(--k-text); }
.bk3-frage .bk3-meta { margin-top: 6px; }

/* Antwort: zwei Sätze; der zweite trägt den Marker und den Zeichenzähler. */
.bk3-antwort .satz { display: block; margin: 0; padding: 3px 0; color: var(--k-text); position: relative; }
.bk3-antwort .satz + .satz { margin-top: 4px; }
.bk3-antwort .satz .t { position: relative; z-index: 1; }
.bk3-antwort .satz.markiert .t { box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bk3-marker { position: absolute; inset: 0 -6px; background: rgba(224,71,43,0.16); border-radius: 2px; z-index: 0; clip-path: inset(0 100% 0 0); }
.bk3-zeichen { position: absolute; right: 18px; top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--k-akzent); white-space: nowrap; }
.bk3-pruef { font-size: 12.5px; color: var(--k-gruen); margin: 10px 0 0; }
.bk3-pruef::before { content: "✓ "; }

/* Aussage: entsteht aus der Textstelle. Zwei Texte übereinander: der lange
   (Wortlaut) und der kurze (Aussage). Das Skript blendet um. */
.bk3-aussage .lang, .bk3-aussage .kurz { margin: 0; }
/* Der lange Text liegt im animierten Zustand als Schicht über der Karte, damit
   die Karte von Anfang an die Größe der fertigen Aussage hat. In Ruhe ist er weg. */
.bk3-aussage .lang { display: none; color: var(--k-text); }
.bk3-animiert .bk3-aussage .lang { display: block; position: absolute; left: 16px; right: 16px; top: 14px; line-height: 1.5; }
.bk3-aussage .kurz { font-weight: 500; font-size: 16px; }
.bk3-aussage .bk3-meta { line-height: 1.6; }

/* Quellen: Chips, die unter der Antwort hervorkommen. */
.bk3-quelle { padding: 0; background: none; border: 0; }
.bk3-quelle .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bk3-quelle .chip { font-size: 13px; border: 1px solid var(--k-rand); border-radius: 3px; padding: 6px 10px; color: var(--k-text-2); background: var(--k-flaeche); }
.bk3-quelle .chip em { font-style: normal; color: var(--k-text-3); }
.bk3-quelle .chip.zitiert { color: var(--k-text); border-color: var(--k-rand-2); }
.bk3-quelle .chip.zitiert em { color: var(--k-gruen); }
.bk3-quelle .hinweis { margin: 10px 0 0; font-size: 13px; color: var(--k-text-2); max-width: 60ch; }
.bk3-quelle .hinweis b { color: var(--k-text); font-weight: 500; }

/* Muster: die eine Aussage wird zu 56. Links Zahl und Zeilen, rechts das
   Feld aus 56 Marken, das sich zum Balken ordnet. */
.bk3-muster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px; align-items: end; }
.bk3-muster .zahl { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--k-akzent); font-variant-numeric: tabular-nums; margin: 0; }
.bk3-muster .zahl small { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--k-text-2); margin-top: 6px; }
.bk3-muster .zeilen { list-style: none; margin: 12px 0 0; padding: 0; font-size: 12.5px; color: var(--k-text-3); display: grid; gap: 4px; }
.bk3-muster .zeilen b { color: var(--k-text); font-weight: 500; font-variant-numeric: tabular-nums; }
.bk3-feld { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; align-content: end; }
.bk3-feld i { display: block; height: 9px; background: var(--k-akzent); border-radius: 1px; }
.bk3-feld i.eins { outline: 1px solid var(--k-text); outline-offset: 1px; }
.bk3-muster .thema { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--k-text-2); border-top: 1px solid var(--k-rand); padding-top: 10px; }
.bk3-muster .thema b { color: var(--k-text); font-weight: 500; }

/* Befund: steht am Ende allein neben der Spur. */
.bk3-befund { border-color: var(--k-rand-2); padding: 22px 24px; }
.bk3-befund h3 { margin: 0 0 18px; font-size: clamp(20px, 2.1vw, 25px); letter-spacing: -0.02em; line-height: 1.2; color: var(--k-text); }
.bk3-befund .akte { margin: 0; display: grid; gap: 12px; }
.bk3-befund .akte > div { border-top: 1px solid var(--k-rand); padding-top: 10px; }
.bk3-befund dt { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-text-3); margin: 0 0 4px; }
.bk3-befund dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--k-text-2); }
.bk3-befund .fuss { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--k-rand); font-size: 12.5px; color: var(--k-text-3); }

/* Die Spur: die Kette, auf sechs Knoten geschrumpft. Nur animiert sichtbar. */
.bk3-spur { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--k-rand-2); display: flex; flex-direction: column; gap: 22px; }
.bk3-spur li { position: relative; font-size: 12.5px; color: var(--k-text-2); line-height: 1.4; }
.bk3-spur li::before { content: ""; position: absolute; left: -18px; top: 6px; width: 7px; height: 7px; background: var(--k-flaeche); border: 1px solid var(--k-rand-2); border-radius: 50%; }
.bk3-spur li b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-text-3); font-weight: 500; margin-bottom: 2px; }
.bk3-spur li.rot::before { background: var(--k-akzent); border-color: var(--k-akzent); }
.bk3-spur .zieh { position: absolute; left: -1px; top: 0; width: 1px; height: 100%; background: var(--k-akzent); transform-origin: top; transform: scaleY(0); }

/* Der Faden: eine gezeichnete Verbindung von der zitierten Quelle zur Aussage. */
.bk3-faden { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.bk3-faden path { fill: none; stroke: var(--k-rand-2); stroke-width: 1; }

/* --- Animierter Zustand: feste Plätze ------------------------------------- */
.bk3-animiert .bk3-buehne { display: block; height: var(--k-buehne); }
.bk3-animiert .bk3-buehne > * { position: absolute; margin: 0; }
.bk3-animiert .bk3-frage   { top: 0; left: 0; width: 100%; }
.bk3-animiert .bk3-antwort { top: 96px; left: 0; width: 68%; }
.bk3-animiert .bk3-aussage { top: 0; left: 0; width: 28%; padding: 14px 16px; } /* Platz setzt das Skript */
.bk3-animiert .bk3-quelle  { top: 330px; left: 0; width: 68%; }
.bk3-animiert .bk3-muster  { top: 430px; left: 0; width: 100%; padding: 0; background: none; border: 0; }
.bk3-animiert .bk3-befund  { top: 24px; left: 34%; width: 66%; }
.bk3-animiert .bk3-spur    { display: flex; top: 40px; left: 0; width: 26%; }
.bk3-animiert .bk3-faden   { display: block; }
.bk3-animiert .bk3-marker, .bk3-animiert .bk3-zeichen { display: block; }
.bk3-animiert .bk3-befund { z-index: 5; }
.bk3-animiert .bk3-aussage { z-index: 3; }

/* Angeheftet: der Abschnitt füllt genau die Höhe unter der Kopfzeile. */
.bk3-animiert.bk3 { padding-top: 48px; padding-bottom: 48px; min-height: calc(100vh - 100px); box-sizing: border-box; display: flex; align-items: center; }
.bk3-animiert .wrap { width: 100%; }

/* Handy: kein Pinning, keine Herleitung — nur das Ergebnis. Die volle Kette
   wäre im Ruhezustand 2.400 px lang; hier stehen Text, die Zeile
   „Frage → Antwort → Beleg → Befund" und der Befund als Karte (13.09.2026). */
@media (max-width: 899px) {
  .bk3-raster { grid-template-columns: 1fr; gap: 28px; }
  .bk3-nav, .bk3-hinweis { display: none; }
  .bk3-nav-mobil { display: block; }
  .bk3-buehne { max-width: 560px; }
  .bk3-frage, .bk3-antwort, .bk3-aussage, .bk3-quelle, .bk3-muster, .bk3-faden, .bk3-spur { display: none; }
}