/* ============================================================
   RATGEBER – /ratgeber und /ratgeber/<slug>
   Gebaut von marketing/seo-easyplus/ratgeber/bauen.py.
   Nur rg-*-Klassen und Artikel-Bausteine, easy.css bleibt unverändert.
   ============================================================ */
.rg-spalte{max-width:740px;margin:0 auto}
.rg-breit{max-width:1080px;margin:0 auto}
.rg-hero{padding:140px 0 36px}
.rg-seite .rg-hero h1{font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-.035em;text-wrap:balance}
.rg-meta{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--mid)}
.rg-main{padding:0 0 96px}

@keyframes rg-ein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.rg-hero h1,.rg-hero .rg-meta,.rg-artikel,.rg-karte{animation:rg-ein .7s cubic-bezier(.2,.8,.2,1) both}
.rg-hero .rg-meta{animation-delay:.06s}
.rg-artikel{animation-delay:.14s}
.rg-karte:nth-child(2){animation-delay:.06s}.rg-karte:nth-child(3){animation-delay:.12s}.rg-karte:nth-child(n+4){animation-delay:.18s}
@media(prefers-reduced-motion:reduce){.rg-hero h1,.rg-hero .rg-meta,.rg-artikel,.rg-karte{animation:none}}

/* ---------- Artikeltext ---------- */
.rg-artikel{font-size:18px;line-height:1.7;color:var(--ink-soft)}
.rg-artikel h2{font-size:clamp(24px,3vw,30px);line-height:1.2;letter-spacing:-.025em;color:var(--ink);margin:56px 0 16px;text-wrap:balance;scroll-margin-top:96px}
.rg-artikel h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:32px 0 10px}
.rg-artikel p{margin:0 0 18px}
.rg-artikel ul,.rg-artikel ol{margin:0 0 20px;padding-left:24px;display:flex;flex-direction:column;gap:8px}
.rg-artikel li::marker{color:var(--brand-deep);font-weight:600}
.rg-artikel strong{color:var(--ink);font-weight:600}
.rg-artikel a{color:var(--brand-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.rg-artikel a:hover{color:var(--ink)}

/* Kurz gesagt */
.kurzantwort{
  background:var(--brand-wash-soft);box-shadow:inset 0 0 0 1px rgba(0,125,130,.18);
  border-radius:var(--r-card);padding:24px 28px;margin:0 0 28px;font-size:18.5px;line-height:1.6;color:var(--ink);
}
.kurzantwort strong{display:block;font-size:14px;font-family:var(--mono);font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:var(--brand-deep);margin-bottom:8px}

/* Inhaltsverzeichnis */
.rg-toc{border:1px solid var(--hairline);border-radius:18px;padding:18px 22px;margin:0 0 8px;background:var(--paper)}
.rg-toc b{display:block;font-size:14px;color:var(--ink);margin-bottom:8px}
.rg-artikel .rg-toc ol{margin:0;padding-left:22px;gap:4px;font-size:16px;line-height:1.5}
.rg-artikel .rg-toc a{text-decoration:none;color:var(--ink-soft)}
.rg-artikel .rg-toc a:hover{color:var(--brand-deep);text-decoration:underline}

/* Zahl aus eigenen Kampagnen */
.rg-zahl{
  display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:center;
  background:var(--ink);color:#e5e5e5;border-radius:var(--r-card);padding:26px 28px;margin:28px 0;
}
.rg-zahl b{font-size:clamp(40px,7vw,60px);line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.rg-zahl p{margin:0;font-size:16.5px;line-height:1.55;color:#d4d4d4}
.rg-zahl p strong{color:#fff}
@media(max-width:560px){.rg-zahl{grid-template-columns:1fr}}

/* Hinweis */
.hinweis{border-left:3px solid var(--brand);padding:4px 0 4px 18px;margin:24px 0;color:var(--ink-soft)}

/* Tabellen */
.tabelle-huelle{overflow-x:auto;margin:24px 0;border:1px solid var(--hairline);border-radius:18px;background:var(--paper)}
.rg-artikel table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.rg-artikel th,.rg-artikel td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--hairline);vertical-align:top}
.rg-artikel th{font-size:13px;font-weight:600;color:var(--mid);background:var(--surface-alt);white-space:nowrap}
.rg-artikel tr:last-child td{border-bottom:none}
.rg-artikel td:first-child{color:var(--ink);font-weight:500}

/* Anfrage in der Mitte */
.box-inline{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  border-radius:var(--r-card);padding:26px 28px;margin:36px 0;background:var(--paper);
  box-shadow:var(--sh-card),inset 0 0 0 2px var(--brand);
}
.box-inline b{font-size:20px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.box-inline p{margin:0;font-size:16.5px}
.rg-artikel .box-inline a.btn{color:#fff;text-decoration:none;margin-top:6px}

/* FAQ */
.rg-faq{margin-top:8px}
.rg-frage{border-top:1px solid var(--hairline)}
.rg-frage:last-child{border-bottom:1px solid var(--hairline)}
.rg-frage summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;font-size:18px;font-weight:600;color:var(--ink);position:relative;line-height:1.4}
.rg-frage summary::-webkit-details-marker{display:none}
.rg-frage summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:26px;font-weight:400;color:var(--brand-deep);transition:transform .2s}
.rg-frage[open] summary::after{transform:rotate(45deg)}
.rg-frage p{margin:0 0 20px;font-size:17px}

/* Quellen */
.rg-quellen ol{font-size:15px;line-height:1.5;gap:6px}
.rg-quellen span{color:var(--mid)}
.rg-artikel .rg-quellen a{word-break:break-word}

/* Abschluss */
.rg-cta{
  margin-top:48px;padding:36px 32px;border-radius:var(--r-card);background:var(--ink);color:#fafafa;
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
}
.rg-cta h2{font-size:clamp(22px,3vw,28px);line-height:1.2;letter-spacing:-.03em;text-wrap:balance}
.rg-cta p{font-size:16.5px;line-height:1.55;color:#d4d4d4}
.rg-cta .btn{margin-top:6px}

.rg-weitere{margin-top:56px}
.rg-weitere h2{font-size:22px;letter-spacing:-.02em;margin-bottom:16px}
.rg-mini-raster{display:grid;gap:12px}
.rg-mini{display:flex;flex-direction:column;gap:4px;padding:18px 22px;border-radius:18px;background:var(--paper);box-shadow:var(--sh-card);transition:transform .2s,box-shadow .2s}
.rg-mini:hover{transform:translateY(-2px);box-shadow:var(--sh-card),inset 0 0 0 1px var(--brand)}
.rg-mini b{font-size:17px;line-height:1.35;color:var(--ink)}
.rg-mini span{font-size:15px;line-height:1.5;color:var(--mid)}
.rg-zurueck{margin-top:28px;font-size:16px}
.rg-zurueck a{color:var(--brand-deep);font-weight:500}

/* ---------- Übersicht ---------- */
.rg-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.rg-karte{
  display:flex;flex-direction:column;gap:12px;padding:28px 28px 24px;border-radius:var(--r-card);
  background:var(--paper);box-shadow:var(--sh-card);transition:transform .25s,box-shadow .25s;min-height:240px;
}
.rg-karte:hover{transform:translateY(-3px);box-shadow:var(--sh-card),inset 0 0 0 2px var(--brand)}
.rg-karte h2{font-size:22px;line-height:1.25;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.rg-karte p{font-size:16px;line-height:1.55;color:var(--ink-soft);flex:1}
.rg-karte-fuss{font-family:var(--mono);font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--mid)}

@media(max-width:640px){
  .rg-hero{padding:116px 0 28px}
  .rg-artikel{font-size:17px}
  .kurzantwort,.box-inline,.rg-zahl{padding:20px 20px}
  .rg-cta{padding:28px 22px}
  .rg-karte{padding:22px;min-height:0}
}