/* Rikas Fotografie · Ratgeber (blog/)
   Ergänzt css/site.css: Artikel-Layout, Inhaltsverzeichnis, Karten. Nutzt nur die Variablen aus site.css. */

.rg-page{ --read:68ch; }

/* ---------- Kopf ---------- */
.rg-head{ padding-top:118px; padding-bottom:28px; max-width:1100px; }
@media (min-width:900px){ .rg-head{ padding-top:160px; padding-bottom:40px; } }
.rg-head--index{ max-width:var(--max); padding-bottom:12px; }
.rg-h1{ font-size:clamp(36px,4.6vw,60px); line-height:1.08; letter-spacing:-.3px; margin:0 0 18px; }
.rg-h1 i{ color:var(--deep); }
.rg-head .lead{ max-width:60ch; }
.rg-meta{ margin-top:18px; font-size:14px; color:var(--muted); }

.rg-crumbs{ margin-bottom:26px; font-size:13px; }
.rg-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 0; color:var(--muted); }
.rg-crumbs li+li::before{ content:"/"; margin:0 10px; color:var(--line-strong); }
.rg-crumbs a{ color:var(--muted); text-decoration:none; }
.rg-crumbs a:hover{ color:var(--deep); text-decoration:underline; }
.rg-crumbs [aria-current]{ color:var(--ink); }

/* ---------- Titelbild ---------- */
.rg-hero{ margin:0 auto 8px; max-width:1100px; }
.rg-hero img{ width:100%; aspect-ratio:3/2; object-fit:cover; background:var(--sand); }
@media (min-width:900px){ .rg-hero img{ aspect-ratio:21/9; } }

/* ---------- Layout Artikel + Inhaltsverzeichnis ---------- */
.rg-layout{ display:grid; gap:8px; padding-top:32px; padding-bottom:var(--section-y); }
@media (min-width:1100px){
  .rg-layout{ grid-template-columns:240px minmax(0,var(--read)); gap:72px; justify-content:center; padding-top:56px; }
  .rg-side{ position:sticky; top:110px; align-self:start; max-height:calc(100vh - 130px); overflow:auto; }
}
.rg-toc{ border:1px solid var(--line); background:var(--surface); padding:18px 20px; font-size:15px; }
.rg-toc-h{ font-size:12px; letter-spacing:3px; text-transform:uppercase; font-weight:600; color:var(--deep); margin-bottom:10px; }
.rg-toc ol{ margin:0; padding:0 0 0 20px; display:grid; gap:6px; color:var(--muted); }
.rg-toc a{ color:var(--ink); text-decoration:none; line-height:1.4; }
.rg-toc a:hover{ color:var(--deep); text-decoration:underline; }
@media (min-width:1100px){ .rg-toc{ border:0; background:none; padding:0; } .rg-toc ol{ padding-left:18px; } }

/* ---------- Fließtext ---------- */
.rg-prose{ max-width:var(--read); min-width:0; font-size:18px; line-height:1.72; }
.rg-prose>*+*{ margin-top:1.1em; }
.rg-prose h2{ font-size:clamp(28px,3vw,38px); line-height:1.15; margin-top:2.1em; scroll-margin-top:100px; }
.rg-prose h3{ font-family:var(--serif); font-size:23px; line-height:1.25; margin-top:1.7em; }
.rg-prose h2+p,.rg-prose h3+p,.rg-prose h2+ul,.rg-prose h3+ul{ margin-top:.6em; }
.rg-prose>p:first-child{ font-size:20px; color:var(--muted); }
.rg-prose strong{ font-weight:600; }
.rg-prose ul,.rg-prose ol{ padding-left:1.2em; }
.rg-prose li+li{ margin-top:.4em; }
.rg-prose li::marker{ color:var(--deep); }
.rg-prose a{ color:var(--deep); }

.rg-check{ list-style:none; padding:0 !important; }
.rg-check li{ position:relative; padding-left:30px; }
.rg-check li::before{ content:""; position:absolute; left:2px; top:.5em; width:13px; height:7px; border-left:1.5px solid var(--deep); border-bottom:1.5px solid var(--deep); transform:rotate(-45deg); }

.rg-fig{ margin:2em 0; }
.rg-fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--sand); }
@media (min-width:700px){ .rg-fig img{ aspect-ratio:4/3; } }
.rg-fig figcaption{ margin-top:10px; font-size:14px; color:var(--muted); }

/* Kurzantwort-Kacheln */
.rg-facts{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:1.4em !important; }
@media (min-width:600px){ .rg-facts{ grid-template-columns:repeat(3,1fr); } }
.rg-facts>div{ background:var(--tint); padding:18px 20px; display:grid; gap:2px; }
.rg-facts b{ font-family:var(--serif); font-weight:400; font-size:34px; line-height:1.1; color:var(--deep); }
.rg-facts span{ font-size:15px; color:var(--muted); }

.rg-swatches{ display:flex; flex-wrap:wrap; gap:10px 22px; font-size:15px; }
.rg-swatches span{ display:inline-flex; align-items:center; gap:10px; }
.rg-swatches i{ width:28px; height:28px; border-radius:50%; border:1px solid var(--line); }

/* FAQ im Artikel */
.rg-faq{ margin-top:2.4em !important; }
.rg-faq h2{ margin-bottom:.6em; }
.rg-faq .faq summary{ font-size:19px; }

/* Anfrage-Block */
.rg-cta{ margin-top:2.6em !important; padding:30px 26px; background:var(--panel); color:var(--panel-ink); }
@media (min-width:700px){ .rg-cta{ padding:40px 44px; } }
.rg-cta .label{ color:var(--panel-ink); opacity:.85; }
.rg-cta-h{ font-family:var(--serif); font-size:clamp(28px,3vw,36px); line-height:1.12; margin:0 0 12px; }
.rg-cta-h i{ color:inherit; }
.rg-cta>p{ max-width:52ch; }
.rg-cta-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.rg-cta .btn--ghost{ color:var(--panel-ink); }
.rg-cta-alt{ margin-top:16px; font-size:14.5px; }
.rg-cta-alt a{ color:var(--panel-ink); }
body[data-theme="boudoir"] .rg-cta{ background:var(--surface); color:var(--ink); border:1px solid var(--line); }
body[data-theme="boudoir"] .rg-cta .label,body[data-theme="boudoir"] .rg-cta-h i{ color:var(--deep); opacity:1; }
body[data-theme="boudoir"] .rg-cta .btn--ghost,body[data-theme="boudoir"] .rg-cta-alt a{ color:var(--ink); }

/* ---------- Karten ---------- */
.rg-grid{ display:grid; gap:22px; }
@media (min-width:640px){ .rg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .rg-grid{ grid-template-columns:repeat(3,1fr); gap:28px; } }
.rg-card{ display:flex; flex-direction:column; text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); transition:border-color .2s; }
.rg-card:hover{ color:var(--ink); border-color:var(--line-strong); }
.rg-card-ph{ aspect-ratio:4/3; overflow:hidden; background:var(--sand); }
.rg-card-ph img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.rg-card:hover .rg-card-ph img{ transform:scale(1.04); }
.rg-card-body{ padding:22px 22px 24px; display:grid; gap:8px; flex:1; align-content:start; }
.rg-card-body .label{ margin:0; }
.rg-card h3{ font-size:25px; line-height:1.18; }
.rg-card p{ color:var(--muted); font-size:16px; line-height:1.55; }
.rg-card .more{ margin-top:6px; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:600; color:var(--deep); }
.rg-all{ margin-top:30px; }

/* Übersicht */
.rg-index{ padding-bottom:var(--section-y); }
.rg-group{ padding-top:48px; }
.rg-group+.rg-group{ border-top:1px solid var(--line); margin-top:56px; }
.rg-group-head{ margin-bottom:28px; max-width:760px; }
.rg-group-head .h2{ font-size:clamp(30px,3.4vw,44px); }
.rg-group-head .muted{ margin-top:10px; }
/* Boudoir-Karten in der hellen Übersicht dunkel absetzen */
.rg-group--boudoir .rg-card{ background:#33262A; border-color:#4A3438; color:#F3E9E7; }
.rg-group--boudoir .rg-card p{ color:#D9CBCD; }
.rg-group--boudoir .rg-card .label,.rg-group--boudoir .rg-card .more{ color:#D1A9AE; }

/* Knöpfe im Fließtext nicht als Textlink einfärben */
.rg-prose a.btn{ text-decoration:none; }
.rg-prose a.btn--primary,.rg-prose a.btn--primary:hover{ color:var(--on-action); }
.rg-group--boudoir .rg-card-ph{ background:#2C2124; }

/* Integration: Fulda-Abschnitt unter migrierten Originalbeiträgen, Link-Zeile */
.rg-local{ margin:2.4em 0 0; padding:1.4em 1.5em 1.1em; background:var(--tint, rgba(0,0,0,.035)); border-left:2px solid var(--deep); }
.rg-local h2{ margin-top:0; }
.rg-links{ font-weight:600; }
.rg-local p+p{ margin-top:.9em; }
/* Integration: Hochformat-Titelbilder im breiten Format nicht am Kopf abschneiden */
@media (min-width:900px){ .rg-hero img{ object-position:50% 22%; } }