/*
 * sticky-toc.css — Struktur & Mechanik der Sticky-TOC-Komponente.
 *
 * Enthaelt NUR das, was fuer das Verhalten noetig ist (Positionierung, Sticky,
 * Umschaltung, Grid). KEINE Farben/Typografie/Rahmen – das kommt aus eurem
 * Theme (siehe demo.css als Beispiel).
 *
 * SCROLL-MODELL: Es scrollt IMMER der Container (.stoc-scroller) – auf Mobile
 * wie auf Desktop. Die Seite selbst scrollt nie. Das passt zu einer App-Shell
 * mit fixem Header/Panels und einem einzigen scrollenden Innenbereich.
 * -> Die Komponente setzt bewusst KEIN overflow/height auf .stoc-scroller;
 *    das bleibt euer App-Layout (euer `overflow:auto` + begrenzte Hoehe).
 *
 * UMSCHALTUNG NACH BREITE: Die "breite" Ansicht (Sidebar) haengt an der Klasse
 * `.stoc-wide`, die das JS auf den Container setzt, sobald dessen BREITE
 * >= desktopMinWidth ist (per ResizeObserver, nicht viewport-basiert). Der
 * Breakpoint ist also NUR im JS definiert (`desktopMinWidth`) – hier gibt es
 * kein `@media`. So wechselt die Ansicht auch, wenn ein Panel den Platz verengt.
 */

:root {
    --stoc-compact-h: 3.25rem; /* Hoehe der kompakten Leiste (Mobile)         */
    --stoc-sidebar-width: 340px; /* MAX-Breite der Sidebar (breite Ansicht)      */
    --stoc-sidebar-min: 240px; /* MIN-Breite der Sidebar (schrumpft bis hier)  */
    --stoc-sidebar-pref: 28%; /* bevorzugte Breite (Anteil der Container-Breite) */
    --stoc-content-max: 1280px; /* max. Breite des Inhalts (Desktop)            */
    --stoc-col-gap: 1rem; /* Spaltenabstand Sidebar <-> Inhalt (Desktop)  */
    --stoc-sidebar-top: 0rem; /* Abstand der Sidebar von der Container-Oberkante */
}

/* ------------------------------------------------------------------ *
 * Der Scroll-Container. Ihr gebt ihm in eurem Layout `overflow:auto`
 * und eine begrenzte Hoehe (damit er scrollt). Die Komponente ergaenzt
 * nur:
 *   position: relative   -> Bezugsrahmen fuer die sticky-Kinder & offsetTop
 *   overflow-anchor: none -> verhindert Scrollpositions-Korrektur beim
 *                            Umschalten (Mobile: volle Liste <-> Dropdown)
 * ------------------------------------------------------------------ */
.stoc-scroller {
    position: relative;
    overflow-anchor: none;
}

.stoc-content {
    overflow: visible;
}

/* ------------------------------------------------------------------ *
 * Kompakte Leiste (Mobile): sticky, aber height:0 im Fluss (nimmt nie
 * Platz weg). Sitzt bereits an ihrer Endposition und blendet nur die
 * Deckkraft ein -> keine leere Luecke beim Andocken.
 * ------------------------------------------------------------------ */
.compact-bar {
    position: sticky;
    top: 0;
    height: 0;
    z-index: 30;
    overflow: visible;
}

.compact-bar__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--stoc-compact-h);
    display: flex;
    align-items: center;
    opacity: 0;
    x-transform: translateY(-6px);
    x-transition: opacity .2s ease, transform .2s ease;
    transition: opacity .2s ease;
    pointer-events: none;
    x-will-change: opacity, transform;
    will-change: opacity;
}

.is-stuck .compact-bar__inner {
    opacity: 1;
    x-transform: translateY(0);
    pointer-events: auto;
}

/* ------------------------------------------------------------------ *
 * Inhaltsverzeichnis (Mobile): sticky, dockt unter der kompakten Leiste
 * an. Umschaltung volle Liste <-> Dropdown ueber die Stuck-Klasse.
 * ------------------------------------------------------------------ */
.toc {
    position: sticky;
    top: var(--stoc-compact-h);
    z-index: 20;
}

.toc__current { /* Titel des aktuellen Kapitels (Ellipsis)   */
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc__dropdown {
    display: none;
    position: relative;
}

    .toc__dropdown summary {
        display: flex;
        align-items: center;
        list-style: none;
        cursor: pointer;
    }

        .toc__dropdown summary::-webkit-details-marker {
            display: none;
        }

    .toc__dropdown .panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        max-height: 60vh;
        overflow: auto;
    }

.is-stuck .toc__full {
    display: none;
}

.is-stuck .toc__dropdown {
    display: block;
}

/* Ankerversatz: angesprungene Abschnitte nicht unter der Sticky-Zone verstecken. */
.item {
    scroll-margin-top: calc(var(--stoc-compact-h) + 4.5rem);
}

/* ================================================================== *
 * BREITE ANSICHT: greift, sobald das JS die Klasse `.stoc-wide` auf den
 * Container setzt (Container-Breite >= desktopMinWidth). NICHT viewport-
 * basiert – so wechselt die Ansicht auch, wenn ein Panel den Platz verengt.
 * Es scrollt weiterhin der CONTAINER; das Verzeichnis ist eine mitschwebende
 * Sidebar (sticky relativ zum Container). Kein Header-Umbau, kein Dropdown.
 * ================================================================== */

/* Zweispaltig: Header ueber beide Spalten, darunter Sidebar + Inhalt. */
.stoc-wide .stoc-content {
    max-width: var(--stoc-content-max);
    margin-inline: auto;
    display: grid;
    grid-template-columns: clamp(var(--stoc-sidebar-min), var(--stoc-sidebar-pref), var(--stoc-sidebar-width)) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "toc    agenda";
    column-gap: var(--stoc-col-gap);
    align-items: start; /* WICHTIG: Sidebar behaelt eigene Hoehe -> sticky funktioniert */
}

.stoc-wide .session-header {
    grid-area: header;
}

.stoc-wide .agenda {
    grid-area: agenda;
}

/* Sidebar: sticky relativ zum Container (dessen Oberkante liegt bereits
   unter eurem fixen Header). */
.stoc-wide .toc {
    grid-area: toc;
    position: sticky;
    top: var(--stoc-sidebar-top);
    align-self: start;
    max-height: calc(100vh - var(--stoc-sidebar-top) - 2rem);
    overflow: auto; /* sehr lange Liste scrollt innerhalb der Sidebar */
}

/* Breit immer die volle Liste, nie Dropdown/Kompaktleiste. */
.stoc-wide .toc__full {
    display: block;
}

.stoc-wide .toc__dropdown {
    display: none;
}

.stoc-wide .compact-bar {
    display: none;
}

.stoc-wide .item {
    scroll-margin-top: var(--stoc-sidebar-top);
}