/* ══════════════════════════════════════════════════════════════
   Blog: Übersicht und Artikel im Design der Startseite.
   Baut auf css/style.css auf (Farben, Schrift, .post-Grundlayout).
   ══════════════════════════════════════════════════════════════ */

/* Artikel: Grundlayout kommt aus .post in style.css */
.post .meta { margin: -6px 0 40px; color: var(--muted); font-size: 15px; font-weight: 500; }
.post img { border-radius: 16px; margin: 24px 0; }
.post blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); color: var(--muted); }
.post hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0; }
.post code { font-size: 0.9em; background: var(--card); padding: 2px 6px; border-radius: 6px; }

.highlight-box, .model-card, .warning-box, .red-flag, .template-box, .question, .timeline {
  background: var(--card);
  border-radius: 20px;
  padding: 24px 26px;
  margin: 26px 0;
}
.highlight-box p:last-child, .model-card p:last-child, .warning-box p:last-child, .red-flag p:last-child { margin-bottom: 0; }
.highlight-box strong { color: var(--ink); }
.model-card h3 { margin-top: 0; color: var(--link); }
.model-card p { font-size: 16px; margin-bottom: 8px; }
.warning-box { background: rgba(245, 166, 35, 0.1); }
.warning-box strong { color: #b26b00; }
:root[data-theme="dark"] .warning-box strong { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warning-box strong { color: #fbbf24; } }
.red-flag { background: rgba(229, 72, 77, 0.08); }
.red-flag strong { color: #d93036; }
:root[data-theme="dark"] .red-flag strong { color: #fca5a5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .red-flag strong { color: #fca5a5; } }
.template-box { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.7; white-space: pre-wrap; color: var(--ink-2); }
.question { border-left: 3px solid var(--brand); border-radius: 4px 20px 20px 4px; }
.question .num { color: var(--link); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.question h3 { margin-top: 4px; }
.timeline { border-left: 3px solid var(--brand); border-radius: 4px 20px 20px 4px; }
.timeline-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.timeline-item:last-child { border-bottom: 0; }
.timeline-day { color: var(--link); font-weight: 600; display: inline-block; min-width: 96px; }

.cta-box {
  margin: 56px 0 0;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  text-align: center;
  background: #000;
  color: #f5f5f7;
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 600px; height: 400px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 65%);
  filter: blur(30px); pointer-events: none;
}
.cta-box > * { position: relative; }
.cta-box h3 { color: #f5f5f7; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.035em; margin: 0 0 10px; }
.cta-box p { color: #a1a1a6; margin: 0 auto 24px; max-width: 32em; }
.cta-btn, .post .cta-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--action); color: #fff; font-weight: 600; font-size: 17px;
  text-decoration: none; transition: background-color 0.2s;
}
.cta-btn:hover { background: var(--action-hover); text-decoration: none; }
.cta-box .cta-btn { background: #fff; color: #1d1d1f; }
.cta-box .cta-btn:hover { background: #ececf0; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 24px 0; }
.table-wrap .compare-table { margin: 0; min-width: 520px; }
.compare-table th, .compare-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table th { color: var(--muted); font-size: 13px; font-weight: 600; }
.compare-table td { color: var(--ink-2); }
.compare-table tr:last-child td { border-bottom: 0; }

.feature-grid, .compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 26px 0; }
.feature-card, .compare-card { background: var(--card); border-radius: 20px; padding: 22px; }
.feature-card h3, .compare-card h3 { margin: 0 0 8px; font-size: 18px; }
.feature-card p, .compare-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.feature-card p:last-child, .compare-card p:last-child { margin-bottom: 0; }

.steps { counter-reset: step; list-style: none; margin-left: 0; padding-left: 0; }
.steps li { counter-increment: step; padding-left: 48px; position: relative; margin-bottom: 18px; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 14px;
}
.check-list { list-style: none; margin-left: 0; padding-left: 0; }
.check-list li { position: relative; padding-left: 34px; }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(31, 157, 85, 0.14); color: var(--ok); font-size: 12px; font-weight: 700;
}
.step-label {
  display: inline-block; margin: 46px 0 6px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--brand-soft); color: var(--link);
  font-size: 13px; font-weight: 600;
}
.step-label + h2 { margin-top: 8px; }

/* ── Übersicht /blog/ ─────────────────────────────────────── */
.blog-hero { max-width: calc(900px + 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--nav-h) + clamp(50px, 8vw, 100px)) var(--gutter) 10px; }
.blog-hero-badge { display: none; font-size: clamp(17px, 1.6vw, 21px); font-weight: 600; color: var(--brand); margin-bottom: 10px; }
.blog-hero h1 { font-size: clamp(42px, 6.4vw, 80px); line-height: 1; letter-spacing: -0.052em; }
.blog-hero p { margin-top: 18px; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; color: var(--muted); font-weight: 500; max-width: 34em; }
.blog-filters {
  max-width: calc(900px + 2 * var(--gutter)); margin: 30px auto 0; padding: 0 var(--gutter);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.filter-tag {
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink-2); font-size: 14px; font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}
.filter-tag:hover { background: var(--line-strong); }
.filter-tag.active { background: var(--ink); color: var(--bg); }
.blog-divider { display: none; }
.blog-grid { max-width: calc(900px + 2 * var(--gutter)); margin: 0 auto; padding: 30px var(--gutter) clamp(60px, 8vw, 100px); display: grid; gap: 14px; }
.blog-card {
  display: flex; gap: 24px; align-items: flex-start;
  padding: 26px 28px;
  border-radius: 24px;
  background: var(--card);
  color: inherit;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.blog-card:hover { text-decoration: none; }
.blog-card:hover .blog-card-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.blog-card-number { display: none; font-size: 40px; font-weight: 700; letter-spacing: -0.05em; color: var(--faint); line-height: 1; min-width: 56px; font-variant-numeric: tabular-nums; }
.blog-card-content { flex: 1; min-width: 0; }
.blog-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.blog-card-tag { padding: 4px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--link); font-size: 12px; font-weight: 600; }
.blog-card-tag.news { background: rgba(31, 157, 85, 0.12); color: var(--ok); }
.blog-card-date { font-size: 13px; color: var(--faint); }
.blog-card-title { font-size: 22px; line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); font-weight: 700; margin: 0; }
.blog-card-desc { margin-top: 6px; color: var(--muted); font-size: 16px; line-height: 1.5; }
.blog-card-arrow { color: var(--faint); font-size: 22px; transition: transform 0.3s var(--ease-out), color 0.2s; align-self: center; }
.blog-card:hover .blog-card-arrow { color: var(--link); transform: translateX(4px); }
/* Hervorgehobener Artikel: dunkle Karte mit eigenen, festen Farben,
   damit Text und Etikett in Hell und Dunkel lesbar bleiben */
.blog-card.featured { background: #1d1d1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.blog-card.featured .blog-card-title { color: #f5f5f7; font-size: clamp(24px, 3vw, 30px); }
.blog-card.featured .blog-card-desc { color: #d2d2d7; }
.blog-card.featured .blog-card-date { color: #a1a1a6; }
.blog-card.featured .blog-card-tag { background: rgba(255, 255, 255, 0.14); color: #e0e7ff; }
.blog-card.featured .blog-card-arrow { color: #a1a1a6; }
.blog-card.featured:hover .blog-card-arrow { color: #fff; }
.blog-cta { max-width: calc(900px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) clamp(70px, 9vw, 120px); }
.blog-cta-inner { border-radius: 28px; padding: clamp(28px, 5vw, 50px); text-align: center; background: var(--bg-alt); }
.blog-cta-inner h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.035em; margin: 0 0 10px; }
.blog-cta-inner p { color: var(--muted); margin: 0 auto 24px; max-width: 32em; }
@media (max-width: 640px) {
  .blog-card { flex-direction: column; gap: 6px; padding: 22px; }
  .blog-card-arrow { display: none; }
  .blog-card-number { font-size: 28px; }
}
.cta-box .cta-link { display: block; margin-top: 16px; color: #a5b4fc; font-weight: 600; font-size: 15px; }
.cta-box .cta-link:hover { color: #c7d2fe; }