/* ==========================================================================
   AVDEPOT.EXPERT – Bausteine für Beiträge (Stand 2026-10-31)
   Eigene Datei, damit site.css und deren Cache-Version unverändert bleiben.
   Nutzt nur die vorhandenen Design-Tokens aus site.css (:root).
   Neue Klassen: .article-toc*, .article-keypoints*
   ========================================================================== */

/* ---------- Inhaltsverzeichnis (Paket B) ----------
   Steht in .article-body vor der ersten H2. Erbt Farbe und Zeilenhöhe von .article-body.
   display:flow-root: Das Kästchen weicht dem rechts schwebenden Beitragsbild aus. */
.article-body .article-toc{
  display:flow-root;margin:8px 0 30px;padding:16px 20px 14px;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-md);
  line-height:1.5;font-size:0.94rem;
}
.article-body .article-toc-title{
  margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:0.8rem;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan);
}
.article-body .article-toc ol{margin:0;padding-left:1.4em;list-style:decimal;}
.article-body .article-toc li{margin:0 0 6px;padding-left:2px;}
.article-body .article-toc li::marker{color:var(--slate-dim);}
.article-body .article-toc a{color:var(--white);text-decoration:none;}
.article-body .article-toc a:hover{color:var(--cyan);text-decoration:underline;}
.article-body .article-toc a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:3px;}
/* Lange Verzeichnisse (mehr als 10 Abschnitte) sind eingeklappt */
.article-body .article-toc details > summary{
  cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:700;font-size:0.8rem;
  letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan);
}
.article-body .article-toc details > summary::-webkit-details-marker{display:none;}
.article-body .article-toc details > summary::after{content:" ▾";}
.article-body .article-toc details[open] > summary::after{content:" ▴";}
.article-body .article-toc details[open] > summary{margin-bottom:10px;}
.article-body .article-toc summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:3px;}
@media(min-width:720px){
  .article-body .article-toc details ol{columns:2;column-gap:32px;}
  .article-body .article-toc details li{break-inside:avoid;}
}

/* ---------- „Das Wichtigste in Kürze“ (Paket B, Texte liefert die Redaktion) ----------
   Vorlage:
   <aside class="article-keypoints" aria-labelledby="kurz-h">
     <p class="article-keypoints-title" id="kurz-h">Das Wichtigste in Kürze</p>
     <ul><li>…</li><li>…</li><li>…</li></ul>
   </aside>
   Platz: direkt nach <p class="lede">, vor dem Inhaltsverzeichnis. */
.article-body .article-keypoints{
  display:flow-root;margin:8px 0 22px;padding:16px 20px 6px;
  border-left:3px solid var(--cyan);background:rgba(79,211,239,0.06);border-radius:0 var(--radius-md) var(--radius-md) 0;
}
.article-body .article-keypoints-title{
  margin:0 0 8px;font-family:var(--font-display);font-weight:700;font-size:0.95rem;color:var(--white);
}
.article-body .article-keypoints ul{margin:0 0 10px;padding-left:1.2em;list-style:disc;}
.article-body .article-keypoints li{margin-bottom:8px;line-height:1.6;}

@media print{
  .article-body .article-toc{display:none;}
}

/* ---------- Themen-Filter auf aktuelles.html (Paket C) ----------
   Leiste ist im HTML mit hidden versehen und wird erst von news-filter.js eingeblendet.
   Karten tragen data-topics; ausgefilterte Karten bekommen das Attribut hidden.
   Die Karten haben ein Inline-display, deshalb !important. */
.news-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;}
.news-filter[hidden]{display:none;}
.news-filter-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;
  font:inherit;font-family:var(--font-display);font-size:0.8rem;font-weight:600;line-height:1.2;
  color:var(--slate);background:var(--glass);border:1px solid var(--glass-border);border-radius:999px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.news-filter-btn:hover{color:var(--white);border-color:rgba(79,211,239,0.35);}
.news-filter-btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.news-filter-btn[aria-pressed="true"]{color:var(--cyan);border-color:var(--cyan);background:rgba(79,211,239,0.12);}
.news-filter-count{font-size:0.72rem;font-weight:700;color:var(--slate-dim);}
.news-filter-btn[aria-pressed="true"] .news-filter-count{color:var(--cyan);}
.news-grid > .news-card[hidden]{display:none !important;}

/* ---------- „Passend dazu“ am Ende der Beiträge (Paket C) ----------
   Steht nach der Quellenbox; nutzt die Karten aus site.css (.news-grid/.news-card) ohne Anrisstext.
   Nicht im Suchindex (data-pagefind-ignore, nav). */
.article-related{max-width:760px;margin:44px auto 0;}
.article-related h2{font-size:1.3rem;color:var(--white);margin:0 0 18px;}
.article-related .news-grid{grid-template-columns:1fr;gap:16px;}
@media(min-width:720px){.article-related .news-grid{grid-template-columns:repeat(3,1fr);}}
.article-related .news-card{padding:20px;}
.article-related .news-card h3{font-size:0.98rem;margin-bottom:12px;}
@media print{ .news-filter,.article-related{display:none;} }

/* ---------- Wegweiser „Was passt zu mir?“ (Paket D, /wegweiser.html) ----------
   Formular ist im HTML hidden und wird von wegweiser.js eingeblendet; ohne JS sind alle Wege sichtbar. */
.guide-page{max-width:820px;margin-inline:auto;}
.guide-page h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;margin-bottom:10px;}
.guide-page .lede{color:var(--slate);margin-bottom:26px;}
.guide-page h2{font-size:1.3rem;color:var(--white);margin:34px 0 16px;}
.guide-form{display:grid;gap:16px;}
.guide-form[hidden],.guide-step[hidden],.guide-result[hidden],.guide-reset[hidden]{display:none;}
.guide-step{margin:0;padding:18px 20px 12px;border:1px solid var(--glass-border);border-radius:var(--radius-md);background:var(--glass);}
.guide-step legend{padding:0 6px;margin-left:-6px;font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1rem;}
.guide-opt{display:inline-flex;margin:8px 8px 6px 0;cursor:pointer;}
.guide-opt input{position:absolute;opacity:0;width:1px;height:1px;}
.guide-opt span{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--glass-border);background:rgba(255,255,255,0.03);color:var(--slate);
  font-family:var(--font-display);font-size:0.9rem;font-weight:600;transition:border-color .2s,color .2s,background .2s;
}
.guide-opt:hover span{color:var(--white);border-color:rgba(79,211,239,0.35);}
.guide-opt input:checked + span{color:var(--cyan);border-color:var(--cyan);background:rgba(79,211,239,0.12);}
.guide-opt input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px;}
.guide-reset{
  justify-self:start;min-height:40px;padding:8px 16px;font:inherit;font-size:0.85rem;font-weight:600;
  color:var(--slate);background:transparent;border:1px solid var(--glass-border);border-radius:999px;cursor:pointer;
}
.guide-reset:hover{color:var(--white);border-color:rgba(79,211,239,0.35);}
.guide-reset:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.guide-results{display:grid;gap:16px;}
.guide-result{padding:20px 22px;border:1px solid var(--glass-border);border-left:3px solid var(--cyan);border-radius:var(--radius-md);background:var(--glass);scroll-margin-top:96px;}
.guide-result h3{font-size:1.1rem;color:var(--white);margin:0 0 8px;}
.guide-result h3:focus{outline:none;}
.guide-result p{color:var(--slate);line-height:1.7;margin:0 0 12px;}
.guide-links{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.guide-links li{line-height:1.5;}
.guide-kind{
  display:inline-block;min-width:88px;margin-right:6px;font-family:var(--font-display);font-size:0.68rem;font-weight:700;
  letter-spacing:0.05em;text-transform:uppercase;color:var(--cyan);
}
.guide-links a{color:var(--white);text-decoration:underline;text-decoration-color:rgba(79,211,239,0.5);text-underline-offset:3px;}
@media(max-width:559px){.guide-kind{display:block;min-width:0;margin:0 0 2px;}}
.guide-links a:hover{color:var(--cyan);}
.guide-cta{margin-top:26px;padding:16px 20px;border-radius:var(--radius-md);background:rgba(79,211,239,0.06);border:1px solid var(--glass-border);}
.guide-cta p{margin:0;color:var(--slate);}
.guide-note{margin-top:18px;font-size:0.85rem;color:var(--slate-dim);}
@media print{ .guide-form,.guide-reset{display:none;} }

/* ---------- Glossar (Paket E, /glossar.html) und Begriffs-Links in Beiträgen ----------
   Die Begriffskarten nutzen .glossary-grid/.glossary-term aus site.css. */
.gloss-page{max-width:1080px;margin-inline:auto;}
.gloss-page h1{font-size:clamp(1.8rem,4vw,2.4rem);font-weight:800;margin-bottom:10px;}
.gloss-page .lede{color:var(--slate);margin-bottom:22px;max-width:760px;}
.gloss-index ul{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.gloss-index a{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;
  border:1px solid var(--glass-border);background:var(--glass);color:var(--slate);
  font-family:var(--font-display);font-size:0.82rem;font-weight:600;text-decoration:none;
}
.gloss-index a:hover{color:var(--white);border-color:rgba(79,211,239,0.35);}
.gloss-index a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.gloss-page .glossary-term{scroll-margin-top:96px;}
.gloss-page .glossary-term:target{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan);}
.gloss-page .glossary-term dd{margin:0;color:var(--slate);font-size:0.9rem;line-height:1.65;}
.gloss-more{display:block;margin-top:10px;font-size:0.82rem;color:var(--slate-dim);}
.gloss-more a{color:var(--cyan);}
.gloss-sources{max-width:760px;font-size:0.84rem;color:var(--slate-dim);line-height:1.8;}
.gloss-sources ul{margin:6px 0 12px 20px;}
.gloss-sources a{color:var(--cyan);}
.article-body a.gloss-link{color:inherit;text-decoration:underline dotted;text-decoration-color:var(--cyan);text-decoration-thickness:1.5px;text-underline-offset:3px;}
.article-body a.gloss-link:hover{color:var(--cyan);}