/* Erzeugt von handbuch-bauen.py aus Rivet/Resources/Handbuch_de.html.
   Nicht von Hand ändern — der nächste Lauf überschreibt alles. */

body.rivet .rv-manual {
  --grund: #F7F8FB; --karte: #FFFFFF; --kante: rgba(28,28,34,.08);
  --linie: rgba(28,28,34,.07);
  --text: #1C1C22; --text-2: rgba(0,0,0,.60); --text-3: rgba(0,0,0,.38);
  --akzent: #3A52C9; --akzent-flaeche: rgba(76,111,239,.10); --akzent-kante: rgba(76,111,239,.26);
  --gruen: #1F8A62; --gruen-flaeche: rgba(47,183,131,.12); --gruen-kante: rgba(47,183,131,.26);
  --code: rgba(0,0,0,.05);
  --r-karte: 16px; --r-feld: 12px; --r-klein: 8px; --r-marke: 5px;
  --schrift: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Dunkelmodus entfällt im Web – siehe handbuch-bauen.py */

body.rivet .rv-manual * { box-sizing: border-box; }
body.rivet .rv-manual { -webkit-text-size-adjust: 100%; }
body.rivet .rv-manual {
  margin: 0; background: var(--grund); color: var(--text);
  font: 400 15px/1.55 var(--schrift); text-rendering: optimizeLegibility;
}

/* --- Gerüst: Verzeichnis links, Text rechts ------------------------------ */
body.rivet .rv-manual .rahmen { display: flex; align-items: flex-start; gap: 0; }

body.rivet .rv-manual nav {
  position: sticky; top: 0; flex: 0 0 258px; height: 100vh; overflow-y: auto;
  padding: 22px 14px 40px 20px; border-right: 1px solid var(--kante);
}
body.rivet .rv-manual nav .marke {
  display: flex; align-items: center; gap: 8px; margin: 2px 0 16px 6px;
}
body.rivet .rv-manual nav .marke b { font: 600 15px/1 var(--schrift); letter-spacing: -.2px; }
body.rivet .rv-manual nav .marke span {
  font: 600 9px/1 var(--mono); letter-spacing: .8px; color: var(--gruen);
  background: var(--gruen-flaeche); border: 1px solid var(--gruen-kante);
  border-radius: 999px; padding: 4px 8px;
}
body.rivet .rv-manual #suche {
  width: 100%; margin-bottom: 14px; padding: 8px 11px;
  font: 400 13px/1.2 var(--schrift); color: var(--text);
  background: var(--karte); border: 1px solid var(--kante); border-radius: var(--r-feld);
}
body.rivet .rv-manual #suche:focus { outline: 2px solid var(--akzent-kante); outline-offset: 1px; }
body.rivet .rv-manual #treffer {
  display: flex; align-items: center; gap: 6px;
  margin: -6px 0 12px 2px; font: 400 11px/1.4 var(--mono); color: var(--text-3);
}
body.rivet .rv-manual #treffer:empty,
body.rivet .rv-manual #zahl:empty { margin: 0; }
body.rivet .rv-manual #blaettern { display: flex; align-items: center; gap: 2px; margin-left: auto; }
body.rivet .rv-manual #blaettern button {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  width: 20px; height: 20px; padding: 0; line-height: 18px; text-align: center;
  font: 400 13px/18px var(--schrift); color: var(--text-2);
  background: var(--karte); border: 1px solid var(--kante); border-radius: var(--r-klein);
}
body.rivet .rv-manual #blaettern button:hover { background: var(--akzent-flaeche); color: var(--text); }
body.rivet .rv-manual #blaettern button:active { background: var(--akzent-kante); }
body.rivet .rv-manual #stelle { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }

/* **Die Treffer im Text.** Ohne Hervorhebung sagt die Suche nur, WELCHES Kapitel etwas enthaelt -
   in einem Kapitel von zwei Bildschirmseiten ist das der halbe Weg. Der laufende Treffer ist
   kraeftiger als die uebrigen, sonst weiss man beim Blaettern nicht, wo man gerade steht. */
body.rivet .rv-manual mark.treffer {
  background: var(--akzent-flaeche); color: inherit;
  border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px var(--akzent-kante);
}
body.rivet .rv-manual mark.treffer.aktiv { background: var(--akzent); color: #fff; box-shadow: none; }
body.rivet .rv-manual nav ol { list-style: none; margin: 0; padding: 0; }
body.rivet .rv-manual nav > ol > li { margin-bottom: 1px; }
body.rivet .rv-manual nav a {
  display: flex; gap: 9px; padding: 5px 9px; border-radius: var(--r-klein);
  color: var(--text-2); text-decoration: none; font-size: 13px;
}
body.rivet .rv-manual nav a:hover { background: var(--akzent-flaeche); color: var(--text); }
body.rivet .rv-manual nav a.hier { background: var(--akzent-flaeche); color: var(--text); font-weight: 600; }
body.rivet .rv-manual nav a .n { flex: none; width: 18px; color: var(--text-3); font: 400 11px/1.5 var(--mono); }
body.rivet .rv-manual nav ol ol a { padding-left: 36px; font-size: 12.5px; }
body.rivet .rv-manual nav ol ol a .n { width: 24px; }

body.rivet .rv-manual main { flex: 1 1 auto; min-width: 0; padding: 34px 40px 120px; }
body.rivet .rv-manual .satz { max-width: 74ch; }

/* --- Kopf ---------------------------------------------------------------- */
body.rivet .rv-manual .kicker { font: 600 10.5px/1 var(--mono); letter-spacing: .4px; text-transform: uppercase;
          color: var(--text-3); }
body.rivet .rv-manual h1 { margin: 10px 0 0; font: 600 40px/1.08 var(--schrift); letter-spacing: -1px; }
body.rivet .rv-manual .vorspann { margin-top: 10px; }
body.rivet .rv-manual .vorspann p:first-of-type { font-size: 18px; color: var(--text-2); max-width: 46ch; }
body.rivet .rv-manual .stand {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--kante);
  font: 400 11px/1.6 var(--mono); color: var(--text-3);
}

/* --- Kapitel ------------------------------------------------------------- */
body.rivet .rv-manual section { margin-top: 56px; scroll-margin-top: 18px; }
body.rivet .rv-manual h2 {
  margin: 0 0 4px; font: 600 27px/1.15 var(--schrift); letter-spacing: -.4px;
  display: flex; align-items: baseline; gap: 12px;
}
body.rivet .rv-manual h2 .nr { font: 600 12px/1 var(--mono); color: var(--text-3); letter-spacing: .4px; }
body.rivet .rv-manual h2 + * { margin-top: 14px; }
body.rivet .rv-manual h3 {
  margin: 30px 0 0; font: 600 16px/1.3 var(--schrift);
  display: flex; align-items: baseline; gap: 10px;
}
body.rivet .rv-manual h3 .nr { font: 400 11px/1 var(--mono); color: var(--text-3); }
body.rivet .rv-manual h3 + * { margin-top: 8px; }
body.rivet .rv-manual section > :not(h2):not(h3) { max-width: 74ch; }

body.rivet .rv-manual p { margin: 11px 0; }
body.rivet .rv-manual ul,
body.rivet .rv-manual ol { margin: 11px 0; padding-left: 22px; }
body.rivet .rv-manual li { margin: 5px 0; }
body.rivet .rv-manual li > strong:first-child { color: var(--text); }
body.rivet .rv-manual strong { font-weight: 600; }
body.rivet .rv-manual code {
  font: 400 .88em/1 var(--mono); background: var(--code);
  padding: 2px 5px; border-radius: var(--r-marke);
}
body.rivet .rv-manual a { color: var(--akzent); }

body.rivet .rv-manual .merksatz {
  margin: 16px 0; padding: 13px 16px; border-radius: var(--r-feld);
  background: var(--akzent-flaeche); border: 1px solid var(--akzent-kante);
  font-size: 14px;
}

body.rivet .rv-manual .tabelle { margin: 16px 0; max-width: 74ch; overflow-x: auto; }
body.rivet .rv-manual table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
body.rivet .rv-manual th {
  text-align: left; padding: 0 14px 8px 0; white-space: nowrap;
  font: 600 10.5px/1 var(--mono); letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--kante);
}
body.rivet .rv-manual td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
body.rivet .rv-manual tr:last-child td { border-bottom: 0; }
body.rivet .rv-manual td:first-child { white-space: nowrap; }
body.rivet .rv-manual td:first-child strong { font-weight: 600; }

body.rivet .rv-manual .nicht-gefunden { display: none; }
body.rivet .rv-manual #leer { display: none; margin-top: 40px; color: var(--text-2); }
body.rivet .rv-manual #leer.zeigen { display: block; }

/* --- Schmal (iPhone) ----------------------------------------------------- */
@media (max-width: 820px) {
  body.rivet .rv-manual .rahmen { flex-direction: column; }
  body.rivet .rv-manual nav {
    position: static; flex: none; width: 100%; height: auto;
    border-right: 0; border-bottom: 1px solid var(--kante); padding: 16px 18px;
  }
  body.rivet .rv-manual nav ol ol { display: none; }
  body.rivet .rv-manual main { padding: 24px 18px 80px; }
  body.rivet .rv-manual h1 { font-size: 30px; }
  body.rivet .rv-manual h2 { font-size: 22px; }
  body.rivet .rv-manual td:first-child { white-space: normal; }
}

/* --- Drucken ------------------------------------------------------------- */
@media print {
  body.rivet .rv-manual nav,
body.rivet .rv-manual #suche,
body.rivet .rv-manual #treffer { display: none !important; }
  /* Gedruckt wird der Text, nicht die Suche von eben. */
  body.rivet .rv-manual mark.treffer { background: none !important; color: inherit !important; box-shadow: none !important; }
  body.rivet .rv-manual { background: #fff; color: #000; font-size: 10.5pt; }
  body.rivet .rv-manual main { padding: 0; }
  body.rivet .rv-manual section { break-inside: auto; page-break-before: always; margin-top: 0; }
  body.rivet .rv-manual section:first-of-type { page-break-before: avoid; }
  body.rivet .rv-manual h2,
body.rivet .rv-manual h3 { break-after: avoid; }
  body.rivet .rv-manual .tabelle,
body.rivet .rv-manual table,
body.rivet .rv-manual ul,
body.rivet .rv-manual ol,
body.rivet .rv-manual .merksatz { break-inside: avoid; }
  body.rivet .rv-manual .satz,
body.rivet .rv-manual section > *,
body.rivet .rv-manual .tabelle { max-width: none; }
  body.rivet .rv-manual a { color: #000; text-decoration: none; }
}


/* ── Nur fuers Web ──────────────────────────────────────────────────────────
   Die Kopfleiste der Website ist 64 px hoch und klebt oben. Das Verzeichnis
   muss darunter anfangen, sonst verschwindet seine erste Zeile dahinter.
   Unter 821 px steht das Verzeichnis ohnehin still ueber dem Text. */
@media (min-width: 821px) {
  body.rivet .rv-manual nav { top: 64px; height: calc(100vh - 64px); }
}