/* ─────────────────────────────────────────────────────────────
   Redaktionelle Wärme für Ratgeber-Artikel. Ergänzt landing-3.css
   und ratgeber-1.css (dort stehen Farben/--variablen, Kopf, Prosa).
   WIRD IMMER NACH ratgeber-1.css eingebunden.

   Versioniert im Dateinamen (artikel-warm-1.css): Caddy darf sie
   „immutable" ausliefern. Änderung = Zahl hochsetzen UND alle
   <link>-Zeilen mitziehen.

   Ziel: Artikel wirken lebendiger, ohne Stockfotos – mit einem
   farbigen Kopf-Band, einer Kennzahlen-Leiste, Hinweis-Boxen und
   etwas Typo-Feinschliff. Alle Zahlen stammen aus dem Artikel,
   nichts wird erfunden.
   ───────────────────────────────────────────────────────────── */

/* ── Hero-Band am Artikelkopf ───────────────────────────────── */
.artikel-held{
  background:
    radial-gradient(120% 150% at 88% -30%, rgba(37,99,235,.12), transparent 58%),
    linear-gradient(180deg, #eaf0fb 0%, var(--grund) 100%);
  border-bottom:1px solid var(--linie-fein);
}
.artikel-held .wrap{max-width:760px}
.held-inner{padding:24px 0 30px}

/* Kicker-Chip (Kategorie) */
.held-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--frei);
  background:rgba(37,99,235,.09);border:1px solid rgba(37,99,235,.20);
  padding:5px 12px;border-radius:999px;margin-bottom:16px}
.held-kicker::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--frei);box-shadow:0 0 0 3px rgba(37,99,235,.18)}

.artikel-held h1{font-size:clamp(29px,5.6vw,44px);margin-bottom:14px}
.held-lead{font-size:19.5px;line-height:1.5;color:var(--text-leise);max-width:62ch;margin:0}
.held-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;
  color:var(--text-leise);margin:16px 0 0}
.held-meta span{display:inline-flex;align-items:center;gap:7px}
.held-meta span+span::before{content:"·";margin-right:8px;color:var(--unbekannt)}

/* Kennzahlen-Leiste im Hero */
.held-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.hz{background:rgba(255,255,255,.72);border:1px solid var(--linie-fein);
  border-radius:var(--radius-klein);box-shadow:var(--schatten);
  padding:14px 16px;backdrop-filter:saturate(1.2)}
.hz b{display:block;font-size:clamp(21px,4.4vw,27px);font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;color:var(--text)}
.hz span{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--text-leise)}

/* ── Hinweis-/Callout-Boxen im Fließtext ────────────────────── */
.merk{display:flex;gap:14px;align-items:flex-start;
  background:var(--karte);border:1px solid var(--linie);
  border-left:4px solid var(--frei);border-radius:var(--radius-klein);
  box-shadow:var(--schatten);padding:16px 18px;margin:26px 0}
.merk-ikon{flex:none;width:26px;height:26px;color:var(--frei);margin-top:1px}
.merk-ikon svg{width:100%;height:100%;display:block}
.merk-text{min-width:0}
.merk-text b{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--frei);margin-bottom:5px}
.merk-text p{margin:0;color:var(--text);line-height:1.58}
.merk-text p+p{margin-top:10px}

/* Warnung (gelb) */
.merk-warnung{border-left-color:var(--bau)}
.merk-warnung .merk-ikon{color:var(--bau)}
.merk-warnung .merk-text b{color:#9a7400}

/* Tipp (grün-blau = Aktionsfarbe), identisch zur Info – eigener Hook
   für spätere Varianten */
.merk-tipp{border-left-color:var(--frei)}

/* ── Typo-Feinschliff in der Prosa ──────────────────────────── */
/* Kleiner farbiger Strich über jeder h2 – gibt dem Scan-Lesen Halt */
.prosa h2{position:relative;padding-top:12px}
.prosa h2::before{content:"";position:absolute;top:0;left:0;
  width:30px;height:3px;border-radius:3px;background:var(--frei);opacity:.9}

/* Erster Absatz nach einer h2 bekommt etwas mehr Luft */
.prosa h2+p{margin-top:2px}

/* Minikarte auf breiten Schirmen neben den Text stellen = lebendiger */
@media (min-width:760px){
  figure.mk{float:right;max-width:300px;margin:6px 0 16px 26px}
}

/* ── Responsiv ──────────────────────────────────────────────── */
@media (max-width:560px){
  .held-zahlen{grid-template-columns:1fr;gap:8px}
  .hz{display:flex;align-items:baseline;gap:10px}
  .hz b{font-size:22px}
  .hz span{margin-top:0}
}
@media (min-width:760px){
  .held-inner{padding:34px 0 38px}
}