/* ═══════════════════════════════════════════════════════════════════
   dv_docs — Aussehen der Dokumentation

   Bis zum 3. Oktober 2026 steckte dieses CSS inline in
   dv_docs/build/template.html, mit eigener heller Palette und einer
   dunklen, die von der der Website abwich (--ink-3 bei 4,4:1, --code-c
   bei 3,6:1, weiße Schrift auf pastellfarbenen Seiten-Marken). Jetzt
   kommt die Palette aus tokens.css — dieselbe wie auf Hauptseite und
   Shop — und hier steht nur, was die Dokumentation zusätzlich braucht.
   Es gibt nur noch den dunklen Grundton.

   Gerüst: links das Inhaltsverzeichnis mit Suche, in der Mitte die Seite
   einer Ressource, rechts „Auf dieser Seite". Lesetext steht in Source
   Serif 4 — hier wird lang gelesen —, alles zum Nachschlagen (Namen,
   Tabellen, Code) in JetBrains Mono, Überschriften in Archivo.
   ═══════════════════════════════════════════════════════════════════ */

:root{--rail:272px;--toc:208px}

.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100vh}

/* ── Inhaltsverzeichnis links ───────────────────────────────────── */
.rail{
  position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--sunken);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.zurueck{
  display:flex;align-items:center;gap:.45rem;padding:.9rem 1.1rem .2rem;
  font:500 var(--t-xs)/1.2 var(--sans);color:var(--ink-2);
}
.zurueck:hover{color:var(--ink);text-decoration:none}
.zurueck svg{flex:none}
.brand{
  display:flex;align-items:baseline;gap:.6rem;padding:.7rem 1.1rem 1rem;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.brand:hover{text-decoration:none}
.brand b{font:600 1.1875rem/1 var(--mono);letter-spacing:-.02em}
.brand b i{font-style:normal;color:var(--accent)}
.brand span{font-size:var(--t-xs);color:var(--ink-3)}

.searchwrap{padding:.85rem 1rem;border-bottom:1px solid var(--line)}
#q{
  width:100%;padding:.55rem .75rem;border:1px solid var(--line-ui);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:400 var(--t-sm) var(--sans);
}
#q::placeholder{color:var(--ink-3)}
#q:focus{outline:none;border-color:var(--accent)}
#q:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

nav.tree{padding:.4rem .6rem 2.5rem;flex:1}
.navgrp{margin:.9rem 0 .3rem}
/* Der Name der Gruppe mit der Marke ihrer Kategorie davor. */
.navh{
  display:flex;align-items:center;gap:.55rem;padding:.4rem .6rem;
  font:600 var(--t-xs)/1.2 var(--sans);color:var(--ink);
}
.navh::before{content:"";flex:none;width:.5625rem;height:.5625rem;border-radius:2px;background:var(--gc)}
.navgrp a{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.3rem .6rem .3rem 1.55rem;border-radius:var(--r-sm);color:var(--ink-2);
  font:400 var(--t-xs)/1.35 var(--mono);
}
.navgrp a code{font-size:.6875rem;color:var(--ink-3);background:none;padding:0}
.navgrp a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.navgrp a.on{background:var(--accent-wash);color:var(--accent-ink);font-weight:500}
.navgrp a.on code{color:var(--accent-ink)}
.navgrp a.hide,.navgrp.hide{display:none}

/* Suchergebnisse */
.results{padding:.4rem .6rem 2.5rem}
.results a{display:block;padding:.45rem .6rem;border-radius:var(--r-sm);margin-bottom:2px;color:var(--ink-2)}
.results a:hover{background:var(--surface);text-decoration:none}
.results .rl{
  display:block;font:500 var(--t-xs) var(--mono);color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.results .rm{display:flex;gap:.4rem;font-size:var(--t-micro);color:var(--ink-3)}
.results .rm b{font-weight:600;color:var(--accent-ink)}
.empty{padding:1.1rem .8rem;color:var(--ink-3);font-size:var(--t-sm)}

/* ── Seite ──────────────────────────────────────────────────────── */
main{min-width:0;padding:0 0 90px}
.page{
  display:grid;grid-template-columns:minmax(0,1fr) var(--toc);gap:44px;
  max-width:1180px;margin:0 auto;padding:0 40px;
}
.doc{min-width:0;padding-top:44px}
.doc.wide{grid-column:1/-1}

/* Der Pfad: Handbuch / Gruppe. Eine Navigation, keine Überzeile. */
.crumb{
  display:flex;align-items:center;gap:.5rem;margin-bottom:var(--s-4);
  font:500 var(--t-xs)/1.4 var(--mono);color:var(--ink-3);
}
.crumb a{color:var(--ink-2)}
.crumb a:hover{color:var(--ink)}

.head h1{
  font-size:var(--t-h1);display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
}
.hero h1{font-size:var(--t-hero)}
.lede{
  margin:var(--s-4) 0 0;max-width:58ch;
  font:400 1.1875rem/1.6 var(--serif);color:var(--ink-2);
}
code.ver{
  font:500 var(--t-xs)/1 var(--mono);color:var(--ink-2);background:none;
  border:1px solid var(--line-2);padding:.3rem .5rem;border-radius:var(--r-sm);letter-spacing:0;
}
code.ver.big{font-size:var(--t-sm);padding:.35rem .6rem}

/* Angaben im Kopf einer Seite: eine Reihe von Schlagwörtern, jedes mit
   seiner Bezeichnung. Was daran Zahl ist, steht hier, weil es dort
   nachgeschlagen wird, nicht als Kennzahl über der Seite. */
.facts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0 0}
.fact{
  display:flex;align-items:baseline;gap:.55rem;padding:.4rem .75rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.fact dt{font:500 var(--t-xs)/1.4 var(--sans);color:var(--ink-3)}
.fact dd{margin:0;font-size:var(--t-sm);line-height:1.45;color:var(--ink)}
.dep{
  display:inline-block;font:500 var(--t-xs)/1.5 var(--mono);padding:0 .4rem;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:transparent;color:var(--accent-ink);margin:0 .2rem .1rem 0;
}
a.dep:hover{border-color:var(--accent);text-decoration:none}
.dep.ext{color:var(--ink-2)}
.dim{color:var(--ink-3)}

/* ── Übersicht ──────────────────────────────────────────────────── */
.groups{display:flex;flex-direction:column;gap:var(--s-7);margin-top:var(--s-5)}
/* Mit .doc davor, weil „.doc h2" (Abschnittsüberschrift der Seite) sonst
   gleich stark ist und später steht — die Gruppenköpfe der Übersicht wären
   dann so groß wie „Einbau" und „Katalog". */
.doc .grphead h2{
  display:flex;align-items:center;gap:.65rem;margin:0;padding:0;border:0;
  font-size:1.375rem;line-height:1.15;font-stretch:92%;
}
.grphead h2::before{content:"";flex:none;width:.5625rem;height:.5625rem;border-radius:2px;background:var(--gc)}
.grphead p{margin:.35rem 0 0;font-size:var(--t-sm);color:var(--ink-3)}
.count{font:500 var(--t-xs)/1 var(--mono);color:var(--ink-3);letter-spacing:0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--s-3);margin-top:var(--s-4)}
.card{
  display:flex;flex-direction:column;gap:.55rem;padding:var(--s-4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  color:var(--ink);transition:border-color .15s;
}
.card:hover{text-decoration:none;border-color:var(--line-ui)}
.cardtop{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.cname{font:600 var(--t-sm) var(--mono);letter-spacing:-.01em;color:var(--gc-ink)}
.card p{margin:0;font-size:var(--t-xs);line-height:1.55;color:var(--ink-2);flex:1}
.cardmeta{
  display:flex;flex-wrap:wrap;gap:.2rem .9rem;font:400 var(--t-micro) var(--mono);color:var(--ink-3);
}
.cardmeta:empty{display:none}

/* ── Fließtext ──────────────────────────────────────────────────── */
.prose,.reference{max-width:none}
.prose>*,.reference>*{max-width:72ch}
.prose .tw,.reference .tw,.prose .code,.reference .code,
.prose .filegrid,.reference .filegrid{max-width:none}

h2,h3,h4{scroll-margin-top:22px;position:relative}
.doc h2{
  margin:3.25rem 0 1rem;padding-bottom:.55rem;border-bottom:1px solid var(--line);
  font-size:var(--t-h2);line-height:1.15;
}
.doc h3{margin:2.1rem 0 .75rem;font-size:1.1875rem;line-height:1.3}
.doc h4{margin:1.6rem 0 .55rem;font-size:var(--t-body);line-height:1.35;color:var(--ink-2)}
.anch{
  position:absolute;left:-.85em;top:0;width:.85em;color:var(--ink-3);opacity:0;
  font-weight:400;text-decoration:none;font-family:var(--mono);
}
h2:hover .anch,h3:hover .anch,h4:hover .anch,.anch:focus-visible{opacity:.7}
.anch:hover{opacity:1!important;text-decoration:none}

/* Lesetext in der Serife, alles andere in der Grotesk. */
.prose p,.prose li{font-family:var(--serif);font-size:1.0625rem;line-height:1.7}
.prose p,.reference p{margin:0 0 .95rem}
.prose ul,.prose ol{margin:0 0 1rem;padding-left:1.35em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin:0 0 .45rem}
.prose li>p{margin:0 0 .55rem}
.prose li::marker{color:var(--ink-3)}
.prose hr,.reference hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.prose strong{font-weight:600;color:var(--ink)}
.prose em{font-style:italic}
/* Ein Verweis mitten im Satz muss sich ohne Farbe vom Text abheben (WCAG 1.4.1):
   zum umgebenden Grau liegt die Farbe allein bei 1,3–1,8:1. Darum unterstrichen,
   dünn und abgesetzt. Ausgenommen sind Verweise, die als Marke oder Karte
   gestaltet sind. */
:where(.prose,.lede,.note,.callout,blockquote,.reference p,.reference li) a:not(.anch):not(.dep){
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in oklab,currentColor 50%,transparent);
}
:where(.prose,.lede,.note,.callout,blockquote,.reference p,.reference li) a:not(.anch):not(.dep):hover{
  text-decoration-color:currentColor;
}
:where(.prose,.reference,.lede) code{
  background:var(--surface-2);padding:.08em .35em;border-radius:var(--r-sm);color:var(--ink);
  font-size:.82em;
}
kbd{
  background:var(--surface);border:1px solid var(--line-2);border-bottom-width:2px;
  border-radius:var(--r-sm);padding:.05rem .4rem;font-size:.72rem;
}

blockquote{
  margin:1.25rem 0;padding:.8rem 1.1rem;border:1px solid var(--line-2);
  background:var(--surface);border-radius:var(--r);color:var(--ink-2);
}
blockquote>*:last-child{margin-bottom:0}
/* Ein Hinweis, der der Seite etwas voraussetzt: warm getönt, weil Bernstein
   in dieser Palette „Hinweis" heißt. */
.callout{
  margin:1.6rem 0;padding:.8rem 1.1rem;border-radius:var(--r);font-size:var(--t-sm);color:var(--ink-2);
  border:1px solid color-mix(in oklab, var(--c-bernstein) 40%, var(--line-2));
  background:color-mix(in oklab, var(--c-bernstein) 6%, var(--surface));
}
.note{margin:-.4rem 0 1rem;font-size:var(--t-xs);line-height:1.55;color:var(--ink-3);max-width:70ch}
.note code{font-size:.9em}

/* Code */
.code{
  position:relative;margin:0 0 1.1rem;background:var(--sunken);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.code .lang{
  position:absolute;top:0;right:0;padding:.25rem .65rem;
  font:500 var(--t-micro)/1.3 var(--mono);color:var(--ink-3);
  background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:0 0 0 var(--r);text-transform:lowercase;
}
.code pre{margin:0;padding:.95rem 1.1rem;overflow-x:auto}
.code code{font-size:.8rem;line-height:1.65;background:none;padding:0;border:0}
.code .c{color:var(--code-c);font-style:italic}
.code .s{color:var(--code-s)}
.code .k{color:var(--code-k);font-weight:500}
.code .n{color:var(--code-n)}
.code .g{color:var(--code-g);font-weight:500}
.code .b{color:var(--code-b)}

/* Tabellen: gerahmt, die Kopfzeile abgesetzt, dazwischen Haarlinien. */
.tw{overflow-x:auto;margin:0 0 1.25rem;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:var(--t-sm)}
thead th{
  position:sticky;top:0;background:var(--sunken);
  font:500 var(--t-xs)/1.2 var(--sans);color:var(--ink-3);text-align:left;
  padding:.65rem .9rem;white-space:nowrap;border-bottom:1px solid var(--line);
}
tbody td{padding:.6rem .9rem;border-top:1px solid var(--line);vertical-align:top;line-height:1.5}
tbody tr:first-child td{border-top:0}
tbody tr:hover{background:var(--surface-2)}
table.ref td:first-child{white-space:nowrap}
table.ref code{font-size:.78rem}
code.fn{display:block;font-weight:600;color:var(--ink);background:none;padding:0}
code.sig{display:block;font-size:.72rem;color:var(--ink-3);background:none;padding:0;margin-top:2px}
code.dim{background:none;color:var(--ink-3);font-size:.76rem;padding:0}
.path{font:400 var(--t-micro) var(--mono);color:var(--ink-3);white-space:nowrap}

/* ── Das dv_core-Verzeichnis ────────────────────────────────────────
   Die Spalte "Wofuer" traegt hier als einzige einen ganzen Absatz. Zwei
   Dinge geben ihr Luft:

   1. Die @param-Zeilen stehen darunter als Liste statt als Fliesstext
      (build.py, api_tags). Eine Zeile je Angabe liest sich wie eine
      Referenz und nicht wie ein zerlaufener Absatz.
   2. Die Dateispalte darf umbrechen. Ihr nowrap kostete rund 140px,
      die der Beschreibung fehlten — bei 210px Spaltenbreite ist das
      ein Drittel. */
table.ref.api .tags{
  list-style:none;margin:.4rem 0 0;padding:0;
  display:grid;gap:.1rem;
}
table.ref.api .tags li{
  font:400 var(--t-micro)/1.45 var(--mono);color:var(--ink-3);
  padding-left:.7rem;text-indent:-.7rem;
}
table.ref.api .path{white-space:normal}

/* Die erste Spalte darf hier umbrechen. Mit dem nowrap aus table.ref
   bestimmt die laengste Signatur die Spaltenbreite — DV.AddWebhook hat
   81 Zeichen, und ein versehentlich mitgelesener Aufruf hatte 126. Die
   Tabelle wurde dadurch breiter als ihr Platz, scrollte waagerecht, und
   sichtbar blieb nur die schmale Namensspalte: daneben schien alles leer,
   obwohl die Beschreibung nur rechts ausserhalb stand. */
table.ref.api td:first-child{white-space:normal}
table.ref.api code.sig{word-break:break-word}

/* Client, Server, Shared: eine Marke in der Farbe der Seite, Schrift dunkel
   darauf (weiß lag hier bei 1,9–2,8:1). */
.side{
  display:inline-block;min-width:3.4rem;text-align:center;
  font:600 var(--t-micro)/1 var(--mono);padding:.25rem .45rem;border-radius:var(--r-sm);color:var(--on-accent);
}
.side.client{background:var(--side-client)}
.side.server{background:var(--side-server)}
.side.shared{background:var(--side-shared)}

.filegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--s-3);margin-bottom:1.25rem}
.filecol{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:.9rem 1rem}
.filecol h4{margin:0 0 .6rem;font:500 var(--t-xs)/1.2 var(--sans);color:var(--ink-3)}
ul.files{list-style:none;margin:0;padding:0;counter-reset:f}
ul.files li{counter-increment:f;margin:0 0 .25rem;font-size:var(--t-xs);display:flex;gap:.5rem;align-items:baseline}
ul.files li::before{content:counter(f);font:400 var(--t-micro) var(--mono);color:var(--ink-3);min-width:.8rem;font-variant-numeric:tabular-nums}
ul.files code{background:none;padding:0;font-size:.77rem;color:var(--ink-2);word-break:break-all}

/* Der Referenzblock: der Teil, den der Bau aus dem Quelltext liest. */
.reference{margin-top:4rem;padding-top:.25rem;border-top:1px solid var(--line-2)}
.refhead{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;padding:1rem 0 .1rem}
.refhead span{font:700 1.1875rem/1.2 var(--sans);font-stretch:90%;letter-spacing:-.015em;color:var(--ink)}
.refhead em{font-style:normal;font-size:var(--t-xs);color:var(--ink-3)}
.reference h2:first-of-type{margin-top:1.6rem}

/* ── Auf dieser Seite ───────────────────────────────────────────── */
.toc{
  position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;
  padding:3.5rem 0;font-size:var(--t-xs);
}
.toch{margin-bottom:.7rem;padding-left:.75rem;font:600 var(--t-xs)/1.2 var(--sans);color:var(--ink)}
.toc a{
  /* Zielfläche mindestens 24px hoch (WCAG 2.5.8): 12px Schrift, Zeilenhöhe 1,4,
     zweimal .25rem Polster. */
  display:block;padding:.25rem 0 .25rem .75rem;color:var(--ink-3);
  border-left:2px solid var(--line);line-height:1.4;
}
.toc a:hover{color:var(--ink);text-decoration:none;border-left-color:var(--line-ui)}
.toc a.on{color:var(--accent-ink);border-left-color:var(--accent);font-weight:500}
.toc a.t2{padding-left:1.4rem}
.toc a.t3{padding-left:2rem;font-size:.75rem}

/* Kopfleiste nur auf schmalen Fenstern */
.topbar{display:none}

@media (max-width:1080px){
  .page{grid-template-columns:minmax(0,1fr);padding:0 30px}
  .toc{display:none}
}
@media (max-width:880px){
  .app{grid-template-columns:minmax(0,1fr)}
  .topbar{
    display:flex;align-items:center;gap:.8rem;position:sticky;top:0;z-index:30;
    padding:.6rem 1rem;background:var(--bg);border-bottom:1px solid var(--line);
  }
  .topbar button{
    font:500 var(--t-sm) var(--sans);padding:.45rem .8rem;border-radius:var(--r);cursor:pointer;
    background:var(--surface);border:1px solid var(--line-ui);color:var(--ink);
  }
  .topbar b{font:600 .9375rem var(--mono)}
  .topbar b i{font-style:normal;color:var(--accent)}
  .topbar .zurueck{margin-left:auto;padding:.45rem 0}
  /* Das Verzeichnis schiebt von links herein und dunkelt den Rest ab. */
  .rail{
    position:fixed;inset:0 auto 0 0;width:min(310px,86vw);z-index:40;
    transform:translateX(-102%);transition:transform .2s ease;
    box-shadow:0 0 0 100vmax rgba(10,8,20,0);
  }
  .rail.open{transform:none;box-shadow:0 0 0 100vmax rgba(10,8,20,.55)}
  .page{padding:0 20px}
  .doc{padding-top:1.75rem}
  .lede{font-size:1.0625rem}
}