/* Die HUELLE der Dokumentation: Kopfzeile, Fusszeile, Uebersicht.
   ================================================================================================

   Sie ist bewusst klein. Jede Themenseite bringt seit dem 04.09.2026 ihre EIGENE Gestaltung mit
   (so entschieden vom Betreiber), und alles zwischen <main> und </main> gehoert ihr allein. Was
   hier steht, ist nur das, was auf 53 verschiedenen Seiten gleich bleiben MUSS:

     - die Kopfzeile mit dem Brotkrumenpfad. Eine Navigation, die je Seite anders aussieht, ist
       keine Navigation mehr, sondern ein Ratespiel.
     - die Fusszeile mit Vorheriges/Naechstes. Sie ist der Faden, an dem man eine Dokumentation
       auch dann durchlesen kann, wenn sie in 53 Dokumente zerfaellt.
     - die Uebersicht mit der Suche.

   Die Tokens sind die der Startseite (home.css), damit die Doku nicht wie ein fremdes Produkt
   aussieht: Tinte und Papier, drei warme Graustufen, Haarlinien, Barlow fuer Text und Geist Mono
   fuer jede Beschriftung. Keine Akzentfarbe -- Betonung ist Helligkeit.
*/

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.ds {
  --ink: #0a0a0a;
  --paper: #f2f2f0;
  --g1: #b3b3af;
  --g2: #9b9b97;
  --g3: #84847f;
  --rule: rgba(255, 255, 255, .3);
  --rule-soft: rgba(255, 255, 255, .18);
  --panel: #121211;
  --pad: clamp(16px, 4vw, 52px);
  --sheet: 1140px;
  --mono: 'Geist Mono', ui-monospace, 'Cascadia Code', 'SF Mono', monospace;

  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds ::selection { background: var(--paper); color: var(--ink); }
.ds :focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

/* ---------- Kopfzeile ---------- */
/* VORLAUNCH — der Stempel. Gleiche Ueberlegung wie auf der Startseite: keine Warnfarbe, weil die
   Seite keine Akzentfarbe hat und ein farbiger Balken wie ein Defekt laese. Eine Haarlinie und
   eine Mono-Zeile sind die Sprache, in der hier alle Beschriftungen stehen. */
.ds .ds-stamp {
  margin: 0;
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--g2);
  text-align: center;
  text-wrap: balance;
}
.ds .ds-stamp b { color: var(--paper); font-weight: 500; }
@media (max-width: 560px) { .ds-stamp { font-size: 10.5px; letter-spacing: .06em; } }

.ds .ds-nav {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px var(--pad); border-bottom: 1px solid var(--rule-soft);
}
.ds .ds-brand {
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); text-decoration: none; font-weight: 500;
  display: inline-flex; align-items: center; min-height: 44px;
}
.ds .ds-crumb {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--g2);
}
.ds .ds-crumb a { color: var(--g2); text-decoration: none; }
.ds .ds-crumb a:hover { color: var(--paper); }
.ds .ds-crumb b { color: var(--paper); font-weight: 500; }
.ds .ds-crumb i { font-style: normal; color: var(--g3); }
.ds .ds-gap { flex: 1 1 auto; }
.ds .ds-link {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--g2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}
.ds .ds-link:hover { color: var(--paper); }
.ds .ds-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px;
  border: 1px solid var(--paper); padding: 8px 18px; text-decoration: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: var(--paper);
}
.ds .ds-btn:hover { background: var(--paper); color: var(--ink); }

/* ---------- Fusszeile ---------- */
.ds .ds-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  max-width: var(--sheet); margin: 0 auto; padding: 40px var(--pad) 0;
  border-top: 1px solid var(--rule-soft); margin-top: 56px;
}
.ds .ds-foot a {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--rule-soft); text-decoration: none; color: var(--paper);
}
.ds .ds-foot a:hover { border-color: var(--paper); }
.ds .ds-next { text-align: right; }
.ds .ds-foot i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--g2);
}
.ds .ds-foot b { font-weight: 600; font-size: 15px; }
.ds .ds-fine {
  max-width: var(--sheet); margin: 24px auto 0; padding: 0 var(--pad) 48px;
  font-size: 13px; color: var(--g3);
}
.ds .ds-fine a { color: var(--g2); }

/* ---------- Rueckfall: ein Thema ohne eigene Gestaltung ---------- */
/* Nicht huebsch gemeint, nur lesbar: eine Seite, die noch keine eigene Gestaltung hat, soll
   ausgeliefert werden statt zu fehlen. Sichtbar schlicht ist ehrlicher als heimlich fehlend. */
.ds-main { max-width: 780px; margin: 0 auto; padding: 40px var(--pad) 0; }
.ds-main > h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 20px; line-height: 1.06; }
.ds-plain p, .ds-plain li { color: var(--g1); }
.ds-plain h3 {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); font-weight: 500; margin: 26px 0 10px;
}
.ds-plain code {
  font-family: var(--mono); font-size: 12.5px; background: var(--panel);
  border: 1px solid var(--rule-soft); padding: 1px 5px;
}
.ds-plain pre { background: var(--panel); border: 1px solid var(--rule-soft); padding: 12px 14px; overflow-x: auto; }
.ds-plain a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.ds-plain table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.5px; }
.ds-plain th, .ds-plain td { border: 1px solid var(--rule-soft); padding: 8px 10px; text-align: left; }
.ds-plain th { background: var(--panel); font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ds-plain .dk-scroll { overflow-x: auto; }

/* ---------- Diagramme (tools/docs-diagrams.mjs, Einbau in tools/docs-build.mjs) ----------
   Die SVG steht inline und malt ausschliesslich mit den Tokens oben (--panel, --rule, --paper ...):
   sie folgt damit jeder Palette, die .ds setzt -- auch der Druckpalette. Nur das Violett der einen
   Hervorhebung ist fest (Licht, keine Flaeche).

   Groesse: so breit wie gezeichnet (--dg-w), hoechstens so breit wie die Spalte, nie unter 92 % der
   gezeichneten Breite -- darunter wuerden die Mono-Beschriftungen (12 px gezeichnet) unter 11 px
   fallen. Schmaler als das scrollt der Rahmen waagrecht, per Tastatur erreichbar (tabindex). */
.ds .doc-diagram { margin: 32px 0 0; padding: 0; }
.ds .doc-diagram .dg-scroll {
  overflow-x: auto; border: 1px solid var(--rule-soft); padding: clamp(10px, 2vw, 16px);
}
.ds .doc-diagram svg {
  display: block; margin: 0 auto; height: auto;
  width: var(--dg-w); max-width: 100%; min-width: calc(var(--dg-w) * .92);
}
.ds .doc-diagram figcaption {
  margin: 12px 0 0; max-width: 64ch; font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  letter-spacing: .04em; color: var(--g2);
}
.ds .doc-diagram .dg-text { margin: 12px 0 0; font-size: 14px; color: var(--g1); }
.ds .doc-diagram .dg-text summary {
  display: inline-block; cursor: pointer; padding: 6px 0; min-height: 28px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--g2);
}
.ds .doc-diagram .dg-text summary:hover { color: var(--paper); }
.ds .doc-diagram .dg-text ol { margin: 8px 0 0; padding-left: 22px; max-width: 64ch; line-height: 1.55; }
.ds .doc-diagram .dg-text li { margin: 0 0 8px; color: var(--g1); }

/* ---------- Uebersicht ---------- */
.dx-main { max-width: var(--sheet); margin: 0 auto; padding: clamp(36px, 6vw, 72px) var(--pad) 0; }
.dx-kicker {
  margin: 0 0 14px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--g2);
}
.dx-head h1 { margin: 0; font-size: clamp(34px, 6vw, 62px); font-weight: 600; letter-spacing: -.02em; line-height: 1.04; }
.dx-lede { margin: 16px 0 26px; max-width: 56ch; color: var(--g1); font-size: 16px; }

.dx-search { display: block; max-width: 560px; }
.dx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.dx-search input {
  width: 100%; padding: 13px 16px; background: transparent; color: var(--paper);
  border: 1px solid var(--rule); border-radius: 0;
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
}
.dx-search input::placeholder { color: var(--g3); }
.dx-search input:focus { outline: none; border-color: var(--paper); }
.dx-count { min-height: 18px; margin: 10px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--g3); }

.dx-grp { padding-top: 34px; margin-top: 34px; border-top: 1px solid var(--rule-soft); }
.dx-grp h2 {
  margin: 0 0 16px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--g2); font-weight: 500;
}
.dx-grp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dx-grp a {
  display: block; height: 100%; padding: 16px 18px; text-decoration: none;
  border: 1px solid var(--rule-soft); color: var(--paper);
}
.dx-grp a:hover { border-color: var(--paper); background: var(--panel); }
.dx-grp b { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 5px; }
.dx-grp span { display: block; color: var(--g2); font-size: 13.5px; line-height: 1.5; }

/* Trefferliste: dieselbe Kachel, nur mit der Gruppe davor, damit ein Treffer verortet ist. */
.dx-results { padding-top: 26px; }
.dx-results ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.dx-results a { display: block; height: 100%; padding: 16px 18px; border: 1px solid var(--rule-soft); text-decoration: none; color: var(--paper); }
.dx-results a:hover { border-color: var(--paper); background: var(--panel); }
.dx-results i {
  display: block; font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--g3); margin-bottom: 6px;
}
.dx-results b { display: block; font-weight: 600; font-size: 15.5px; margin-bottom: 5px; }
.dx-results span { display: block; color: var(--g2); font-size: 13.5px; line-height: 1.5; }
.dx-results mark { background: var(--paper); color: var(--ink); }
.dx-none { color: var(--g2); }
.dx-none b { color: var(--paper); }

@media (max-width: 700px) {
  .ds-foot { grid-template-columns: 1fr; }
  .ds-next { text-align: left; }
  .ds-crumb { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ---------- Druck ----------
   §ZL-0049 Wie auf der Startseite: der Browser wirft den dunklen Hintergrund weg und behaelt die
   helle Schrift, also kommt ein fast leeres Blatt. Doku und Preisliste sind genau die Seiten, die
   ausgedruckt werden, also sind sie genau die, bei denen das am meisten kostet.

   Die Palette wird umgekehrt statt erzwungen. Kopf- und Fusszeile fallen weg -- eine Marke und
   eine Reihe Links, die auf Papier nichts tun, kosten nur die obere Haelfte der ersten Seite. Die
   Adresse hinter einem Verweis bleibt, denn gedruckt ist "siehe hier" ohne Adresse wertlos. */
@media print {
  .ds {
    --ink: #ffffff; --paper: #111111;
    --g1: #333333; --g2: #444444; --g3: #555555;
    --rule: rgba(0, 0, 0, .35); --rule-soft: rgba(0, 0, 0, .18);
    --panel: #f5f5f3;
    background: #fff !important; color: #111 !important;
  }
  .ds-nav, .ds-foot, .ds-btn, .dk-search, .dk-searchbox { display: none !important; }
  .ds-stamp { display: block !important; border-bottom: 1px solid #999; color: #111 !important; }
  .ds-main { max-width: none; padding: 0; }
  .ds a { color: #111 !important; }
  .ds-main a[href^="http"]::after,
  .ds-main a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .82em; color: #444; }
  .ds h1, .ds h2, .ds h3 { break-after: avoid; }
  .ds table, .ds figure, .ds pre, .ds .pm-fig { break-inside: avoid; }
  .ds .doc-diagram svg { min-width: 0; }
  .ds .doc-diagram .dg-text { display: none; }
  /* Ein waagrecht scrollender Kasten hat auf Papier keinen Scrollbalken: was rechts herausragt,
     ist weg. Auf dem Blatt darf er deshalb umbrechen. */
  .pm-scroll, .dk-scroll, .ds-scroll, .dg-scroll { overflow: visible !important; }
}


/* ---------- Mitte + Seitenuebergang (23.10.2026, Agent web/doku-look-20261023) ----------
   Zweck 1: Grund und Flaechen der Doku auf die "ZeroLog Mitte"-Tokens heben (#0d0d12 statt fast reinem Schwarz),
            damit Startseite <-> Doku farblich nahtlos sind. Nur auf dem Bildschirm; der Druck-Block oben bleibt.
   Zweck 2: Cross-Document View Transitions wie auf der Startseite (landing-v4.css): Kopfzeile und Marke bleiben beim
            Seitenwechsel stehen, der Inhalt blendet in 280 ms mit cubic-bezier(.22,1,.36,1) ueber.
   Die Kopfzeile der Huelle (server/seiten-huelle.js) hat dieselbe Hoehe (73 px), denselben Seitenrand (--pad) und
   dieselbe Reihenfolge: Marke | Zusatz | Luecke | Links | Knopf. Diagramm-Look der Seiten bleibt (Linien .30). */
@media screen {
  .ds {
    --ink: #0d0d12;
    --panel: #14141b;
    --raised: #1b1b24;
    --g2: #8f8f8a;            /* 5.97:1 auf ink, 5.64:1 auf panel */
    --g3: #86867f;            /* war #6b6b67 (3.6:1); jetzt 5.29:1 auf ink, 5.0:1 auf panel, 4.66:1 auf raised */
    --rule-soft: rgba(242, 242, 240, .14);
    --accent: #a996e6;
    --glow: 143, 122, 201;
  }
  html { background: #0d0d12; }
  .ds :focus-visible { outline-color: var(--accent); }

  .ds-nav { min-height: 73px; box-sizing: border-box; background: var(--ink); view-transition-name: site-header; }
  .ds-brand { view-transition-name: site-brand; }
  .ds-btn { border-radius: 8px; }
  .ds-btn:hover { background: var(--paper); color: var(--ink); }
  .dx-search input { border-radius: 8px; }
  .dx-grp a, .dx-results a, .ds-foot a { border-radius: 10px; }
  .dx-grp a:hover, .dx-results a:hover { background: var(--raised); }

  /* Doku-Seiten brauchen das Opt-in selbst: beide Seiten eines Wechsels muessen es haben. */
  @view-transition { navigation: auto; }
  ::view-transition-group(site-header), ::view-transition-group(site-brand) {
    animation-duration: .28s; animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
  ::view-transition-old(site-header), ::view-transition-old(site-brand) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(site-header), ::view-transition-new(site-brand) { animation: vt-kopf .18s ease both; mix-blend-mode: normal; }
  ::view-transition-old(root) { animation: vt-aus .14s ease both; }
  ::view-transition-new(root) { animation: vt-ein .28s cubic-bezier(.22, 1, .36, 1) .04s both; }
  @keyframes vt-kopf { from { opacity: 0; } }
  @keyframes vt-aus { to { opacity: 0; } }
  @keyframes vt-ein { from { opacity: 0; transform: translateY(8px); } }
}
@media screen and (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-ein-ruhig .12s linear both; }
  @keyframes vt-ein-ruhig { from { opacity: 0; } }
}

/* OPTIONAL (Entscheid beim Doku-Zusammenfuehrer): schmale Bildschirme. Die Doku-Kopfzeile bricht dort auf drei Zeilen
   (186 px), die Huellen-Kopfzeile bleibt bei 73 px; der Seitenwechsel streckt den Kopf dann kurz. Wer ihn auch dort
   ruhig will: Kommentar entfernen. Preis: Brotkrumen und "Newsroom"/"Pricing" fallen auf Telefonen weg.
@media screen and (max-width: 700px) {
  .ds-nav { flex-wrap: nowrap; gap: 12px; overflow: hidden; }
  .ds-crumb, .ds-link:not(:last-of-type) { display: none; }
  .ds-btn { display: none; }
}
*/