/* ============================================================
   Plattformseiten (Landingpage, Preise, Hilfe, Konto)
   Gleiche Tokens wie die Kanalseiten, mehr Bühne: große Abschnitte,
   Mini-Ansichten der Funktionen, dezentes Einblenden beim Scrollen.
   Nur Tokens (tokens.css), Breakpoints 640/1024 wie überall.
   ============================================================ */

.lp-body { background: var(--c-bg); }
.lp-main { display: block; flex: 1 0 auto; }   /* Fußbereich bleibt auf kurzen Seiten unten (body ist eine Flex-Spalte) */
.lp-topbar .lp-nav { margin-left: var(--sp-5); }
.lp-user { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-text); font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.lp-user-avatar { width: 28px; height: 28px; border-radius: var(--r-round); }
@media (max-width: 639.98px) {
    .lp-topbar .lp-nav { display: none; }
    .lp-user-name { display: none; }
}

.lp-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--sp-4); }
.lp-narrow { max-width: 760px; }
.lp-center { text-align: center; }

/* ---------- Typografie ---------- */
.lp-eyebrow {
    margin: 0 0 var(--sp-3); color: var(--c-accent); font-size: var(--fs-sm);
    font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase;
}
.lp-display {
    margin: 0 0 var(--sp-5); font-size: var(--fs-display); font-weight: var(--fw-heavy);
    line-height: 1.05; letter-spacing: -.02em; color: var(--c-text);
}
.lp-display em { font-style: normal; color: var(--c-accent); }
.lp-h2 { margin: 0 0 var(--sp-4); font-size: var(--fs-page); font-weight: var(--fw-heavy); line-height: var(--lh-tight); color: var(--c-text); }
.lp-h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-text); }
.lp-lead { margin: 0 0 var(--sp-5); font-size: var(--fs-lg); line-height: var(--lh-base); color: var(--c-text-muted); max-width: 58ch; }
.lp-center .lp-lead { margin-left: auto; margin-right: auto; }
.lp-fineprint { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-text-muted); }
.lp-link { color: var(--c-accent); font-weight: var(--fw-semibold); }

/* ---------- Abschnitte ---------- */
.lp-section { padding: var(--sp-8) 0; }
.lp-section--alt { background: var(--c-surface-1); border-block: 1px solid var(--c-border); }
.lp-section-head { margin-bottom: var(--sp-6); }
/* Aktionszeile (Knöpfe, Weiter-Links): einheitlicher Abstand vor Aktionen wie im Studio (--sp-5, docs/17). Er fällt mit dem
   unteren Rand eines Absatzes davor zusammen und gilt genauso unter Karten-Rastern. Zentriert in .lp-center bzw. mit --center. */
.lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 0; }
.lp-cta:first-child { margin-top: 0; }
.lp-center .lp-cta, .lp-cta--center { justify-content: center; }
.lp-final { padding-bottom: calc(var(--sp-8) + var(--sp-4)); }

/* ---------- Hero ---------- */
.lp-hero { padding: var(--sp-8) 0 var(--sp-7); overflow: hidden; }
.lp-hero-grid { display: grid; gap: var(--sp-7); align-items: center; }
.lp-hero-visual { position: relative; min-height: 360px; }
@media (min-width: 1024px) {
    .lp-hero { padding-top: calc(var(--sp-8) + var(--sp-5)); }
    .lp-hero-grid { grid-template-columns: 1.05fr .95fr; }
}

/* ---------- Mini-Ansichten (Mockups) ---------- */
.lp-mock {
    background: var(--c-surface-1); border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md); box-shadow: var(--shadow-overlay); padding: var(--sp-4);
    font-size: var(--fs-sm); color: var(--c-text);
}
.lp-section--alt .lp-mock { background: var(--c-bg); }
.lp-mock b { font-weight: var(--fw-bold); }
.lp-mock small { display: block; color: var(--c-text-muted); font-size: var(--fs-xs); }
.lp-mock p { margin: 0; }

.lp-mock--cockpit { position: relative; z-index: 1; max-width: 420px; padding: 0; overflow: hidden; }
.lp-mock-bar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.lp-mock-bar > span { width: .55rem; height: .55rem; border-radius: var(--r-round); background: var(--c-border-strong); }
.lp-mock-bar b { margin-left: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); }
.lp-live { margin-left: auto; font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-on-twitch); background: var(--c-danger); border-radius: var(--r-pill); padding: 0 var(--sp-2); }
.lp-mock-chat { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.lp-mock-chat b { color: var(--u, var(--c-text)); margin-right: var(--sp-1); }
.lp-mock-event { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--c-twitch) 18%, transparent); color: var(--c-twitch-text); }
.lp-mock-event b { color: inherit; }

.lp-mock--alert {
    position: absolute; z-index: 2; right: 0; top: 46%; display: flex; align-items: center; gap: var(--sp-3);
    border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
}
.lp-mock-alert-icon { font-size: var(--fs-2xl); }
.lp-mock--setup { position: absolute; z-index: 2; left: 12%; bottom: 0; min-width: 220px; }
.lp-mock--setup ol { margin: var(--sp-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }
.lp-mock--setup li { display: flex; justify-content: space-between; gap: var(--sp-4); }
.lp-mock--setup li span:last-child { color: var(--c-success); font-weight: var(--fw-bold); }
@media (max-width: 639.98px) {
    .lp-hero-visual { min-height: 0; display: grid; gap: var(--sp-3); }
    .lp-mock--alert, .lp-mock--setup { position: static; }
}

/* ---------- Nutzenblöcke mit Animation (help-anim.js, Klassen aus site.css) ---------- */
.lp-features { display: grid; gap: var(--sp-7); }
.lp-feature { display: grid; gap: var(--sp-5); align-items: center; }
.lp-feature-text p { margin: 0; color: var(--c-text-muted); line-height: var(--lh-base); max-width: 52ch; }
@media (min-width: 1024px) {
    .lp-feature { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
    .lp-feature:nth-child(even) .lp-feature-text { order: 2; }
}
.lp-anim { margin: 0; width: 100%; max-width: 36rem; justify-self: center; }
.lp-anim .help-anim-stage { box-shadow: var(--shadow-overlay); }

/* ---------- Funktionsgruppen (= Studio-Gruppen) ---------- */
.lp-groups { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.lp-group { padding: var(--sp-5); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-bg); display: grid; gap: var(--sp-3); align-content: start; }
.lp-group .lp-h3 { margin: 0; font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-2); }
.lp-group p { margin: 0; color: var(--c-text-muted); line-height: var(--lh-base); }
.lp-group-pages { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--c-text); }
.lp-group-pages li { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* ---------- Schritte ---------- */
.lp-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-4); counter-reset: s; }
@media (min-width: 1024px) { .lp-steps { grid-template-columns: repeat(3, 1fr); } }
.lp-steps li {
    counter-increment: s; padding: var(--sp-5); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-1);
    display: grid; gap: var(--sp-2); color: var(--c-text-muted);
}
.lp-steps li::before { content: counter(s); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: var(--r-round); background: var(--c-accent); color: var(--c-on-accent); font-weight: var(--fw-heavy); }
.lp-steps b { color: var(--c-text); font-size: var(--fs-lg); }

/* ---------- Preise ---------- */
.lp-pricing-switch { margin: 0 auto var(--sp-6); width: max-content; max-width: 100%; }
.lp-save { margin-left: var(--sp-1); font-size: var(--fs-xs); font-weight: var(--fw-bold); opacity: .85; }
.lp-plans { display: grid; gap: var(--sp-4); align-items: stretch; }
@media (min-width: 1024px) { .lp-plans { grid-template-columns: repeat(3, 1fr); } }
.lp-plan {
    position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
    padding: var(--sp-5); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg);
}
.lp-section:not(.lp-section--alt) .lp-plan { background: var(--c-surface-1); }
.lp-plan--featured { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.lp-plan-flag {
    position: absolute; top: calc(-1 * var(--sp-3)); left: var(--sp-5); padding: 0 var(--sp-3);
    border-radius: var(--r-pill); background: var(--c-accent); color: var(--c-on-accent); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.6rem;
}
.lp-plan-name { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-heavy); color: var(--c-text); }
.lp-plan-lead { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.lp-plan-price { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); }
.lp-plan-amount { font-size: var(--fs-highlight); font-weight: var(--fw-heavy); color: var(--c-text); }
.lp-pricing[data-interval="yearly"] .lp-plan-price[data-for="monthly"],
.lp-pricing[data-interval="monthly"] .lp-plan-price[data-for="yearly"] { display: none; }
.lp-plan-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); flex: 1; }
.lp-plan-list li { position: relative; padding-left: var(--sp-5); font-size: var(--fs-sm); color: var(--c-text); line-height: var(--lh-base); }
.lp-plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--c-accent); font-weight: var(--fw-heavy); }
.lp-plan-cta { justify-content: center; text-align: center; }
.lp-addons { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.lp-addons-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: var(--c-text); text-align: center; }
.lp-addon {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5);
    padding: var(--sp-4) var(--sp-5); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg);
}
.lp-section:not(.lp-section--alt) .lp-addon { background: var(--c-surface-1); }
.lp-addon-main { flex: 1 1 18rem; display: grid; gap: var(--sp-1); }
.lp-addon-name { margin: 0; font-weight: var(--fw-heavy); color: var(--c-text); }
.lp-pricing-note { margin: var(--sp-5) auto 0; max-width: 70ch; text-align: center; font-size: var(--fs-sm); color: var(--c-text-muted); }

/* ---------- FAQ ---------- */
.lp-faq { display: grid; gap: var(--sp-2); }
.lp-faq details { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-1); }
.lp-faq summary { cursor: pointer; padding: var(--sp-4) var(--sp-5); font-weight: var(--fw-semibold); color: var(--c-text); list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; float: right; color: var(--c-accent); font-weight: var(--fw-heavy); }
.lp-faq details[open] summary::after { content: "–"; }
.lp-faq summary:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--r-md); }
.lp-faq p { margin: 0; padding: 0 var(--sp-5) var(--sp-4); color: var(--c-text-muted); line-height: var(--lh-base); }

/* ---------- Schmale Abschnitte (Unterseiten) ---------- */
.lp-section--tight { padding: var(--sp-6) 0; }
/* ---------- Karten (Creator werden) ---------- */
.lp-card {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-1);
}
.lp-card-body { flex: 1; min-width: 12rem; }
.lp-card-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--c-text); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.lp-card-sub { margin: var(--sp-1) 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-base); }
.lp-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---------- Creator werden ---------- */
.lp-steps--compact { grid-template-columns: 1fr !important; margin-bottom: var(--sp-6); }
.lp-consent { display: grid; gap: var(--sp-4); justify-items: start; }
.lp-consent > .btn { margin-top: var(--sp-1); }   /* gap --sp-4 + --sp-1 = Abstand vor Aktionen --sp-5 */
.lp-check { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--c-text); line-height: var(--lh-base); }
.lp-check input { margin-top: var(--sp-1); width: 1.1rem; height: 1.1rem; accent-color: var(--c-accent); flex: none; }
.lp-check a { color: var(--c-accent); }

/* ---------- Rechtstexte auf Plattformseiten (Klasse .legal aus site.css) ---------- */
.lp-main > .legal { margin: var(--sp-7) auto; padding: 0 var(--sp-4); }

/* ---------- Seitenkopf der Unterseiten ---------- */
.lp-page-head { padding: var(--sp-7) 0 var(--sp-5); }
/* Seitenkopf und erster Abschnitt: ein Abstand (--sp-5), nicht Kopf-Polster + Absatz-Abstand + Abschnitts-Polster. */
.lp-page-head .lp-wrap > :last-child { margin-bottom: 0; }
.lp-page-head + .lp-section:not(.lp-section--alt) { padding-top: 0; }

/* ---------- Einblenden beim Scrollen (landing.js setzt .is-visible) ---------- */
.js-reveal .lp-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js-reveal .lp-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js-reveal .lp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hilfe-Center (/hilfe), Artikelseite und Befehle A bis Z (Klassen hc-*) ----------
   Muster: große Suche oben, Einstieg und Fehlerbehebung hervorgehoben, Bereiche als gleich hohe Karten
   (1/2/3 Spalten bei 640/1024). Artikelzeilen .hc-row: Titel links, Tarif-Kennzeichen .tag.hc-plan immer rechts. */
.hc-hero { background: var(--c-surface-1); border-bottom: 1px solid var(--c-border); }
.hc-lead { margin: 0; color: var(--c-text-muted); line-height: var(--lh-base); }
.hc-search { position: relative; display: flex; gap: var(--sp-2); max-width: 40rem; margin: var(--sp-5) auto 0; }
.hc-search .adm-input { flex: 1 1 auto; min-width: 0; min-height: 3rem; padding-left: calc(var(--sp-3) + 1.25rem + var(--sp-2));
    font-size: var(--fs-md); text-align: start; }
.hc-search .btn { min-height: 3rem; }
.hc-search-icon { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); color: var(--c-text-muted); pointer-events: none; }
.hc-popular { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 0 0;
    color: var(--c-text-muted); font-size: var(--fs-sm); }

.hc-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding-block: var(--sp-6) var(--sp-7); }
.hc-block-title { margin: 0 0 var(--sp-4); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-text); }
.hc-empty { margin: 0; color: var(--c-text-muted); }

/* Suchergebnisse: eine Karte je Treffer mit Bereich, Titel und erstem Satz. */
.hc-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.hc-result { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--c-border);
    border-radius: var(--r-md); background: var(--c-surface-1); color: var(--c-text); text-decoration: none;
    transition: border-color var(--dur-base) var(--ease); }
.hc-result:hover { border-color: color-mix(in srgb, var(--c-accent) 50%, var(--c-border)); }
.hc-result-main { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; }
.hc-result-area { color: var(--c-text-muted); font-size: var(--fs-xs); }
.hc-result-title { font-size: var(--fs-md); }
.hc-result-sum, .hc-step span { color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-base);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Karten: Kopf mit Symbol, Titel und Anzahl, Kurztext, Artikelzeilen. Gleich hoch je Rasterzeile (stretch). */
.hc-featured, .hc-grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) { .hc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .hc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hc-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hc-card { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-5);
    border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface-1); scroll-margin-top: var(--sp-6); }
.hc-card--start { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-border));
    background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface-1)); }
.hc-card--fix { border-color: color-mix(in srgb, var(--c-warning) 45%, var(--c-border));
    background: color-mix(in srgb, var(--c-warning) 5%, var(--c-surface-1)); }
.hc-card--link { color: var(--c-text); text-decoration: none; transition: border-color var(--dur-base) var(--ease); }
.hc-card--link:hover { border-color: color-mix(in srgb, var(--c-accent) 50%, var(--c-border)); }
.hc-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.hc-icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: var(--r-md);
    background: var(--c-surface-2); font-size: var(--fs-xl); line-height: 1; }
.hc-card-name { display: flex; flex-direction: column; min-width: 0; }
.hc-card-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--c-text); }
.hc-count { color: var(--c-text-muted); font-size: var(--fs-xs); }
.hc-card-text { margin: 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-base); }

/* Artikelzeilen (Karten und Seitenleiste). Das Kennzeichen schrumpft nie und steht auf der ersten Textzeile. */
.hc-rows, .hc-side-list { list-style: none; margin: 0 calc(-1 * var(--sp-2)); padding: 0; display: grid; }
.hc-row { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-sm);
    color: var(--c-text); text-decoration: none; line-height: var(--lh-base); }
.hc-row:hover { background: var(--c-surface-2); }
.hc-row:focus-visible, .hc-step:focus-visible, .hc-result:focus-visible, .hc-card--link:focus-visible, .hc-pager-link:focus-visible {
    outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.hc-row-title { flex: 1 1 auto; min-width: 0; }
.hc-block-text { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-sm); line-height: var(--lh-base); }
.hc-card-more { margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
/* Typische Probleme: Kopf der Karte ist der Klappknopf, die Liste steht darunter. */
.hc-probs-toggle { margin: 0; padding: 0; }
.hc-probs-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-sm); }
.hc-grid--probs { align-items: start; }
.hc-card--probs { gap: 0; }
.hc-probs-body:not([hidden]) { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); }
.hc-probs-article { margin-top: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.hc-probs-article:first-child { margin-top: 0; }
.hc-probs-article:hover { color: var(--c-accent); }
.hc-result--problem { border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-border)); }
.hc-plan { --rc: var(--c-info); flex: 0 0 auto; margin-left: auto; }
.hc-row[aria-current="page"] { background: var(--c-surface-2); color: var(--c-accent); font-weight: var(--fw-semibold);
    box-shadow: inset 3px 0 0 var(--c-accent); }

/* Erste Schritte: nummerierte Schritte mit erstem Satz. */
.hc-steps { list-style: none; margin: 0 calc(-1 * var(--sp-2)); padding: 0; display: grid; counter-reset: hcs; }
.hc-steps li { counter-increment: hcs; }
.hc-step { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); column-gap: var(--sp-3); row-gap: var(--sp-1);
    padding: var(--sp-2); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; }
.hc-step:hover { background: color-mix(in srgb, var(--c-accent) 8%, transparent); }
.hc-step::before { content: counter(hcs); grid-row: span 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
    border-radius: var(--r-round); background: var(--c-accent); color: var(--c-on-accent); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* Artikelseite und Befehle: Pfad, Inhalt, Seitenleiste mit den Artikeln des Bereichs (ab 1024 links). */
.hc-doc { gap: var(--sp-4); }
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); }
.hc-crumbs a { color: var(--c-text-muted); }
.hc-crumbs a:hover { color: var(--c-accent); }
.hc-crumbs [aria-current] { color: var(--c-text); }
.hc-doc-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
.hc-doc-main { min-width: 0; }
.hc-doc-wide { max-width: none; }
.hc-doc-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
.hc-doc-head .lp-h2 { margin: 0; }
.hc-side { padding-top: var(--sp-5); border-top: 1px solid var(--c-border); font-size: var(--fs-sm); }
.hc-side-title { margin: 0 0 var(--sp-2); font-weight: var(--fw-bold); color: var(--c-text); }
.hc-side-list { margin-bottom: var(--sp-3); }
.hc-side-back { color: var(--c-accent); }
.hc-count-tag { --rc: var(--c-warning); flex: 0 0 auto; margin-left: auto; }
@media (min-width: 1024px) {
    .hc-doc-body { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--sp-7); }
    .hc-side { order: -1; position: sticky; top: var(--sp-6); padding-top: 0; border-top: 0; }
}
.hc-pager { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }
@media (min-width: 640px) { .hc-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.help-article .hc-pager-link { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text); text-decoration: none; line-height: var(--lh-tight);
    transition: border-color var(--dur-base) var(--ease); }
.help-article .hc-pager-link:hover { border-color: color-mix(in srgb, var(--c-accent) 50%, var(--c-border)); }
.hc-pager-link--next { text-align: right; }
@media (min-width: 640px) { .hc-pager-link--next { grid-column: 2; } }
.hc-pager-dir { color: var(--c-text-muted); font-size: var(--fs-xs); }

/* Befehle A bis Z: Tabelle im Rahmen, mobil seitlich scrollbar. */
.hc-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); }
.help-article .hc-table { margin: 0; }
.hc-table th { color: var(--c-text-muted); font-weight: var(--fw-semibold); background: var(--c-surface-1); }
.hc-table td:first-child, .hc-table td:nth-child(2) { white-space: nowrap; }
.hc-table tbody tr:last-child td { border-bottom: 0; }
.hc-alias { color: var(--c-text-muted); font-size: var(--fs-xs); white-space: normal; }