/* inhaltsverzeichnis.css — geteiltes, mitscrollendes Inhaltsverzeichnis
   für lange Lesestrecken (Ratgeber, Handbuch).
   ------------------------------------------------------------------
   Baut auf style.css auf (nutzt dessen CSS-Variablen) und ist
   theme-aware (Dark/Light). Erwartete Struktur:

     <div class="container lese-layout">
       <details class="toc" id="toc">
         <summary aria-label="Inhaltsverzeichnis öffnen">Inhalt</summary>
         <nav aria-label="Inhaltsverzeichnis">
           <ul class="toc-liste">
             <li><a class="toc-teil" href="#abschnitt">Abschnitt</a>
               <ul><li><a href="#unterpunkt">Unterpunkt</a></li></ul>
             </li>
           </ul>
         </nav>
       </details>
       <article class="…">…</article>
     </div>

   Dazu inhaltsverzeichnis.js einbinden (Scroll-Hervorhebung + mobiles
   Panel). Die Sprungziele brauchen scroll-margin-top (Topbar ist sticky).

   Desktop (>= 62rem): seitliche, mitlaufende Spalte.
   Mobil: fixierter Knopf unten rechts, der ein Panel öffnet. */

/* ---- Zweispaltiges Raster: Inhaltsverzeichnis + Lesespalte ---- */

.lese-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: 1080px;
  /* Die Section-Klassen der Site zentrieren ihren Inhalt; Lesetext nicht. */
  text-align: left;
}

@media (min-width: 62rem) {
  .lese-layout {
    grid-template-columns: 17rem minmax(0, 70ch);
    justify-content: center;
    gap: 3.5rem;
  }
}

/* ---- Inhaltsverzeichnis ---- */

.toc {
  font-size: 0.92rem;
}

.toc > summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--color-text);
}

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

/* ---- Mobil: schwebender Inhalts-Knopf + Panel ----
   Auf dem Handy ist eine seitliche Spalte nicht möglich. Das Verzeichnis
   liegt deshalb als fixierter Knopf unten rechts und bleibt damit während
   des gesamten Scrollens erreichbar (statt nur am Seitenanfang). */

@media (max-width: 61.999rem) {
  .toc {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    margin: 0;
    padding: 0;
    max-width: calc(100vw - 2rem);
  }

  .toc > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    float: right;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border: 1px solid var(--color-accent-border-strong);
    box-shadow: var(--shadow-soft);
    font-size: 0.95rem;
  }

  .toc > summary::before {
    content: "☰";
    font-size: 1rem;
    line-height: 1;
  }

  .toc[open] > summary::before {
    content: "✕";
  }

  .toc nav {
    position: absolute;
    right: 0;
    bottom: 3.75rem;
    width: min(23rem, calc(100vw - 2rem));
    max-height: min(68vh, 34rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    box-shadow: var(--shadow-soft);
    padding: 0.9rem 1.1rem;
  }

  .toc-liste {
    padding: 0;
  }
}

.toc-liste,
.toc-liste ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-liste {
  padding: 0.25rem 0 1rem;
}

.toc-liste > li {
  margin-top: 1.05rem;
}

.toc-liste > li:first-child {
  margin-top: 0;
}

.toc-liste a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.75rem;
  border-left: 2px solid transparent;
  color: var(--color-muted);
  text-decoration: none;
  line-height: 1.4;
}

.toc-liste a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.toc-teil {
  color: var(--color-text) !important;
  font-weight: 600;
}

.toc-liste ul a {
  font-size: 0.88rem;
}

.toc-liste a[aria-current="true"] {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* Mobil: der aktive Eintrag wird beim Öffnen in den sichtbaren Bereich
   gescrollt (siehe Skript) – die Hervorhebung ist dieselbe wie am Desktop. */

@media (min-width: 62rem) {
  .toc {
    position: sticky;
    top: 7.5rem;
    align-self: start;
    max-height: calc(100vh - 10rem);
    overflow-y: auto;
    background: transparent;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0 0.5rem 0 1rem;
  }

  /* Auf Desktop dauerhaft offen: die Zusammenfassung entfällt und der
     Inhalt des <details> wird sichtbar geschaltet. Browser ohne
     ::details-content behalten die aufklappbare Variante (Fallback). */
  @supports selector(::details-content) {
    .toc > summary {
      display: none;
    }

    .toc::details-content {
      content-visibility: visible;
      block-size: auto;
    }
  }
}