/* =============================================================
   The HorseLoop – Inhaltsverzeichnis (TOC), Version 2
   Markup kommt per scripts/toc-sync.mjs in jede Artikelseite (neue Artikel:
   lib/article-html.ts im Feed); toc.js baut Liste, Pill und Bottom-Sheet.
   Lädt vor /nav.css (dessen :root liefert --thl-nav-h).
   Desktop ≥ 1100 px: Sticky-Sidebar rechts
   darunter: Pill-Button unten rechts → Bottom-Sheet
   Farben ausschließlich aus den Tokens von articles/article.css.
   ============================================================= */

:root {
  /* Farben – nur Website-Tokens (Fallbacks = deren Werte) */
  --hl-toc-accent:      var(--accent, #0A8C5C);       /* Linie, Fortschritt, Indikator */
  --hl-toc-accent-text: var(--accent-deep, #087048);  /* Text in Akzentfarbe: --accent hat auf --bg
                                                         nur 3,6:1, --accent-deep 5,2:1 */
  --hl-toc-ink:         var(--ink, #1f3a32);          /* H2-Einträge, Label */
  --hl-toc-ink-soft:    var(--ink-soft, #42554c);     /* H3-Einträge */
  --hl-toc-muted:       var(--muted, #6f7d73);        /* Nummern, Meta-Zeile */
  --hl-toc-rule:        var(--line, #e6dcc6);         /* Grundlinie */
  --hl-toc-sheet-bg:    var(--bg-soft, #fffdf8);
  --hl-toc-on-accent:   var(--bg-soft, #fffdf8);      /* Schrift auf der Pill (6,0:1) */

  /* Typografie – Fonts sind auf der Seite bereits geladen */
  --hl-toc-font:        var(--font-body, "Source Serif 4", Georgia, serif);
  --hl-toc-font-mono:   var(--font-mono, "JetBrains Mono", ui-monospace, monospace);

  /* Maße */
  --hl-header-height:   var(--thl-nav-h, 136px);  /* Höhe der sticky .nav, Token aus nav.css */
  --hl-article-width:   860px;    /* .article-hero/.article-body inkl. Innenabstand */
  --hl-toc-width:       260px;
  --hl-toc-gap:         24px;     /* Abstand Artikelspalte ↔ Sidebar (die Spalte bringt ihr eigenes --pad-x mit) */
  --hl-toc-edge:        32px;     /* Abstand Sidebar ↔ Fensterrand */
  --hl-toc-indent:      16px;     /* Abstand Linie ↔ Nummer */
  --hl-toc-num-w:       22px;     /* feste Nummernspalte */
  --hl-toc-num-gap:     8px;
}

/* ---------- Smooth-Scroll & Anker-Offset ---------- */

html { scroll-behavior: smooth; }

/* Anker-Offset: kein eigenes scroll-margin-top. nav.css setzt global
   html { scroll-padding-top: calc(var(--thl-nav-h) + 16px) } – ein scroll-margin
   käme obendrauf (gemessen: Überschrift bei 312 statt 152 px). scrollIntoView
   in toc.js beachtet scroll-padding ebenso. */

/* ---------- Layout: Artikel + Sidebar ---------- */

.hl-toc { display: none; }
.hl-toc[hidden] { display: none !important; }
.hl-toc-mobile { display: none !important; }   /* alte Box „Inhalt“ – ersetzt durch Pill + Sheet */

@media (min-width: 1100px) {
  .hl-layout {
    display: grid;
    /* Artikel bleibt mittig, solange rechts Platz ist – sonst rückt er nach links */
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, var(--hl-article-width))
      minmax(calc(var(--hl-toc-width) + var(--hl-toc-gap) + var(--hl-toc-edge)), 1fr);
  }

  .hl-layout > .hl-article {
    grid-column: 2;
    min-width: 0;
  }

  .hl-toc {
    display: block;
    grid-column: 3;
    align-self: start;             /* nötig, damit sticky im Grid greift */
    position: sticky;
    top: calc(var(--hl-header-height) + 40px);
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--hl-toc-width) + var(--hl-toc-gap) + var(--hl-toc-edge));
    max-height: calc(100vh - var(--hl-header-height) - 80px);
    padding-left: var(--hl-toc-gap);
    padding-right: var(--hl-toc-edge);
    overflow-y: auto;              /* sehr lange Artikel: TOC scrollt in sich */
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--hl-toc-rule) transparent;
  }

  /* keine Fläche mehr – die Linie trägt das Modul */
  .hl-toc > nav { padding: 4px 4px 8px; }
}
/* Achtung: kein overflow:hidden auf .hl-layout oder dessen Eltern – das bricht position:sticky. */

/* ---------- Kopf: „INHALT“ + „17 MIN · 10 ABSCHNITTE“ ---------- */

.hl-toc__label {
  margin: 0 0 6px;
  font: 500 11px/1.2 var(--hl-toc-font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hl-toc-ink);
}

.hl-toc__meta {
  margin: 0 0 16px;
  font: 400 11px/1.3 var(--hl-toc-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hl-toc-muted);
}

/* ---------- Linie: Grundlinie, Lesefortschritt, gleitender Indikator ---------- */

.hl-toc__track { position: relative; }

.hl-toc__track::before {           /* Grundlinie */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hl-toc-rule);
}

.hl-toc__progress {                /* füllt sich mit dem Lesefortschritt im Artikel-Body */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--hl-toc-accent);
  opacity: .3;
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}

.hl-toc__indicator {               /* gleitet zum aktiven H2 */
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: var(--hl-toc-accent);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition: transform .25s ease-out, height .25s ease-out, opacity .2s ease-out;
}

.hl-toc__track.is-static .hl-toc__indicator { transition: none; }   /* Startposition ohne Animation */

/* ---------- Liste ---------- */

.hl-toc__list,
.hl-toc__sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hl-toc__link {
  display: grid;
  grid-template-columns: var(--hl-toc-num-w) minmax(0, 1fr);
  column-gap: var(--hl-toc-num-gap);
  align-items: baseline;           /* Nummer bleibt auf der ersten Textzeile */
  padding: 6px 0 6px var(--hl-toc-indent);
  border-radius: 4px;
  font-family: var(--hl-toc-font);
  font-size: .9rem;
  line-height: 1.45;
  color: var(--hl-toc-ink);
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}

.hl-toc__num {
  font: 500 11px/1 var(--hl-toc-font-mono);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--hl-toc-muted);
  transition: color .15s ease;
}

/* Lange Überschriften: max. 2 Zeilen, dann … */
.hl-toc__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  transition: transform .15s ease;
}

/* H3: ohne Nummer, eingerückt auf die Textkante der H2, kleiner und gedimmt */
.hl-toc__link--h3 {
  display: block;
  padding: 4px 0 4px calc(var(--hl-toc-indent) + var(--hl-toc-num-w) + var(--hl-toc-num-gap));
  font-size: .82rem;
  color: var(--hl-toc-ink-soft);
}

/* Zustände */
.hl-toc__link.is-read { opacity: .6; }                    /* oberhalb des aktiven Abschnitts */

.hl-toc__link:hover,
.hl-toc__link.is-active { color: var(--hl-toc-accent-text); opacity: 1; text-decoration: none; }

.hl-toc__link--h2.is-active { font-weight: 600; }
.hl-toc__link--h2.is-active .hl-toc__num,
.hl-toc__link:hover .hl-toc__num { color: var(--hl-toc-accent-text); }

.hl-toc__link:hover .hl-toc__text { transform: translateX(3px); }

.hl-toc__link:focus-visible {
  outline: 2px solid var(--hl-toc-accent-text);
  outline-offset: 1px;
  opacity: 1;
}

/* ---------- H3: nur unter dem aktiven H2 ----------
   data-toc-h3="active" (Sidebar-<aside> bzw. Sheet) → eingeklappt bis der H2 aktiv ist
   data-toc-h3="always" → immer sichtbar                                            */

.hl-toc__sub {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s ease-out, visibility .22s;
}

.hl-toc__sublist {
  min-height: 0;
  overflow: hidden;
}

[data-toc-h3="active"] .hl-toc__item:not(.is-open) > .hl-toc__sub {
  grid-template-rows: 0fr;
  visibility: hidden;              /* versteckte Links nicht per Tab erreichbar */
}

/* ---------- Mobil: Pill-Button + Bottom-Sheet ---------- */

.hl-toc-pill { display: none; }

@media (max-width: 1099.98px) {
  .hl-toc-pill {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;                  /* unter Cookie-Banner (9999) und Toast */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--hl-toc-accent-text);
    color: var(--hl-toc-on-accent);
    font: 500 12px/1 var(--hl-toc-font-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--hl-toc-ink) 22%, transparent);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
  }

  .hl-toc-pill.is-shown {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

.hl-toc-pill:focus-visible {
  outline: 2px solid var(--hl-toc-accent-text);
  outline-offset: 3px;
}

.hl-toc-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;                   /* über der sticky Navbar (50/60) */
}
.hl-toc-sheet[hidden] { display: none; }

.hl-toc-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--hl-toc-ink) 45%, transparent);
  opacity: 0;
  transition: opacity .25s ease-out;
}

.hl-toc-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: min(75vh, 640px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-radius: var(--r-lg, 22px) var(--r-lg, 22px) 0 0;
  background: var(--hl-toc-sheet-bg);
  box-shadow: 0 -8px 30px color-mix(in srgb, var(--hl-toc-ink) 18%, transparent);
  transform: translateY(100%);
  transition: transform .28s ease-out;
  outline: none;
}

.hl-toc-sheet.is-open .hl-toc-sheet__backdrop { opacity: 1; }
.hl-toc-sheet.is-open .hl-toc-sheet__panel { transform: none; }

.hl-toc-sheet__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 14px 4px 24px;
}

.hl-toc-sheet__head .hl-toc__meta { margin-bottom: 8px; }

.hl-toc-sheet__close {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.hl-toc-sheet__close::before,
.hl-toc-sheet__close::after {      /* X aus zwei Strichen */
  content: "";
  position: absolute;
  left: 13px;
  top: 21px;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--hl-toc-ink);
  transform: rotate(45deg);
}
.hl-toc-sheet__close::after { transform: rotate(-45deg); }

.hl-toc-sheet__close:focus-visible {
  outline: 2px solid var(--hl-toc-accent-text);
  outline-offset: -2px;
}

.hl-toc-sheet__nav {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 24px 24px;
}

/* größere Tap-Flächen (≥ 44 px) */
.hl-toc-sheet .hl-toc__link     { padding-top: 11px; padding-bottom: 11px; font-size: .95rem; }
.hl-toc-sheet .hl-toc__link--h3 { padding-top: 12px; padding-bottom: 12px; font-size: .88rem; }

html.hl-toc-locked { overflow: hidden; }   /* Seite hinter dem offenen Sheet nicht scrollen */

/* ---------- Bewegung reduzieren & Druck ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hl-toc__link,
  .hl-toc__num,
  .hl-toc__text,
  .hl-toc__indicator,
  .hl-toc__sub,
  .hl-toc-pill,
  .hl-toc-sheet__backdrop,
  .hl-toc-sheet__panel { transition: none; }
  .hl-toc__link:hover .hl-toc__text { transform: none; }
}

@media print {
  .hl-toc,
  .hl-toc-pill,
  .hl-toc-sheet { display: none !important; }
}