@charset "UTF-8";

/* Ankerziele bleiben beim Sprung aus dem TOC unterhalb des fixierten Headers sichtbar. */
.novaropro-article-content h2[id],
.novaropro-article-content h3[id],
.novaropro-article-content h4[id],
.novaropro-article-content h5[id] {
    scroll-margin-top: 7.5rem;
}

/* ========================================================================
   1. STICKY SIDEBAR CONTAINER
   ======================================================================== */
.novaropro-article-toc {
    position: sticky;
    top: 7.5rem; /* Hält das TOC beim Scrollen unterhalb des fixierten Headers im Sichtfeld */
    background-color: var(--color-surface-base);
    border: 1px solid var(--color-border-base);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
    transition: box-shadow 0.3s ease;
}

.novaropro-article-toc:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03);
}

/* ========================================================================
   2. TOC TITLE
   ======================================================================== */
.novaropro-article-toc__title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-text-main);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ========================================================================
   3. NAVIGATION LIST & NESTED HIERARCHIES (SSR COMPLIANT)
   ======================================================================== */
.novaropro-article-toc__list {
    list-style: none !important;
    padding: 0;
    margin: 0;
    font-size: 0.92rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Links innerhalb des Verzeichnisses */
.novaropro-article-toc__list a {
    color: var(--color-text-muted);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}

.novaropro-article-toc__list a:hover {
    color: var(--color-brand);
    padding-left: 4px; /* Eleganter, kleiner Einrück-Effekt beim Hovern */
}

/* ─── Dynamische Einrückungsebenen aus dem PHP-Renderer ─── */

/* Ebene 2 (h3-Unterüberschriften) */
.novaropro-article-toc__list .novaropro-article-toc__item--h3 {
    padding-left: 1rem;
}
.novaropro-article-toc__list .novaropro-article-toc__item--h3 a {
    font-size: 0.88rem;
}

/* Ebene 3 (h4-Unterüberschriften - falls via maxLevel im Template aktiviert) */
.novaropro-article-toc__list .novaropro-article-toc__item--h4 {
    padding-left: 1.75rem;
}
.novaropro-article-toc__list .novaropro-article-toc__item--h4 a {
    font-size: 0.84rem;
    opacity: 0.9;
}

/* Ebene 4 (h5-Unterüberschriften) */
.novaropro-article-toc__list .novaropro-article-toc__item--h5 {
    padding-left: 2.5rem;
}
.novaropro-article-toc__list .novaropro-article-toc__item--h5 a {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* ========================================================================
   4. SCROLL-SPY ACTIVE CODES
   ======================================================================== */
.novaropro-article-toc__list a.is-active {
    color: var(--color-brand) !important;       /* Färbt den aktiven Link kieferngrün */
    font-weight: 700 !important;                /* Macht den aktiven Punkt fett */
    padding-left: 6px !important;               /* Eleganter Einrück-Effekt */
    border-left: 2px solid var(--color-brand);  /* Vertikale Fokus-Linie links */
    opacity: 1 !important;                      /* CORE-FIX: Hebt die Transparenz für h4/h5 im aktiven Zustand auf! */
}

/* Verhindert, dass eine übergeordnete Farbdefinition den aktiven Zustand von Unterelementen überschreibt */
.novaropro-article-toc__list .novaropro-article-toc__item--h4 a.is-active,
.novaropro-article-toc__list .novaropro-article-toc__item--h5 a.is-active {
    color: var(--color-brand) !important;
}

/* ========================================================================
   5. RESPONSIVE BREAKPOINTS
   ======================================================================== */
@media (max-width: 1000px) {
    .novaropro-article-toc {
        display: none;
    }
}