/* =========================================================
   AURESICS — Blog (Übersicht + Artikel)
   Lädt nach auresics-showcase.css und auresics-site.css.
   Generierte Seiten: scripts/site/build_blog.py
   ========================================================= */

/* ---------- Aktiver Nav-Punkt (Akzent nur für aktive Navigation) ---------- */
.nav-links a.is-active{ color:var(--accent-strong); }

/* ---------- Übersicht ---------- */
.blog-hero .s-head{ margin-bottom:44px; }
.blog-hero .s-head h1{ font-size:clamp(28px,4vw,42px); font-weight:600; letter-spacing:-.025em; margin:14px 0 0; line-height:1.08; }

.blog-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:980px; margin:0 auto; }
@media(max-width:760px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{ display:flex; flex-direction:column; padding:26px 24px; color:inherit; }
@media (prefers-reduced-motion: no-preference){
  .blog-card{ transition:transform .25s ease, border-color .25s ease; }
}
.blog-card:hover{ transform:translateY(-4px); border-color:rgb(255 255 255 / .14); }
.blog-card h2{ font-size:19px; font-weight:600; letter-spacing:-.015em; line-height:1.3; margin:12px 0 0; }
.blog-card p{ font-size:14px; color:var(--fg-muted); line-height:1.6; margin:10px 0 0; }
.blog-card .blog-more{ display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:16px;
  font-size:13px; font-weight:600; color:var(--accent-strong); }
.blog-card .blog-more svg{ width:13px; height:13px; }

.blog-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--fg-dim); }
.blog-tag{ background:rgb(255 255 255 / .05); border:1px solid rgb(255 255 255 / .08); color:var(--fg-muted); }
.blog-read{ color:var(--fg-dim); }

/* ---------- Artikel ---------- */
.blog-article{ max-width:720px; margin:0 auto; padding:48px 0 32px; }
.blog-article-head{ margin-bottom:36px; }
.blog-back{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--fg-dim); margin-bottom:26px; }
.blog-back:hover{ color:var(--fg); }
.blog-back svg{ width:13px; height:13px; transform:rotate(180deg); }
.blog-article-head h1{ font-size:clamp(28px,4.4vw,40px); font-weight:600; letter-spacing:-.025em;
  line-height:1.12; margin:14px 0 0; }
.blog-lead{ font-size:17px; color:var(--fg-muted); line-height:1.65; margin:16px 0 0; }

/* ---------- Lese-Typografie ---------- */
.prose{ font-size:16px; line-height:1.75; color:#c6ccd6; }
.prose p{ margin:0 0 20px; }
.prose h2{ font-size:23px; font-weight:600; letter-spacing:-.02em; color:var(--fg); margin:44px 0 14px; line-height:1.25; }
.prose h3{ font-size:18px; font-weight:600; color:var(--fg); margin:32px 0 10px; }
.prose strong{ color:var(--fg); font-weight:600; }
.prose a{ color:var(--accent-strong); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--accent-line); }
.prose a:hover{ text-decoration-color:var(--accent-strong); }
.prose ul, .prose ol{ margin:0 0 20px; padding-left:24px; }
.prose li{ margin-bottom:8px; }
.prose li::marker{ color:var(--fg-dim); }

.prose blockquote{ margin:28px 0; padding:4px 0 4px 20px; border-left:2px solid var(--accent-line); }
.prose blockquote p{ margin:0; font-size:16.5px; color:var(--fg); font-weight:500; line-height:1.6; }
.prose blockquote p + p{ margin-top:8px; }

.prose code{ font-family:var(--font-mono); font-size:.88em; background:rgb(255 255 255 / .06);
  border:1px solid rgb(255 255 255 / .07); border-radius:6px; padding:1px 6px; }
.prose pre{ background:var(--bg-elev); border:1px solid var(--border-soft); border-radius:var(--r-md);
  padding:16px 18px; overflow-x:auto; margin:0 0 20px; }
.prose pre code{ background:none; border:none; padding:0; font-size:13.5px; line-height:1.6; }

.prose table{ width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; line-height:1.5; }
.prose thead th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-dim);
  font-weight:600; text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); }
.prose tbody td{ padding:10px 12px; border-bottom:1px solid var(--border-soft); color:#c6ccd6; }
.prose tbody tr:last-child td{ border-bottom:none; }
.prose tbody td:first-child{ color:var(--fg); font-weight:500; }
@media(max-width:560px){
  .prose table{ display:block; overflow-x:auto; }
}

/* ---------- Disclaimer & Fuß-Navigation ---------- */
.blog-disclaimer{ margin-top:44px; padding:16px 18px; border:1px solid var(--border-soft);
  border-radius:var(--r-md); background:rgb(255 255 255 / .025); font-size:13px; line-height:1.6;
  color:var(--fg-dim); }
.blog-disclaimer strong{ color:var(--fg-muted); }
.blog-foot-nav{ margin-top:28px; }