/* ============================================================
   THIRD EYE STUDIO · RATGEBER-ARTIKEL (28.10.2026)
   Ergänzt lebendig.css + webseite.css. Lesespalte, Kurzantwort,
   Inhaltsverzeichnis, Autorenkasten.
   ============================================================ */
.rg-hero { position:relative; overflow:hidden; padding-block:150px 64px; background:var(--white); }
.rg-hero .wrap { position:relative; max-width:860px; display:flex; flex-direction:column; gap:20px; }
.rg-hero h1 { font-size:clamp(36px,4.6vw,58px); line-height:1.04; letter-spacing:-0.035em; text-wrap:balance; }
.rg-meta { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px; color:var(--slate); font-weight:500; }
.rg-meta span + span::before { content:"·"; margin-right:18px; color:var(--coral-ink); }
.rg-lead { font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--slate); text-wrap:pretty; max-width:720px; }

.rg-body { padding-block:16px 96px; }
.rg-body .wrap { max-width:860px; display:flex; flex-direction:column; gap:48px; }
.rg-answer { background:var(--navy); color:var(--white); border-radius:24px; padding:30px 32px; display:flex; flex-direction:column; gap:10px; }
.rg-answer__label { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--coral); }
.rg-answer p:not(.rg-answer__label) { font-size:18px; line-height:1.65; color:var(--white); text-wrap:pretty; }

.rg-toc { border:1px solid var(--line); border-radius:20px; padding:24px 28px; display:flex; flex-direction:column; gap:12px; }
.rg-toc__title { font-family:var(--f-head); font-weight:800; font-size:18px; }
.rg-toc ol { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px; }
.rg-toc a { color:var(--slate); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.rg-toc a:hover { color:var(--coral-ink); text-decoration-color:var(--coral); }

.rg-section { display:flex; flex-direction:column; gap:18px; scroll-margin-top:110px; }
.rg-section h2 { font-size:clamp(26px,2.6vw,34px); line-height:1.12; letter-spacing:-0.03em; text-wrap:balance; }
.rg-section h3 { font-size:21px; letter-spacing:-0.02em; line-height:1.2; margin-top:8px; }
.rg-section p, .rg-section li { font-size:17px; line-height:1.7; color:var(--navy); text-wrap:pretty; }
.rg-section ul.rg-list, .rg-section ol.rg-list { margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.rg-section a { color:var(--coral-ink); text-decoration:underline; text-underline-offset:3px; }
.rg-blocks { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:14px; }
.rg-block { background:var(--mist); border-radius:18px; padding:22px 24px; display:flex; flex-direction:column; gap:8px; }
.rg-block h3 { margin:0; font-size:19px; }
.rg-block p { font-size:16px; line-height:1.6; color:var(--slate); }
.rg-block__n { font-family:var(--f-head); font-weight:800; font-size:15px; color:var(--coral-ink); letter-spacing:.04em; }

.rg-offer { background:var(--mist); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:16px; }
.rg-offer h2 { font-size:clamp(24px,2.4vw,30px); letter-spacing:-0.03em; line-height:1.12; }
.rg-offer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); padding-top:14px; }
.rg-offer li { display:flex; justify-content:space-between; gap:16px; font-size:16px; font-weight:500; }
.rg-offer li span:last-child { color:var(--slate); font-weight:600; white-space:nowrap; }
.rg-offer .btn { align-self:flex-start; }

.rg-author { display:flex; gap:20px; align-items:center; border-top:1px solid var(--line); padding-top:32px; }
.rg-author img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.rg-author p { font-size:15px; line-height:1.6; color:var(--slate); }
.rg-author b { color:var(--navy); }
@media (max-width:560px) {
  .rg-hero { padding-block:120px 48px; }
  .rg-answer, .rg-offer { padding:24px 22px; }
  .rg-offer li { flex-direction:column; gap:2px; }
  .rg-author { align-items:flex-start; }
}