/* SR_BLOG_KIT_v1 (21.10.2026) - Grundgerüst für Inhaltsverzeichnis, Seitenleiste und Suchvorschläge im Blog. EINE Quelle für sr-base und Astro.
   Kundendesign NUR über die Variablen (je Paket/Projekt setzen), Abstände/Schrift erbt das Verzeichnis vom Projekt.
   --sr-bk-head  Höhe der festen Kopfleiste (Seitenleiste klebt darunter mittig)   --sr-bk-ink Akzent/Text   --sr-bk-mute Nebentext
   --sr-bk-line  Linien   --sr-bk-bg Fläche Vorschläge   --sr-bk-hover Fläche aktiv   --sr-bk-radius Ecken   --sr-bk-aside Breakpoint-Schalter (s. u.) */
:root{--sr-bk-head:0px;--sr-bk-gap:20px;--sr-bk-ink:#111827;--sr-bk-mute:#5b6472;--sr-bk-line:rgba(17,24,39,.14);--sr-bk-bg:#fff;--sr-bk-hover:rgba(17,24,39,.05);--sr-bk-radius:0px}

/* ── Seitenleiste: läuft über die ganze Artikelhöhe, Inhalt klebt senkrecht mittig, nie höher als der Bildschirm (Kontakt-Kasten immer ganz sichtbar) ── */
@media (min-width:1024px){
[data-sr-aside]{align-self:stretch;position:relative}
[data-sr-aside-in]{position:sticky;top:var(--sr-bk-head);box-sizing:border-box;height:calc(100svh - var(--sr-bk-head));max-height:none;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding-block:var(--sr-bk-gap)}
[data-sr-aside-in]>*{flex:none;margin-block:0}
[data-sr-aside-in]>[data-sr-toc]:not([data-sr-toc-m]):not([hidden]){flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
[data-sr-aside-in] [data-sr-toc]>*{flex:none}
[data-sr-aside-in] [data-sr-toc]>.sr-bk-list{flex:0 1 auto;min-height:0}
}

/* ── Verzeichnis ── */
[data-sr-toc] .sr-bk-list{overscroll-behavior:contain}
[data-sr-aside-in] [data-sr-toc]:not(.sr-bk-open) .sr-bk-list{overflow:hidden;scrollbar-width:none}
[data-sr-aside-in] [data-sr-toc]:not(.sr-bk-open) .sr-bk-list::-webkit-scrollbar{display:none}
[data-sr-aside-in] [data-sr-toc].sr-bk-open .sr-bk-list{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--sr-bk-mute) transparent}   /* aufgeklappt: Balken hat eine Funktion */
[data-sr-toc] a.is-active,[data-sr-toc] a[aria-current]{color:var(--sr-bk-ink)}
.sr-bk-kompakt .sr-bk-far{display:none!important}
.sr-bk-kompakt .sr-bk-list{position:relative}
.sr-bk-before .sr-bk-list::before,.sr-bk-after .sr-bk-list::after{content:"···";display:block;padding:0 .6rem;color:var(--sr-bk-mute);font-weight:700;letter-spacing:.2em;line-height:1.1}
.sr-bk-kompakt:not(.sr-bk-open) .sr-bk-list a>:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sr-bk-meta{display:flex;align-items:center;gap:.75rem;margin:0 0 .6rem}
.sr-bk-pos{flex:none;font-size:.75rem;font-weight:700;color:var(--sr-bk-mute);font-variant-numeric:tabular-nums}
.sr-bk-bar{display:block;flex:1;height:2px;background:var(--sr-bk-line);border-radius:var(--sr-bk-radius);overflow:hidden}
.sr-bk-bar i{display:block;height:100%;width:0;background:var(--sr-bk-ink);transition:width .35s ease}
.sr-bk-all{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;min-height:44px;margin:.6rem 0 0;padding:.55rem .6rem 0;border:0;border-top:1px solid var(--sr-bk-line);border-radius:0;background:none;color:var(--sr-bk-ink);font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.06em;cursor:pointer;text-align:left}
.sr-bk-all[hidden]{display:none}
.sr-bk-all svg{flex:none;width:1rem;height:1rem;transition:transform .25s}
.sr-bk-open .sr-bk-all svg{transform:rotate(180deg)}
.sr-bk-n{flex:none;font-weight:700;color:var(--sr-bk-mute);font-variant-numeric:tabular-nums}

/* ── Suchvorschläge ── */
.sr-bk-sform{position:relative}
.sr-bk-sug{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;box-sizing:border-box;margin:0;padding:.35rem 0;list-style:none;background:var(--sr-bk-bg);border:1px solid var(--sr-bk-line);border-radius:var(--sr-bk-radius);box-shadow:0 24px 48px -28px rgba(17,24,39,.5);max-height:min(420px,60svh);overflow-y:auto;text-align:left}
.sr-bk-sug.sr-bk-float{position:fixed;right:auto;z-index:99990}
.sr-bk-sug[hidden]{display:none}
.sr-bk-sug li{margin:0;padding:0}
.sr-bk-sug li::before,.sr-bk-sug li::marker{content:none}
.sr-bk-o a{display:flex;flex-direction:column;gap:.15rem;padding:.65rem 1rem;color:var(--sr-bk-ink);text-decoration:none;border-left:2px solid transparent}
.sr-bk-o.is-akt a,.sr-bk-o a:hover{background:var(--sr-bk-hover);border-left-color:var(--sr-bk-ink)}
.sr-bk-st{font-weight:600;line-height:1.35}
.sr-bk-st mark{background:none;color:inherit;font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sr-bk-sc{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sr-bk-mute)}
.sr-bk-oall a{font-size:.78rem;font-weight:700;border-top:1px solid var(--sr-bk-line)}
.sr-bk-leer{padding:.75rem 1rem;color:var(--sr-bk-mute)}
@media (prefers-reduced-motion:reduce){.sr-bk-bar i,.sr-bk-all svg{transition:none}}