/* Die Hilfe im System (docs/alpha/12-arbeitsprompt-regeln-und-hilfe.md,
   Phase 4; 15.09.2026). Drei Teile: die Seite /hilfe (Kapitel links, Text
   rechts), das Hilfezeichen in Navigation und Koepfen (Link in einen neuen
   Reiter), und der Kurztipp (.tipp), dasselbe Zeichen klein mit einem Satz
   beim Zeigen. Bis zum 15.09. abends gab es den Text auch in der Spalte
   (.inspalte); Paul wollte die Hilfe immer in einem neuen Reiter.

   Der Text kommt aus Markdown (docs/hilfe), also aus h1 bis h3, p, ul, ol,
   table, img, code, strong. Er bekommt dieselbe Schrift, dieselben Farben
   und dieselben Tabellen wie der Rest der Mitarbeiterseiten (DESIGN.md):
   keine eigene Stimme, nur ruhiger Lesetext. Wer hier etwas aendert:
   docs/DESIGN.md lesen, danach python tools\css-referenz.py nachher. */

/* ---- Die Seite /hilfe ---- */
.ld .hilfelayout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 18px }
.ld .hilfenav { position: sticky; top: calc(var(--kopf, 110px) + 16px); display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - var(--kopf, 110px) - 40px); overflow-y: auto }
.ld .hilfesuche { margin-bottom: 8px }
.ld .hilfesuche input { width: 100%; box-sizing: border-box }
.ld .hilfenav .hkap {
    display: block; padding: 8px 12px; color: var(--text); text-decoration: none;
    font: 700 var(--fs-13) var(--font); border-radius: var(--r-ctl); border-left: 2px solid transparent
}
.ld .hilfenav .hkap:hover { background: rgba(255, 255, 255, .05) }
.ld .hilfenav .hkap.on { color: var(--acc); border-left-color: var(--acc); background: rgba(200, 27, 255, .07) }
.ld .habschnitte { display: flex; flex-direction: column; padding: 2px 0 8px 14px }
.ld .habschnitte a { padding: 4px 12px; color: var(--muted); text-decoration: none; font: 500 var(--fs-12) var(--font); border-left: 2px solid transparent }
.ld .habschnitte a:hover { color: var(--text); border-left-color: var(--acc) }
.ld .hilfetreffer { display: flex; flex-direction: column; gap: 4px }
.ld .hilfetreffer a { display: block; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl); text-decoration: none; color: var(--text); background: var(--p1) }
.ld .hilfetreffer a:hover { border-color: var(--acc) }
.ld .hilfetreffer a b { display: block; font-size: var(--fs-12) }
.ld .hilfetreffer a small { display: block; font-size: var(--fs-11); color: var(--muted); margin-top: 2px; line-height: 1.35 }
.ld .hilfetreffer .leer { padding: 8px 10px; color: var(--muted2); font-size: var(--fs-12) }
.ld .hilfeinhalt { background: var(--p1); border: 1px solid var(--line); padding: 22px 28px 28px; min-width: 0 }
@media (max-width: 860px) {
    .ld .hilfelayout { grid-template-columns: 1fr }
    .ld .hilfenav { position: static; max-height: none }
    .ld .hilfeinhalt { padding: 16px }
}

/* ---- Der Text der Kapitel ---- */
.ld .hilfetext { font-size: var(--fs-14); line-height: 1.55; color: var(--text) }
.ld .hilfetext h1 { font-size: var(--fs-22); font-weight: 800; margin: 0 0 12px; letter-spacing: .01em }
.ld .hilfetext h2 { font-size: var(--fs-16); font-weight: 800; margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line) }
.ld .hilfetext h3 { font-size: var(--fs-14); font-weight: 800; margin: 18px 0 6px; color: var(--muted) }
.ld .hilfetext p { margin: 0 0 10px }
.ld .hilfetext ul, .ld .hilfetext ol { margin: 0 0 12px; padding-left: 22px }
.ld .hilfetext li { margin: 3px 0 }
.ld .hilfetext strong { color: #fff }
.ld .hilfetext a { color: var(--cyan); text-decoration: none; font-weight: 700 }
.ld .hilfetext a:hover { text-decoration: underline }
.ld .hilfetext code { font-family: var(--mono, ui-monospace, monospace); font-size: .92em; color: var(--muted); background: rgba(255, 255, 255, .06); padding: 0 4px; border-radius: 3px }
.ld .hilfetext img { display: block; max-width: 100%; height: auto; margin: 10px 0 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #000 }
.ld .hilfetext table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); margin: 8px 0 14px; display: block; overflow-x: auto }
.ld .hilfetext th { text-align: left; font-size: var(--fs-10); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); padding: 6px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
.ld .hilfetext td { padding: 7px 10px; border-bottom: 1px solid var(--dim); vertical-align: top }
.ld .hilfetext tr:nth-child(even) td { background: rgba(255, 255, 255, .03) }
/* Anker landen unter der klebenden Leiste, und der Sprung leuchtet kurz auf (wie in der Konfiguration). */
.ld .hilfetext h2, .ld .hilfetext h3 { scroll-margin-top: calc(var(--kopf, 110px) + 12px) }
.ld .hilfetext .zielblitz { animation: ldZielblitz 2.4s ease }

/* ---- Das Hilfezeichen: Kreis mit Fragezeichen (Bauteil Hilfezeichen) ---- */
/* EIN Zeichen fuer "hier gibt es Hilfe", als Strichzeichnung wie die
   Werkzeug-Symbole der Betriebsansicht, in drei Groessen: 22 px in der
   Navigation, 20 px in den Koepfen von Spalte und Geldfenster, 16 px als
   Kurztipp. Gedaempft, beim Zeigen tuerkis mit leichter Flaeche. Jedes ist
   ein Link in einen neuen Reiter (Paul, 15.09.2026). */
.ld .hilfezeichen { display: block; flex: 0 0 auto }
.ld .mast .hilfeknopf {
    display: inline-grid; place-items: center; width: 36px; height: 36px; margin-left: 2px; align-self: center;
    border-radius: 50%; color: var(--muted); text-decoration: none
}
.ld .mast .hilfeknopf:hover { color: var(--cyan); background: rgba(2, 255, 255, .08) }
.ld .mast .hilfeknopf.on { color: var(--acc-hell) }
.ld .spalte .sphilfe, .ld .panel .fk .sphilfe {
    flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center;
    color: var(--muted2); border-radius: 50%; text-decoration: none
}
.ld .spalte .sphilfe:hover, .ld .panel .fk .sphilfe:hover { color: var(--cyan); background: rgba(2, 255, 255, .08) }
.ld .panel.geldfenster .fk .sphilfe { margin-left: auto; align-self: center }

/* ---- Der Kurztipp: das Zeichen klein, ein Satz beim Zeigen, Klick oeffnet den Abschnitt ---- */
.ld .tipp {
    position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 2px 0 4px;
    color: var(--muted2); border-radius: 50%; cursor: help; text-decoration: none; vertical-align: middle; flex: 0 0 auto
}
.ld .tipp:hover, .ld .tipp:focus-visible { color: var(--cyan); background: rgba(2, 255, 255, .08); outline: none }
/* Der Satz als Blase: aus data-tipp, kein Skript. Ueber dem Zeichen, damit er
   nicht vom Bildrand unten abgeschnitten wird. */
.ld .tipp::after {
    content: attr(data-tipp); position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
    width: max-content; max-width: 260px; padding: 7px 10px; background: #1C1A28; border: 1px solid var(--cyan);
    color: var(--text); font: 600 var(--fs-12) var(--font); line-height: 1.4; text-align: left; white-space: normal;
    border-radius: var(--r-ctl); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); pointer-events: none; z-index: 120;
    /* display statt opacity: eine unsichtbare Blase am rechten Rand zaehlte
       trotzdem zur Seitenbreite und liess /manager waagrecht rollen
       (querscroll_pruefen, 15.09.). */
    display: none
}
.ld .tipp:hover::after, .ld .tipp:focus-visible::after { display: block }
/* In der Spalte: die Blase haengt am rechten Rand des Zeichens, damit sie
   nicht rechts aus der rollenden Flaeche laeuft. */
.ld .spalte .tipp::after { left: auto; right: -6px; transform: none }