/* Handbuch, Hilfe-Knopf, Hilfesymbole an Meldungen und Hilfefenster (FA-DOKU-010, -016) */

/* ---------- Hilfe-Knopf in der Titelleiste und Hilfesymbol an Meldungen ---------- */
.hilfeknopf {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px;
  color: var(--text-inverse, #fff); font-size: 19px; text-decoration: none;
}
.hilfeknopf:hover { color: var(--amber-300); }
.kopfleiste { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
/* Die Kopfleiste ohne Anmeldung ist weiß: der Verweis war weiß auf weiß und damit unsichtbar (Durchsicht 21.10.2026) */
.kopfleiste__hilfe { color: var(--text-link); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopfleiste__hilfe:hover { color: var(--text-link-hover); text-decoration: underline; }
.kopfleiste__hilfe .fa { margin-inline-end: 4px; }

.hilfesymbol {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px;
  margin-inline-start: 6px; vertical-align: middle; border-radius: 50%; text-decoration: none;
  color: var(--navy-700); font-size: 17px; line-height: 1; flex: none;
}
.hilfesymbol:hover, .hilfesymbol:focus-visible { color: var(--navy-500); background: rgba(27, 53, 96, .08); }
.meldung > .hilfesymbol--ecke { float: inline-end; margin: -4px -6px 4px 8px; }
.kurzmeldung .hilfesymbol, .kurzmeldung--fehler .hilfesymbol { color: var(--white); }
.kurzmeldung .hilfesymbol:hover { background: rgba(255, 255, 255, .15); color: var(--white); }
@media (pointer: coarse) { .hilfesymbol { inline-size: 32px; block-size: 32px; font-size: 20px; } }

/* ---------- Hilfefenster (Dialog mit dem Abschnitt, die Seite darunter bleibt, wie sie ist) ---------- */
.hilfedialog {
  inline-size: min(760px, calc(100vw - 24px)); block-size: min(86vh, 900px); max-block-size: none;
  padding: 0; border: 1px solid var(--border-default); box-shadow: var(--shadow-lg, 0 10px 40px rgba(0,0,0,.25));
  margin-inline-end: 12px; margin-block-start: 6vh;
}
.hilfedialog::backdrop { background: var(--surface-overlay, rgba(10,21,38,.55)); }
.hilfedialog__innen { display: flex; flex-direction: column; block-size: 100%; }
.hilfedialog__kopf {
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--navy-900); color: var(--white);
}
.hilfedialog__titel { flex: 1; font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.hilfedialog__kopf a, .hilfedialog__kopf button { color: var(--white); background: none; border: 0; font-size: 14px; cursor: pointer; text-decoration: none; }
.hilfedialog__schliessen { font-size: 22px !important; line-height: 1; padding: 0 6px; }
.hilfedialog iframe { flex: 1; inline-size: 100%; border: 0; background: var(--white); }
@media (max-width: 600px) {
  .hilfedialog { inline-size: 100vw; block-size: 100dvh; margin: 0; max-inline-size: 100vw; max-block-size: 100dvh; }
}

/* ---------- Handbuch ---------- */
.hilfe { max-inline-size: 860px; }
.hilfe-kopf { margin-block-end: var(--space-6); }
.hilfe-kopf__titel { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-strong); margin: 0 0 var(--space-3); }
.hilfe-kopf__text { color: var(--text-muted); margin: 0 0 var(--space-5); max-inline-size: 640px; }
.hilfe-pfad { font-size: 13px; color: var(--text-muted); margin: 0 0 var(--space-4); }
.hilfe-pfad a { text-decoration: none; }
.hilfe-fuss { margin-block-start: var(--space-6); }

.hilfe-suche { position: relative; display: flex; gap: var(--space-3); margin-block-end: var(--space-6); flex-wrap: wrap; }
.hilfe-suche--klein { margin-block-end: var(--space-5); }
.hilfe-suche__feld { flex: 1 1 260px; position: relative; display: block; }
.hilfe-suche__feld .fa { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); color: var(--steel-500); }
.hilfe-suche__feld input { inline-size: 100%; min-block-size: 46px; padding-inline-start: 36px; font-size: 16px; }
.hilfe-suche--klein .hilfe-suche__feld input { min-block-size: 38px; font-size: 15px; }
.hilfe-suche__vorschlaege {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30;
  background: var(--white); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
  max-block-size: 60vh; overflow-y: auto;
}
.hilfe-suche__vorschlaege a { display: block; padding: var(--space-3) var(--space-4); text-decoration: none; border-block-start: 1px solid var(--border-subtle); color: inherit; }
.hilfe-suche__vorschlaege a:first-child { border-block-start: 0; }
.hilfe-suche__vorschlaege a:hover, .hilfe-suche__vorschlaege a[aria-selected="true"] { background: var(--surface-card-hover, #f6f8fa); }
.hilfe-suche__vorschlaege strong { display: block; color: var(--text-strong); font-size: 14.5px; }
.hilfe-suche__vorschlaege small { display: block; color: var(--text-muted); font-size: 12.5px; }
.hilfe-suche__vorschlaege .hilfe-suche__hinweis { padding: var(--space-3) var(--space-4); color: var(--text-muted); font-size: 13px; }
.hilfe-verstanden { font-size: 13px; color: var(--text-muted); margin: calc(-1 * var(--space-4)) 0 var(--space-4); }

/* Spalten statt Raster: Karten verschieden lang, jede rückt in ihrer Spalte nach oben (keine Lücken, Vorgabe 21.10.2026) */
/* Kapitel zeilenweise (1 | 2, 3 | 4 …): in Spalten gefüllt stand „5 Kunden“ neben „1 Erste Schritte“ (Durchsicht 21.10.2026) */
.hilfe-kapitel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 0 var(--space-5); align-items: start; }
.hilfe-kapitel > .karte { display: block; }
.hilfe-oft { margin-block-end: var(--space-6); }
.hilfe .karte .karte__titel { margin: 0; }

.hilfe-abschnitt { margin-block-end: var(--space-5); }
.hilfe-abschnitt__kopf { padding: var(--space-6) var(--space-6) var(--space-3); }
.hilfe-abschnitt__titel { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-strong); margin: 0 0 var(--space-3); }
.hilfe-abschnitt__frage { font-size: 15px; color: var(--text-muted); margin: 0 0 var(--space-4); }
.hilfe-inhalt { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 13.5px; padding: var(--space-3) 0; border-block-start: 1px solid var(--border-subtle); }
.hilfe-inhalt__titel { color: var(--text-muted); }
.hilfe-abschnitt__fuss { padding: var(--space-4) var(--space-6); font-size: 12.5px; color: var(--text-muted); border-block-start: 1px solid var(--border-subtle); }
.hilfe-abschnitt__fuss:empty { display: none; }

.hilfe-text { padding: 0 var(--space-6) var(--space-6); font-size: 15.5px; line-height: 1.65; color: var(--text-body-color); }
.hilfe-text h2 { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--text-strong); margin: var(--space-8) 0 var(--space-3); scroll-margin-block-start: 90px; }
.hilfe-text h3 { font-size: 16.5px; font-weight: 700; color: var(--text-strong); margin: var(--space-6) 0 var(--space-2); scroll-margin-block-start: 90px; }
.hilfe-text h4 { font-size: 15.5px; font-weight: 700; color: var(--text-strong); margin: var(--space-5) 0 var(--space-2); scroll-margin-block-start: 90px; }
.hilfe-text > :first-child { margin-block-start: var(--space-3); }
.hilfe-text p { margin: 0 0 var(--space-4); }
.hilfe-text ul, .hilfe-text ol { margin: 0 0 var(--space-4); padding-inline-start: 1.4em; }
.hilfe-text li { margin-block-end: var(--space-2); }
.hilfe-text code { font-family: var(--font-mono); font-size: .9em; background: var(--steel-50); padding: 1px 4px; border: 1px solid var(--border-subtle); }
.hilfe-text :target { background: var(--amber-50); box-shadow: -8px 0 0 var(--amber-50), 8px 0 0 var(--amber-50); animation: hilfe-ziel 2.5s ease-out; }
@keyframes hilfe-ziel { from { background: var(--amber-200); } to { background: var(--amber-50); } }
.hilfe-text .hilfe-meldung { font-family: var(--font-text); font-size: 15px; font-weight: 700; padding: var(--space-3) var(--space-4); background: var(--steel-50); border-inline-start: 3px solid var(--amber-600); }
.hilfe-text .hilfe-meldung::before { content: "\f071"; font-family: FontAwesome; font-weight: normal; color: var(--amber-600); margin-inline-end: 8px; }
.hilfe-text .hilfe-tabelle { margin-block-end: var(--space-5); font-size: 14.5px; }
.hilfe-text .hilfe-tabelle th { text-transform: none; letter-spacing: 0; font-size: 13px; }

.hilfe-knopf {
  display: inline-block; padding: 0 8px; font-size: .88em; font-weight: 700; line-height: 1.7;
  border: 1px solid var(--navy-300); background: var(--navy-50); color: var(--navy-800); border-radius: 2px; white-space: nowrap;
  max-inline-size: 100%;
}
/* Lange Knopfnamen („Herausgeben (verkauft oder an Kunden zurück)“) dürfen am Handy umbrechen, statt die Seite zu verbreitern */
@media (max-width: 600px) { .hilfe-knopf { white-space: normal; } }

.hilfe-kasten { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border-inline-start: 4px solid var(--navy-500); background: var(--navy-50); }
.hilfe-kasten > :last-child { margin-block-end: 0; }
.hilfe-kasten--achtung { border-inline-start-color: var(--red-600); background: var(--red-50); }
.hilfe-kasten--tipp { border-inline-start-color: var(--green-600); background: var(--green-50); }
.hilfe-kasten--beispiel { border-inline-start-color: var(--amber-600); background: var(--amber-50); }

.hilfe-blaettern { display: flex; justify-content: space-between; gap: var(--space-5); font-size: 14px; margin-block-end: var(--space-8); }
.hilfe-blaettern a { text-decoration: none; }
.hilfe-blaettern__nachher { margin-inline-start: auto; text-align: end; }

/* eingebettet im Hilfefenster */
.hilfe-eingebettet { background: var(--surface-page, #fff); padding: var(--space-4) var(--space-4) var(--space-8); margin: 0; }
.hilfe-eingebettet__titel { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: var(--text-strong); margin: 0 0 var(--space-3); }
.hilfe-eingebettet .hilfe-abschnitt__kopf, .hilfe-eingebettet .hilfe-text { padding-inline: var(--space-4); }
.hilfe-eingebettet .hilfe-pfad { margin-block-end: var(--space-3); }

@media print {
  .hilfe-suche, .hilfe-blaettern, .hilfe-pfad, .hilfesymbol, .hilfeknopf { display: none !important; }
  .hilfe-text { font-size: 11pt; }
}

/* ohne Anmeldung: das Handbuch braucht mehr Breite als die Anmeldemaske */
main.schmal:has(> .hilfe) { max-inline-size: 1220px; padding-block-start: var(--space-7); }

/* ---------- Inhaltsverzeichnis (Vorgabe vom 21.10.2026) ---------- */
.hilfe--mit-leiste { max-inline-size: 1180px; display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
.hilfe-haupt { min-inline-size: 0; max-inline-size: 860px; }
.hilfe-leiste { display: none; }
.hilfe-verzeichnis, .hilfe-verzeichnis ol { list-style: none; margin: 0; padding: 0; }
.hilfe-verzeichnis__kapitel > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 6px;
  padding: 7px var(--space-3); font-weight: 700; font-size: 14px; color: var(--text-strong); border-radius: 2px;
}
.hilfe-verzeichnis__kapitel > summary::-webkit-details-marker { display: none; }
.hilfe-verzeichnis__kapitel > summary::after { content: "\f105"; font-family: FontAwesome; margin-inline-start: auto; color: var(--steel-500); transition: transform .15s; }
.hilfe-verzeichnis__kapitel[open] > summary::after { transform: rotate(90deg); }
.hilfe-verzeichnis__kapitel > summary:hover { background: var(--surface-card-hover, #f6f8fa); }
.hilfe-verzeichnis ol { margin: 0 0 var(--space-3); }
.hilfe-verzeichnis ol a {
  display: flex; gap: 6px; padding: 5px var(--space-3) 5px var(--space-5); font-size: 13.5px; line-height: 1.35;
  color: var(--text-body-color); text-decoration: none; border-inline-start: 3px solid transparent;
}
.hilfe-verzeichnis ol a:hover { background: var(--surface-card-hover, #f6f8fa); color: var(--text-strong); }
.hilfe-verzeichnis ol a[aria-current="page"] { border-inline-start-color: var(--amber-600); background: var(--amber-50); color: var(--text-strong); font-weight: 700; }
.hilfe-verzeichnis__nummer { flex: none; min-inline-size: 2.2em; color: var(--steel-500); font-variant-numeric: tabular-nums; font-weight: 600; }
.hilfe-nav__start { display: block; padding: var(--space-3); font-size: 13.5px; font-weight: 600; text-decoration: none; }

/* schmal (Handy, Hilfefenster): zugeklapptes Inhaltsverzeichnis über dem Inhalt */
.hilfe-nav-klapp { margin-block-end: var(--space-5); border: 1px solid var(--border-subtle); background: var(--white); }
.hilfe-nav-klapp > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 700; color: var(--text-strong); font-size: 14.5px; }
.hilfe-nav-klapp[open] > summary { border-block-end: 1px solid var(--border-subtle); }
.hilfe-nav-klapp nav { padding: var(--space-2) 0; max-block-size: 70vh; overflow-y: auto; }

/* breit: Leiste links, mitlaufend */
@media (min-width: 1100px) {
  .hilfe--mit-leiste { grid-template-columns: 270px minmax(0, 1fr); }
  .hilfe-leiste {
    display: block; position: sticky; inset-block-start: var(--space-5); max-block-size: calc(100vh - 40px); overflow-y: auto;
    background: var(--white); border: 1px solid var(--border-subtle); padding: var(--space-2) 0;
  }
  .hilfe-leiste__titel { padding: var(--space-3) var(--space-3) var(--space-2); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--steel-700); border-block-start: 1px solid var(--border-subtle); }
  .hilfe--mit-leiste .hilfe-nav-klapp { display: none; }
}

/* Startseite: Kapitel zum Anspringen, nummerierte Zeilen */
.hilfe-uebersicht { margin-block-end: var(--space-5); }
.hilfe-kopf__titel--klein { font-size: 19px; }
.hilfe-sprung { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hilfe-sprung a {
  display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; background: var(--white); border: 1px solid var(--border-default);
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text-strong);
}
.hilfe-sprung a:hover { border-color: var(--navy-500); background: var(--navy-50); }
.hilfe-sprung .hilfe-verzeichnis__nummer { min-inline-size: 0; }
.hilfe-kapitel > section { scroll-margin-block-start: 90px; }
.hilfe-kapitel .karte__titel .hilfe-verzeichnis__nummer { min-inline-size: 1.6em; display: inline-block; }
.hilfe-zeilennummer { font-size: 12.5px; font-weight: 600; color: var(--steel-500); font-variant-numeric: tabular-nums; }
.hilfe-abschnitt__nummer { color: var(--steel-500); font-weight: 700; margin-inline-end: 10px; font-variant-numeric: tabular-nums; }

/* Blättern: „Zurück“ / „Weiter“ mit Titel */
.hilfe-blaettern a { display: flex; flex-direction: column; gap: 2px; max-inline-size: 48%; }
.hilfe-blaettern small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.zeile__name > .hilfesymbol { margin-inline-start: var(--space-2); vertical-align: -2px; }
[dir=rtl] .hilfe-verzeichnis__kapitel > summary::after { content: "\f104"; }
[dir=rtl] .hilfe-verzeichnis__kapitel[open] > summary::after { transform: rotate(-90deg); }