/* Ratgeber-/Artikel-Styles – ausgelagert aus den einzelnen Artikel-Seiten.
   Eingebunden via <link rel="stylesheet" href="/assets/css/ratgeber.css"> nach styles.css. */
.article{max-width:760px;margin:0 auto;padding:0 4px}
/* Neutralisiert globale header/section/footer-Styles der Seite */
.article header,.article footer,.article section{position:static;width:auto;max-width:none;background:transparent;border:0;box-shadow:none;padding:0;margin:0}
.article .eyebrow{display:block;margin-bottom:10px}
.article h1{font-size:clamp(30px,4.4vw,46px);line-height:1.1;margin:6px 0 14px}
.article .post-meta{color:var(--muted,#6b7280);font-size:14px;margin-bottom:18px}
.article h2{font-size:clamp(24px,3vw,32px);margin:46px 0 10px;line-height:1.2}
.article h3{font-size:20px;margin:28px 0 8px}
.article p,.article li{font-size:17px;line-height:1.75;color:var(--ink2,#23272e)}
.article ul,.article ol{margin:12px 0 12px 22px}
.article li{margin:6px 0}
.article .answer{background:var(--bg2,#f6f7f9);border-left:4px solid var(--ink,#111);padding:14px 18px;border-radius:8px;font-size:17px}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.article caption{text-align:left;font-weight:600;margin-bottom:8px;color:var(--muted,#6b7280)}
.article th,.article td{border:1px solid var(--line,#e4e7ec);padding:10px 12px;text-align:left;vertical-align:top}
.article thead th{background:var(--bg2,#f6f7f9)}
.article figure{margin:18px 0;overflow-x:auto}
.article .toc{background:var(--bg2,#f6f7f9);border:1px solid var(--line,#e4e7ec);border-radius:14px;padding:18px 22px;margin:24px 0}
.article .toc h2{font-size:16px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#6b7280)}
.article .toc ol{margin:0 0 0 20px}
.article .toc a{color:var(--ink,#111);text-decoration:none}
.article .toc a:hover{text-decoration:underline}
.article .box{border-radius:14px;padding:16px 20px;margin:22px 0;font-size:16px;border:1px solid var(--line,#e4e7ec);background:var(--card,#fff)}
.article .box strong{display:block;margin-bottom:4px}
.article .box-tip{border-left:4px solid #1d8a52;background:#f1faf5}
.article .box-important{border-left:4px solid #b8860b;background:#fdf8ec}
.article .box-mistake{border-left:4px solid #c0392b;background:#fdf1ef}
.article .box-checklist{border-left:4px solid #111}
.article .box-cta{background:#0a0c10;color:#fff;border:none;padding:28px}
.article .box-cta h3{color:#fff;margin-top:0}
.article .box-cta p{color:#cfd4da}
.article .box-cta .btn{margin:8px 8px 0 0}
/* Buttons auf der dunklen CTA-Box: hell, damit sie sichtbar sind */
.article .box-cta .btn-blue{background:#fff;color:#111}
.article .box-cta .btn-blue:hover{background:#ededed;color:#000;box-shadow:0 12px 32px rgba(0,0,0,.35)}
.article .box-cta .btn-outline{border:1.5px solid rgba(255,255,255,.45);color:#fff;background:transparent}
.article .box-cta .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.article a{color:#0a58ca}
.article .post-footer{margin-top:40px;padding-top:18px;border-top:1px solid var(--line,#e4e7ec);color:var(--muted,#6b7280);font-size:14px}

/* ---- Ratgeber-Index: kompakte Artikelkarten (ohne Bilder) ---- */
.rg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:36px auto 0;max-width:1000px}
.rg-card{display:flex;flex-direction:column;border:1px solid var(--line,#e4e7ec);border-radius:16px;
  background:var(--bg2,#f6f7f9);padding:24px 24px 26px;text-decoration:none;color:inherit;
  transition:transform .25s,box-shadow .25s,border-color .25s}
.rg-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.08);border-color:var(--ink,#111)}
.rg-card .eyebrow{display:block;margin-bottom:10px}
.rg-card h3{margin:0 0 10px;font-size:21px;line-height:1.25}
.rg-card p{color:var(--muted,#6b7280);font-size:15px;line-height:1.6;margin:0 0 18px}
.rg-card .btn{margin-top:auto;align-self:flex-start}
@media(max-width:860px){.rg-grid{grid-template-columns:1fr;max-width:460px}}

/* ---- Dark-Mode-Korrekturen ---- */
[data-theme="dark"] .article a{color:#5b9bff}
[data-theme="dark"] .article .box-tip{background:rgba(29,138,82,.14)}
[data-theme="dark"] .article .box-important{background:rgba(184,134,11,.16)}
[data-theme="dark"] .article .box-mistake{background:rgba(192,57,43,.16)}