/* ==========================================================================
   Artikel auf dem Handy nach Abschnitten zusammenklappen

   Gehoert zu app/static/js/abschnitte.js. Eingebunden ueber
   includes/abschnitte_klappbar.html, also nur auf den Seiten, die es bekommen.
   ========================================================================== */

@media (max-width: 768px) {
    /* Das Inhaltsverzeichnis faellt weg, sobald die Abschnitte zugeklappt
       sind: die Ueberschriftenzeilen sind selbst eines, und drei
       Navigationsebenen uebereinander (Schnellzugriff, Verzeichnis,
       Abschnitte) sind eine zu viel. Die Klasse setzt das Modul erst nach dem
       Umbau - ohne Skript bleibt das Verzeichnis stehen. */
    .abschnitte-aktiv .seo-page .page-toc {
        display: none;
    }

    /* Vor dem Umbau: alles ab dem zweiten H2 ausblenden, damit der volle
       Artikel nicht kurz aufblitzt und dann zusammenschnappt. Die Klasse setzt
       ein Inline-Skript im Kopf und faellt, sobald das Modul gebaut hat (oder
       nach 2 s von selbst - ein ausbleibendes Skript darf den Artikel nicht
       dauerhaft verstecken). Herausgehobene Bloecke bleiben stehen. */
    .abschnitte-warten .seo-page .page-content > h2 ~ h2 ~ *:not(h2):not(.register-cta):not(.cta-box):not(.testimonial-cta):not(.faq-section) {
        display: none;
    }

    /* Zugeklappt bilden die Ueberschriften eine dichte Liste wie im Mobil-Skin
       der Wikipedia: kein Aussenabstand, nur Zeilenhoehe und Trennstrich. Der
       grosszuegige Abstand einer Artikel-Ueberschrift (2,5 rem) macht aus 14
       Abschnitten sonst wieder eine lange Rutschbahn. */
    .artikel-abschnitt {
        margin: 0;
    }

    .artikel-abschnitt > summary {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
        cursor: pointer;
        list-style: none;
        margin: 0;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--border);
        scroll-margin-top: 70px;
    }

    .artikel-abschnitt > summary::-webkit-details-marker {
        display: none;
    }

    /* Die Ueberschrift bringt ihre eigenen Abstaende und den Strich mit -
       beides traegt jetzt die Zeile. */
    .artikel-abschnitt > summary > h2 {
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }

    /* Ein offener Abschnitt bekommt Luft, sonst klebt sein Text an der Zeile
       darueber und an der naechsten Ueberschrift. */
    .artikel-abschnitt[open] {
        margin: 1.5rem 0;
    }

    .artikel-abschnitt[open] > summary {
        margin-bottom: 1.25rem;
    }

    /* Pfeil wie im Inhaltsverzeichnis: gedrehtes Quadrat aus Rahmenlinien.
       Kein Schriftzeichen - Montserrat kennt U+25BE nicht. */
    .artikel-abschnitt > summary::after {
        content: '';
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        margin-bottom: 4px;
        opacity: 0.7;
        transition: transform 0.2s ease;
    }

    .artikel-abschnitt[open] > summary::after {
        transform: rotate(-135deg);
        margin-bottom: 0;
    }

    .artikel-abschnitt > summary:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}

/* Ab 769px bleibt alles offen: die Zeile ist dann eine gewoehnliche
   Ueberschrift, kein Bedienelement. */
@media (min-width: 769px) {
    .artikel-abschnitt > summary {
        display: block;
        cursor: auto;
        list-style: none;
    }

    .artikel-abschnitt > summary::-webkit-details-marker,
    .artikel-abschnitt > summary::after {
        display: none;
    }
}