/* ===============================================================
   Dokumentstil — Farbtokens und Renderstil des Markdown-Textes.

   Dieses Blatt beschreibt allein das gerenderte Dokument, nicht die
   Bedienoberfläche. Es ist im HTML mit [data-doc] markiert und wird beim
   Ausgeben als HTML oder PDF eingebettet, damit die erzeugte Datei
   eigenständig bleibt. Wer die Darstellung ändern will, ändert nur hier.
   =============================================================== */

/* --- Farbtokens nach GitHub Primer (Light & Dark) ---------------- */
:root {
  --canvas:            #ffffff;
  --canvas-subtle:     #f6f8fa;
  --canvas-inset:      #f6f8fa;
  --border:            #d1d9e0;
  --border-muted:      #d1d9e0;
  --fg:                #1f2328;
  --fg-muted:          #59636e;
  --fg-subtle:         #6e7781;
  --accent-fg:         #0969da;
  --neutral-muted:     rgba(129,139,152,.12);
  --success-fg:        #1a7f37;
  --attention-fg:      #9a6700;
  --danger-fg:         #cf222e;
  --done-fg:           #8250df;
  --shadow:            0 1px 0 rgba(31,35,40,.04);
  --btn-bg:            #f6f8fa;
  --btn-hover:         #eef1f4;
  --overlay:           rgba(9,105,218,.06);
  color-scheme: light;
}
html[data-theme="dark"] {
  --canvas:            #0d1117;
  --canvas-subtle:     #151b23;
  --canvas-inset:      #010409;
  --border:            #3d444d;
  --border-muted:      #2a3038;
  --fg:                #f0f6fc;
  --fg-muted:          #9198a1;
  --fg-subtle:         #8b949e;
  --accent-fg:         #4493f8;
  --neutral-muted:     rgba(101,108,118,.2);
  --success-fg:        #3fb950;
  --attention-fg:      #d29922;
  --danger-fg:         #f85149;
  --done-fg:           #ab7df8;
  --shadow:            0 0 transparent;
  --btn-bg:            #212830;
  --btn-hover:         #262c36;
  --overlay:           rgba(68,147,248,.1);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --canvas:#0d1117; --canvas-subtle:#151b23; --canvas-inset:#010409;
    --border:#3d444d; --border-muted:#2a3038; --fg:#f0f6fc; --fg-muted:#9198a1;
    --fg-subtle:#8b949e; --accent-fg:#4493f8; --neutral-muted:rgba(101,108,118,.2);
    --success-fg:#3fb950; --attention-fg:#d29922; --danger-fg:#f85149; --done-fg:#ab7df8;
    --shadow:0 0 transparent; --btn-bg:#212830; --btn-hover:#262c36;
    --overlay:rgba(68,147,248,.1); color-scheme: dark;
  }
}

/* --- markdown-body — GitHub Renderstil --------------------------- */
.markdown-body { font-size: 16px; line-height: 1.5; word-wrap: break-word; }
.markdown-body > *:first-child { margin-top: 0 !important; }
.markdown-body > *:last-child { margin-bottom: 0 !important; }
.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol,
.markdown-body dl, .markdown-body table, .markdown-body pre, .markdown-body details {
  margin-top: 0; margin-bottom: 16px;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin: 24px 0 16px; font-weight: 600; line-height: 1.25;
  position: relative; scroll-margin-top: 16px;
}
.markdown-body h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid var(--border-muted); }
.markdown-body h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid var(--border-muted); }
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1em; }
.markdown-body h5 { font-size: .875em; }
.markdown-body h6 { font-size: .85em; color: var(--fg-muted); }
.markdown-body .anchor {
  position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  padding: 2px; line-height: 1; opacity: 0;
}
.markdown-body h1:hover .anchor, .markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor, .markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor, .markdown-body h6:hover .anchor,
.markdown-body .anchor:focus { opacity: 1; }
.markdown-body .anchor svg { fill: var(--fg-muted); vertical-align: middle; }

.markdown-body a { color: var(--accent-fg); text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body strong { font-weight: 600; }
.markdown-body del { color: var(--fg-muted); }
.markdown-body hr {
  height: .25em; margin: 24px 0; padding: 0;
  background: var(--border); border: 0;
}
.markdown-body blockquote {
  padding: 0 1em; color: var(--fg-muted);
  border-left: .25em solid var(--border);
}
.markdown-body blockquote > *:last-child { margin-bottom: 0; }

.markdown-body ul, .markdown-body ol { padding-left: 2em; }
.markdown-body li + li { margin-top: .25em; }
.markdown-body li > ul, .markdown-body li > ol { margin: .25em 0 0; }
.markdown-body li.task { list-style: none; margin-left: -1.4em; }
.markdown-body li.task input { margin: 0 .4em .2em .2em; vertical-align: middle; }

.markdown-body code, .markdown-body tt {
  padding: .2em .4em; margin: 0; font-size: 85%;
  background: var(--neutral-muted); border-radius: 6px; white-space: break-spaces;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.markdown-body pre {
  padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45;
  background: var(--canvas-subtle); border-radius: 6px;
  border: 1px solid transparent;
}
html[data-theme="dark"] .markdown-body pre { border-color: var(--border-muted); }
.markdown-body pre code {
  padding: 0; background: transparent; border: 0; font-size: 100%; white-space: pre;
}
.markdown-body pre .lang {
  display: block; margin: -4px 0 8px; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-subtle);
}

.markdown-body table { display: block; width: max-content; max-width: 100%; overflow: auto; border-spacing: 0; border-collapse: collapse; }
.markdown-body table th, .markdown-body table td { padding: 6px 13px; border: 1px solid var(--border); }
.markdown-body table th { font-weight: 600; background: var(--canvas-subtle); }
.markdown-body table tr:nth-child(2n) td { background: var(--canvas-subtle); }

.markdown-body img { max-width: 100%; background: var(--canvas); border-radius: 6px; }
.markdown-body kbd {
  display: inline-block; padding: 3px 5px; font-size: 11px; line-height: 10px;
  color: var(--fg); background: var(--canvas-subtle);
  border: 1px solid var(--border-muted); border-bottom-color: var(--border);
  border-radius: 6px; box-shadow: inset 0 -1px 0 var(--border);
}

/* --- GitHub-Hinweisblöcke ---------------------------------------- */
.markdown-body .alert {
  padding: 8px 16px; margin-bottom: 16px;
  border-left: .25em solid var(--border); color: var(--fg);
}
.markdown-body .alert > *:last-child { margin-bottom: 0; }
.markdown-body .alert-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; margin-bottom: 4px;
}
.markdown-body .alert-title svg { fill: currentColor; }
.markdown-body .alert-note      { border-color: var(--accent-fg); }
.markdown-body .alert-note .alert-title { color: var(--accent-fg); }
.markdown-body .alert-tip       { border-color: var(--success-fg); }
.markdown-body .alert-tip .alert-title { color: var(--success-fg); }
.markdown-body .alert-important { border-color: var(--done-fg); }
.markdown-body .alert-important .alert-title { color: var(--done-fg); }
.markdown-body .alert-warning   { border-color: var(--attention-fg); }
.markdown-body .alert-warning .alert-title { color: var(--attention-fg); }
.markdown-body .alert-caution   { border-color: var(--danger-fg); }
.markdown-body .alert-caution .alert-title { color: var(--danger-fg); }

/* --- Syntaxfarben im Primer-Stil --------------------------------- */
.tok-com { color: var(--fg-muted); }
.tok-str { color: #0a3069; }
.tok-num { color: #0550ae; }
.tok-key { color: #cf222e; }
.tok-fn  { color: #8250df; }
html[data-theme="dark"] .tok-str { color: #a5d6ff; }
html[data-theme="dark"] .tok-num { color: #79c0ff; }
html[data-theme="dark"] .tok-key { color: #ff7b72; }
html[data-theme="dark"] .tok-fn  { color: #d2a8ff; }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .tok-str { color: #a5d6ff; }
  html[data-theme="auto"] .tok-num { color: #79c0ff; }
  html[data-theme="auto"] .tok-key { color: #ff7b72; }
  html[data-theme="auto"] .tok-fn  { color: #d2a8ff; }
}