/* florianmuff.tech — Design 2026: Blog-Artikel.
 * Ergänzt site.css. Das Markup kommt aus der Blog-Pipeline
 * (blog_publisher.py, generate_article_html): .hero > .hero-inner > .s-tag/h1/.hero-meta,
 * .article mit .tip-box, .warn-box, .checklist, .author-box, .cta-block.
 * Klassen nicht umbenennen. Nur Variablen aus site.css verwenden.
 */

/* ── Kopf ───────────────────────────────────────────── */
.hero { padding: 56px 0 40px; }
.hero-inner,
.article { max-width: 876px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.s-tag { margin: 0 0 20px; font-size: 17px; color: var(--ink-3); }
.hero h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.015em;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 20px;
  font-size: 16px; color: var(--ink-3);
}

/* ── Fliesstext (wie .prose) ────────────────────────── */
.article { padding-top: 8px; padding-bottom: 96px; overflow-wrap: break-word; }
.article > * { max-width: 46em; }
.article h2 { font-family: var(--serif); font-weight: 600; font-size: 32px; line-height: 1.15; margin: 48px 0 16px; }
.article h3 { font-size: 22px; font-weight: 700; line-height: 1.3; margin: 32px 0 10px; }
.article p, .article li { color: var(--ink-2); }
.article ul, .article ol { padding-left: 24px; margin: 0 0 1em; }
.article li { margin-bottom: 6px; }
.article strong { color: var(--ink); }
.article a { color: var(--link); }
.article a:hover { color: var(--ink); }

/* ── Tipp- und Warn-Box (wie .paper, ohne Farbbalken) ─ */
.tip-box, .warn-box {
  margin: 32px 0; padding: 20px 22px;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: 0 1px 0 var(--line), 0 12px 28px rgba(26, 46, 90, 0.08);
}
.tip-box p, .warn-box p { margin: 0; font-size: 17px; }
.tip-label, .warn-label { margin-bottom: 6px; font-size: 16px; font-weight: 700; }
.tip-label { color: var(--link); }
.warn-label { color: var(--red-ink); }

/* ── Checkliste mit CSS-Häkchen ─────────────────────── */
.article .checklist { list-style: none; padding-left: 0; }
.checklist li {
  position: relative; margin: 0; padding: 12px 0 12px 38px;
  border-top: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 1px solid var(--line); }
.checklist li::before {
  content: ""; position: absolute; left: 8px; top: 17px;
  width: 8px; height: 15px;
  border: solid var(--ink); border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ── Autor ──────────────────────────────────────────── */
.author-box {
  display: flex; align-items: center; gap: 20px;
  margin-top: 56px; padding: 24px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.author-box img {
  flex-shrink: 0; width: 64px; height: 80px;
  object-fit: cover; border-radius: 50%; background: var(--paper);
}
.author-name { font-weight: 700; margin-bottom: 2px; }
.article .author-name a { color: var(--ink); text-underline-offset: 4px; }
.article .author-name a:hover { color: var(--link); }
.author-bio { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

/* ── Abschluss-Block (wie .band) ────────────────────── */
.cta-block {
  margin-top: 56px; padding: 36px 32px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.cta-block h3 { margin: 0 0 10px; font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 1.2; }
.cta-block p { margin-bottom: 24px; }
.article .cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px; border-radius: var(--radius);
  background: var(--ink); color: var(--white); border: 2px solid var(--ink);
  font: 700 17px/1.2 var(--sans); text-decoration: none;
}
.article .cta-btn:hover { background: var(--dark-deep); border-color: var(--dark-deep); color: var(--white); }

@media (max-width: 600px) {
  .hero { padding-top: 32px; }
  .article h2 { font-size: 28px; }
  .cta-block { padding: 28px 20px; }
}
@media print {
  .hero, .article { padding-top: 0; }
  .cta-block { display: none; }
}