/* Hilfe-Seite: baut auf legal.css auf (Farben, Schriften, Kopfzeile); hier nur Breite, Inhaltsverzeichnis, Tabellen, Bilder */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.wrap.wide { max-width: 1140px; }
header.top nav a { color: var(--dim); text-decoration: none; font-size: 15px; }
header.top nav a:hover { color: var(--gold); }

main.help { padding-block: 28px 64px; }
.doc { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 48px; align-items: start; }
.toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; font-size: 15px; line-height: 1.35; padding-right: 6px; }
.toc strong { display: block; color: var(--gold); font: 400 18px/1.2 var(--display); margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0 0 7px; }
.toc ol ol { margin: 7px 0 0 12px; font-size: 14px; }
.toc a { color: var(--fg); text-decoration: none; }
.toc a:hover { color: var(--gold); text-decoration: underline; }

.article { min-width: 0; }
.article > :first-child { margin-top: 0; }
.lead { font-size: 19px; color: var(--fg); max-width: 68ch; }
.article h2 { font: 400 28px/1.2 var(--display); color: var(--gold); margin: 52px 0 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.article h3 { font: 600 20px/1.3 var(--body); color: var(--fg); margin: 30px 0 8px; }
.article h2, .article h3 { scroll-margin-top: 12px; }
.article p, .article li { max-width: 72ch; }
.article ul, .article ol { margin: 0 0 14px; padding-left: 22px; }
.article li { margin-bottom: 6px; }
.ui { color: var(--gold); }
kbd { font: 400 14px var(--mono); color: var(--rune); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }

.tbl { overflow-x: auto; margin: 0 0 18px; }
.article table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.4; }
.article th { text-align: left; color: var(--gold); font-weight: 600; border-bottom: 1px solid var(--line); padding: 6px 12px 6px 0; }
.article td { border-bottom: 1px solid #241e15; padding: 6px 12px 6px 0; vertical-align: top; }

figure { margin: 16px 0 22px; }
figure img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 3px; }
figure.small img { max-width: 420px; }
figure.tiny img { max-width: 200px; }
figcaption { color: var(--dim); font-size: 15px; margin-top: 6px; }

.note { border-left: 3px solid var(--line); background: var(--panel); padding: 9px 14px; margin: 0 0 16px; font-size: 16px; max-width: 72ch; }
.note.open { border-left-color: var(--rune); }
.badge { font: 400 12px var(--mono); color: var(--rune); border: 1px solid var(--rune); border-radius: 3px; padding: 1px 5px; white-space: nowrap; vertical-align: 2px; }
footer.legal { border-top: 1px solid var(--line); color: var(--dim); font-size: 15px; padding-block: 18px 30px; }

@media (max-width: 860px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; max-height: none; overflow: visible; border: 1px solid var(--line); background: var(--panel); border-radius: 3px; padding: 14px 16px 8px; }
  .article h2 { font-size: 25px; margin-top: 40px; }
  figure.small img { max-width: 100%; }
}
@media (max-width: 480px) { header.top nav { display: none; } }   /* der Name oben links führt ohnehin zur Startseite */