/* Stundenfreund – Ratgeber-Inhaltsstile.
   Baut auf styles.css der STARTSEITE auf (gleiche Marken-Variablen: Oliv/Camel/Creme, Inter).
   Nur die artikelspezifischen Bausteine – Nav, Footer, .wrap, .btn, .eyebrow kommen aus styles.css. */

/* ─── Artikel-Kopf ─── */
.rg-hero { background: var(--cream-2); border-bottom: 1px solid var(--line); padding-block: clamp(2.25rem,5vw,3.75rem); }
.rg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--camel-700); margin-bottom: 1rem; }
.rg-crumb a { color: var(--camel-700); }
.rg-crumb a:hover { color: var(--olive); text-decoration: underline; }
.rg-crumb span[aria-hidden] { color: var(--camel); }
.rg-hero h1 { font-size: clamp(1.9rem,4vw,2.9rem); max-width: 20ch; }
.rg-hero__sub { margin-top: .9rem; font-size: 1.05rem; color: var(--ink-2); max-width: 60ch; }

/* ─── Artikel-Körper ─── */
.rg-article { background: var(--cream); }
.rg-body { max-width: 760px; margin-inline: auto; }
.rg-body > .rg-lead { font-size: 1.2rem; line-height: 1.7; color: var(--ink); margin-bottom: 1.5rem; }
.rg-body h2 { font-size: clamp(1.35rem,2.5vw,1.85rem); margin: 2.4rem 0 .7rem; }
.rg-body h3 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; color: var(--ink); }
.rg-body p { font-size: 1.06rem; line-height: 1.78; color: var(--ink-2); margin-bottom: 1rem; }
.rg-body strong { color: var(--ink); }
.rg-body ul { list-style: disc; margin: .5rem 0 1.1rem 1.3rem; }
.rg-body li { font-size: 1.06rem; line-height: 1.7; color: var(--ink-2); margin-bottom: .4rem; }
.rg-body a { color: var(--camel-700); text-decoration: underline; text-underline-offset: 3px; }
.rg-body a:hover { color: var(--olive); }

/* ─── Info- und Hinweis-Boxen ─── */
.rg-note { background: var(--cream-2); border-left: 4px solid var(--olive); border-radius: var(--r-sm); padding: 1rem 1.25rem; margin: 1.2rem 0 1.4rem; font-size: 1rem; color: var(--ink-2); line-height: 1.7; }
.rg-note strong { color: var(--olive); }
.rg-warn { background: #fbf4de; border: 1px solid #e3cf94; border-left: 4px solid var(--camel); border-radius: var(--r-sm); padding: 1rem 1.25rem; margin: 1.3rem 0 1.5rem; font-size: 1rem; color: #6a5326; line-height: 1.7; }
.rg-warn strong { color: #5a4413; }

/* ─── Tabelle ─── */
.rg-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; }
.rg-table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 420px; }
.rg-table th, .rg-table td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.rg-table th { background: var(--cream-2); color: var(--olive); font-weight: 700; }
.rg-table tr:last-child td { border-bottom: none; }

/* ─── Abschluss-CTA (Oliv, wie die Anfrage-Blöcke der Startseite) ─── */
.rg-cta { margin-top: 2.6rem; padding: clamp(1.6rem,3vw,2.2rem); background: var(--olive); color: var(--on-dark); border-radius: var(--r-xl); box-shadow: var(--sh-md); }
.rg-cta h2 { color: var(--on-dark); margin: 0 0 .5rem; font-size: clamp(1.3rem,2.4vw,1.7rem); }
.rg-cta p { color: var(--on-dark-mut); margin-bottom: 1.1rem; font-size: 1.05rem; line-height: 1.6; }
.rg-cta__contact { color: var(--on-dark); font-weight: 500; }
.rg-cta__contact a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Verwandte Artikel ─── */
.rg-related { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.rg-related h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
.rg-related ul { list-style: none; margin: 0; }
.rg-related li { margin-bottom: .55rem; }
.rg-related a { color: var(--camel-700); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.rg-related a:hover { color: var(--olive); }

/* ─── Übersicht: Artikel-Karten ─── */
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.35rem; }
.rg-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.6rem 1.7rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: transform .18s, box-shadow .18s, border-color .18s; }
.rg-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--camel); }
.rg-card__tag { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--camel-700); }
.rg-card__title { font-size: 1.2rem; font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; }
.rg-card__desc { font-size: 1rem; color: var(--ink-2); line-height: 1.6; }
.rg-card__go { margin-top: .35rem; font-size: .95rem; font-weight: 700; color: var(--olive); }