/* ============================================================
   christopherhellermann.de — Ergänzungen für Ratgeber-Artikel
   ------------------------------------------------------------
   Einbindung NACH /assets/seite.css:
     <link rel="stylesheet" href="/assets/artikel.css" />

   seite.css bringt bereits mit: .wrap, .section, h1/h2/h3, .kicker,
   .lead, .crumbs, .faq, .btn, Kopf- und Fußzeile. Hier steht NUR,
   was ein Artikel zusätzlich braucht. Farben ausschließlich über die
   Tokens aus seite.css, damit die Artikel dieselbe Palette tragen wie
   die Startseite.
   ============================================================ */

/* ---------- Kopf des Artikels ----------
   Der Kopf steht mittig. Linksbündig brach die Überschrift bei 20ch in drei
   kurze Zeilen um, die rechte Hälfte der Seite blieb leer, und der Kopf begann
   rund 200 px weiter links als der Fließtext darunter. Mittig füllt die
   Überschrift die Fläche und sitzt auf derselben Achse wie der Artikel. */
.artikel-kopf{ padding:132px 0 0; text-align:center; }
.artikel-kopf .crumbs{ margin-bottom:26px; }
.artikel-kopf .kicker{ margin-bottom:18px; }
/* zweiter Strich, damit die Kickerzeile mittig nicht einseitig kippt */
.artikel-kopf .kicker::after{
  content:""; width:26px; height:1px; background:var(--ink-mute); opacity:.55;
}
.artikel-kopf h1{ max-width:30ch; margin:0 auto 24px; }
.artikel-kopf .lead{ max-width:56ch; margin:0 auto; }
/* Linie auf Breite der Textspalte: bindet Kopf und Artikel zusammen und
   nimmt die Lücke von rund 190 px zwischen Metazeile und erster Überschrift. */
.artikel-kopf::after{
  content:""; display:block; height:1px; background:var(--line);
  width:min(68ch, calc(100% - 64px)); margin:46px auto 0;
}
.artikel-kopf + .section{ padding-top:54px; }

/* Zeile aus Autor, Stand und Lesezeit. Der Stand ist kein Schmuck:
   Bei Steuer- und Rentenzahlen muss der Leser sehen, wie alt der Text ist. */
.artikel-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin-top:30px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.artikel-meta span{ display:inline-flex; align-items:center; gap:10px; }
.artikel-meta span + span::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--lila); opacity:.6;
}

/* ---------- Fließtext ----------
   Eine Spalte, 68 Zeichen breit. Alles darüber wird beim Lesen anstrengend,
   alles darunter zerhackt die Sätze. */
.prose{ max-width:68ch; margin:0 auto; }
.prose > *:first-child{ margin-top:0; }
.prose h2{ margin:56px 0 18px; }
.prose h3{ margin:36px 0 12px; font-family:var(--font-body); font-weight:600; }
.prose p{ color:var(--ink-soft); font-size:1.02rem; line-height:1.78; margin:0 0 18px; }
.prose ul, .prose ol{ margin:0 0 22px; padding-left:22px; color:var(--ink-soft); font-size:1.02rem; line-height:1.78; }
.prose li{ margin-bottom:10px; }
.prose li::marker{ color:var(--lila); }
.prose strong{ color:var(--ink); font-weight:600; }
.prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--lila); text-underline-offset:3px; }
.prose a:hover{ color:var(--lila); }

/* Abgesetzter Kernsatz. Sparsam einsetzen, höchstens zweimal je Artikel. */
.prose blockquote{
  margin:32px 0; padding:4px 0 4px 24px;
  border-left:2px solid var(--lila);
  font-family:var(--font-head); font-size:1.2rem; line-height:1.5;
  color:var(--ink);
}
.prose blockquote p{ font-family:inherit; font-size:inherit; color:inherit; margin:0; }

/* Rechenbeispiel oder Merkkasten. */
.prose .kasten{
  margin:30px 0; padding:24px 26px;
  background:var(--lila-soft); border-radius:3px;
}
.prose .kasten p:last-child{ margin-bottom:0; }
.prose .kasten .kasten-titel{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--lila-deep); margin:0 0 12px;
}

/* ---------- Pflichthinweis unter dem Artikel ----------
   Gehört unter JEDEN Artikel. Er trägt die Abgrenzung zur Beratung und
   den Hinweis auf Marktrisiken. Ohne ihn ist der Text Werbung ohne
   Einordnung. Nicht kürzen. */
.artikel-hinweis{
  max-width:68ch; margin:44px auto 0; padding-top:22px;
  border-top:1px solid var(--line);
  font-size:.84rem; line-height:1.7; color:var(--ink-mute);
}

/* ---------- Weiterlesen ---------- */
.weiter{
  max-width:68ch; margin:48px auto 0; padding:26px 28px;
  background:var(--surface); border:1px solid var(--line); border-radius:3px;
}
.weiter .kicker{ margin-bottom:10px; }
.weiter h3{ font-family:var(--font-head); font-weight:400; margin:0 0 14px; }
.weiter-links{ display:flex; flex-wrap:wrap; gap:12px 20px; }
.weiter-links a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--lila-deep); text-decoration:underline;
  text-decoration-color:var(--lila); text-underline-offset:3px;
}

@media (max-width:700px){
  /* Auf dem Telefon gibt es keine Fläche zu verschenken, und ein mittig
     gesetzter Vorspann über sechs Zeilen liest sich schlecht: wieder links. */
  .artikel-kopf{ padding-top:104px; text-align:left; }
  .artikel-kopf .kicker::after{ display:none; }
  .artikel-kopf h1,
  .artikel-kopf .lead{ margin-left:0; margin-right:0; }
  /* „Ruhestandsrechnungen" ist breiter als die Textspalte eines 390-px-Schirms
     und stand vorher über den rechten Rand hinaus. Lieber trennen. */
  .artikel-kopf h1{ hyphens:auto; overflow-wrap:break-word; }
  .artikel-kopf::after{ margin-top:36px; }
  .artikel-meta{ justify-content:flex-start; }
  .artikel-kopf + .section{ padding-top:40px; }
  .prose .kasten{ padding:20px 18px; }
  .weiter{ padding:22px 20px; }
}