/* Ratgeber – Ergänzung zu style.css. Nutzt ausschließlich die vorhandenen Design-Tokens. */

.rg-autor{margin-top:22px;font-family:var(--sans);font-size:11.5px;letter-spacing:.04em;color:var(--chrome-deep);line-height:1.6}

.rg-text{margin-top:48px;max-width:68ch;font-size:16.5px;line-height:1.78;color:var(--anthracite)}
.rg-text > * + *{margin-top:18px}
.rg-text h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.6vw,32px);line-height:1.18;color:var(--ink);
  margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.rg-text h3{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--ink);margin-top:34px}
.rg-text h2 + *, .rg-text h3 + *{margin-top:12px}
.rg-text strong{color:var(--ink);font-weight:600}
.rg-text a{color:var(--ink);border-bottom:1px solid var(--chrome-light);transition:border-color .2s;word-break:break-word}
.rg-text a:hover{border-bottom-color:var(--ink)}
.rg-text ul,.rg-text ol{padding-left:1.25em}
.rg-text li + li{margin-top:6px}
.rg-text li::marker{color:var(--chrome-dark)}
.rg-text hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.rg-text blockquote{border-left:2px solid var(--chrome-light);padding-left:18px;font-style:italic}
.rg-text em{color:var(--chrome-deep)}

.rg-tabelle{overflow-x:auto;margin-top:22px;border:1px solid var(--stein-linie);background:var(--paper-2)}
.rg-tabelle table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.5px;line-height:1.5}
.rg-tabelle th,.rg-tabelle td{text-align:left;vertical-align:top;padding:11px 14px;border-bottom:1px solid var(--line)}
.rg-tabelle th{font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--ink);background:var(--stein)}
.rg-tabelle tr:last-child td{border-bottom:0}
.rg-tabelle td:first-child{font-weight:600;color:var(--ink)}

.rg-weiter{margin-top:64px;padding-top:28px;border-top:1px solid var(--line)}
.rg-weiter ul{list-style:none;margin-top:14px}
.rg-weiter li + li{margin-top:10px}
.rg-weiter a{font-family:var(--serif);font-size:21px;line-height:1.3;color:var(--ink);border-bottom:1px solid transparent;transition:border-color .2s}
.rg-weiter a:hover{border-bottom-color:var(--ink)}

.rg-liste{list-style:none;margin-top:18px;border-top:1px solid var(--line)}
.rg-liste li{border-bottom:1px solid var(--line)}
.rg-liste a{display:block;padding:22px 0;transition:padding-left .25s var(--ease)}
.rg-liste a:hover{padding-left:8px}
.rg-liste-titel{display:block;font-family:var(--serif);font-size:clamp(21px,2vw,25px);line-height:1.25;color:var(--ink)}
.rg-liste-lead{display:block;margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--chrome-deep);max-width:70ch}

@media (max-width:720px){
  .rg-text{font-size:16px}
  .rg-tabelle table{font-size:12.5px}
  .rg-tabelle th,.rg-tabelle td{padding:9px 10px}
}

/* Der lange Artikeltext wird nicht per Scroll eingeblendet: Die Einblendung der Startseite
   (app.js, Schwelle 8 % der Elementhöhe) würde bei sehr langen Blöcken nie auslösen. */
.rg-text.rv,.rg-weiter.rv{opacity:1;transform:none;transition:none}