/**
 * Inhaltsverzeichnis (TOC) - Styling
 * -----------------------------------------
 */

.toc-box {
    background: var(--color-card);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    margin-bottom: 2rem;
    font-family: var(--font-sans);
}

.toc-box__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-sans);
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text);
    text-align: left;
}

.toc-box__chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform var(--transition);
}
.toc-box__toggle[aria-expanded="true"] .toc-box__chevron {
    transform: rotate(180deg);
}

.toc-box__list {
    list-style: none;
    margin: .85rem 0 0 0;
    padding: 0;
}
.toc-box__list[hidden] {
    display: none;
}

.toc-box__item {
    margin: 0;
    padding: 0;
}
.toc-box__item--h5 {
    padding-left: 1.1rem;
}

.toc-box__item a {
    display: block;
    padding: .3rem 0;
    font-size: .88rem;
    color: var(--color-text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: .6rem;
    margin-left: -.6rem;
    transition: color var(--transition), border-color var(--transition);
}
.toc-box__item--h5 a {
    font-size: .84rem;
}

.toc-box__item a:hover,
.toc-box__item a:focus-visible {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
}

/* Ueberschriften innerhalb des Artikeltexts bekommen etwas Abstand
   nach oben beim Ansprung per Sprungmarke, damit sie nicht hinter
   dem fixierten Header verschwinden. Der Wert wird NICHT fest
   vorgegeben, sondern von toc.js live anhand der tatsaechlichen
   Header-Hoehe berechnet und als CSS-Variable gesetzt (siehe
   updateStickyHeaderOffset() in toc.js). 100px ist nur ein Fallback,
   falls das Skript aus irgendeinem Grund nicht laeuft. */
.entry-content h4[id],
.entry-content h5[id] {
    scroll-margin-top: var(--sticky-header-offset, 100px);
}