/* 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: #8a8a86;
  --g3: #6b6b67;
  --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-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-stamp b { color: var(--paper); font-weight: 500; }
@media (max-width: 560px) { .ds-stamp { font-size: 10.5px; letter-spacing: .06em; } }

.ds-nav {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px var(--pad); border-bottom: 1px solid var(--rule-soft);
}
.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-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(--g3);
}
.ds-crumb a { color: var(--g2); text-decoration: none; }
.ds-crumb a:hover { color: var(--paper); }
.ds-crumb b { color: var(--paper); font-weight: 500; }
.ds-crumb i { font-style: normal; color: var(--g3); }
.ds-gap { flex: 1 1 auto; }
.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-link:hover { color: var(--paper); }
.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-btn:hover { background: var(--paper); color: var(--ink); }

/* ---------- Fusszeile ---------- */
.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-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-foot a:hover { border-color: var(--paper); }
.ds-next { text-align: right; }
.ds-foot i {
  font-style: normal; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--g3);
}
.ds-foot b { font-weight: 600; font-size: 15px; }
.ds-fine {
  max-width: var(--sheet); margin: 24px auto 0; padding: 0 var(--pad) 48px;
  font-size: 13px; color: var(--g3);
}
.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; }

/* ---------- 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; }
  /* 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 { overflow: visible !important; }
}