/* Mitwanderndes Inhaltsverzeichnis links (Linie mit Symbolen), gemeinsam fuer alle Seiten.
   Skript: /inhalt.js. Breite Fenster (>= 1900 px): Kreise mit Beschriftung im freien Rand.
   1024 bis 1899 px: nur Kreise, Beschriftung bei Zeigen/Fokus; die Abschnitte ruecken dafuer nach
   rechts, damit nichts ueber Ueberschriften liegt. Schmaler: schlanke Punktlinie plus Leiste
   "05 / 09 Ablauf" unter der Kopfzeile. Unter der Kopfzeile, ueber dem Inhalt.
   Welche Seite ein Verzeichnis hat, steht fest im HTML: <main data-toc-seite>, damit die Abschnitte
   schon vor dem Skript an der richtigen Stelle stehen (kein Springen beim Laden). */
.toc { display: none; }
.toc.ist-bereit { display: block; position: fixed; z-index: 40; box-sizing: content-box; top: calc(50% + 32px); transform: translateY(-50%);
  left: 16px; height: min(60vh, 520px); width: 28px; }
@media (min-width: 1600px) { .toc.ist-bereit { left: clamp(16px, calc((100vw - 1320px) / 2 - 60px), 72px); } }
.toc-liste { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.toc-schiene, .toc-fuellung { position: absolute; left: 13px; top: 0; width: 2px; border-radius: 2px; }
.toc-schiene { bottom: 0; background: #E5DFD5; }
.toc-fuellung { bottom: 0; background: #A34E28; transform: scaleY(0); transform-origin: top; transition: transform .12s linear; }
.toc-punkt { position: absolute; left: 0; height: 28px; margin-top: -14px; }
.toc-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #6E6A60; }
.toc-kreis { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: #F6F2EC; border: 1.5px solid #8A8578; color: #6E6A60; transition: background .3s, border-color .3s, color .3s, transform .3s; }
.toc-kreis svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: block; }
.toc-text { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; padding: 4px 10px; border-radius: 999px; background: rgba(246,242,236,.94);
  max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  transition: opacity .25s, transform .25s; }
.toc-punkt.ist-besucht .toc-kreis { border-color: #A34E28; color: #A34E28; }
.toc-punkt.ist-aktiv .toc-kreis { background: #A34E28; border-color: #A34E28; color: #FBF8F3; transform: scale(1.12); }
.toc-punkt.ist-aktiv .toc-link { color: #161512; }
.toc-punkt.ist-aktiv .toc-text { font-weight: 600; }
.toc-link:hover .toc-kreis { border-color: #161512; color: #161512; }
.toc-punkt.ist-aktiv .toc-link:hover .toc-kreis { color: #FBF8F3; }
.toc-link:focus-visible { outline: none; }
.toc-link:focus-visible .toc-kreis { outline: 2px solid #C2643A; outline-offset: 3px; }
/* Mittlere Breite: Beschriftung nur beim Zeigen oder Fokus */
@media (max-width: 1899px) {
  .toc-text { opacity: 0; transform: translateX(-6px); pointer-events: none; box-shadow: 0 6px 18px -10px rgba(22,21,18,.35); border: 1px solid #E5DFD5; }
  .toc-link:hover .toc-text, .toc-link:focus-visible .toc-text { opacity: 1; transform: none; }
}
@media (min-width: 1024px) and (max-width: 1599px) {
  main[data-toc-seite] > section, main[data-toc-seite] > footer, main[data-toc-seite] ~ footer { padding-left: 76px; }
}
/* Wissensartikel: eigener Rahmen (1120 px, 32 px Innenabstand) beginnt erst ab 1208 px weit genug rechts */
@media (min-width: 1024px) and (max-width: 1207px) {
  main.beitrag[data-toc-seite], main.beitrag[data-toc-seite] ~ .abschluss, main.beitrag[data-toc-seite] ~ .fusszeile { padding-left: 76px; }
}
/* Schmal: schlanke Punktlinie ganz links, ohne Text, dazu die Leiste unter der Kopfzeile */
@media (max-width: 1023px) {
  .toc.ist-bereit { left: 4px; width: 20px; height: 50vh; top: calc(50% + 40px); }
  .toc-schiene, .toc-fuellung { left: 9px; }
  .toc-punkt { height: 20px; margin-top: -10px; }
  .toc-kreis { width: 20px; height: 20px; border-width: 1.25px; }
  .toc-kreis svg { width: 11px; height: 11px; }
  .toc-text { display: none; }
  main[data-toc-seite] > section, main[data-toc-seite] > footer, main[data-toc-seite] ~ footer,
  main.beitrag[data-toc-seite], main.beitrag[data-toc-seite] ~ .abschluss, main.beitrag[data-toc-seite] ~ .fusszeile { padding-left: 36px; }
  [data-toc] { scroll-margin-top: 116px; }
}
.inhalt-leiste { display: none; }
@media (max-width: 1023px) {
  .inhalt-leiste { display: flex; align-items: center; position: fixed; left: 0; right: 0; top: 64px; height: 30px; z-index: 45; padding: 0 16px 0 36px;
    background: rgba(246,242,236,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid #E5DFD5;
    font-family: 'Inter', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; color: #4F4B43; font-variant-numeric: tabular-nums; white-space: pre;
    transform: translateY(-100%); opacity: 0; transition: transform .3s ease, opacity .3s ease; pointer-events: none; }
  .inhalt-leiste.ist-sichtbar { transform: none; opacity: 1; }
}
.inhalt-leiste__fuellung { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #A34E28; transform: scaleX(0); transform-origin: left; }
.inhalt-leiste__text { position: relative; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .toc-fuellung, .toc-kreis, .toc-text, .inhalt-leiste { transition: none; }
}
@media print { .toc, .inhalt-leiste { display: none !important; } }

/* Sprungziele: Abstand zur Kopfzeile */
/* Handy (bis 640 px): Die Rail (20 px breit, endet bei 24 px) braucht links Platz. Damit der Inhalt
   nicht links gequetscht wirkt, bekommen Abschnitte und Fuss links und rechts denselben Abstand
   (32 px), und die Kopfbereiche (Start-Abschnitte) stehen mittig: Zeile, Ueberschrift, Text, Buttons. */
@media (max-width: 640px) {
  main[data-toc-seite] > section, main[data-toc-seite] > footer, main[data-toc-seite] ~ footer { padding-left: 32px; padding-right: 32px; }
  main[data-toc-seite] > section[data-toc="Start"] { text-align: center; }
  main[data-toc-seite] > section[data-toc="Start"] .flex { justify-content: center; }
  main[data-toc-seite] > section[data-toc="Start"] .flex:not(.flex-wrap) { flex-direction: column; gap: 10px; }
  main[data-toc-seite] > section[data-toc="Start"] .flex.flex-wrap { flex-direction: column; align-items: stretch; max-width: 340px; margin-left: auto; margin-right: auto; }
  main[data-toc-seite] > section[data-toc="Start"] .btn-primary, main[data-toc-seite] > section[data-toc="Start"] .btn-ghost { justify-content: center; text-align: center; }
  main[data-toc-seite] > section[data-toc="Start"] .direkt-zeile { justify-content: center; }
}
[data-toc] { scroll-margin-top: 84px; }
@media (max-width: 1023px) { [data-toc] { scroll-margin-top: 116px; } }