/* ============================================================
   Kontexthilfe — Seitenpanel, erklärte Begriffe, Erste Schritte
   Grundsatz: erklären, ohne den Arbeitsfluss zu unterbrechen.
   Deshalb ein Panel neben dem Inhalt statt eines Modals und
   Begriffe, die man anklicken KANN, aber nicht muss.
   ============================================================ */

/* ---------- Seitenpanel ---------- */
.help-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(27rem, 100vw);
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -18px 0 48px -24px rgba(15, 23, 42, .35);
    z-index: 1090;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    /* visibility statt display: hält die Animation und nimmt das geschlossene
       Panel zugleich aus Tab-Reihenfolge und Vorlesereihenfolge */
    visibility: hidden;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s .22s;
}
.help-panel.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.help-head {
    display: flex; align-items: center; gap: .75rem;
    padding: 1.05rem 1.15rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, var(--brand-soft), #fff 70%);
}
.help-icon {
    width: 2.4rem; height: 2.4rem; flex-shrink: 0;
    border-radius: .7rem; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--brand), #8b5cf6);
    color: #fff; font-size: 1.1rem;
    box-shadow: 0 6px 16px -6px rgba(99, 102, 241, .65);
}
.help-titles { margin-right: auto; min-width: 0; }
.help-titles h2 { font-size: 1rem; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink); }
.help-titles span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.help-close {
    width: 2rem; height: 2rem; flex-shrink: 0;
    border: 0; background: transparent; border-radius: .55rem;
    color: var(--muted); display: grid; place-items: center; transition: all .13s;
}
.help-close:hover { background: #eef2f7; color: var(--ink); }

.help-body { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem 1.15rem 1.4rem; }
.help-lead { font-size: .92rem; line-height: 1.55; color: var(--ink-2); margin-bottom: 1.25rem; }

.help-h {
    display: flex; align-items: center; gap: .45rem;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted); margin: 1.5rem 0 .6rem;
}
.help-h:first-child { margin-top: 0; }
.help-h i { font-size: .9rem; color: var(--brand); }

/* Schritte */
.help-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.help-steps li { display: flex; gap: .65rem; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.help-steps .n {
    flex-shrink: 0; width: 1.45rem; height: 1.45rem; margin-top: .05rem;
    border-radius: 50%; background: var(--brand-soft); color: var(--brand-600);
    font-size: .74rem; font-weight: 800; display: grid; place-items: center;
}
.help-steps strong { display: block; color: var(--ink); font-weight: 700; font-size: .87rem; }

/* Hinweise */
.help-tips { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.help-tips li {
    position: relative; padding: .55rem .7rem .55rem 1.9rem;
    background: #fffbeb; border-radius: .6rem;
    font-size: .84rem; line-height: 1.5; color: #78350f;
}
.help-tips li::before {
    content: '\F5D0'; font-family: 'bootstrap-icons';
    position: absolute; left: .65rem; top: .5rem; color: #d97706; font-size: .82rem;
}

/* Begriffe */
.help-terms { display: grid; gap: .4rem; }
.help-terms details { border: 1px solid var(--line); border-radius: .65rem; background: #fcfcfd; }
.help-terms details[open] { background: #fff; box-shadow: var(--shadow-sm); }
.help-terms summary {
    cursor: pointer; list-style: none; padding: .55rem .75rem;
    font-size: .86rem; font-weight: 700; color: var(--ink);
}
.help-terms summary::-webkit-details-marker { display: none; }
.help-terms summary::after {
    content: '\F282'; font-family: 'bootstrap-icons';
    float: right; color: var(--muted-2); font-size: .75rem; font-weight: 400; transition: transform .15s;
}
.help-terms details[open] summary::after { transform: rotate(180deg); }
.help-terms summary span {
    display: block; font-weight: 500; font-size: .8rem; color: var(--muted);
    margin-top: .15rem; padding-right: 1.2rem; line-height: 1.45;
}
.help-terms p { margin: 0; padding: 0 .75rem .7rem; font-size: .84rem; line-height: 1.55; color: var(--ink-2); }
.help-formula {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: .78rem !important; color: var(--brand-600) !important;
    background: var(--brand-soft); border-radius: .45rem;
    margin: 0 .75rem .7rem !important; padding: .4rem .6rem !important;
}

/* Tasten */
.help-keys { width: 100%; border-collapse: collapse; }
.help-keys td { padding: .3rem .5rem .3rem 0; font-size: .84rem; color: var(--ink-2); vertical-align: top; }
.help-keys td:first-child { width: 6.5rem; white-space: nowrap; }

/* Verweise */
.help-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.help-links a {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem; border-radius: .6rem;
    background: #f8fafc; color: var(--ink-2); text-decoration: none;
    font-size: .86rem; font-weight: 600; transition: all .13s;
}
.help-links a i { margin-left: auto; color: var(--muted-2); transition: transform .13s; }
.help-links a:hover { background: var(--brand-soft); color: var(--brand-600); }
.help-links a:hover i { color: var(--brand); transform: translateX(2px); }

.help-foot {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem 1.15rem; border-top: 1px solid var(--line);
    background: #f8fafc; color: var(--muted); font-size: .76rem;
}
.help-foot i { color: var(--brand); }

/* Abdunkeln nur dort, wo das Panel den Inhalt verdeckt */
.help-scrim {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .3);
    z-index: 1085; opacity: 0; transition: opacity .2s;
}
.help-scrim.is-open { opacity: 1; }

/* ---------- Erklärter Begriff im Text ---------- */
.term {
    border-bottom: 1px dashed var(--muted-2);
    cursor: help;
    /* bewusst kein nowrap: in schmalen Tabellenspalten wäre Überlaufen
       schlimmer als ein Umbruch vor dem Info-Symbol */
}
.term > i {
    font-size: .72em; margin-left: .18em; color: var(--muted-2);
    vertical-align: baseline; transition: color .13s;
}
.term:hover, .term:focus-visible { border-bottom-color: var(--brand); color: var(--brand-600); outline: none; }
.term:hover > i, .term:focus-visible > i { color: var(--brand); }
/* In Tabellenköpfen erbt der Begriff bewusst Großschreibung und Laufweite —
   sonst stände ein normal gesetztes Wort mitten in einer Versalzeile. */

.term-pop {
    position: fixed; z-index: 1100; width: min(21rem, calc(100vw - 2rem));
    background: #fff; border: 1px solid var(--line); border-radius: .8rem;
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, .28);
    padding: .8rem .9rem; font-size: .84rem; line-height: 1.55; color: var(--ink-2);
    white-space: normal;
}
.term-pop h4 { font-size: .9rem; font-weight: 800; color: var(--ink); margin: 0 0 .2rem; letter-spacing: -.01em; }
.term-pop .short { color: var(--brand-600); font-weight: 600; font-size: .82rem; margin-bottom: .45rem; }
.term-pop .formula {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: .76rem; color: var(--brand-600);
    background: var(--brand-soft); border-radius: .45rem;
    padding: .35rem .55rem; margin-top: .5rem;
}

/* ---------- Erste Schritte (nur bis abgehakt) ---------- */
.onboard {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: linear-gradient(135deg, var(--brand-soft) 0%, #fff 55%);
    padding: 1.15rem 1.25rem; margin-bottom: 1.5rem;
    position: relative; overflow: hidden;
}
.onboard::after {
    content: ''; position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem;
    background: radial-gradient(circle, rgba(99, 102, 241, .12), transparent 65%);
    pointer-events: none;
}
.onboard h2 {
    font-size: 1rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .2rem;
    display: flex; align-items: center; gap: .5rem;
}
.onboard h2 i { color: var(--brand); }
.onboard .onboard-sub { color: var(--muted); font-size: .86rem; margin-bottom: .9rem; max-width: 46rem; }
.onboard-steps { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); position: relative; }
.onboard-step {
    display: flex; gap: .7rem; align-items: flex-start;
    background: #fff; border: 1px solid var(--line); border-radius: .7rem;
    padding: .7rem .8rem; text-decoration: none; color: inherit; transition: all .14s;
}
.onboard-step:hover { border-color: var(--brand); box-shadow: 0 6px 18px -10px rgba(99, 102, 241, .55); color: inherit; }
.onboard-step .mark {
    width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: 50%;
    display: grid; place-items: center; font-size: .78rem; font-weight: 800;
    background: var(--brand-soft); color: var(--brand-600);
}
.onboard-step.is-done .mark { background: #ecfdf5; color: #047857; }
.onboard-step.is-done .t { text-decoration: line-through; color: var(--muted); }
.onboard-step .t { font-weight: 700; font-size: .87rem; display: block; color: var(--ink); }
.onboard-step .d { font-size: .8rem; color: var(--muted); line-height: 1.45; }
.onboard-dismiss {
    position: absolute; top: .6rem; right: .7rem; z-index: 1;
    border: 0; background: transparent; color: var(--muted-2);
    width: 1.8rem; height: 1.8rem; border-radius: .5rem; display: grid; place-items: center;
}
.onboard-dismiss:hover { background: rgba(15, 23, 42, .06); color: var(--ink-2); }

/* ---------- Hilfe-Eintrag in der Sidebar ---------- */
.app-sidebar .nav-link.is-help { margin-top: .2rem; position: relative; }
/* Beim allerersten Besuch einmal ruhig pulsieren, danach nie wieder
   (JS entfernt die Klasse, sobald die Hilfe einmal geöffnet wurde). */
.app-sidebar .nav-link.is-help.is-new::after {
    content: ''; position: absolute; left: .55rem; top: .75rem;
    width: .45rem; height: .45rem; border-radius: 50%;
    background: #818cf8; box-shadow: 0 0 0 0 rgba(129, 140, 248, .7);
    animation: help-pulse 2.4s ease-out 3;
}
@keyframes help-pulse {
    0% { box-shadow: 0 0 0 0 rgba(129, 140, 248, .7); }
    60% { box-shadow: 0 0 0 .55rem rgba(129, 140, 248, 0); }
    100% { box-shadow: 0 0 0 0 rgba(129, 140, 248, 0); }
}
.app-sidebar .nav-link.is-help kbd {
    margin-left: auto; background: rgba(148, 163, 184, .18); color: #cbd5e1;
    border: 0; font-size: .68rem; padding: .1rem .4rem; border-radius: .35rem;
}

@media (max-width: 992px) {
    .help-panel { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
    .help-panel, .onboard-step, .help-links a i { transition: none; }
}