/* Hilfeseite (Paket 78).

   EIGENES Blatt und kein Abschnitt in stil.css: dort steht die
   Oberflaeche, hier steht ein Dokument. Die zwei haben ausser den Farben
   nichts gemeinsam, und stil.css ist mit 2165 Zeilen schon lang genug.

   Die FARBEN kommen trotzdem von dort: hilfe.html laedt stil.css davor,
   allein wegen der Token in :root und der zwei Bloecke
   :root[data-erscheinung="neu-hell"] und "neu-dunkel". Damit gibt es
   genau EINE Farbtabelle fuer Oberflaeche und Hilfe, und ein spaeter
   geaenderter Ton wirkt an beiden Stellen. Kein Farbwert steht in diesem
   Blatt, nur var(--token).

   Von stil.css greifen sonst nur zwei Regeln: "*" (box-sizing) und
   "html, body". Die zweite wird hier ueberschrieben, denn eine Textseite
   muss scrollen und ihren Text markieren lassen. Alles andere dort ist
   an eigene Klassen gebunden; die Klassen dieser Seite tragen darum
   durchweg das Praefix "hilfe-".

   Die KENNUNGEN der Kapitel tragen aus demselben Grund das Praefix
   "kapitel-". stil.css hat sieben Regeln an einer Kennung, darunter
   "#ansicht" fuer die 3D-Ansicht (position fixed, inset 0). Ein Kapitel
   mit der Kennung "ansicht" bekam die ab und lag quer ueber der halben
   Seite; gemessen am 2026-09-07 beim Bau dieser Seite. */

html, body {
  height: auto;
  min-height: 100%;
  overflow: visible;
  user-select: text;
  font: 14px/1.65 "Segoe UI", "Noto Sans", system-ui, sans-serif;
  background: var(--grund);
  color: var(--schrift);
}

/* ---------- Kopfleiste ---------- */

.hilfe-kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 10px 20px;
  background: var(--leiste);
  border-bottom: 1px solid var(--linie);
  box-shadow: var(--schatten-weich);
}

.hilfe-marke {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

/* Das Wortzeichen und der Name standen bis Paket 126 hier. Seit 127
   tragen sie die gemeinsame Kopfzeile aller Nebenseiten (kopfzeile.css),
   und diese Leiste trägt nur noch das, was sie allein hat: die
   Beschriftung, den Stand und das Suchfeld. */

.hilfe-marke-teil {
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--schrift-matt);
}

.hilfe-suchfeld {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  max-width: 560px;
}

#hilfe-suche {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--feld-rand);
  border-radius: 3px;
  background: var(--feld);
  color: var(--schrift-klar);
  font: inherit;
  outline: none;
}

#hilfe-suche:focus { border-color: var(--akzent); }

.hilfe-trefferzahl {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--schrift-matt);
  white-space: nowrap;
}

/* ---------- Rumpf: Inhaltsverzeichnis links, Text rechts ---------- */

.hilfe-rumpf {
  display: flex;
  align-items: flex-start;
  gap: 34px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 20px 90px;
}

.hilfe-inhalt {
  position: sticky;
  top: 74px;
  flex: 0 0 244px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding-right: 6px;
  font-size: 13px;
}

.hilfe-inhalt a {
  display: block;
  padding: 4px 10px;
  border-left: 2px solid transparent;
  border-radius: 0 2px 2px 0;
  color: var(--schrift-matt);
  text-decoration: none;
}

.hilfe-inhalt a:hover {
  background: var(--zeile-hover);
  color: var(--schrift-klar);
}

.hilfe-inhalt a.hilfe-tief {
  padding-left: 24px;
  font-size: 12.5px;
}

/* Der Eintrag, dessen Abschnitt gerade im Bild steht. */
.hilfe-inhalt a.hilfe-hier {
  border-left-color: var(--akzent);
  background: var(--zeile-hover);
  color: var(--schrift-klar);
}

.hilfe-inhalt .hilfe-zahl {
  float: right;
  margin-left: 8px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--akzent);
  color: var(--schrift-auf-akzent);
  font-size: 11px;
  line-height: 16px;
}

.hilfe-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 780px;
}

/* ---------- Text ---------- */

.hilfe-kapitel { scroll-margin-top: 84px; }

.hilfe-kapitel + .hilfe-kapitel {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--linie-hell);
}

.hilfe-text h2 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--schrift-klar);
}

.hilfe-text h3 {
  margin: 30px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--schrift-klar);
  scroll-margin-top: 84px;
}

.hilfe-text p { margin: 0 0 12px; }

.hilfe-einleitung {
  margin-bottom: 8px;
  padding-left: 12px;
  border-left: 3px solid var(--akzent);
  color: var(--schrift-dialog);
}

.hilfe-text ul, .hilfe-text ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.hilfe-text li { margin-bottom: 6px; }

.hilfe-text b { color: var(--schrift-klar); font-weight: 600; }

.hilfe-text a {
  color: var(--akzent);
  text-decoration: none;
  border-bottom: 1px solid var(--akzent);
}

.hilfe-text a:hover { color: var(--akzent-hover); }

/* Eine offene Stelle im Text (Impressum und Datenschutz, Paket 105): sie
   soll beim Ueberfliegen auffallen, damit niemand eine eckige Klammer
   fuer eine Angabe haelt. Warm und nicht rot: es ist nichts kaputt, es
   fehlt nur noch etwas. */
.luecke {
  padding: 0 4px;
  border-radius: 2px;
  background: var(--akzent-warm);
  color: var(--schrift-auf-akzent);
  font-weight: 600;
}

.hilfe-text table {
  width: 100%;
  margin: 4px 0 16px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.hilfe-text th, .hilfe-text td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--linie-hell);
  text-align: left;
  vertical-align: top;
}

.hilfe-text th {
  background: var(--gruppe);
  color: var(--schrift-klar);
  font-weight: 600;
  white-space: nowrap;
}

.hilfe-text tbody tr:hover { background: var(--zeile-hover); }

/* Die erste Spalte der Kurztasten-Tabelle ist eine Taste. */
#kapitel-kurztasten td:first-child {
  white-space: nowrap;
  font-family: "Consolas", "Cascadia Mono", monospace;
  color: var(--schrift-klar);
}

/* ---------- Lizenzen (Paket 109) ---------- */

/* Der Lizenztext steht Zeile fuer Zeile so da, wie er vergeben wurde.
   Darum ein <pre> und kein Fliesstext; er darf nicht umgebrochen
   werden, und auf einem schmalen Fenster scrollt er in sich selbst
   statt die ganze Seite breit zu machen. */
.hilfe-text pre.hilfe-lizenz {
  margin: 0 0 12px;
  padding: 12px 14px;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--linie-hell);
  border-radius: 4px;
  background: var(--flaeche-tief, transparent);
  font-family: "Consolas", "Cascadia Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
}

.hilfe-text code {
  font-family: "Consolas", "Cascadia Mono", monospace;
  color: var(--schrift-klar);
}

/* ---------- Rechtstexte (Paket 384) ----------
   Datenschutz und Impressum tragen seit 384 den Text der Homepage;
   werkzeuge/kopfzeile_holen.py legt deren Klassen auf die dieser Seite
   (legal-karte heisst hilfe-kapitel, legal-hinweis hilfe-einleitung).
   Neu sind nur der Kopf mit Titel und der Satz zur Herkunft unten. */

.rechtstext-kopf { margin: 0 0 30px; }

.rechtstext-kategorie {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--akzent);
}

.rechtstext-kopf h1 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--schrift-klar);
}

.rechtstext-untertitel { color: var(--schrift-matt); }

/* Der Hinweis der Homepage steht vor den Kapiteln, nicht in einem. */
.hilfe-text > .hilfe-einleitung { margin-bottom: 36px; }

/* Mit .hilfe-text davor: ".hilfe-text p" setzt den Abstand oben sonst auf 0. */
.hilfe-text .rechtstext-herkunft {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--linie-hell);
  font-size: 12.5px;
  color: var(--schrift-matt);
}

/* ---------- Suche ---------- */

.hilfe-text mark {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--akzent-warm);
  color: var(--schrift-auf-akzent);
}

/* Was die Suche wegfiltert. Kein display:none an der Tabelle selbst:
   eine Tabelle ohne Zeilen soll auch verschwinden, darum liegt die
   Regel auf jedem Block. */
.hilfe-aus { display: none !important; }

.hilfe-leer {
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid var(--linie-hell);
  border-radius: 3px;
  background: var(--grund-hell);
  color: var(--schrift-matt);
}

/* ---------- Schmales Fenster ---------- */

@media (max-width: 900px) {
  .hilfe-rumpf {
    flex-direction: column;
    gap: 18px;
    padding-top: 18px;
  }
  .hilfe-inhalt {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    max-height: none;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--linie-hell);
  }
  .hilfe-inhalt a.hilfe-tief { display: none; }
  .hilfe-text { max-width: none; }
  .hilfe-text table { display: block; overflow-x: auto; }
}