/* ====================================================================
   Ratgeber-Artikel — dunkles zi-Theme (lädt nur auf /ratgeber/<slug>/)
   Re-stylt die vom SEO-Writer generierten Komponenten in die Site-Optik.
   ==================================================================== */
.rg-wrap{padding-top:8px;padding-bottom:var(--gap)}
/* Ratgeber-Hero: Bild füllt die Spalte (lange Headlines erzeugen sonst Leerraum) */
.zi-hero--rg .zi-hero__media{align-self:stretch;display:flex}
.zi-hero--rg .zi-hero__img{width:100%;height:100%;min-height:360px;object-fit:cover;border-radius:16px}
.rg-breadcrumb{max-width:768px;margin:0 auto 30px;display:flex;flex-wrap:wrap;gap:7px;font-size:13px;color:var(--graphite)}
.rg-breadcrumb a{color:var(--ash);text-decoration:none}
.rg-breadcrumb a:hover{color:var(--signal-red)}
.rg-breadcrumb .sep{color:var(--graphite)}

.rg-article{max-width:1040px;margin:0 auto;color:var(--ash);font-size:1.07rem;line-height:1.78}
/* Widget-Variablen dunkel — Entscheidungstools/Infografiken (eigene CSS-only-Styles) erben sie */
.rg-article{--primary:var(--signal-red);--secondary:#2f8f5f;--accent:var(--signal-red);--surface:rgba(255,255,255,.045);--border:var(--line);--radius:14px;--text:var(--ash);--heading:#fff;--muted:var(--graphite);--link:var(--signal-red);--heading-font:'Inter',system-ui,sans-serif;--body-font:'Inter',system-ui,sans-serif;--heading-weight:600;--bg:transparent}
.rg-article > *{max-width:100%}
/* Widget-Tools (Entscheidungsbaum): hart-codierte helle Flächen dunkel überschreiben (Text nutzt schon var(--text)=hell) */
.rg-article .dtree-label{background:rgba(255,255,255,.045);color:#fff;border-color:var(--line)}
.rg-article .dtree-label:hover{background:rgba(63,173,118,.12);border-color:rgba(63,173,118,.45)}
.rg-article .dtree-result-inner{background:rgba(255,255,255,.04)!important}
/* Komponenten aus dem entfernten Haupt-Stylesheet wiederherstellen (nutzen die dunklen Variablen) */
.rg-article .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
.rg-article .compare-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px 20px}
.rg-article .compare-card-title{display:block;margin:0 0 12px;color:var(--signal-red);font-weight:600;font-size:1.08em}
.rg-article .compare-card ul{margin:0 0 0 1.1em;padding:0}
.rg-article .compare-card li{margin-bottom:7px}
.rg-article .svg-infographic{margin:32px 0;text-align:center}
.rg-article .svg-infographic svg{max-width:100%;height:auto;border-radius:16px;overflow:hidden;box-shadow:0 10px 34px rgba(0,0,0,.45)}
.rg-article .cta-button{display:inline-flex;align-items:center;gap:8px;background:var(--signal-red);color:#fff;padding:13px 24px;border-radius:999px;text-decoration:none;font-weight:600;margin:10px 0;box-shadow:0 8px 22px rgba(63,173,118,.3)}
@media(max-width:640px){.rg-article .compare-grid{grid-template-columns:1fr}}

/* Überschriften */
.rg-article h1{color:#fff;font-weight:300;font-size:clamp(2.05rem,5.2vw,3.2rem);line-height:1.08;letter-spacing:-.035em;margin:.1em 0 .35em}
.rg-article h2{color:#fff;font-weight:400;font-size:clamp(1.55rem,3.4vw,2.05rem);letter-spacing:-.02em;line-height:1.2;margin:2.3em 0 .55em;scroll-margin-top:96px}
.rg-article h3{color:#fff;font-weight:500;font-size:clamp(1.2rem,2.4vw,1.4rem);margin:1.9em 0 .5em}
.rg-article h4{color:#fff;font-weight:600;font-size:1.05rem;margin:1.5em 0 .4em}

/* Fließtext */
.rg-article p{margin:0 0 1.15em}
.rg-article strong{color:#fff;font-weight:600}
.rg-article a{color:var(--signal-red);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rg-article a:hover{text-decoration-thickness:2px}
.rg-article ul,.rg-article ol{margin:0 0 1.25em;padding-left:1.45em}
.rg-article li{margin:.42em 0}
.rg-article li::marker{color:var(--signal-red)}
.rg-article hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.rg-article blockquote{margin:1.6em 0;padding:6px 0 6px 22px;border-left:3px solid var(--signal-red);color:#fff;font-style:italic}
.rg-article time{display:inline-block;font-size:13px;color:var(--graphite);margin-bottom:1.8em}

/* Inhaltsverzeichnis */
.rg-article nav[aria-label="Inhaltsverzeichnis"]{background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:0 0 2.4em}
.rg-article nav[aria-label="Inhaltsverzeichnis"] strong{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--signal-red);margin-bottom:10px}
.rg-article nav[aria-label="Inhaltsverzeichnis"] ol{margin:0;padding-left:1.2em;font-size:.97rem}
.rg-article nav[aria-label="Inhaltsverzeichnis"] li{margin:.3em 0}
.rg-article nav[aria-label="Inhaltsverzeichnis"] a{color:var(--ash);text-decoration:none}
.rg-article nav[aria-label="Inhaltsverzeichnis"] a:hover{color:var(--signal-red)}

/* Bilder */
.rg-article figure{margin:1.9em 0}
.rg-article figure img,.rg-article img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--line)}
.rg-article figcaption{margin-top:9px;font-size:13px;color:var(--graphite);text-align:center}

/* Tabellen (mobil horizontal scrollbar) */
.rg-article table{width:100%;border-collapse:collapse;margin:1.7em 0;font-size:.95rem;table-layout:auto}
.rg-article thead th{background:rgba(255,255,255,.05);color:#fff;font-weight:600;text-align:left;white-space:nowrap}
.rg-article th,.rg-article td{border:1px solid var(--line);padding:11px 15px;vertical-align:top}
.rg-article tbody tr:nth-child(even){background:rgba(255,255,255,.018)}

/* Schnellantwort / Featured-Snippet-Box */
.rg-article .answer-box{background:rgba(63,173,118,.08);border:1px solid rgba(63,173,118,.32);border-radius:14px;padding:18px 22px;margin:1.8em 0}
.rg-article .answer-box strong{color:var(--signal-red)}

/* Hinweis- / Warn- / Essenz-Box */
.rg-article .tip-box,.rg-article .section-essential{background:rgba(255,255,255,.03);border-left:3px solid var(--signal-red);border-radius:0 12px 12px 0;padding:15px 20px;margin:1.7em 0}
.rg-article .warning-box{background:rgba(233,138,27,.08);border-left:3px solid #e98a1b;border-radius:0 12px 12px 0;padding:15px 20px;margin:1.7em 0}
.rg-article .tip-box strong,.rg-article .warning-box strong,.rg-article .section-essential strong{display:block;margin-bottom:4px}

/* Kosten-Szenario-Karten */
.rg-article .cost-scenario{border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:1.5em 0;background:rgba(255,255,255,.02)}
.rg-article .cost-scenario h4{margin-top:0}

/* Nummerierte Schrittliste */
.rg-article ol.step-list{list-style:none;counter-reset:step;padding-left:0;margin:1.6em 0}
.rg-article ol.step-list > li{counter-increment:step;position:relative;padding-left:52px;margin:1.05em 0;min-height:36px}
.rg-article ol.step-list > li::before{content:counter(step);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;background:var(--signal-red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px}

/* Checkliste */
.rg-article ul.checklist{list-style:none;padding-left:0}
.rg-article ul.checklist > li{position:relative;padding-left:30px}
.rg-article ul.checklist > li::before{content:"✓";position:absolute;left:0;top:0;color:var(--signal-red);font-weight:700}

/* Lokale CTA-Karte */
.rg-article .local-card{background:radial-gradient(120% 100% at 0% 0%,rgba(63,173,118,.12),transparent 60%),rgba(255,255,255,.02);border:1px solid rgba(63,173,118,.3);border-radius:16px;padding:24px 26px;margin:2.2em 0}
.rg-article .local-card h3{margin-top:0;color:#fff}

/* Autor-Box (E-E-A-T) */
.rg-article .author-box{display:flex;gap:16px;align-items:center;margin-top:2.6em;padding-top:1.6em;border-top:1px solid var(--line)}
.rg-article .author-avatar{flex:none;width:54px;height:54px;border-radius:50%;background:var(--signal-red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:18px;letter-spacing:.02em}
.rg-article .author-info{font-size:.93rem;color:var(--graphite);line-height:1.5}
.rg-article .author-info strong{color:#fff}

/* FAQ (native details/summary) */
.rg-article details{padding:6px 0}
.rg-article details summary{cursor:pointer;list-style:none;padding:14px 36px 14px 0;position:relative;color:#fff;font-weight:500;font-size:1.06rem}
.rg-article details summary::-webkit-details-marker{display:none}
.rg-article details summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:1.5px solid var(--ash);border-bottom:1.5px solid var(--ash);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.rg-article details[open] summary::after{transform:translateY(-30%) rotate(-135deg);border-color:var(--signal-red)}
.rg-article details > p,.rg-article details > *:not(summary){margin:0 0 14px;padding-right:8px}

/* Artikel-Fußleiste: Zurück zum Ratgeber */
.rg-foot{max-width:768px;margin:2.6em auto 0;padding-top:1.6em}
.rg-foot a{color:var(--signal-red);text-decoration:none;font-weight:500}

@media(max-width:600px){
  .rg-article{font-size:1.02rem}
  .rg-article .local-card,.rg-article .cost-scenario,.rg-article .answer-box{padding-left:18px;padding-right:18px}
}

/* ====================================================================
   Interaktive Widgets: hart-codierte Hell-Farben dunkel/grün überschreiben
   (höhere Spezifität als das Inline-<style> im Widget → gewinnt)
   ==================================================================== */
/* Heilungsplan-Tabs */
.rg-article .hp-tab-label:hover{color:var(--signal-red);background:rgba(63,173,118,.08)}
.rg-article .hp-info-box{background:rgba(63,173,118,.08);border-color:rgba(63,173,118,.3);color:var(--ash)}
.rg-article .hp-info-box strong{color:var(--signal-red)}
.rg-article .hp-warn-box{background:rgba(214,72,72,.1);border-color:rgba(214,72,72,.34);color:var(--ash)}
.rg-article .hp-warn-box strong{color:#eda0a0}
.rg-article .badge-phase1{background:rgba(214,72,72,.16);color:#eda0a0}
.rg-article .badge-phase2{background:rgba(233,138,27,.16);color:#e9b45f}
.rg-article .badge-phase3{background:rgba(90,150,235,.16);color:#9cc0f5}
.rg-article .badge-phase4{background:rgba(63,173,118,.18);color:#6fce97}
.rg-article .progress-p1{background:#d64848}
.rg-article .progress-p2{background:#e98a1b}
.rg-article .progress-p3{background:#5a96eb}
.rg-article .progress-p4{background:var(--signal-red)}

/* Symptom-Ampel (normal / beobachten / sofort) */
.rg-article .symptom-ampel{display:grid;gap:12px;margin:1.9em 0}
.rg-article .ampel-row{border-radius:0 12px 12px 0;padding:14px 18px;font-size:.95rem;line-height:1.55;color:var(--ash)}
.rg-article .ampel-row strong{display:block;margin-bottom:4px}
.rg-article .ampel-ok{background:rgba(63,173,118,.09);border-left:3px solid var(--signal-red)}
.rg-article .ampel-ok strong{color:var(--signal-red)}
.rg-article .ampel-warn{background:rgba(233,138,27,.09);border-left:3px solid #e98a1b}
.rg-article .ampel-warn strong{color:#e9b45f}
.rg-article .ampel-danger{background:rgba(214,72,72,.1);border-left:3px solid #d64848}
.rg-article .ampel-danger strong{color:#eda0a0}

/* Methoden-Karten (ersetzt die helle SVG-Infografik) */
.rg-article .rg-methoden-fig{margin:2.2em 0}
.rg-article .rg-methoden__head{font-weight:600;color:#fff;font-size:1.06rem;margin:0 0 4px}
.rg-article .rg-methoden__sub{color:var(--graphite);font-size:.85rem;margin:0 0 16px}
.rg-article .rg-methoden{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.rg-article .rg-methoden{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rg-article .rg-methoden{grid-template-columns:1fr}}
.rg-article .rg-methoden__card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-top:3px solid var(--signal-red);border-radius:12px;padding:16px 17px 18px;display:flex;flex-direction:column}
.rg-article .rg-methoden__no{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--graphite)}
.rg-article .rg-methoden__name{color:#fff;font-weight:600;font-size:1.02rem;line-height:1.25;margin:2px 0 13px}
.rg-article .rg-methoden dl{margin:0;display:grid;gap:10px}
.rg-article .rg-methoden dt{color:var(--signal-red);font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;margin:0}
.rg-article .rg-methoden dd{color:var(--ash);font-size:.9rem;line-height:1.45;margin:3px 0 0}
.rg-article .rg-methoden__pill{margin-top:15px;align-self:flex-start;background:rgba(63,173,118,.13);color:var(--signal-red);font-size:.8rem;font-weight:600;padding:6px 13px;border-radius:999px}
.rg-article .rg-methoden__foot{color:var(--graphite);font-size:.85rem;line-height:1.5;margin:16px 0 0}

/* Breite Tabellen nur auf Mobil horizontal scrollbar (Desktop: volle Breite) */
@media(max-width:600px){.rg-article table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}