/* ═══════════════════════════════════════════════════════════════════════
   BLOG — öffentliche Styles für /blog, /de/blog und Beiträge/Custom-Pages.
   Basis ist feature.css (Tokens, Fonts, .wrap, Footer-Layout, .btn); diese
   Datei ergänzt nur das Blog-spezifische Layout. Artikel-Inhalte (Blöcke)
   liegen in cms-blocks.css — gemeinsam mit dem Editor-Canvas im Studio.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero der Übersicht ─────────────────────────────────────────────────── */
.blog-hero{padding:calc(var(--nav-h) + clamp(48px,8vh,88px)) 0 clamp(24px,4vh,44px)}
.blog-hero__label{
  font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--emerald);margin:0 0 14px;
}
.blog-hero h1{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.12;letter-spacing:-.015em;
  margin:0 0 16px;
}
.blog-hero__sub{font-size:clamp(1.02rem,1.6vw,1.15rem);color:var(--ink-2);max-width:56ch;margin:0}

/* ── Beitragsraster ─────────────────────────────────────────────────────── */
.blog-list{padding:clamp(16px,3vh,32px) 0 clamp(64px,9vh,110px)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.blog-grid{grid-template-columns:1fr}}

.blog-cat{
  display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--emerald);background:var(--emerald-bg);
  border:1px solid var(--emerald-edge);border-radius:999px;padding:3px 10px;
}
.blog-rt{font-family:var(--mono);font-size:12px;color:var(--ink-3)}

.blog-card{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius-lg);overflow:hidden;
  color:inherit;text-decoration:none;
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.blog-card:hover{border-color:#34343A;transform:translateY(-2px);
  box-shadow:0 18px 44px -26px rgba(0,0,0,.8);text-decoration:none}
.blog-card__img{aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.blog-card__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.blog-card:hover .blog-card__img img{transform:scale(1.035)}
.blog-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px}
.blog-card__meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.blog-card h2{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.28rem;line-height:1.28;letter-spacing:-.01em;margin:0;
}
.blog-card p{margin:0;color:var(--ink-2);font-size:.94rem;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.blog-empty{color:var(--ink-3);grid-column:1/-1;padding:40px 0;text-align:center}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.blog-pg{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.blog-pg a,.blog-pg__cur,.blog-pg__gap{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;font-family:var(--mono);font-size:13px;
  border:1px solid var(--hair);color:var(--ink-2);text-decoration:none;
}
.blog-pg a:hover{border-color:#34343A;color:var(--ink);text-decoration:none}
.blog-pg__cur{background:var(--emerald);border-color:var(--emerald);color:var(--emerald-ink);font-weight:600}
.blog-pg__gap{border:none;color:var(--ink-3)}

/* ── Artikel-Seite ──────────────────────────────────────────────────────── */
.blog-post{padding:calc(var(--nav-h) + clamp(40px,7vh,76px)) 0 clamp(64px,9vh,110px)}
.blog-post__wrap{max-width:760px;margin:0 auto}
.blog-fallback{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
  border:1px solid var(--hair);border-radius:var(--radius-md);
  background:var(--surface);padding:12px 16px;margin:0 0 22px;
}
.blog-post__h1{
  font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.14;letter-spacing:-.015em;
  margin:0 0 18px;
}
.blog-post__meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:0 0 30px;
}
.blog-post__meta .dot{opacity:.5}
.blog-post__hero{margin:0 0 38px}
.blog-post__hero img{width:100%;border-radius:var(--radius-lg);
  border:1px solid var(--hair);display:block}

/* Newsletter-CTA unter dem Beitrag */
.blog-cta{
  margin-top:56px;padding:34px 32px;background:var(--surface);
  border:1px solid var(--hair);border-radius:var(--radius-lg);text-align:center;
}
.blog-cta__kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--emerald);margin:0 0 10px}
.blog-cta h2{font-family:var(--serif);font-weight:400;color:var(--ink);
  font-size:1.5rem;margin:0 0 8px}
.blog-cta p{color:var(--ink-2);margin:0 0 18px;font-size:.96rem}
.blog-cta__form{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap}
.blog-cta__form input{
  flex:1;min-width:220px;background:var(--bg-2);border:1px solid var(--hair);
  border-radius:10px;color:var(--ink);font-family:var(--sans);font-size:.95rem;
  padding:12px 14px;outline:none;
}
.blog-cta__form input:focus{border-color:var(--emerald)}
.blog-cta__msg{font-family:var(--mono);font-size:12.5px;color:var(--emerald);
  min-height:1.4em;margin:12px 0 0}
.blog-cta__legal{font-size:.8rem;color:var(--ink-3);margin:6px 0 0}

/* Vorheriger/Nächster */
.blog-pn{display:flex;justify-content:space-between;gap:16px;margin-top:28px}
.blog-pn__item{
  display:flex;flex-direction:column;gap:4px;max-width:46%;
  border:1px solid var(--hair);border-radius:var(--radius-md);
  padding:14px 18px;text-decoration:none;color:var(--ink-2);
  transition:border-color .18s ease;
}
.blog-pn__item:hover{border-color:#34343A;text-decoration:none}
.blog-pn__item--next{text-align:right;margin-left:auto}
.blog-pn__lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.blog-pn__t{color:var(--ink);font-size:.95rem;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}