/*
 * Avando AVE — Theme-Hilfe: Doku-Hülle
 * ─────────────────────────────────────────────────────────────────────────────
 * Alle Selektoren tragen den Präfix .help- . Der Inhalt selbst nutzt echte
 * Theme-Klassen; diese Datei liefert nur das Gerüst (Kopf, Seitenleiste,
 * Hinweise, Abbildungen) und stellt die Schriften auf Sans-serif um.
 *
 * Schriften: mit dem Paket ausgeliefert unter assets/fonts/ (Variable Fonts,
 * kein CDN). Das Paket ist damit unabhängig davon, ob files/theme/fonts/ auf
 * der jeweiligen Installation schon befüllt ist.
 */

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/space-grotesk.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Spline Sans Mono';
  src: url('fonts/spline-sans-mono.woff2') format('woff2');
  font-weight: 300 600;
  font-display: swap;
}

:root {
  --help-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --help-font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --help-font-mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Das ganze Theme auf Sans-serif ziehen (help.css lädt zuletzt, gewinnt). */
  --av-font-sans: var(--help-font-body);
  --av-font-display: var(--help-font-display);
  --av-font-mono: var(--help-font-mono);

  --help-topbar-h: 3.75rem;
  --help-sidebar-w: 16.5rem;
  --help-measure: 46rem;

  /* Farben mit literalem Rückfallwert: die Doku bleibt lesbar, auch wenn die
     Theme-Token (--av-*) einmal nicht laden. Passt sich sonst dem Theme an. */
  --help-accent:     var(--av-color-primary, #3b5bdb);
  --help-surface:    var(--av-color-surface, #ffffff);
  --help-surface-2:  var(--av-color-surface-2, #f2f3f5);
  --help-surface-3:  var(--av-color-surface-3, #e8eaed);
  --help-ink:        var(--av-color-text, #1f2328);
  --help-ink-muted:  var(--av-color-text-muted, #5b636d);
  --help-heading:    var(--av-color-heading, var(--help-ink));
  --help-border:     var(--av-color-border, #d8dce1);
  --help-on-accent:  var(--av-color-text-on-primary, #ffffff);
  --help-ok:         var(--av-color-success, #1a7f4b);
  --help-warn-c:     var(--av-color-warning, #b5701a);
  --help-line: color-mix(in srgb, var(--help-ink) 14%, transparent);
  --help-ease: var(--ease-out-4, cubic-bezier(0.22, 1, 0.36, 1));
}

body {
  font-family: var(--help-font-body);
  font-feature-settings: 'cv05' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--help-surface);
  color: var(--help-ink);
}

/* ── Skip-Link ───────────────────────────────────────────────────────────── */

.help-skip { position: absolute; inset-inline-start: -9999px; }
.help-skip:focus {
  position: fixed;
  inset: .5rem auto auto .5rem;
  z-index: 100;
  padding: .5rem .9rem;
  background: var(--help-accent);
  color: var(--help-on-accent);
  border-radius: 6px;
  font-weight: 600;
}

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */

.help-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .9rem;
  block-size: var(--help-topbar-h);
  padding-inline: clamp(1rem, 4vw, 2.25rem);
  background: color-mix(in oklch, var(--help-surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-block-end: 1px solid var(--help-line);
}

.help-topbar__brand { text-decoration: none; color: inherit; display: flex; align-items: center; }

.help-wordmark {
  font-family: var(--help-font-display);
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
  color: var(--help-heading);
}
.help-wordmark span {
  font-weight: 400;
  color: color-mix(in oklch, currentColor 55%, transparent);
}

.help-topbar__divider {
  inline-size: 1px;
  block-size: 1.25rem;
  background: var(--help-line);
}
.help-topbar__section {
  font-family: var(--help-font-display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--help-ink-muted);
}
.help-topbar__spacer { flex: 1; }

.help-navtoggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--help-line);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.help-navtoggle span {
  inline-size: 1.05rem;
  block-size: 1.6px;
  background: currentColor;
  border-radius: 2px;
}

/* ── Grundraster ────────────────────────────────────────────────────────── */

.help-shell {
  display: grid;
  grid-template-columns: var(--help-sidebar-w) minmax(0, 1fr);
  align-items: start;
}

/* ── Seitenleiste ──────────────────────────────────────────────────────── */

.help-nav {
  position: sticky;
  inset-block-start: var(--help-topbar-h);
  max-block-size: calc(100dvh - var(--help-topbar-h));
  overflow-y: auto;
  padding: 2rem 1rem 4rem clamp(1rem, 4vw, 2.25rem);
  border-inline-end: 1px solid var(--help-line);
}
.help-nav__group {
  margin-block: 1.9rem 0;
  font-family: var(--help-font-display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--help-ink-muted);
}
.help-nav__group:first-child { margin-block-start: 0; }
.help-nav ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.help-nav a {
  display: block;
  padding: .42rem .7rem;
  margin-inline: -.15rem;
  border-radius: 7px;
  color: color-mix(in oklch, var(--help-ink) 78%, transparent);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.35;
  transition: color .15s var(--help-ease), background-color .15s var(--help-ease);
}
.help-nav a:hover { color: var(--help-ink); background: color-mix(in oklch, currentColor 5%, transparent); }
.help-nav a[aria-current="page"] {
  background: color-mix(in oklch, var(--help-accent) 12%, transparent);
  color: var(--help-accent);
  font-weight: 600;
}

/* ── Inhaltsspalte ─────────────────────────────────────────────────────── */

.help-main {
  min-inline-size: 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.15rem, 5vw, 4rem) 7rem;
}
.help-main > * { max-inline-size: var(--help-measure); }
.help-main > .help-wide { max-inline-size: min(100%, 60rem); }

.help-kicker {
  margin-block: 0 1.1rem;
  font-family: var(--help-font-display);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--help-accent);
}

.help-main h1 {
  font-family: var(--help-font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin-block: 0 .6rem;
  text-wrap: balance;
}
.help-main h1 + .lead,
.help-main .help-kicker + h1 + .lead { margin-block-start: 1rem; }

.help-main h2 {
  font-family: var(--help-font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.15;
  letter-spacing: -0.014em;
  margin-block: 3.75rem .9rem;
  padding-block-end: .55rem;
  border-block-end: 1px solid var(--help-line);
  text-wrap: balance;
}
.help-main h3 {
  font-family: var(--help-font-display);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.25;
  letter-spacing: -0.008em;
  margin-block: 2.1rem .5rem;
}
.help-main h2 + h3,
.help-main h2 + p + h3 { margin-block-start: 1.35rem; }

.help-main p,
.help-main ol,
.help-main ul:not([class]) { line-height: 1.68; }
.help-main .lead {
  font-size: 1.18rem;
  line-height: 1.55;
  color: color-mix(in oklch, var(--help-ink) 82%, transparent);
  font-weight: 400;
}

.help-main a:not(.help-cards a):not(.help-steps a) {
  color: var(--help-accent);
  text-decoration: none;
  border-block-end: 1px solid color-mix(in oklch, var(--help-accent) 35%, transparent);
  transition: border-color .15s var(--help-ease);
}
.help-main a:not(.help-cards a):hover { border-block-end-color: var(--help-accent); }

/* Inline-Code + Pfade */
.help-main :is(p, li, td) code,
.help-path {
  font-family: var(--help-font-mono);
  font-size: .84em;
  padding: .12em .4em;
  border-radius: 5px;
  background: color-mix(in oklch, var(--help-ink) 6%, transparent);
  border: 1px solid var(--help-line);
}

/* ── Hinweiskästen (kein Seitenstreifen) ──────────────────────────────── */

.help-note,
.help-tip,
.help-warn {
  --_c: var(--help-accent);
  margin-block: 1.6rem;
  padding: 1.05rem 1.2rem 1.1rem;
  border: 1px solid color-mix(in oklch, var(--_c) 40%, var(--help-line));
  border-radius: 12px;
  background: color-mix(in oklch, var(--_c) 6%, var(--help-surface));
  font-size: .93rem;
  line-height: 1.62;
}
.help-tip  { --_c: var(--help-ok); }
.help-warn { --_c: var(--help-warn-c); }
.help-note > :first-child,
.help-tip > :first-child,
.help-warn > :first-child { margin-block-start: 0; }
.help-note > :last-child,
.help-tip > :last-child,
.help-warn > :last-child { margin-block-end: 0; }
/* Nur das <b> direkt im Kasten ist die Überschrift – nicht ein fettes Wort,
   das zufällig erstes Element in einem Listenpunkt ist. */
.help-note > b:first-child,
.help-tip > b:first-child,
.help-warn > b:first-child {
  display: block;
  margin-block-end: .3rem;
  font-family: var(--help-font-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--_c);
}
.help-note ul, .help-tip ul, .help-warn ul { margin-block: .4rem 0; padding-inline-start: 1.1rem; }
.help-note li, .help-tip li, .help-warn li { margin-block: .2rem; }

/* ── Abbildungen ──────────────────────────────────────────────────────── */

.help-figure { margin-block: 2rem; }
.help-figure img {
  display: block;
  max-inline-size: 100%;
  height: auto;
  margin-inline: 0;
  border: 1px solid var(--help-line);
  border-radius: 14px;
  background: var(--help-surface-2);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--help-ink) 8%, transparent),
              0 18px 40px -24px color-mix(in oklch, var(--help-ink) 45%, transparent);
}
/* Hochformat-Aufnahmen (schmale Panels) nicht hochskalieren */
.help-figure[data-shot="portrait"] img {
  margin-inline: auto;
  border-radius: 18px;
}
.help-figure figcaption {
  margin-block-start: .8rem;
  font-family: var(--help-font-display);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
  color: var(--help-ink-muted);
}

.help-figure--todo {
  display: grid;
  place-items: center;
  gap: .3rem;
  min-block-size: 8rem;
  padding: 1.5rem;
  border: 1px dashed color-mix(in oklch, currentColor 22%, transparent);
  border-radius: 14px;
  background: color-mix(in oklch, currentColor 3%, transparent);
  color: var(--help-ink-muted);
  font-size: .84rem;
  font-family: var(--help-font-mono);
  text-align: center;
}

/* ── Diagramm-Rahmen ─────────────────────────────────────────────────── */

.help-diagram {
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--help-line);
  border-radius: 16px;
  background:
    radial-gradient(120% 100% at 0% 0%, color-mix(in oklch, var(--help-accent) 5%, transparent), transparent 60%),
    var(--help-surface-2);
}
.help-diagram svg { display: block; inline-size: 100%; height: auto; }
.help-diagram figcaption {
  margin-block-start: 1rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--help-ink-muted);
}

/* Diagramm: eine Einstellung → viele Stellen */
.help-fan {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1.75rem 1fr;
  align-items: center;
  gap: .5rem;
}
.help-fan__src {
  padding: .9rem 1rem;
  border: 1.5px solid var(--help-accent);
  border-radius: 12px;
  background: color-mix(in oklch, var(--help-accent) 12%, var(--help-surface));
  text-align: center;
}
.help-fan__src strong {
  display: block;
  font-family: var(--help-font-display);
  font-weight: 600;
}
.help-fan__src span { font-size: .8rem; color: var(--help-ink-muted); }
.help-fan__arm {
  align-self: stretch;
  border-inline-end: 1.5px solid color-mix(in oklch, var(--help-accent) 45%, transparent);
  border-radius: 0 12px 12px 0;
  margin-block: 1.4rem;
}
.help-fan__targets { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.help-fan__targets li {
  padding: .55rem .9rem;
  border: 1px solid var(--help-border);
  border-radius: 9px;
  background: var(--help-surface);
  font-size: .9rem;
}

/* Diagramm: @layer-Stapel */
.help-stack { font-family: var(--help-font-mono); }
.help-stack__top {
  padding: .85rem 1rem;
  border: 2px solid var(--help-accent);
  border-radius: 10px;
  background: color-mix(in oklch, var(--help-accent) 14%, var(--help-surface));
  font-weight: 600;
}
.help-stack__top span {
  display: block;
  margin-block-start: .15rem;
  font-weight: 400;
  font-size: .78rem;
  color: var(--help-ink-muted);
}
.help-stack__hint {
  margin: .7rem 0;
  text-align: center;
  font-size: .75rem;
  color: var(--help-ink-muted);
}
.help-stack__layers { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.help-stack__layers li {
  padding: .5rem 1rem;
  border: 1px solid var(--help-border);
  border-radius: 7px;
  background: var(--help-surface-2);
  font-size: .85rem;
}
.help-stack__layers li span { color: var(--help-accent); }

@media (max-width: 640px) {
  .help-fan { grid-template-columns: 1fr; }
  .help-fan__arm { display: none; }
}

/* ── Wegweiser: nummerierte Ebenen (keine Kartenwand) ────────────────── */

.help-ladder { margin-block: 1.75rem; padding: 0; list-style: none; }
.help-ladder li { margin: 0; border-block-start: 1px solid var(--help-line); }
.help-ladder li:last-child { border-block-end: 1px solid var(--help-line); }
.help-ladder a {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  column-gap: 1.15rem;
  row-gap: .3rem;
  align-items: start;
  padding: 1.2rem .5rem;
  color: inherit;
  text-decoration: none;
  border: 0;
  transition: background-color .18s var(--help-ease);
}
.help-ladder a:hover { background: color-mix(in oklch, var(--help-accent) 5%, transparent); }
.help-ladder .n {
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--help-font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--help-accent);
  font-variant-numeric: tabular-nums;
}
.help-ladder strong {
  grid-column: 2;
  align-self: start;
  font-family: var(--help-font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--help-heading);
}
.help-ladder .arrow { display: none; }
.help-ladder li > a > span:not(.n):not(.arrow) {
  grid-column: 2;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--help-ink-muted);
}

/* ── Benefit-Liste (Begriff + Erklärung, Haarlinien) ────────────────── */

.help-benefits { margin-block: 1.75rem; padding: 0; list-style: none; }
.help-benefits li {
  margin: 0;
  padding-block: .9rem;
  border-block-start: 1px solid var(--help-line);
  line-height: 1.62;
  font-size: .95rem;
}
.help-benefits li:last-child { border-block-end: 1px solid var(--help-line); }
.help-benefits strong {
  display: block;
  margin-block-end: .15rem;
  font-family: var(--help-font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.004em;
  color: var(--help-heading);
}

/* ── UI-Label (exakte Backend-Bezeichnung) ──────────────────────────── */

.help-ui {
  display: inline-block;
  padding: .08em .5em .12em;
  border: 1px solid var(--help-line);
  border-radius: 6px;
  background: color-mix(in oklch, var(--help-ink) 4%, transparent);
  font-family: var(--help-font-display);
  font-size: .84em;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Nummerierte Schritte ────────────────────────────────────────────── */

.help-steps { counter-reset: s; margin-block: 1.6rem; padding: 0; list-style: none; }
.help-steps > li {
  position: relative;
  margin: 0;
  padding: .5rem 0 .5rem 2.75rem;
  line-height: 1.62;
}
.help-steps > li::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45rem;
  font-family: var(--help-font-display);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--help-accent);
}

/* ── Tabellen (Haarlinien, keine Kästen) ────────────────────────────── */

.help-tablewrap { margin-block: 1.5rem; overflow-x: auto; }
.help-main table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.help-main table :is(th, td) {
  padding: .6rem .9rem .6rem 0;
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--help-line);
}
.help-main table :is(th, td):not(:last-child) { padding-inline-end: 1.5rem; }
.help-main table th {
  font-family: var(--help-font-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--help-ink-muted);
  border-block-end-color: color-mix(in oklch, currentColor 35%, transparent);
}
.help-main table td:first-child { color: var(--help-ink); font-weight: 450; }
.help-main table code { white-space: nowrap; }

/* ── Codeblöcke ─────────────────────────────────────────────────────── */

.help-code { position: relative; margin-block: 1.4rem; }
.help-code pre {
  margin: 0;
  padding: 1.05rem 1.15rem;
  overflow-x: auto;
  border: 1px solid var(--help-line);
  border-radius: 12px;
  background: color-mix(in oklch, var(--help-ink) 4%, var(--help-surface));
  font-family: var(--help-font-mono);
  font-size: .84rem;
  line-height: 1.6;
}
.help-copy {
  position: absolute;
  inset: .55rem .55rem auto auto;
  padding: .28rem .65rem;
  border: 1px solid var(--help-line);
  border-radius: 7px;
  background: var(--help-surface);
  color: inherit;
  font-family: var(--help-font-display);
  font-size: .72rem;
  font-weight: 500;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s var(--help-ease);
}
.help-code:hover .help-copy,
.help-copy:focus-visible { opacity: 1; }

/* ── Fuß ───────────────────────────────────────────────────────────── */

.help-foot {
  max-inline-size: var(--help-measure);
  margin-block-start: 4.5rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--help-line);
  font-size: .88rem;
  color: var(--help-ink-muted);
}
.help-foot a { color: var(--help-accent); text-decoration: none; }
.help-foot a:hover { text-decoration: underline; }

/* ── Mobil ─────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  .help-shell { grid-template-columns: 1fr; }
  .help-navtoggle { display: inline-flex; }
  .help-nav {
    position: fixed;
    inset: var(--help-topbar-h) 0 auto 0;
    max-block-size: calc(100dvh - var(--help-topbar-h));
    padding-block: 1.25rem 2rem;
    background: var(--help-surface);
    border-block-end: 1px solid var(--help-line);
    border-inline-end: 0;
    box-shadow: 0 24px 50px -20px color-mix(in oklch, var(--help-ink) 40%, transparent);
    transform: translateY(-115%);
    transition: transform .28s var(--help-ease);
    z-index: 30;
  }
  .help-nav[data-open] { transform: translateY(0); }
  .help-ladder a { grid-template-columns: 2.75rem 1fr; }
  .help-ladder .arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}