/* Hilfe-Bereich: Inhaltsübersicht und Anleitungsabschnitte.
   Abgeleitet aus der Hilfe-Vorlage von 213e-watermark, Variablen wie in tokens.css. */

.helpwrap{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;margin:0 auto}
.toc{position:sticky;top:calc(var(--top-h) + 16px);align-self:start}
.toc-title{margin:0 0 6px;padding:0 10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.toc ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a{display:block;padding:6px 10px;border-radius:8px;color:var(--text);text-decoration:none;font-size:13px}
.toc a:hover{background:var(--raised)}
@media (max-width:860px){.helpwrap{grid-template-columns:1fr}.toc{position:static}}

.doc{max-width:860px;min-width:0}
.doc section{margin:0 0 18px;padding:22px 24px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);scroll-margin-top:calc(var(--top-h) + 16px)}
.doc section>h2{margin:0 0 12px;font-size:19px}
.doc h3{margin:0 0 6px;font-size:15px}
.doc p{margin:0 0 10px}
@media (max-width:600px){.doc section{padding:16px}}

.hint{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:8px;background:var(--brand-50);font-size:13px}

.steps-doc{margin:0;padding-left:22px}
.steps-doc>li{margin-bottom:22px;padding-left:4px}
.steps-doc>li::marker{font-weight:700;color:var(--brand-700)}
.steps-doc .step-body{display:block}

.doc .fig img{border-radius:10px}
.doc .shot{margin:12px 0 0}
.doc .shot img{box-shadow:0 1px 3px rgba(15,23,42,.08)}
.doc .shot img[src*="mobile"]{max-width:375px}
.doc .shots{grid-template-columns:1fr}
.doc details{border-radius:8px}
.doc details p{margin:8px 0 0;font-size:13px}
code{padding:1px 5px;border-radius:4px;background:var(--raised);font-size:12.5px}