/* ============================================================
   blog.css — Blog-Übersicht (Karten) und Artikel-Leselayout
   baut auf den Variablen aus style.css auf
   ============================================================ */

/* ---------- Übersicht: Intro ---------- */
.blog-intro{padding:72px 0 8px}
.blog-intro h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5vw,50px);line-height:1.12;letter-spacing:-.012em;max-width:16em;
}
.blog-intro h1 em{font-style:italic;color:var(--gold)}
.blog-intro p{color:rgba(242,232,216,.72);max-width:34em;margin-top:16px;font-size:17px}

/* ---------- Übersicht: Karten-Raster ---------- */
.blog-list-section{padding:40px 0 104px}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.blog-grid{grid-template-columns:1fr}}

.post-card{
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);
  padding:28px 26px;text-decoration:none;color:inherit;position:relative;
  transition:border-color .15s,transform .15s;
}
.post-card::before{
  content:"";position:absolute;top:-2px;left:-2px;width:14px;height:14px;background:var(--terracotta);
}
.post-card:nth-child(3n+2)::before{background:var(--gold)}
.post-card:nth-child(3n+3)::before{background:var(--sage)}
.post-card:hover{border-color:var(--oak);transform:translateY(-2px)}
.post-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.post-cat{
  font-family:var(--px);font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracotta);margin-bottom:14px;
}
.post-card h2{
  font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;
  letter-spacing:-.01em;margin-bottom:12px;
}
.post-excerpt{color:rgba(242,232,216,.68);font-size:15px;line-height:1.6;flex:1}
.post-meta{
  font-family:var(--mono);font-size:11.5px;color:var(--oak);margin-top:20px;
  display:flex;gap:10px;align-items:center;
}
.post-meta .sep{opacity:.5}
.post-more{
  font-family:var(--px);font-size:9px;letter-spacing:.06em;color:var(--gold);margin-top:18px;
}

.blog-empty{
  font-family:var(--mono);font-size:14px;color:var(--oak);
  border:1px dashed var(--line);padding:40px;text-align:center;grid-column:1 / -1;
}

/* ---------- Artikel: Leselayout ---------- */
.article-head{padding:64px 0 8px}
.article-back{
  font-family:var(--mono);font-size:13px;color:rgba(242,232,216,.6);
  text-decoration:none;display:inline-block;margin-bottom:28px;transition:color .15s;
}
.article-back:hover{color:var(--gold)}
.article-cat{
  font-family:var(--px);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--terracotta);display:block;margin-bottom:18px;
}
.article-head h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,5vw,52px);line-height:1.12;letter-spacing:-.012em;max-width:16em;
}
.article-head h1 em{font-style:italic;color:var(--gold)}
.article-meta{
  font-family:var(--mono);font-size:12.5px;color:var(--oak);margin-top:20px;
  display:flex;gap:10px;align-items:center;
}
.article-meta .sep{opacity:.5}

/* Lesespalte */
.article{max-width:720px;margin:0 auto;padding:24px 0 96px}
.article > *{max-width:680px}
.article p{font-size:17.5px;line-height:1.75;color:rgba(242,232,216,.86);margin:0 0 22px}
.article h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.4vw,32px);
  line-height:1.2;letter-spacing:-.01em;margin:46px 0 16px;
}
.article h3{
  font-family:var(--body);font-weight:600;font-size:20px;margin:32px 0 12px;color:var(--parchment);
}
.article a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.article a:hover{color:var(--terracotta)}
.article strong{color:var(--parchment);font-weight:600}
.article em{font-style:italic}
.article ul,.article ol{margin:0 0 22px 1.2em;color:rgba(242,232,216,.86)}
.article li{font-size:17px;line-height:1.7;margin-bottom:10px}
.article blockquote{
  margin:28px 0;padding:18px 22px;background:var(--card);border-left:3px solid var(--terracotta);
  font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--parchment);
}
.article hr{border:none;border-top:1px solid var(--line);margin:40px 0}
.article .lede{font-size:20px;line-height:1.6;color:rgba(242,232,216,.78)}

/* Inline-CTA-Box im Artikel */
.article-cta{
  margin:44px 0 8px;padding:28px 26px;border:1px solid var(--line);
  background:radial-gradient(ellipse 80% 120% at 0% 0%,rgba(212,130,90,.10),transparent 60%),var(--card);
}
.article-cta h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:0 0 10px;color:var(--parchment)}
.article-cta p{font-size:15.5px;margin:0 0 18px;color:rgba(242,232,216,.7)}
.article-cta .btn{margin-right:10px}

/* Tags am Artikelende */
.article-foot{max-width:680px;margin:8px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.article-foot .back-link{font-family:var(--px);font-size:9px;letter-spacing:.06em;color:var(--gold);text-decoration:none}
.article-foot .back-link:hover{color:var(--terracotta)}