/* AGENCY — Dokumentation
 *
 * Zweispaltig mit stehendem Inhaltsverzeichnis. Die Latte ist SWANs Docs:
 * sachlich, vollständig, ohne Verkaufston. Ein Kapitel, das etwas beschreibt,
 * das es noch nicht gibt, sagt das in der Überschrift — nicht im Kleingedruckten.
 */

.docs-layout{display:grid; grid-template-columns:236px minmax(0,1fr); gap:38px; padding:26px 0 80px}
@media (max-width:960px){ .docs-layout{grid-template-columns:minmax(0,1fr); gap:0} }

/* ── Inhaltsverzeichnis ─────────────────────────────────────────────────── */

.toc{position:sticky; top:var(--head-clear); max-height:calc(100vh - 96px); overflow-y:auto; padding-right:8px}
@media (max-width:960px){
  .toc{position:static; max-height:none; margin-bottom:26px; padding:16px 0;
       border-block:1px solid var(--line)}
}
.toc h4{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:500; margin:0 0 9px;
}
.toc a{
  display:flex; align-items:baseline; gap:8px; padding:4px 8px; border-radius:var(--r-sm);
  font-size:12.5px; color:var(--ink-2); text-decoration:none; line-height:1.35;
}
.toc a:hover{background:var(--surface-2); color:var(--ink)}
.toc a.on{background:var(--accent-wash); color:var(--accent-ink); font-weight:600}
.toc a .n{font-family:var(--mono); font-size:10.5px; color:var(--muted); flex:none; width:16px}
.toc a.on .n{color:var(--accent-ink)}

/* ── Kapitel ────────────────────────────────────────────────────────────── */

.chapter{padding:34px 0; border-top:1px solid var(--line); scroll-margin-top:var(--head-clear)}
.chapter:first-child{border-top:none; padding-top:8px}
.ch-head{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:14px}
.ch-n{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent);
  border:1px solid var(--accent); border-radius:3px; padding:1px 5px}
.ch-head h2{font-size:25px}
.chapter h3{font-size:16.5px; margin:24px 0 9px}
.chapter p{font-size:14.5px; color:var(--ink-2); line-height:1.68; max-width:76ch}
.chapter p b, .chapter li b{color:var(--ink)}
.chapter ul, .chapter ol{font-size:14.5px; color:var(--ink-2); line-height:1.68; max-width:76ch; padding-left:20px}
.chapter li{margin-bottom:5px}
.chapter code{
  font-family:var(--mono); font-size:.9em; background:var(--surface-2);
  border:1px solid var(--line); border-radius:3px; padding:.5px 4px;
}
.chapter table.t{margin:14px 0; max-width:100%}
.chapter table.t code{background:none; border:none; padding:0}

/* Zustandsmarke je Kapitel. Ein Kapitel, das Stufe 2 beschreibt, darf nicht
 * so aussehen wie eines, das beschreibt, was heute läuft. */
.ch-state{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:3px; border:1px solid;
}
.ch-state.live{border-color:var(--pos); color:var(--pos)}
.ch-state.later{border-color:var(--line-2); color:var(--muted)}

pre.code-block{
  font-family:var(--mono); font-size:12.5px; line-height:1.62; white-space:pre;
  overflow-x:auto; background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r); padding:13px 15px; margin:13px 0; color:var(--ink-2);
}

.glossary dt{font-family:var(--mono); font-size:13px; font-weight:600; margin-top:13px}
.glossary dd{margin:3px 0 0; font-size:14px; color:var(--ink-2); line-height:1.6; max-width:74ch}