/* ===== RATGEBER ARTIKEL CSS ===== */
.rg-hero {
  background: linear-gradient(135deg, #1a2035 0%, #243050 60%, #1a2d4a 100%);
  padding: 120px 0 60px;
}
.rg-breadcrumb { display:flex; align-items:center; gap:6px; font-size:.78rem; color:rgba(255,255,255,.5); margin-bottom:20px; }
.rg-breadcrumb a { color:rgba(255,255,255,.5); text-decoration:none; }
.rg-breadcrumb a:hover { color:#38b6ff; }
.rg-breadcrumb span { color:rgba(255,255,255,.3); }
.rg-hero-cat { font-size:.72rem; font-weight:700; color:#38b6ff; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; display:block; }
.rg-hero h1 { color:#fff; font-size:2.4rem; font-weight:800; line-height:1.2; margin-bottom:20px; max-width:780px; }
.rg-hero-meta { display:flex; align-items:center; gap:16px; color:rgba(255,255,255,.5); font-size:.8rem; }
.rg-hero-meta svg { flex-shrink:0; }

.rg-body { padding:60px 0 80px; }
.rg-layout { display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }
.rg-article { font-size:.97rem; line-height:1.8; color:#374151; }
.rg-article h2 { font-size:1.45rem; font-weight:800; color:#1a2035; margin:40px 0 14px; padding-top:4px; }
.rg-article h3 { font-size:1.1rem; font-weight:700; color:#1a2035; margin:28px 0 10px; }
.rg-article p { margin-bottom:18px; }
.rg-article ul, .rg-article ol { margin:0 0 18px 20px; }
.rg-article li { margin-bottom:8px; }
.rg-article strong { color:#1a2035; }

.rg-box { border-radius:14px; padding:24px 28px; margin:28px 0; }
.rg-box--blue { background:#eff8ff; border-left:4px solid #38b6ff; }
.rg-box--yellow { background:#fffbeb; border-left:4px solid #f59e0b; }
.rg-box--green { background:#f0fdf4; border-left:4px solid #22c55e; }
.rg-box--red { background:#fef2f2; border-left:4px solid #ef4444; }
.rg-box h4 { font-size:.9rem; font-weight:700; color:#1a2035; margin-bottom:8px; }
.rg-box p, .rg-box ul { font-size:.88rem; margin:0; color:#374151; }
.rg-box ul { margin:8px 0 0 16px; }

.rg-steps { list-style:none; margin:0 0 24px; padding:0; }
.rg-steps li { display:flex; gap:16px; align-items:flex-start; padding:16px 0; border-bottom:1px solid #f3f4f6; }
.rg-steps li:last-child { border-bottom:none; }
.rg-step-num { width:32px; height:32px; min-width:32px; background:#38b6ff; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:800; }
.rg-step-text strong { display:block; color:#1a2035; font-size:.92rem; margin-bottom:4px; }
.rg-step-text span { color:#6b7280; font-size:.85rem; line-height:1.5; }

.rg-table { width:100%; border-collapse:collapse; margin:24px 0; font-size:.87rem; }
.rg-table th { background:#1a2035; color:#fff; padding:12px 16px; text-align:left; font-weight:700; }
.rg-table td { padding:11px 16px; border-bottom:1px solid #f3f4f6; }
.rg-table tr:hover td { background:#f9fafb; }

/* Sidebar */
.rg-sidebar { position:sticky; top:108px; display:flex; flex-direction:column; gap:20px; }
.rg-sidebar-card { background:#fff; border:1.5px solid #e5e9f0; border-radius:16px; padding:24px; }
.rg-sidebar-card h4 { font-size:.92rem; font-weight:800; color:#1a2035; margin-bottom:16px; }
.rg-sidebar-cta { background:linear-gradient(135deg,#1a2035,#243050); border-radius:16px; padding:24px; text-align:center; }
.rg-sidebar-cta h4 { color:#fff; font-size:1rem; font-weight:800; margin-bottom:8px; }
.rg-sidebar-cta p { color:rgba(255,255,255,.7); font-size:.83rem; margin-bottom:18px; line-height:1.5; }
.rg-toc a { display:block; font-size:.83rem; color:#6b7280; text-decoration:none; padding:5px 0; border-bottom:1px solid #f3f4f6; transition:color .15s; }
.rg-toc a:hover { color:#38b6ff; }

/* CTA Banner */
.rg-cta-banner { background:linear-gradient(135deg,#1a2035,#243050); border-radius:20px; padding:44px; display:flex; align-items:center; justify-content:space-between; gap:32px; margin:48px 0; }
.rg-cta-banner h3 { color:#fff; font-size:1.3rem; font-weight:800; margin-bottom:8px; }
.rg-cta-banner p { color:rgba(255,255,255,.7); font-size:.9rem; margin:0; }
.rg-cta-banner .rg-cta-actions { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }

@media(max-width:1024px) {
  .rg-layout { grid-template-columns:1fr; }
  .rg-sidebar { position:static; }
}
@media(max-width:768px) {
  .rg-hero h1 { font-size:1.7rem; }
  .rg-body { padding:36px 0 60px; }
  .rg-cta-banner { flex-direction:column; padding:28px 20px; text-align:center; }
  .rg-cta-banner .rg-cta-actions { justify-content:center; }
}