/* ─────────────────────────────────────────────────────────────
   Ratgeber-Stylesheet. Ergaenzt landing-3.css (dort stehen Farben,
   Kopf, Fuss, Knoepfe, .fragen/details). Wird IMMER NACH landing-3.css
   eingebunden, damit die --variablen schon da sind.

   Versioniert im Dateinamen (ratgeber-1.css): Caddy darf sie „immutable"
   ausliefern. Aenderung = Zahl hochsetzen UND alle <link>-Zeilen mitziehen.
   ───────────────────────────────────────────────────────────── */

/* ── Brotkrumen ─────────────────────────────────────────────── */
.brotkrumen{font-size:14px;color:var(--text-leise);padding:18px 0 0}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.brotkrumen li{display:flex;align-items:center;gap:6px}
.brotkrumen li+li::before{content:"›";color:var(--unbekannt)}
.brotkrumen a{color:var(--text-leise);text-decoration:none}
.brotkrumen a:hover{color:var(--text);text-decoration:underline}
.brotkrumen [aria-current]{color:var(--text);font-weight:600}

/* ── Artikel-Kopf ───────────────────────────────────────────── */
.artikel-kopf{padding:26px 0 8px}
.artikel-kopf h1{font-size:clamp(29px,5.6vw,44px);margin-bottom:16px}
.artikel-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14.5px;
  color:var(--text-leise);margin-bottom:6px}
.artikel-lead{font-size:20px;line-height:1.5;color:var(--text-leise);
  max-width:62ch;margin-top:8px}

/* ── Lesekorpus ─────────────────────────────────────────────── */
.artikel{padding:34px 0 68px}
.artikel .wrap{max-width:760px}
.prosa{max-width:66ch}
.prosa h2{font-size:clamp(23px,3.6vw,30px);margin:44px 0 14px;scroll-margin-top:20px}
.prosa h3{font-size:20px;margin:30px 0 10px}
.prosa p{margin:0 0 18px;color:var(--text)}
.prosa a{color:var(--frei);text-decoration:underline;text-underline-offset:3px}
.prosa ul,.prosa ol{margin:0 0 18px;padding-left:24px;display:flex;
  flex-direction:column;gap:9px;color:var(--text)}
.prosa li{line-height:1.6}
.prosa li b,.prosa p b{font-weight:650}
.prosa strong{font-weight:650}

/* Inhaltsverzeichnis */
.inhalt{background:var(--karte);border:1px solid var(--linie-fein);
  border-radius:var(--radius);box-shadow:var(--schatten);padding:20px 24px;
  margin:6px 0 34px}
.inhalt p{font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-leise);margin:0 0 10px}
.inhalt ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;
  counter-reset:iv}
.inhalt li{counter-increment:iv}
.inhalt a{color:var(--text);text-decoration:none;font-size:16px;display:flex;gap:10px}
.inhalt a::before{content:counter(iv);color:var(--frei);font-variant-numeric:tabular-nums;
  font-weight:700;flex:none}
.inhalt a:hover{color:var(--frei)}

/* Kernaussage-Kasten (Featured-Snippet-Koeder) */
.kernaussage{background:var(--karte);border:1px solid var(--linie);
  border-left:4px solid var(--frei);border-radius:var(--radius-klein);
  box-shadow:var(--schatten);padding:18px 22px;margin:0 0 28px;
  font-size:17.5px;line-height:1.55}
.kernaussage b{font-weight:700}

/* Zahl-Reihe klein (im Fliesstext) */
.fakten{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 26px}
.fakt{background:var(--karte);border:1px solid var(--linie-fein);
  border-radius:var(--radius-klein);box-shadow:var(--schatten);padding:16px 18px}
.fakt b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.fakt span{font-size:14px;color:var(--text-leise)}

/* Farbstreifen wie auf der Startseite, wiederverwendet */
.streifen{height:7px;border-radius:4px;display:block;margin-bottom:10px}

/* CTA-Kasten mitten im Text */
.cta-kasten{background:var(--karte);border:1px solid var(--linie);
  border-radius:var(--radius);box-shadow:var(--schatten);padding:24px;
  margin:34px 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-kasten p{margin:0;color:var(--text-leise)}
.cta-kasten .titel{font-size:19px;font-weight:700;color:var(--text)}

/* Quelle/Stand */
.stand{font-size:14px;color:var(--text-leise);margin-top:30px;
  padding-top:18px;border-top:1px solid var(--linie-fein)}

/* Weiterlesen-Block am Artikelende */
.weiter{margin-top:8px}
.weiter-raster{display:grid;gap:16px;margin-top:18px}
.weiter-karte{background:var(--karte);border:1px solid var(--linie-fein);
  border-radius:var(--radius);box-shadow:var(--schatten);padding:22px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:7px}
.weiter-karte:hover{border-color:var(--frei)}
.weiter-karte .kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-leise)}
.weiter-karte h3{font-size:18px}
.weiter-karte p{font-size:15px;color:var(--text-leise);margin:0}

/* ── Hub-Uebersicht ─────────────────────────────────────────── */
.hub-raster{display:grid;gap:18px;margin-top:8px}
.hub-karte{background:var(--karte);border:1px solid var(--linie-fein);
  border-radius:var(--radius);box-shadow:var(--schatten);padding:26px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:9px}
.hub-karte:hover{border-color:var(--frei)}
.hub-karte .kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-leise)}
.hub-karte h2{font-size:21px;line-height:1.25}
.hub-karte p{font-size:16px;color:var(--text-leise)}
.hub-karte .mehr{font-size:15px;font-weight:650;color:var(--frei);margin-top:2px}

@media (min-width:720px){
  .artikel-kopf{padding-top:40px}
  .fakten{gap:16px}
  .weiter-raster{grid-template-columns:1fr 1fr}
  .hub-raster{grid-template-columns:1fr 1fr}
  .cta-kasten{flex-direction:row;align-items:center;justify-content:space-between}
  .cta-kasten .knopf{flex:none}
}