/* ratgeber.css — Content-/SEO-Bereich (lesefreundlich, Poppins, teal) */

@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Poppins-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/Poppins-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); }

:root {
    --paper: #FFFFFF;
    --bg: #EFF6F4;
    --ink: #16292B;
    --ink-soft: #2C4143;
    --mid: rgba(22, 41, 43, 0.7);
    --teal: #0B7180;
    --teal-deep: #095863;
    --line: rgba(22, 41, 43, 0.12);
    --r: 16px;
    --font: 'Poppins', 'Helvetica Neue', Arial, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.rg { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { color: var(--teal); }

.rg-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    max-width: 1440px; margin: 0 auto; padding: 16px clamp(18px, 5vw, 48px);
    border-bottom: 1px solid var(--line);
}
.rg-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); font-size: 16px; font-weight: 500; }
.rg-brand b { color: var(--teal); font-weight: 600; }
.rg-cta-link { font-size: 14px; font-weight: 500; text-decoration: none; }
.rg-cta-link:hover { text-decoration: underline; }

.rg-main { max-width: 1440px; margin: 0 auto; padding: clamp(28px, 6vw, 56px) clamp(18px, 5vw, 48px) 64px; }
/* Lese-Spalten schmal (1440px-Textzeilen liest niemand) */
.rg-article { max-width: 760px; margin-left: auto; margin-right: auto; } /* Artikel zentriert */
.rg-intro { max-width: 760px; }                                          /* Übersicht: links, Kante zu den Karten */
.rg-funnel { max-width: 820px; margin-left: auto; margin-right: auto; }

/* Übersicht */
.rg-intro { margin-bottom: 30px; }
.rg-intro h1 { font-size: clamp(28px, 6vw, 42px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.rg-intro p { font-size: clamp(16px, 2.4vw, 18px); color: var(--ink-soft); margin-top: 14px; }
.rg-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .rg-grid { grid-template-columns: repeat(3, 1fr); } }
.rg-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; text-decoration: none; color: var(--ink); transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; }
.rg-card:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(11, 113, 128, 0.35); }
.rg-card h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.rg-card p { font-size: 14.5px; color: var(--ink-soft); margin: 8px 0 12px; line-height: 1.6; }
.rg-card-more { font-size: 14px; font-weight: 600; color: var(--teal); }

/* Artikel */
.rg-back { margin-bottom: 16px; }
.rg-back a { font-size: 14px; text-decoration: none; }
.rg-back a:hover { text-decoration: underline; }
.rg-article h1 { font-size: clamp(26px, 5.5vw, 38px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.rg-meta { font-size: 13px; color: var(--mid); margin: 10px 0 28px; }
.rg-body { font-size: 16.5px; color: var(--ink-soft); }
.rg-body p { margin-bottom: 18px; line-height: 1.8; }
.rg-body h2 { font-size: clamp(20px, 3.4vw, 25px); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; margin: 32px 0 12px; }
.rg-body ul { padding-left: 22px; margin-bottom: 18px; }
.rg-body li { margin-bottom: 9px; line-height: 1.7; }
.rg-body strong { color: var(--ink); font-weight: 600; }
.rg-body a { font-weight: 500; }

/* Funnel-CTA */
.rg-funnel { background: var(--bg); border-radius: var(--r); padding: clamp(24px, 5vw, 36px); margin-top: 36px; text-align: center; }
.rg-funnel h2 { font-size: clamp(20px, 3.6vw, 26px); font-weight: 600; letter-spacing: -0.01em; }
.rg-funnel p { font-size: 15.5px; color: var(--ink-soft); margin: 12px 0 22px; line-height: 1.65; }
.rg-btn { display: inline-block; padding: 14px 30px; font-size: 15px; font-weight: 600; color: #fff; background: var(--teal); border-radius: 999px; text-decoration: none; box-shadow: 0 12px 28px -10px rgba(11, 113, 128, 0.6); transition: transform 0.16s ease, background 0.16s ease; }
.rg-btn:hover { transform: translateY(-2px); background: var(--teal-deep); }

/* Footer */
.rg-foot { border-top: 1px solid var(--line); max-width: 1440px; margin: 0 auto; padding: 26px clamp(18px, 5vw, 48px); display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.rg-foot p { font-size: 13px; color: var(--mid); }
.rg-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.rg-foot-links a { font-size: 13px; color: var(--mid); text-decoration: none; }
.rg-foot-links a:hover { color: var(--teal); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rg-card, .rg-btn { transition: none; }
}