/* RPO Media — Wissensseiten (KI-Sichtbarkeit, SEO, Backlinks, Glossar).
 * Ergaenzt site.css, nutzt ausschliesslich dessen Tokens (Design "publication").
 * Eigene Datei, damit Aenderungen an der Startseite und den Wissensseiten
 * unabhaengig bleiben. */

/* Brotkrumen ------------------------------------------------------------------ */
.crumbs { padding-block: var(--space-3); border-bottom: 1px solid var(--fg); margin-bottom: var(--space-12); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--muted); font: 700 var(--text-xs) / 1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--border); }
.crumbs a { color: var(--meta-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Kopf eines Wissensbeitrags --------------------------------------------------- */
.doc-hero { padding-block: var(--space-12) var(--space-12); }
.doc-hero h1 { margin-top: var(--space-4); max-width: 900px; font-size: clamp(36px, 6.2vw, var(--text-3xl)); }
.answer { margin-top: var(--space-6); max-width: 760px; color: var(--fg); font-size: var(--text-lg); line-height: 1.5; }
.doc-meta { margin-top: var(--space-5); color: var(--muted); font: 700 var(--text-xs) / 1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.doc-hero .actions { margin-top: var(--space-6); }

/* Zwei Spalten: Text + Randspalte ----------------------------------------------- */
.doc { padding-top: 0; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 720px) minmax(220px, 300px); gap: var(--space-12); justify-content: space-between; align-items: start; }
.toc { position: sticky; top: 96px; border-top: var(--rule); padding-top: var(--space-4); font-size: var(--text-sm); }
.toc ol { list-style: none; padding: 0; margin-top: var(--space-3); display: grid; gap: var(--space-2); }
.toc a { text-decoration: none; color: var(--fg-2); line-height: 1.35; display: block; }
.toc a:hover { color: var(--meta-text); }
.toc .toc-more { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border); }

/* Fliesstext ----------------------------------------------------------------- */
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); padding-top: var(--space-3); border-top: 2px solid var(--fg); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.05; scroll-margin-top: 96px; }
.prose h3 { margin-top: var(--space-8); font-size: var(--text-lg); }
.prose p, .prose li { color: var(--fg-2); }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: var(--space-2); }
.prose a { text-decoration-color: var(--meta-text); }
.prose code { font: 700 0.86em / 1 var(--font-mono); background: var(--surface); padding: 2px 4px; }
.prose pre { background: var(--surface); border: 1px solid var(--border); padding: var(--space-4); overflow-x: auto; font: 700 var(--text-sm) / 1.55 var(--font-mono); }
.prose pre code { background: none; padding: 0; font: inherit; }
.prose blockquote { margin: var(--space-6) 0; padding-top: var(--space-3); border-top: 2px solid var(--fg); font: 700 var(--text-lg) / 1.3 var(--font-display); }
.prose blockquote p { color: var(--fg); }
.prose blockquote cite { display: block; margin-top: var(--space-2); font: 700 var(--text-xs) / 1.4 var(--font-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.prose .note { font-size: var(--text-sm); color: var(--muted); }

/* Kurz gesagt ---------------------------------------------------------------- */
.kurz { border-top: var(--rule); background: var(--surface); padding: var(--space-5) var(--space-6) var(--space-6); }
.kurz .eyebrow { margin-bottom: var(--space-3); }
.kurz ul { padding-left: 1.1em; }
.kurz li { color: var(--fg); }
.kurz li + li { margin-top: var(--space-2); }

/* Tabelle -------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-top: 2px solid var(--fg); }
.table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.45; }
.table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--border); color: var(--fg-2); }
.table-wrap th { color: var(--fg); font: 700 var(--text-xs) / 1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.table-wrap td:first-child { color: var(--fg); font-weight: 700; }
.table-wrap caption { caption-side: bottom; text-align: left; padding-top: var(--space-2); color: var(--muted); font-size: var(--text-xs); }

/* Handlungsaufforderung ------------------------------------------------------- */
.cta-band { margin-block: var(--space-12); padding: var(--space-6); border-top: var(--rule); background: var(--surface-warm); }
.cta-band h2, .cta-band h3 { margin: 0; padding: 0; border: 0; font-size: var(--text-xl); line-height: 1.1; }
.cta-band p { margin-top: var(--space-3); color: var(--fg-2); max-width: 600px; }
.cta-band .actions { margin-top: var(--space-5); }
.cta-end { padding-block: var(--section-y-desktop); }
.cta-end .cta-band { margin: 0; padding: var(--space-8); }
.cta-end .cta-band h2 { font-size: clamp(var(--text-xl), 4vw, var(--text-2xl)); max-width: 760px; }

/* Quellen und Weiterlesen ----------------------------------------------------- */
.sources { font-size: var(--text-sm); }
.sources li { color: var(--fg-2); }
.related { list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.related li { margin: 0 !important; border-top: 1px solid var(--border); padding: var(--space-4) 0; }
.related a { display: block; text-decoration: none; font: 700 var(--text-lg) / 1.2 var(--font-display); color: var(--fg); }
.related a:hover { color: var(--meta-text); }
.related span { display: block; margin-top: var(--space-1); color: var(--muted); font-size: var(--text-sm); }

/* FAQ innerhalb des Textes (nutzt .faq aus site.css) */
.prose .faq { margin-top: var(--space-4); }
.prose .faq details p { padding-bottom: var(--space-5); }
.prose .faq summary { font-size: var(--text-base); }

/* Glossar --------------------------------------------------------------------- */
.az { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-6); padding: var(--space-3) 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--border); }
.az a, .az span { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; font: 700 var(--text-sm) / 1 var(--font-mono); text-decoration: none; }
.az a { color: var(--fg); border: 1px solid var(--border); }
.az a:hover { border-color: var(--accent); color: var(--meta-text); }
.az span { color: var(--border); }
.letter { margin-top: var(--space-12); padding-top: var(--space-3); border-top: var(--rule); font: 700 var(--text-2xl) / 1 var(--font-display); scroll-margin-top: 96px; }
.terms dt { margin-top: var(--space-6); font: 700 var(--text-lg) / 1.2 var(--font-display); scroll-margin-top: 96px; }
.terms dt:target { color: var(--meta-text); }
.terms dt small { font: 700 var(--text-xs) / 1 var(--font-mono); letter-spacing: 0.08em; color: var(--muted); margin-left: var(--space-2); }
.terms dd { margin: var(--space-2) 0 0; color: var(--fg-2); }
.terms dd p + p { margin-top: var(--space-2); }
.terms .see { font-size: var(--text-sm); color: var(--muted); }

/* Fusszeile: zweite Navigation */
.site-footer .foot-wissen { flex-basis: 100%; order: 3; padding-top: var(--space-4); border-top: 1px solid var(--border); }

@media (max-width: 1023px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .toc { position: static; order: -1; }
  .toc .toc-more { display: none; }
  .toc ol { gap: 0; }
  .toc a { padding-block: var(--space-2); }
}
@media (max-width: 639px) {
  .crumbs { margin-bottom: var(--space-8); }
  .doc-hero { padding-top: var(--space-6); }
  .answer { font-size: var(--text-base); }
  .related { grid-template-columns: 1fr; }
  .cta-band, .cta-end .cta-band { padding: var(--space-5); }
  .cta-end { padding-block: var(--section-y-phone); }
  .kurz { padding: var(--space-4) var(--space-4) var(--space-5); }
}
.toc-empty .toc-more { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 1023px) { .toc-empty { display: none; } }