/* Die Dokumentation. Erbt Farben, Schriften und Masse aus geruest.css und setzt
   nur ihr eigenes Geruest darauf: Schiene links, Text in der Mitte, Marken rechts.

   Der Text steht LINKS, nicht mittig wie die Rechtsseiten. Eine Doku wird
   gelesen und nicht ueberflogen; mittig gesetzte Absaetze zwingen das Auge bei
   jeder Zeile an eine andere Startkante.

   Radien wie im Dashboard: --doku-r-xs (6px) fuer alles, was Text in einer
   Flaeche ist (Zeilen, Abzeichen, Knoepfe), --doku-r (10px) fuer Karten und
   Bilder. Rund ist nur, was seine Form braucht: der Aufzaehlungspunkt.

   ⚠️ Das Praefix ist `doku-`, weil `dk-` BELEGT ist: `.dk` ist der Demo-Reiter
   unter der Dashboard-Vorschau (geruest.css). Diese Seite trug ihn eine Runde
   lang unbemerkt mit und erbte davon `margin-top:-26px`, `height:46px` (womit
   `position:sticky` seinen Spielraum verlor und die Schiene wegscrollte),
   `background:#1e2126` und einen `:hover`, der die GANZE Seite umfaerbte.
   Wer hier eine neue Klasse anlegt, prueft ihren Namen vorher gegen
   geruest.css und dash.css - beide Blaetter gelten auf dieser Seite mit. */

.doku {
  --doku-schiene: 264px;
  --doku-marken: 220px;
  --doku-kopf: 60px;
  --doku-r: 10px;
  --doku-r-xs: 6px;
  --doku-spalte: 720px;
  display: grid;
  grid-template-columns: var(--doku-schiene) minmax(0, 1fr);
  /* Die Schiene reicht ueber BEIDE Zeilen. Stand sie nur in der ersten, machte
     ihre volle Fensterhoehe diese Zeile 100dvh hoch und schob Kopf und Text um
     einen ganzen Bildschirm nach unten.
     Die zweite Zeile ist `1fr` und NICHT `minmax(0, 1fr)`: mit der Null als
     Untergrenze durfte sie kleiner werden als der Text in ihr, und der ragte
     dann oben aus dem Raster heraus - die Ueberschrift stand ueber dem Bild. */
  grid-template-rows: auto 1fr;
  min-height: 100dvh;
}

/* Sprung zum Inhalt: nur fuer die Tastatur, sonst ausserhalb des Bildes. */
.doku-sprung {
  position: fixed; top: 10px; left: 10px; z-index: 60;
  padding: 10px 16px; border-radius: var(--doku-r-xs);
  background: var(--flaeche-2); color: var(--fg); font-size: 13.5px;
  transform: translateY(-200%);
}
.doku-sprung:focus-visible { transform: none; }

/* ── Schiene ─────────────────────────────────────────────────────────────
   Fest stehend und selbst scrollbar: bei sechs Seiten braucht sie das nicht,
   aber eine wachsende Doku soll die Seite nicht mitziehen. */
.doku-schiene {
  grid-column: 1; grid-row: 1 / -1;
  position: sticky; top: 0; align-self: start;
  display: flex; flex-direction: column; gap: 26px;
  width: var(--doku-schiene); height: 100dvh; padding: 22px 20px 20px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  transition: translate .28s var(--ease);
}

/* Eingeklappt: die Spalte geht auf 0 UND die Schiene schiebt sich nach links
   hinaus. Nur die Spalte zu schliessen wuerde ihren Inhalt auf 0 quetschen,
   nur zu schieben liesse die leere Spalte stehen. `overflow` darf hier NICHT
   ran - es wuerde `position: sticky` in dieser Seite abschalten; das Ueberstehende
   fängt `body { overflow-x: clip }` aus dem Reset ab. */
@media (min-width: 1000px) {
  .doku { transition: grid-template-columns .28s var(--ease); }
  .doku.is-zu { grid-template-columns: 0 minmax(0, 1fr); }
  .doku.is-zu .doku-schiene { translate: -100% 0; pointer-events: none; }
}

.doku-klapp {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; margin-left: -6px;
  border-radius: var(--doku-r-xs); color: var(--dim);
  transition: background-color .16s, color .16s;
}
.doku-klapp:hover { background: var(--flaeche); color: var(--fg); }
.doku-klapp svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.doku-marke { display: flex; align-items: center; gap: 9px; padding-left: 8px; height: calc(var(--doku-kopf) - 22px); }
.doku-mark { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.doku-mark img { border-radius: 6px; }
/* Das graue Wort hinter der Marke: es benennt den Ort, ohne ihn zu betonen. */
.doku-badge {
  padding: 3px 9px; border: 1px solid var(--line-2); border-radius: var(--doku-r-xs);
  color: var(--dim); font-size: 11.5px; line-height: 1.5;
}

.doku-nav { display: grid; gap: 22px; }
.doku-gruppe { display: grid; gap: 1px; }
.doku-gruppe-kopf {
  padding: 0 8px 7px; color: var(--dim); font-size: 12px;
}
.doku-gruppe a {
  position: relative;
  padding: 8px 10px; border-radius: var(--doku-r-xs);
  color: var(--mid); font-size: 14.5px; line-height: 1.4;
  transition: background-color .16s, color .16s;
}
.doku-gruppe a:hover { background: var(--flaeche); color: var(--fg); }
.doku-gruppe a.is-on { background: var(--flaeche-2); color: var(--fg); }
.doku-heim {
  display: flex; align-items: center; gap: 7px;
  margin-top: auto; padding: 9px 10px;
  color: var(--dim); font-size: 13.5px;
  transition: color .16s;
}
.doku-heim:hover { color: var(--fg); }
.doku-heim svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; rotate: 180deg; }

/* ── Kopfzeile ───────────────────────────────────────────────────────────
   Traegt am Schreibtisch nur Sprache und Login; der Menue-Knopf erscheint
   erst, wenn die Schiene verschwindet. */
.doku-kopf {
  position: sticky; top: 0; z-index: 30;
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--doku-kopf); padding: 0 clamp(20px, 3vw, 40px);
  /* Deckend statt durchscheinend: die Zeile trug einen `backdrop-filter:
     blur(14px)` bei 86 % Deckung - gemessen war ihre Farbe exakt die des
     Hintergrunds, der Blur also unsichtbar. Sichtbar war nur, dass Chrome bei
     JEDEM Scroll-Frame den Text dahinter neu rastern und weichzeichnen musste. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Wo man ist. Die Schiene sagt es auch, aber sie ist am Handy zu und beim
   Runterscrollen weit weg - die Zeile bleibt oben stehen. */
.doku-kopf-start { display: flex; align-items: center; gap: 8px; min-width: 0; }
.doku-ort {
  min-width: 0;
  color: var(--fg); font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doku-ort span { color: var(--dim); }
.doku-ort span::after { content: "/"; margin: 0 8px; color: var(--line-2); }
/* Auch der geerbte Login-Knopf wird hier eckig: als einzige Pille zwischen
   lauter eckigen Elementen fiele er aus der Reihe. Die Landing behaelt ihre
   runde Form, die Regel gilt nur in der Doku. */
.doku-kopf-end { display: flex; align-items: center; gap: 10px; }
.doku-kopf-end .btn { border-radius: var(--doku-r-xs); }
.doku-sprache {
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--doku-r-xs);
  color: var(--dim); font-size: 12.5px; letter-spacing: .04em;
  transition: color .16s, border-color .16s;
}
.doku-sprache:hover { color: var(--fg); border-color: var(--glanz); }
.doku-knopf { display: none; }

/* ── Inhalt ──────────────────────────────────────────────────────────── */
.doku-inhalt {
  grid-column: 2; grid-row: 2;
  display: grid; grid-template-columns: minmax(0, var(--doku-spalte)) var(--doku-marken);
  align-content: start;
  /* Der Textblock sitzt mittig im freien Raum. Linksbuendig klebte er bei
     zugeklappter Schiene am Fensterrand, waehrend rechts ein Viertel leer blieb. */
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(38px, 5vw, 62px) clamp(20px, 3vw, 40px) 100px;
}
.doku-doc { min-width: 0; }
.doku-doc h1 { font-size: clamp(32px, 4.4vw, 46px); }
.doku-intro {
  margin-top: 16px; max-width: 62ch;
  color: var(--mid); font-size: 17.5px; line-height: 1.66;
}
.doku-doc h2 {
  margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 21px; line-height: 1.3;
  scroll-margin-top: calc(var(--doku-kopf) + 20px);
}
.doku-doc p { margin-top: 15px; max-width: 62ch; color: var(--mid); font-size: 15.5px; line-height: 1.75; }
.doku-doc b { color: var(--fg); font-weight: 600; }
.doku-doc a:not(.doku-weiter) {
  color: var(--fg); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--line-2);
}
.doku-doc a:not(.doku-weiter):hover { text-decoration-color: currentColor; }

/* Der abgesetzte Kasten: was jemand auch dann mitnimmt, wenn er nur ueberfliegt. */
/* Kein Farbbalken: Gruen heisst hier wie ueberall "laeuft/Geld" und nicht
   "Achtung" - als Markierung an jedem Hinweis war es lauter als der Satz. */
.doku-merk {
  margin-top: 22px !important; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--doku-r);
  background: var(--flaeche); color: var(--fg) !important;
}

.doku-liste { margin-top: 16px; max-width: 62ch; display: grid; gap: 10px; }
.doku-liste li { position: relative; padding-left: 20px; color: var(--mid); font-size: 15.5px; line-height: 1.7; }
.doku-liste li::before {
  content: ""; position: absolute; left: 3px; top: .72em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--dim);
}

/* Die Kette: die Zahl steht in der Spalte, der Text daneben, damit die Schritte
   eine gemeinsame Textkante haben statt eingerueckter Absaetze. */
.doku-schritte { margin-top: 22px; max-width: 62ch; display: grid; gap: 14px; counter-reset: doku; }
.doku-schritte li {
  counter-increment: doku;
  position: relative; display: grid; gap: 3px;
  padding: 0 0 0 42px;
}
.doku-schritte li::before {
  content: counter(doku);
  position: absolute; left: 0; top: -1px;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: var(--doku-r-xs);
  border: 1px solid var(--line-2);
  color: var(--dim); font-size: 12px;
}
.doku-schritte b { color: var(--fg); font-size: 15.5px; font-weight: 600; }
.doku-schritte span { color: var(--mid); font-size: 14.5px; line-height: 1.65; }

/* Eingabe gegen Ergebnis. Der Pfeil ist das Argument der Seite: EIN Satz wird
   zu einem fertigen Auftrag. */
.doku-paar {
  margin-top: 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  /* Beide Karten gleich hoch. Mittig ausgerichtet sassen sie versetzt, weil die
     rechte fuenf Zeilen hat und die linke zwei - der Block stand dann schief. */
  align-items: stretch; gap: 16px;
}
/* Kopf oben, Inhalt mittig im Rest: beide Karten sind gleich hoch, aber die
   linke traegt zwei Zeilen und die rechte fuenf - unten buendig sah die linke
   nach halb leer aus. */
.doku-paar-teil {
  display: grid; grid-template-rows: auto 1fr; gap: 10px;
  padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--doku-r);
  background: var(--flaeche);
}
.doku-paar-teil > :last-child { align-self: center; }
.doku-paar-kopf { color: var(--dim); font-size: 12px; }
.doku-zitat { margin: 0 !important; color: var(--fg) !important; font-size: 15px !important; line-height: 1.65 !important; }
.doku-paar-pfeil { display: grid; place-items: center; color: var(--dim); }
.doku-paar-pfeil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.doku-felder { display: grid; gap: 8px; }
.doku-felder > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.doku-felder dt { color: var(--dim); font-size: 12.5px; }
.doku-felder dd { color: var(--fg); font-size: 14px; line-height: 1.5; }

/* Bilder liegen im Rahmen und tragen ihre Masse am Element: sonst ruckt der
   Text beim Nachladen genau da, wo gerade gelesen wird. */
.doku-bild { margin-top: 22px; }
.doku-bild img {
  width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--doku-r);
  background: var(--bg2);
}
.doku-bild.is-schmal { max-width: 380px; }
.doku-bild figcaption { margin-top: 11px; color: var(--dim); font-size: 13px; line-height: 1.6; }

.doku-tab-huelle { margin-top: 20px; max-width: 62ch; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--doku-r); }
.doku-tab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.doku-tab th, .doku-tab td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.doku-tab th { background: var(--flaeche); color: var(--fg); font-weight: 600; font-size: 12.5px; }
.doku-tab td { color: var(--mid); border-top: 1px solid var(--line); }
.doku-tab td:first-child { color: var(--fg); }

/* ── Fuss der Seite ────────────────────────────────────────────────────── */
.doku-fuss { margin-top: 58px; padding-top: 28px; border-top: 1px solid var(--line); }
.doku-weiter {
  display: flex; align-items: center; gap: 14px;
  max-width: 62ch; padding: 16px 20px;
  border: 1px solid var(--line); border-radius: var(--doku-r);
  transition: background-color .18s, border-color .18s;
}
.doku-weiter:hover { background: var(--flaeche); border-color: var(--line-2); }
.doku-weiter span { color: var(--dim); font-size: 12.5px; }
.doku-weiter b { flex: 1; color: var(--fg); font-size: 15.5px; font-weight: 600; }
.doku-weiter svg { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--dim); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.doku-weiter:hover svg { stroke: var(--fg); }
.doku-hilfe { margin-top: 20px !important; color: var(--dim) !important; font-size: 14px !important; }

/* ── Marken rechts ─────────────────────────────────────────────────────── */
.doku-marken {
  position: sticky; top: calc(var(--doku-kopf) + 34px); align-self: start;
  display: grid; gap: 1px;
  max-height: calc(100dvh - var(--doku-kopf) - 60px); overflow-y: auto;
}
.doku-marken-kopf { padding: 0 10px 8px; color: var(--dim); font-size: 12px; }
.doku-marken a {
  padding: 6px 10px; border-radius: var(--doku-r-xs);
  color: var(--dim); font-size: 13px; line-height: 1.45;
  transition: color .16s, background-color .16s;
}
.doku-marken a:hover { color: var(--fg); background: var(--flaeche); }
.doku-marken a.is-on { color: var(--fg); }

/* ── Schmaler ──────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .doku-inhalt { grid-template-columns: minmax(0, 1fr); }
  .doku-marken { display: none; }
}

@media (max-width: 999px) {
  /* Die Schiene wird zur Schublade. Sie bleibt im DOM an derselben Stelle,
     damit die Tastaturfolge (Marke, Themen, Inhalt) dieselbe bleibt. */
  .doku { grid-template-columns: minmax(0, 1fr); }
  .doku-klapp { display: none; }
  .doku-kopf { grid-column: 1; }
  /* Der Knopf nimmt den Platz des Ortes ein: beide zusammen passen auf einem
     390er Schirm nicht neben Sprache und Login. */
  .doku-ort { display: none; }
  .doku-inhalt { grid-column: 1; padding-top: clamp(26px, 5vw, 40px); }
  .doku-schiene { grid-column: 1; }
  .doku-knopf {
    display: inline-flex; align-items: center; gap: 9px;
    height: 38px; padding: 0 15px 0 12px;
    border: 1px solid var(--line-2); border-radius: var(--doku-r-xs);
    color: var(--fg); font-size: 14px;
  }
  .doku-knopf i, .doku-knopf i::before, .doku-knopf i::after {
    content: ""; display: block; width: 15px; height: 1.5px;
    background: currentColor; border-radius: 2px;
  }
  .doku-knopf i { position: relative; }
  .doku-knopf i::before { position: absolute; top: -5px; }
  .doku-knopf i::after { position: absolute; top: 5px; }

  .doku-schiene {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: min(310px, 84vw);
    background: var(--bg2);
    translate: -100% 0;
    transition: translate .28s var(--ease);
  }
  .doku.is-menue .doku-schiene { translate: 0 0; }
  /* Der Grund liegt UEBER dem Inhalt und unter der Schublade: ohne ihn scrollt
     die Seite hinter dem offenen Menue weiter. */
  .doku.is-menue::before {
    content: ""; position: fixed; inset: 0; z-index: 45;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
  }
  .doku.is-menue { overflow: clip; }
}

@media (max-width: 560px) {
  .doku-paar { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .doku-paar-pfeil { rotate: 90deg; }
  .doku-inhalt { padding-left: 18px; padding-right: 18px; }
  .doku-kopf { padding-inline: 18px; }
  .doku-felder > div { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .doku-schiene { transition: none; }
}