/* ==========================================================================
   blog-artikel.css — geladen zusätzlich zu ../style.css auf jeder
   Blogartikel-Seite. Nutzt dieselben Tokens wie der Rest der Seite
   (--ink, --green-dark, --green-light, --port-*), keine eigenen Farben.
   ========================================================================== */

/* ===== Blog-Nav: schlanke, feste Leiste — Zurück-Link, zentriertes Logo,
   Kontakt + Sprache rechts. Bewusst einfacher als die Pill-Journey-Nav
   der Startseite, da hier nichts animiert werden muss. ===== */
.blog-nav{
  position:fixed; top:0; left:0; width:100%; z-index:100;
  background:rgba(249,253,250,0.9); backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--hairline);
}
.blog-nav-inner{
  max-width:1240px; margin:0 auto; padding:0 28px; height:58px;
  display:flex; align-items:center; justify-content:space-between; position:relative;
}
.blog-nav-back{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Inter', sans-serif; font-size:14px; color:var(--port-ink-soft);
  text-decoration:none; transition:color .2s, transform .15s;
}
.blog-nav-back svg{ stroke:currentColor; transition:transform .2s; }
.blog-nav-back:hover{ color:var(--green-dark); }
.blog-nav-back:hover svg{ transform:translateX(-3px); }
.blog-nav-logo{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:'Inter', sans-serif; font-weight:600; font-size:15px;
  color:var(--ink); text-decoration:none;
}
.blog-nav-right{ display:flex; align-items:center; gap:18px; }
.blog-nav-contact{
  font-family:'Inter', sans-serif; font-size:14px; color:var(--port-ink-soft);
  text-decoration:none; transition:color .2s;
}
.blog-nav-contact:hover{ color:var(--green-dark); }
.blog-nav-spacer{ height:58px; }
@media(max-width:600px){
  .blog-nav-logo{ display:none; }
  .blog-nav-back span{ display:none; }
  .blog-nav-contact{ display:none; }
}

/* ===== BLOGARTIKEL — schlichte, textfokussierte Lesespalte ===== */

.blog-article{
  max-width:860px;
  margin:0 auto;
  padding:64px 24px 0;
}

/* --- Header --- */
.ba-header{margin-bottom:48px}
.ba-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:'Inter', sans-serif;font-size:12px;color:var(--port-ink-muted);
  letter-spacing:.04em;margin-bottom:24px;
}
.ba-category{color:var(--port-green-mid);font-weight:600}
.ba-dot{opacity:.5}
.ba-title{
  font-size:clamp(34px,5vw,52px);
  line-height:1.12;letter-spacing:-.01em;font-weight:700;
  color:var(--ink);margin-bottom:24px;
}
.ba-lead{
  font-size:21px;line-height:1.6;color:var(--port-ink-soft);
  font-weight:400;
}

/* --- Titelbild --- */
.ba-hero-image{margin:0 0 48px}
.ba-hero-image img{
  width:100%;border-radius:16px;display:block;
  background:var(--port-green-light);
}
.ba-hero-image figcaption,
.ba-inline-image figcaption{
  font-family:'Inter', sans-serif;font-size:12px;color:var(--port-ink-muted);
  margin-top:10px;text-align:center;
}

/* --- Fließtext --- */
.ba-body{font-size:18px;line-height:1.75;color:var(--port-ink-soft)}
.ba-body > * + *{margin-top:24px}
.ba-body p{color:var(--port-ink-soft)}
.ba-body strong{color:var(--ink);font-weight:600}
.ba-body a{color:var(--port-green-mid);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s}
.ba-body a:hover{color:var(--port-green-dark)}

.ba-body h2{
  font-size:28px;line-height:1.25;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-top:48px;
}
.ba-body h3{
  font-size:21px;line-height:1.3;font-weight:600;color:var(--ink);
  margin-top:36px;
}

/* Zitat / Key-Insight */
.ba-body blockquote{
  margin:40px 0;padding:24px 28px;
  border-left:3px solid var(--port-green-mid);
  background:var(--port-green-light);
  border-radius:0 14px 14px 0;
  font-size:20px;line-height:1.55;color:var(--port-green-dark);
  font-weight:400;font-style:italic;
}

/* Listen */
.ba-body ul,.ba-body ol{padding-left:24px}
.ba-body li{margin-top:10px;color:var(--port-ink-soft)}
.ba-body li::marker{color:var(--port-green-mid)}

/* Bild im Text */
.ba-inline-image{margin:40px 0}
.ba-inline-image img{
  width:100%;border-radius:14px;display:block;
  background:var(--port-green-light);
}

/* --- Autor-Signatur --- */
.ba-author{
  display:flex;align-items:center;gap:16px;
  margin-top:64px;padding-top:32px;
  border-top:1px solid var(--hairline);
}
.ba-author-img{
  width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid var(--green-light);
}
.ba-author div{display:flex;flex-direction:column;gap:2px}
.ba-author-name{font-family:'Inter', sans-serif;font-weight:600;font-size:14px;color:var(--ink)}
.ba-author-role{font-size:13px;color:var(--port-ink-muted)}

/* ===== WEITERE ARTIKEL ===== */
.ba-more{max-width:1240px;margin:80px auto 0;padding:0 56px 96px}
.ba-more-heading{
  font-size:24px;font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin-bottom:24px;
}
.ba-more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .ba-more{padding:0 32px 80px}
  .ba-more-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .blog-article{padding:40px 24px 0}
  .ba-header{margin-bottom:36px}
  .ba-lead{font-size:18px}
  .ba-body{font-size:16px}
  .ba-body h2{font-size:24px;margin-top:36px}
  .ba-body h3{font-size:19px}
  .ba-body blockquote{font-size:18px;padding:20px 22px}
  .ba-more{padding:0 20px 64px}
  .ba-more-grid{grid-template-columns:1fr}
}