/* ============================================================
   HELLERMANN.VC — Ratgeber-Ergänzungen zu subpages.css
   Einbindung NACH /assets/subpages.css:
     <link rel="stylesheet" href="/assets/ratgeber.css" />
   Farb-Tokens kommen zentral aus /assets/theme.css.
   ============================================================ */

/* ---------- Artikel-Metazeile (Datum · Lesezeit) ---------- */
.article-meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:20px;
  font-family:var(--font-secondary); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-3);
}

/* ---------- Fließtext ---------- */
.prose{ max-width:760px; margin:0 auto; }
.prose h2{
  font-size:clamp(23px,3vw,30px); font-weight:600; line-height:1.28;
  letter-spacing:-.01em; color:var(--text-strong); margin:54px 0 18px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:19px; font-weight:600; color:var(--text-strong); margin:34px 0 12px; }
.prose p{ margin:0 0 18px; color:var(--text-2); font-size:16.5px; }
.prose ul, .prose ol{ margin:0 0 22px; padding-left:24px; color:var(--text-2); font-size:16.5px; }
.prose li{ margin-bottom:10px; }
.prose li::marker{ color:var(--gold); }
.prose strong{ color:var(--text-strong); font-weight:600; }
.prose a{ color:var(--gold); border-bottom:1px solid var(--gold-line); transition:opacity .25s var(--ease); }
.prose a:hover{ opacity:.72; }

/* ---------- Hinweis-/Merk-Box ---------- */
.callout{
  background:var(--surface); border:1px solid var(--line);
  border-left:2px solid var(--gold); border-radius:12px;
  padding:20px 24px; margin:30px 0;
}
.callout p{ margin:0; font-size:15.5px; }
.callout p + p{ margin-top:10px; }

/* ---------- Autor-Box ---------- */
.author{
  display:flex; gap:18px; align-items:center;
  max-width:760px; margin:56px auto 0;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:20px 24px;
}
.author .a-img{
  width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none;
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-secondary); color:var(--gold); font-size:18px;
}
.author .a-img img{ width:100%; height:100%; object-fit:cover; }
.author b{ display:block; color:var(--text-strong); font-weight:600; margin-bottom:4px; }
.author span{ font-size:13.5px; color:var(--text-3); line-height:1.55; }

/* ---------- Rechtlicher Hinweis unterm Artikel ---------- */
.article-note{
  max-width:760px; margin:26px auto 0;
  font-size:12.5px; color:var(--text-3); line-height:1.65;
}

/* ---------- Übersichtsseite: Artikel-Kacheln ---------- */
.rg-card .rg-date{
  font-family:var(--font-secondary); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-3); margin-top:14px; display:block;
}

@media (max-width:640px){
  .author{ flex-direction:column; align-items:flex-start; }
}