/*
 * Stildatei des Nutzerhandbuchs (website/handbuch/*.html).
 *
 * WARUM EINE EIGENE DATEI UND NICHT EIN ZUSATZ ZU styles.css:
 * `scripts/lib/htmlSeite.mjs` verlinkt genau EINE Stildatei je Seite. Die
 * Handbuchseiten laden `styles.css` also gar nicht — sie sind auf diese Datei
 * allein angewiesen. Umgekehrt bleibt `styles.css` unberuehrt: Die Werbeseite
 * und die Rechtstexte haengen daran, und eine Regel, die dort ungewollt
 * mitgreift, faellt erst auf, wenn jemand die Startseite ansieht.
 *
 * DIE FOLGE, DIE MAN KENNEN MUSS: Die Farbmarken unten stehen ZWEIMAL im
 * Repo — hier und in `website/styles.css`. Die Werte sind absichtlich
 * zeichengleich, damit Startseite und Handbuch nicht auseinanderlaufen. Wer
 * dort eine Farbe aendert, zieht sie hier nach; ein Programm prueft das nicht.
 * Verworfen wurde, die Marken in eine dritte Datei zu ziehen und beide sie
 * laden zu lassen: Das waere ein zweiter Netzabruf je Seite fuer neun Zeilen,
 * und `htmlSeite.mjs` kann ohnehin nur eine Datei verlinken.
 *
 * Der Dunkelmodus laeuft ueber dieselbe `prefers-color-scheme`-Regel wie in
 * `styles.css` — es gibt keinen Umschalter, weil die Seiten javascriptfrei
 * sind (Begruendung im Kopf von `htmlSeite.mjs`).
 *
 * AUFBAU DIESER DATEI
 *   1. Farbmarken (hell und dunkel)
 *   2. Grundlagen: Koerper, Verweise, Ueberschriften
 *   3. Das Geruest: Sprungmarke, Raster, Seitenleiste, Gliederung
 *   4. Die Bloecke des Wandlers: doku-code, -liste, -tabelle, -zitat, -linie
 *   5. Fusszeile und Blaetter-Verweise
 *   6. Druck
 *
 * Die Klassennamen kommen aus zwei Quellen und werden nicht hier erfunden:
 * `SEITEN_KLASSEN` in `scripts/lib/htmlSeite.mjs` (Geruest) und der
 * Klassenpraefix `doku` aus `scripts/lib/markdown.mjs` (Bloecke). Die
 * `blaettern-*`-Klassen setzt `scripts/doku-handbuch.mjs` in der Fusszeile.
 */

/* ---------------------------------------------------------------------------
 * 1. Farbmarken — zeichengleich mit website/styles.css
 * ------------------------------------------------------------------------ */

:root {
  --blue: #0b5cab;
  --blue-dark: #084a8c;
  --blue-light: #2b7fd4;
  --ink: #10161d;
  --muted: #5b6672;
  --bg: #ffffff;
  --bg-soft: #f4f7fb;
  --border: #e2e8f0;
  --card: #ffffff;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(11, 92, 171, 0.08);
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef2f7;
    --muted: #a4b0bd;
    --bg: #0d1117;
    --bg-soft: #131a23;
    --border: #24303d;
    --card: #131a23;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

/* ---------------------------------------------------------------------------
 * 2. Grundlagen
 * ------------------------------------------------------------------------ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-light); }
a:hover { color: var(--blue); }

/* Ein Rahmen um das, was gerade den Fokus hat. Ohne ihn ist die Seite mit der
   Tastatur nicht bedienbar — und die Sprungmarke oben waere sinnlos. */
a:focus-visible {
  outline: 2px solid var(--blue-light);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  letter-spacing: -0.01em;
  /* `scroll-margin`, weil die Gliederung rechts auf Anker springt: ohne sie
     klebt die angesprungene Ueberschrift am oberen Fensterrand. */
  scroll-margin-top: 24px;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 24px; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin: 40px 0 12px; }
h3 { font-size: 1.1rem; margin: 28px 0 8px; }
h4 { font-size: 1rem; margin: 22px 0 6px; }

p { margin: 0 0 16px; }

strong { color: var(--ink); }

/* ---------------------------------------------------------------------------
 * 3. Das Geruest
 * ------------------------------------------------------------------------ */

/* Die Sprungmarke ist das erste fokussierbare Element der Seite. Sie liegt
   ausserhalb des Sichtfelds, bis sie den Fokus bekommt — `display: none`
   waere falsch, damit nimmt sie kein Browser in die Tabulator-Reihenfolge. */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  padding: 10px 18px;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.sprungmarke:focus {
  left: 0;
  color: #fff;
}

.seite {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 8px;
  display: grid;
  gap: 32px;
  grid-template-columns: minmax(0, 1fr);
}

/* --- Seitenleiste: die zwoelf Kapitel ------------------------------------ */

.seitenleiste {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.seitenleiste-titel {
  margin: 0 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.seitenleiste-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Am Telefon eine umbrechende Reihe kurzer Marken statt dreizehn Zeilen
     ueber dem eigentlichen Text. Die Reihenfolge im Dokument bleibt dabei
     unangetastet — sie ist zugleich die Reihenfolge fuer Vorleser und
     Tabulator. */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.seitenleiste-liste a {
  display: block;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.86rem;
  text-decoration: none;
  color: var(--muted);
}
.seitenleiste-liste a:hover {
  color: var(--ink);
  border-color: var(--blue-light);
}
.seitenleiste-liste a[aria-current="page"] {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

/* --- Inhalt --------------------------------------------------------------- */

.inhalt {
  min-width: 0;
}

/* --- Gliederung dieser Seite --------------------------------------------- */

.gliederung {
  min-width: 0;
  font-size: 0.9rem;
}

.gliederung-titel {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.gliederung ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--border);
}
.gliederung > ul {
  padding-left: 0;
  border-left: 0;
}
.gliederung li { margin: 4px 0; }
.gliederung a {
  color: var(--muted);
  text-decoration: none;
}
.gliederung a:hover { color: var(--ink); }

/* --- Zweispaltig ab 900 px, dreispaltig ab 1180 px ------------------------ */

@media (min-width: 900px) {
  .seite {
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-areas:
      "nav inhalt"
      "nav gliederung";
    align-items: start;
  }
  .seitenleiste {
    grid-area: nav;
    position: sticky;
    top: 24px;
  }
  .inhalt { grid-area: inhalt; }
  .gliederung { grid-area: gliederung; }

  /* Ab hier ist Platz fuer eine Liste statt der Marken. */
  .seitenleiste-liste {
    display: block;
  }
  .seitenleiste-liste a {
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    padding: 4px 0 4px 10px;
  }
  .seitenleiste-liste a:hover {
    border-left-color: var(--border);
  }
  .seitenleiste-liste a[aria-current="page"] {
    color: var(--blue-light);
    background: transparent;
    border-left-color: var(--blue-light);
    font-weight: 600;
  }
}

@media (min-width: 1180px) {
  .seite {
    grid-template-columns: 14rem minmax(0, 1fr) 12rem;
    grid-template-areas: "nav inhalt gliederung";
  }
  .gliederung {
    position: sticky;
    top: 24px;
  }
}

/* ---------------------------------------------------------------------------
 * 4. Die Bloecke des Wandlers
 * ------------------------------------------------------------------------ */

/* --- Listen --------------------------------------------------------------- */

.doku-liste {
  margin: 0 0 16px;
  padding-left: 22px;
}
.doku-liste li { margin: 6px 0; }
.doku-liste .doku-liste { margin: 6px 0 0; }

/* --- Quelltext ------------------------------------------------------------ */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
}

/* Nur der Codespan im Fliesstext bekommt einen Hintergrund. Im Block waere er
   ein Kasten im Kasten. */
:not(pre) > code {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 5px;
}

.doku-code {
  margin: 0 0 16px;
  padding: 14px 16px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Ein Codeblock bricht nicht um — er scrollt. Sonst zerreisst eine lange
     Zeile die Rechnung, die sie zeigen soll. */
  overflow-x: auto;
  line-height: 1.5;
}

/* --- Tabellen ------------------------------------------------------------- */

.doku-tabelle {
  /* `block` und nicht `table`: Nur ein Blockelement scrollt waagerecht. Eine
     Tabelle mit vier Spalten passt am Telefon sonst nicht, und die Seite
     selbst faengt an zu wandern. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 0.94rem;
}

.doku-tabelle th,
.doku-tabelle td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

.doku-tabelle thead th {
  background: var(--bg-soft);
  font-weight: 700;
}

/* Die Ausrichtungsklassen des Wandlers (`:---`, `:---:`, `---:`). */
.doku-links { text-align: left; }
.doku-mitte { text-align: center; }
.doku-rechts { text-align: right; }

/* --- Zitatkaesten --------------------------------------------------------- */

.doku-zitat {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--bg-soft);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
}
.doku-zitat > :last-child { margin-bottom: 0; }

/* --- Trennlinie ----------------------------------------------------------- */

.doku-linie {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}

/* ---------------------------------------------------------------------------
 * 5. Fusszeile und Blaetter-Verweise
 * ------------------------------------------------------------------------ */

.fusszeile {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.92rem;
}

.fusszeile-stand {
  margin: 0 0 16px;
}

/* Der Sprachwaehler.
   Er steht in der FUSSZEILE und nicht in der Seitenleiste, weil er dort ohne
   eine einzige Aenderung am Raster auskommt — und weil er kein Navigationsziel
   ist, das man beim Lesen sucht, sondern eines, das man einmal benutzt.
   Gewoehnliche Verweise, kein Skript: Diese Seiten sind javascriptfrei, und ein
   Test haelt das fest.
   Jeder Verweis zeigt auf DIESELBE Seite in der Zielsprache, nicht auf deren
   Startseite. */
.sprachwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 20px 0 0;
}

.sprachwahl-titel {
  font-size: 0.86rem;
  color: var(--muted);
}

.sprachwahl-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sprachwahl-liste a {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
}

.sprachwahl-liste a:hover {
  color: var(--ink);
  border-color: var(--border);
}

/* Die eingestellte Sprache steht MIT in der Liste — wer eine Seite in einer
   Sprache offen hat, die er nicht liest, saehe sonst nicht, welche gilt. */
.sprachwahl-liste a[aria-current="true"] {
  color: var(--ink);
  background: var(--bg-soft);
  border-color: var(--border);
  font-weight: 600;
}

.blaettern {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  justify-content: space-between;
}

.blaettern a {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.blaettern a:hover {
  border-color: var(--blue-light);
}

.blaettern-weiter { text-align: right; }

/* Der Platzhalter im ersten und im letzten Kapitel. Er haelt die Uebersicht
   in der Mitte, statt sie nach links rutschen zu lassen. */
.blaettern-leer {
  flex: 1 1 12rem;
}

.blaettern-mitte {
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}

.blaettern-marke {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.blaettern-titel {
  font-weight: 600;
}

.fusszeile-heim {
  margin: 20px 0 0;
  text-align: center;
}

/* Am Telefon untereinander — drei Kaesten nebeneinander waeren je 6 rem breit
   und truegen zwei Woerter pro Zeile. */
@media (max-width: 640px) {
  .blaettern { flex-direction: column; }
  .blaettern-weiter { text-align: left; }
  .blaettern-leer { display: none; }
}

/* ---------------------------------------------------------------------------
 * 6. Druck
 * ------------------------------------------------------------------------ */

@media print {
  .sprungmarke,
  .seitenleiste,
  .gliederung,
  .blaettern,
  .fusszeile-heim {
    display: none;
  }
  .seite {
    display: block;
    max-width: none;
    padding: 0;
  }
  body {
    color: #000;
    background: #fff;
  }
  a { color: #000; }
  /* Eine Ueberschrift allein am Seitenende ist eine Ueberschrift ohne Text. */
  h2, h3, h4 { break-after: avoid; }
  .doku-tabelle, .doku-zitat, .doku-code { break-inside: avoid; }
}