/* ==========================================================================
   Ratgeber (/ratgeber/): Übersicht, Beitrag, Infografiken.
   Nutzt die Tokens aus style.css (Light/Dark über prefers-color-scheme und data-theme)
   und die Bausteine kx-* aus sections.css. Regeln für Grafiken: assets/grafiken/STIL.md
   ========================================================================== */

/* ---------- Brotkrumen ---------- */
.brotkrumen { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .88rem; color: var(--text-faint); margin-bottom: 1.6rem; }
.brotkrumen a { color: var(--text-muted); transition: color .2s var(--ease); }
.brotkrumen a:hover { color: var(--accent); }
.brotkrumen [aria-current] { color: var(--text); }

/* Schräger Lichtstrahl aus dem Logo als Signatur vor Kleinüberschriften */
.rg-kurz__titel::before, .rg-leistung__vor::before, .rg-toc__titel::before, .rg-karte__thema::before {
  content: ""; display: inline-block; width: 22px; height: 9px; margin-right: .55rem; background: var(--accent);
  clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%); vertical-align: .05em;
}
.rg-kopf .eyebrow::before, .rg-uebersicht .eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 9px; margin-right: .55rem; background: var(--accent);
  clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%); vertical-align: .05em;
}

/* ---------- Beitrag: Kopf ---------- */
.rg { max-width: 68ch; margin-inline: auto; }
.rg-kopf { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: 1rem; position: relative; }
.rg-h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; letter-spacing: -.028em; margin-top: .2rem; }
.rg-meta { margin-top: 1rem; font-size: .92rem; color: var(--text-faint); }
.rg-intro { margin-top: 1.6rem; font-size: clamp(1.1rem, 1.6vw, 1.22rem); line-height: 1.55; color: var(--text-muted); }
.rg-intro p + p { margin-top: 1rem; }

/* Das Wichtigste in Kürze */
.rg-kurz { margin-top: 2rem; padding: 1.4rem 1.6rem 1.5rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius-lg); }
.rg-kurz__titel { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.rg-kurz ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.rg-kurz li { display: flex; gap: .75rem; align-items: flex-start; color: var(--text); line-height: 1.5; }
.rg-kurz li::before { content: ""; flex: none; width: 22px; height: 22px; margin-top: .1rem; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rg-kurz li::before { background-color: var(--accent); } }

/* Inhaltsverzeichnis (optional, Front Matter toc: true) */
.rg-toc { margin-top: 1.4rem; padding: 1.1rem 1.5rem; background: var(--surface); border-radius: var(--radius); }
.rg-toc__titel { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .5rem; }
.rg-toc ul { list-style: none; padding: 0; margin: 0; }
.rg-toc ul ul { padding-left: 1.1rem; }
.rg-toc li { margin: .3rem 0; font-size: .96rem; }
.rg-toc a { color: var(--text-muted); transition: color .2s var(--ease); }
.rg-toc a:hover { color: var(--accent); }

/* ---------- Beitrag: Text ---------- */
.rg-prose { margin-top: 2.4rem; }
.rg-prose > * + * { margin-top: 1.2rem; }
.rg-prose p, .rg-prose li { color: var(--text); line-height: 1.72; }
.rg-prose h2, .rg-h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); line-height: 1.15; letter-spacing: -.02em; margin-top: 3rem; scroll-margin-top: 90px; }
.rg-prose h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.25; margin-top: 2.2rem; scroll-margin-top: 90px; }
.rg-prose h2 + *, .rg-prose h3 + * { margin-top: .9rem; }
.rg-prose ul, .rg-prose ol { padding-left: 1.4rem; }
.rg-prose li { margin-top: .45rem; }
.rg-prose li::marker { color: var(--accent); }
.rg-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rg-prose a:hover { text-decoration-thickness: 2px; }
.rg-prose strong { font-weight: 700; }
.rg-prose blockquote { padding: 1.1rem 1.4rem; border-left: 3px solid var(--accent); background: var(--bg-elev); border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; }
.rg-table { max-width: 100%; margin-block: 1.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rg-prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
@media (max-width: 640px) { .rg-prose table { min-width: 34rem; font-size: .88rem; } .rg-prose th, .rg-prose td { padding: .5rem .6rem; } }
.rg-prose th, .rg-prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.rg-prose th { font-family: var(--font-display); font-weight: 600; background: var(--surface); }
.rg-prose img { border-radius: var(--radius); }
/* Code: Inline-Code als Pille, Codeblöcke scrollen seitlich, statt die Spalte zu sprengen */
.rg-prose code, .rg-prose pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.rg-prose :not(pre) > code { font-size: .88em; padding: .12em .4em; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow-wrap: anywhere; }
.rg-prose pre { max-width: 100%; margin-top: 1.4rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: .86rem; line-height: 1.6; white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch; tab-size: 2; }
.rg-prose pre code { display: block; padding: 0; background: none; border: 0; border-radius: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }
@media (max-width: 640px) { .rg-prose pre { margin-inline: calc(var(--gutter) * -1); max-width: none; padding-inline: var(--gutter); border-radius: 0; border-inline: 0; font-size: .8rem; } }

/* ---------- FAQ ---------- */
.rg-faq { margin-top: 3.4rem; }
.rg-faq .rg-h2 { margin-top: 0; margin-bottom: 1.4rem; }
.rg-faq .faq-list { max-width: none; }
.rg-faq .faq-a p + p { margin-top: .8rem; }
.rg-faq .faq-item summary { line-height: 1.35; }

/* ---------- Schlussabsatz nach der FAQ ---------- */
.rg-schluss { margin-top: 2.2rem; }
.rg-schluss p + p { margin-top: .8rem; }
.rg-schluss a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rg-schluss a:hover { text-decoration-thickness: 2px; }

/* ---------- Quellen (dezent, am Ende vor "Passende Leistung") ---------- */
.rg-quellen { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.rg-quellen__titel { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.rg-quellen ol { margin-top: .8rem; padding-left: 1.5rem; }
.rg-quellen li { margin-top: .35rem; font-size: .85rem; line-height: 1.5; color: var(--text-muted); overflow-wrap: anywhere; }
.rg-quellen li::marker { color: var(--text-muted); }
.rg-quellen a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rg-quellen a:hover { color: var(--accent); }

/* ---------- Passende Leistung ---------- */
.rg-leistung { margin-top: 3.4rem; padding: clamp(1.4rem, 3vw, 2rem); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.rg-leistung__vor { font-family: var(--font-display); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.rg-leistung__titel { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.2; margin-top: .6rem; }
.rg-leistung p:not([class]) { color: var(--text-muted); margin-top: .6rem; }
.rg-leistung .btn { margin-top: 1.3rem; }

.rg-cta { padding-bottom: 0; }
.rg-artikel { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

/* ---------- Karten (Übersicht, Weitere Beiträge) ---------- */
.rg-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.rg-karte { display: flex; flex-direction: column; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.rg-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.rg-karte__thema { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.rg-karte__titel { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.015em; margin-top: .8rem; color: var(--text); }
.rg-karte__kurz { margin-top: .7rem; color: var(--text-muted); font-size: .95rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.rg-karte__mehr { margin-top: auto; padding-top: 1.2rem; color: var(--accent); font-weight: 600; font-size: .95rem; }
@media (max-width: 960px) { .rg-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rg-karten { grid-template-columns: 1fr; } }
.rg-weitere .sec-head { margin-bottom: 2rem; }

/* ---------- Übersicht ---------- */
.rg-uebersicht h1 { max-width: 18em; font-size: clamp(2.2rem, 4.8vw, 3.4rem); }
.rg-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.8rem; }
.rg-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; font-weight: 600; font-size: .95rem; transition: border-color .2s var(--ease), color .2s var(--ease); }
.rg-chip span { font-size: .78rem; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: .1rem .5rem; }
.rg-chip:hover { border-color: var(--accent); color: var(--accent); }
.rg-block .sec-head { margin-bottom: 2rem; }
.rg-block { scroll-margin-top: 70px; }
.rg-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
main .rg-block.section-pad { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* ==========================================================================
   Infografiken (.grafik): Inline-SVG aus assets/grafiken/*.svg
   Farben nur über Klassen g-*, die auf die Seiten-Tokens zeigen; dadurch greifen
   Light, Dark und data-theme automatisch. Größen im viewBox (Breite 720):
   Text mindestens 22, Überschrift 32, Kernzahl 32 bis 44.
   ========================================================================== */
.grafik { margin: 2.4rem 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.rg-prose .grafik { margin-top: 2.4rem; }
.grafik svg { display: block; width: 100%; height: auto; font-family: inherit; }
.grafik figcaption { padding: .8rem 1.3rem 1rem; border-top: 1px solid var(--border); font-size: .88rem; line-height: 1.5; color: var(--text-muted); }
/* Am Handy randlos, damit die Grafik voll auf 390 px skaliert (22 im viewBox = ca. 12 px) */
@media (max-width: 640px) {
  .grafik { margin-inline: calc(var(--gutter) * -1); border-radius: 0; border-inline: 0; box-shadow: none; }
  .grafik figcaption { padding-inline: var(--gutter); }
}

/* Schrift */
.grafik svg text { font-family: var(--font-sans); font-size: 24px; fill: var(--text); }
.grafik .g-h { font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -.01em; }
.grafik .g-t { font-weight: 600; font-size: 26px; }
.grafik .g-b { font-weight: 700; }
.grafik .g-s { font-size: 22px; }
.grafik .g-num { font-family: var(--font-display); font-weight: 700; font-size: 32px; }
.grafik .g-eyebrow { font-weight: 700; font-size: 22px; letter-spacing: .14em; }
.grafik .g-mid { text-anchor: middle; }
.grafik .g-end { text-anchor: end; }

/* Füllfarben (gelten für Text und Formen) */
.grafik .g-text { fill: var(--text); }
.grafik .g-muted { fill: var(--text-muted); }
.grafik .g-faint { fill: var(--text-faint); }
.grafik .g-accent { fill: var(--accent); }
.grafik .g-accent-mid { fill: color-mix(in srgb, var(--accent) 38%, transparent); }
.grafik .g-accent-soft { fill: var(--accent-soft); }
.grafik .g-ink { fill: var(--accent-ink); }
.grafik .g-surface { fill: var(--surface); }
.grafik .g-surface2 { fill: var(--surface-2); }
.grafik .g-card { fill: var(--bg-elev); }

/* Linien und Rahmen */
.grafik .g-line { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.grafik .g-hair { fill: none; stroke: var(--border); stroke-width: 2; }
.grafik .g-line-accent { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.grafik .g-outline { stroke: var(--accent); stroke-width: 3; }
.grafik .g-boxline { stroke: var(--border-strong); stroke-width: 2; }
.grafik .g-line-open { fill: var(--bg-elev); stroke-dasharray: 5 5; }
.grafik .g-check { fill: none; stroke: var(--accent-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }