/*
 * Hilfe-Seiten (12r, docs/decisions/0047-hilfe-seiten.md). Ergänzt das CSS der App, das die Seiten mitladen:
 * gleiche Tokens, Schriften und Bausteine (.top, .sec-title, .panel, .prow, .note, .btn). Nur Tokens, keine eigenen Farben.
 */
.help-top .row { padding: 10px 16px; min-height: 60px; }
/* Abstand wie in .home-top .row (gap 12 px): Die Ränder des Zeichens rechnen damit (Lockup, home.css). */
.help-brand { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); color: inherit; text-decoration: none; }
.help-wm { font-size: var(--fs-xl); line-height: 1.1; }
.help-label { margin-left: auto; color: var(--header-muted); font-weight: 600; }

.help { padding: 0 var(--sp-4) var(--sp-7); }
.help h1 { font: 700 var(--fs-2xl)/1.15 var(--display); letter-spacing: -.01em; margin: var(--sp-2) 0 var(--sp-2); overflow-wrap: anywhere; }
.help-lead { color: var(--muted); margin: 0; }
.help a { color: var(--brand); }

/* Sprachwahl: Eigennamen nebeneinander, die aktuelle fett ohne Link. */
.help-langs { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-3); margin: var(--sp-2) 0 0; font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.help-langs a, .help-langs span { display: inline-flex; align-items: center; min-height: var(--touch); }
.help-langs a { text-decoration: none; }
.help-langs [aria-current] { color: var(--ink); }

/* Themenliste und „Weiter“: Zeilen wie in den Einstellungen der App. */
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li + li { border-top: 1px solid var(--line); }
.help .prow { color: var(--ink); text-decoration: none; }
.help .prow-l small { display: block; margin-top: 2px; font-size: var(--fs-s); font-weight: 500; color: var(--muted); }
.help .prow-v { color: var(--ink); text-align: left; }
.help-next { margin: 0; }
.help-tip + .panel { margin-top: var(--sp-5); }

.help-back { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); margin-top: var(--sp-1); font-weight: 600; text-decoration: none; }

/* Schritte: Nummer im Quadrat in der Markenfarbe, Bild unter dem Schritt, den es zeigt. */
.help-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.help-steps > li { counter-increment: step; position: relative; padding: 0 0 var(--sp-5) 40px; }
.help-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: var(--r-s); background: var(--brand); color: var(--brand-ink); font: 700 var(--fs-s)/1 var(--display); }
.help-steps p { margin: 3px 0 0; }
.help-shot { margin: var(--sp-4) 0 0; }
.help-shot img { display: block; width: min(100%, 260px); height: auto; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }

/* Bild passend zur Darstellung: wie die Tokens nach data-theme, sonst nach dem System. Versteckte Bilder lädt der Browser nicht. */
.shot-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-dark { display: block !important; }
  :root:not([data-theme="light"]) .shot-light { display: none !important; }
}
:root[data-theme="dark"] .shot-dark { display: block !important; }
:root[data-theme="dark"] .shot-light { display: none !important; }

.help-tip { margin: 0; }
.help-tip strong { font-weight: 700; }

.help-foot { margin-top: var(--sp-6); }
.help-foot p { margin: 0 0 var(--sp-3); }
.help-open { display: flex; align-items: center; justify-content: center; text-decoration: none; margin: var(--sp-4) 0 var(--sp-2); }
.help .help-open { color: var(--brand-ink); }
.help-legal { display: flex; flex-wrap: wrap; column-gap: var(--sp-5); font-size: var(--fs-s); font-weight: 600; }
.help-legal a { display: inline-flex; align-items: center; min-height: var(--touch); }

/* Fehlerseite 404 (12s2): App und Hilfe je Sprache als Textlinks, groß genug zum Tippen. */
.nf-links { display: flex; flex-wrap: wrap; column-gap: var(--sp-4); margin: var(--sp-1) 0 0; font-weight: 600; }
.nf-links a { display: inline-flex; align-items: center; min-height: var(--touch); }

/* Import aus anderen Apps (16b2): Liste der Apps unter den Schritten, Hinweis zu den Marken klein unter „Gut zu wissen“. */
.help-apps { margin-bottom: var(--sp-5); }
.help-mark { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--muted); }
.help-mark + .panel { margin-top: var(--sp-5); }