/* ============================================================
   BLOG.CSS — erweitert style.css um Blog-Hub & Artikel-Layout
   Lädt NACH style.css. Tokens werden hier defensiv erneut deklariert
   (identische Werte), damit die Blog-Seiten auch dann korrekt aussehen,
   falls style.css auf einer Seite fehlt oder abweicht.
   ============================================================ */
:root{
  --c-primary: #0099db;
  --c-primary-dark: #0077ad;
  --c-primary-tint: #E5F5FC;
  --c-ink: #0B1220;
  --c-paper: #F6F8FA;
  --c-paper-alt: #ECEFF3;
  --c-white: #FFFFFF;
  --c-green: #22C55E;
  --c-amber: #F5A524;
  --c-border: #E2E8F0;
  --c-text-soft: #4B5A6A;
  --f-display: "Space Grotesk", "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(11,18,32,0.06), 0 1px 1px rgba(11,18,32,0.04);
  --shadow-md: 0 8px 24px rgba(11,18,32,0.08);
  --shadow-lg: 0 20px 48px rgba(11,18,32,0.14);
  --ease: cubic-bezier(.22,.9,.35,1);
}

/* ============================================================
   BLOG-HUB
   ============================================================ */
.blog-hero{ padding-block: 2.5rem 3rem; }
.blog-hero h1{ margin-block: .75rem 1rem; }

.filter-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.filter-chip{
  padding:.5rem 1rem; border-radius:999px; border:1.5px solid var(--c-border);
  background:#fff; font-size:.85rem; font-weight:600; color:var(--c-text-soft);
  cursor:pointer; transition:all .18s var(--ease);
}
.filter-chip:hover{ border-color:var(--c-primary); color:var(--c-primary-dark); }
.filter-chip.is-active{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }

/* Featured Post */
.featured-post{
  display:grid; grid-template-columns:1fr; gap:0; border-radius:var(--radius);
  overflow:hidden; background:var(--c-ink); color:#fff; margin-bottom:3rem;
  box-shadow:var(--shadow-lg);
}
@media (min-width:860px){ .featured-post{ grid-template-columns:1.1fr .9fr; } }
.featured-post-media{
  aspect-ratio:16/10; background:linear-gradient(135deg, #0F1B2B 0%, #16324A 60%, #0099db 160%);
  position:relative; display:flex; align-items:flex-end; padding:1.5rem;
}
.featured-post-media .tag{ position:relative; }
.featured-post-body{ padding:2rem clamp(1.5rem,3vw,2.5rem); display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.featured-post-body h2{ color:#fff; font-size:clamp(1.4rem,2vw + 1rem,2rem); }
.featured-post-body p{ color:#B7C3D0; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; font-size:.8rem; color:#8FB4C9; }
.post-meta svg.icon{ width:14px; height:14px; margin-right:3px; }
.post-meta-light{ color:var(--c-text-soft); }

.tag{
  display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; padding:.35rem .7rem; border-radius:999px;
  background:rgba(0,153,219,.16); color:#7FD4F5;
}
.tag--light{ background:var(--c-primary-tint); color:var(--c-primary-dark); }

/* Article Grid */
.blog-grid{ display:grid; gap:1.75rem; grid-template-columns:1fr; margin-bottom:3rem; }
@media (min-width:640px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:960px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }

.post-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--c-border);
  border-radius:var(--radius); overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.post-card-media{
  aspect-ratio:16/10; background:linear-gradient(135deg, var(--c-primary-tint), #fff 70%);
  position:relative; display:flex; align-items:flex-start; padding:1rem;
}
.post-card-media::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--c-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size:22px 22px; opacity:.35;
}
.post-card-body{ padding:1.5rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.post-card-body h3{ font-size:1.1rem; line-height:1.3; }
.post-card-body h3 a{ color:var(--c-ink); }
.post-card-body h3 a:hover{ color:var(--c-primary-dark); }
.post-card-body p{ color:var(--c-text-soft); font-size:.9rem; flex:1; }

.pagination{ display:flex; justify-content:center; align-items:center; gap:.5rem; margin-bottom:3rem; }
.page-btn{
  width:40px; height:40px; display:grid; place-items:center; border-radius:var(--radius-sm);
  border:1.5px solid var(--c-border); font-weight:600; font-size:.85rem; color:var(--c-text-soft);
}
.page-btn.is-active{ background:var(--c-ink); border-color:var(--c-ink); color:#fff; }
.page-btn:hover:not(.is-active){ border-color:var(--c-primary); color:var(--c-primary-dark); }

/* ============================================================
   ARTIKEL-LAYOUT (LP für einzelne Blogposts)
   ============================================================ */
.article-header{ padding-block:2rem 1.5rem; }
.article-header .tag{ margin-bottom:1rem; }
.article-header h1{ font-size:clamp(1.9rem,3vw + 1rem,3rem); margin-bottom:1rem; }
.article-lede{ font-size:1.15rem; color:var(--c-text-soft); max-width:70ch; margin-bottom:1.5rem; }

.article-meta-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; padding-block:1.25rem;
  border-top:1px solid var(--c-border); border-bottom:1px solid var(--c-border);
}
.author-chip{ display:flex; align-items:center; gap:.65rem; }
.author-avatar{
  width:42px; height:42px; border-radius:50%; background:var(--c-ink); color:#fff;
  display:grid; place-items:center; font-family:var(--f-display); font-weight:700; font-size:.95rem; flex:none;
}
.author-chip strong{ display:block; font-size:.88rem; }
.author-chip span{ display:block; font-size:.78rem; color:var(--c-text-soft); }
.article-meta-row .meta-sep{ color:var(--c-border); }
.article-meta-row .meta-item{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--c-text-soft); font-weight:600; }
.article-meta-row .meta-item svg.icon{ width:15px; height:15px; }

.article-feature-media{
  aspect-ratio:16/8; border-radius:var(--radius); margin-block:2rem;
  background:linear-gradient(135deg, #0F1B2B 0%, #16324A 55%, #0099db 150%);
  position:relative; overflow:hidden;
}
.article-feature-media::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:34px 34px;
}
figure.img-caption{ margin-block:2rem; }
figure.img-caption figcaption{ font-size:.8rem; color:var(--c-text-soft); margin-top:.6rem; text-align:center; }

/* Zweispaltiges Artikel-Layout mit sticky Inhaltsverzeichnis */
.article-layout{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:start; padding-block:1rem 4rem; }
@media (min-width:1080px){ .article-layout{ grid-template-columns:220px 1fr; } }

.toc{ position:static; }
@media (min-width:1080px){ .toc{ position:sticky; top:96px; } }
.toc-title{ font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c-text-soft); margin-bottom:.85rem; }
.toc-list{ list-style:none; margin:0; padding:0; border-left:2px solid var(--c-border); }
.toc-list li{ margin:0; }
.toc-list a{
  display:block; padding:.4rem 0 .4rem 1rem; margin-left:-2px; border-left:2px solid transparent;
  font-size:.85rem; color:var(--c-text-soft); transition:color .15s, border-color .15s;
}
.toc-list a:hover{ color:var(--c-ink); }
.toc-list a.is-active{ color:var(--c-primary-dark); border-left-color:var(--c-primary); font-weight:600; }
.toc-mobile-toggle{ display:flex; width:100%; justify-content:space-between; align-items:center; padding:.9rem 1.1rem; background:var(--c-paper-alt); border-radius:var(--radius-sm); font-weight:600; font-size:.9rem; margin-bottom:1rem; border:none; }
.toc-mobile-toggle svg.icon{ transition:transform .2s var(--ease); }
.toc-mobile-toggle[aria-expanded="true"] svg.icon{ transform:rotate(180deg); }
@media (min-width:1080px){ .toc-mobile-toggle{ display:none; } }
.toc-wrap{ display:none; }
.toc-wrap.is-open{ display:block; }
@media (min-width:1080px){ .toc-wrap{ display:block; } }

/* Reading progress bar */
.reading-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:var(--c-primary); z-index:80; transition:width .1s linear; }

/* Artikel-Typografie */
.prose{ max-width:72ch; font-size:1.05rem; line-height:1.75; color:#243244; }
.prose h2{ font-size:1.5rem; margin-block:2.5rem .9rem; scroll-margin-top:96px; }
.prose h3{ font-size:1.2rem; margin-block:2rem .7rem; scroll-margin-top:96px; }
.prose p{ margin-bottom:1.25rem; }
.prose ul, .prose ol{ margin:0 0 1.25rem 1.3rem; }
.prose li{ margin-bottom:.5rem; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose a{ color:var(--c-primary-dark); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.prose strong{ color:var(--c-ink); }
.prose blockquote{
  border-left:3px solid var(--c-primary); background:var(--c-primary-tint); padding:1.1rem 1.4rem;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:1.05rem; font-style:italic; color:var(--c-ink);
  margin:2rem 0;
}
.prose code{ font-family:var(--f-mono); font-size:.85em; background:var(--c-paper-alt); padding:.15em .4em; border-radius:5px; }
.prose hr{ border:none; border-top:1px solid var(--c-border); margin:2.5rem 0; }

.key-takeaway{
  background:var(--c-ink); color:#fff; border-radius:var(--radius); padding:1.5rem 1.75rem; margin:2rem 0;
}
.key-takeaway h4{ font-family:var(--f-mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:#7FD4F5; margin-bottom:.6rem; }
.key-takeaway p{ color:#D7E2EC; margin:0; }
.key-takeaway ul{ margin:0; padding-left:1.2rem; }
.key-takeaway li{ color:#D7E2EC; margin-bottom:.4rem; }

.inline-cta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem;
  background:var(--c-paper-alt); border:1px solid var(--c-border); border-radius:var(--radius);
  padding:1.5rem 1.75rem; margin:2.5rem 0;
}
.inline-cta h4{ font-size:1.05rem; margin-bottom:.3rem; }
.inline-cta p{ color:var(--c-text-soft); font-size:.9rem; margin:0; }

/* Autoren-Box */
.author-box{
  display:flex; gap:1.25rem; align-items:flex-start; background:var(--c-paper-alt); border-radius:var(--radius);
  padding:1.75rem; margin-block:3rem;
}
.author-box .author-avatar{ width:56px; height:56px; font-size:1.1rem; }
.author-box h4{ font-size:1rem; margin-bottom:.35rem; }
.author-box p{ color:var(--c-text-soft); font-size:.9rem; margin-bottom:.75rem; }
.author-box .author-links{ display:flex; gap:.9rem; font-size:.82rem; }
.author-box .author-links a{ color:var(--c-primary-dark); font-weight:600; }

/* Share Buttons */
.share-row{ display:flex; align-items:center; gap:.75rem; margin-block:2rem; }
.share-row span{ font-size:.8rem; font-weight:600; color:var(--c-text-soft); }
.share-btn{
  width:38px; height:38px; border-radius:50%; border:1.5px solid var(--c-border); display:grid; place-items:center;
  color:var(--c-text-soft); transition:all .18s var(--ease);
}
.share-btn:hover{ border-color:var(--c-primary); color:var(--c-primary-dark); }
.share-btn svg.icon{ width:16px; height:16px; }

/* Verwandte Artikel */
.related-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:700px){ .related-grid{ grid-template-columns:repeat(3,1fr); } }

/* FAQ (nutzt gleiche .faq-item Klassen wie Hauptseite, hier Basis-Fallback falls isoliert eingebunden) */
.faq-item{ border-bottom:1px solid var(--c-border); }
.faq-q{ width:100%; text-align:left; background:none; border:none; padding:1.2rem 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; font-weight:600; font-size:1rem; color:var(--c-ink); }
.faq-q .plus svg.icon{ width:18px; height:18px; color:var(--c-primary); transition:transform .2s var(--ease); }
.faq-item.is-open .faq-q .plus svg.icon{ transform:rotate(180deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .28s var(--ease); }
.faq-a p{ color:var(--c-text-soft); padding-bottom:1.2rem; max-width:65ch; }

svg.icon{ width:1.15em; height:1.15em; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-0.22em; flex-shrink:0; display:inline-block; }