/* Freshlab Blog — nutzt Haupt-Site-Variablen aus /assets/style.css */

/* Ensure main content clears the fixed navbar (height = var(--nav-h, 72px)) */
body > main#main-content { padding-top: calc(var(--nav-h, 72px) + 0.5rem); }

/* When the book promo banner sits between nav and main, the banner already
   clears the fixed nav (margin-top) — main must not add the offset again. */
.book-strip + main#main-content { padding-top: 0.75rem; }

/* Blog: banner pins below the fixed navbar while scrolling (like the nav).
   overflow-x:hidden on html/body (main stylesheet) turns body into a clip
   container and disables position:sticky — clip clips without doing that. */
html, body { overflow-x: clip; }

/* Solid backdrop so scrolling content doesn't shine through the gradient;
   z-index below the nav (1000) and the mobile menu (999). */
.book-strip {
  position: sticky;
  top: var(--nav-h, 72px);
  z-index: 900;
  background-color: var(--bg-primary);
}
.book-strip:hover { background-color: var(--bg-card); }

/* ── Breadcrumbs ─────────────────────────── */
.breadcrumbs {
  font-size: 0.85rem;
  color: var(--text-secondary);
  padding: 1rem 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}
.breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.breadcrumbs a:hover { border-bottom-color: var(--accent); color: var(--text-primary); }
.breadcrumbs span[aria-current="page"] { color: var(--text-primary); font-weight: 500; }

/* ── Single Post ─────────────────────────── */
.blog-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  color: var(--text-primary);
}
.blog-post-header { margin-bottom: 2rem; }
.blog-post-header h1 {
  font-family: var(--font-display, var(--font-head));
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 0.75rem;
  color: var(--text-primary);
}
.blog-post-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.blog-lang { text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; color: var(--accent); }
/* Links auf die Sprachfassungen des Artikels. Der Sprachumschalter in der
   Navigation kann sie nicht liefern: er tauscht nur data-i18n-Texte, waehrend
   der Artikeltext aus Markdown kommt. Quelle ist das hreflang-Frontmatter. */
.blog-lang-alt { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; align-items: baseline; }
.blog-lang-alt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.blog-lang-alt a:hover { text-decoration-thickness: 2px; }
.blog-tags { margin-top: 0.75rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.blog-tag {
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-transform: lowercase;
}

.blog-post-body {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.blog-post-body h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.5rem;
  font-family: var(--font-display, var(--font-head));
  color: var(--text-primary);
}
.blog-post-body h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.2rem;
  color: var(--text-primary);
}
.blog-post-body p { margin: 0 0 1.1rem; color: var(--text-primary); }
.blog-post-body ul,
.blog-post-body ol { margin: 0 0 1.1rem 1.25rem; padding: 0; color: var(--text-primary); }
.blog-post-body li { margin: 0.35rem 0; }
.blog-post-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 0.25rem 1rem;
  margin: 1.25rem 0;
  color: var(--text-secondary);
  font-style: italic;
}
.blog-post-body pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1rem;
  border-radius: var(--radius, 6px);
  overflow-x: auto;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.blog-post-body code { font-family: "SFMono-Regular", ui-monospace, monospace; }
.blog-post-body :not(pre) > code {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.92em;
  color: var(--accent);
}
.blog-post-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius, 6px);
  margin: 1.25rem 0;
  border: 1px solid var(--border);
}
.blog-post-body a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim, currentColor);
  text-decoration: none;
  transition: color var(--transition), border-color var(--transition);
}
.blog-post-body a:hover { color: var(--accent-light); border-bottom-color: var(--accent-light); }
.blog-post-body hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.blog-table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
  border-radius: var(--radius, 6px);
  border: 1px solid var(--border);
}
.blog-post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.blog-post-body th,
.blog-post-body td {
  padding: 0.6rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.blog-post-body thead th {
  background: var(--bg-card);
  font-weight: 600;
  border-bottom: 2px solid var(--border);
}
.blog-post-body tbody tr:last-child td { border-bottom: none; }
.blog-post-body tbody tr:nth-child(even) td { background: rgba(255,255,255,.03); }

/* ── Post Footer / CTA ─────────────────── */
.blog-post-footer { margin-top: 3rem; }
.blog-cta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  border-radius: var(--radius, 8px);
  margin-bottom: 2rem;
  color: var(--text-primary);
}
.blog-cta h3 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--text-primary); }
.blog-cta p { color: var(--text-secondary); margin: 0 0 0.75rem; }
.blog-cta .cta-button {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius, 6px);
  background: var(--accent);
  color: var(--bg-primary);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition);
  box-shadow: 0 0 20px var(--accent-glow), 0 4px 15px rgba(0,0,0,.3);
}
.blog-cta .cta-button:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 0 35px var(--accent-glow), 0 6px 25px rgba(0,0,0,.4);
}

.blog-disclaimer {
  margin-top: 2rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  opacity: 0.85;
}

/* AI-transparency note: a quiet product proof, a touch more present than the legal disclaimer. */
.blog-ai-note {
  margin: 2rem 0 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-glow, rgba(39,170,225,0.06));
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Superseded banner on consolidated near-duplicates. */
.blog-superseded {
  margin: 0 0 1.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: rgba(39,170,225,0.08);
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.blog-superseded p { margin: 0; color: var(--text-secondary); }
.blog-superseded a { color: var(--accent); font-weight: 600; }
.blog-superseded a:hover { color: var(--accent-light); }

.blog-related { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.blog-related h3 { font-size: 1rem; margin: 0 0 0.75rem; color: var(--text-primary); }
.blog-related ul { list-style: none; padding: 0; margin: 0; }
.blog-related li { padding: 0.35rem 0; }
.blog-related a { color: var(--accent); text-decoration: none; }
.blog-related a:hover { color: var(--accent-light); }

/* ── Blog Index ─────────────────────────── */
.blog-index-header {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.5rem 1.5rem;
  text-align: center;
  color: var(--text-primary);
}
.blog-index-header h1 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display, var(--font-head));
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--text-primary);
}
.blog-index-sub {
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  font-size: 1rem;
}

.blog-lang-filter {
  display: inline-flex;
  gap: 0.4rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  background: var(--bg-card);
}
.lang-filter {
  padding: 0.4rem 0.9rem;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  transition: all var(--transition);
}
.lang-filter:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }
.lang-filter.active {
  background: var(--accent);
  color: var(--bg-primary);
}

.blog-list {
  list-style: none;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 1.5rem 4rem;
}
.blog-list-item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.blog-list-item article { display: grid; gap: 0.5rem; }
.blog-list-item time { font-size: 0.85rem; color: var(--text-muted); }
.blog-list-item h2 {
  margin: 0.2rem 0 0.3rem;
  font-size: 1.35rem;
  font-family: var(--font-display, var(--font-head));
}
.blog-list-item h2 a {
  text-decoration: none;
  color: var(--text-primary);
  transition: color var(--transition);
}
.blog-list-item h2 a:hover { color: var(--accent); }
.blog-list-item p { margin: 0; color: var(--text-secondary); }
.blog-lang-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--accent);
  vertical-align: 0.1em;
}

.blog-empty {
  max-width: 600px;
  margin: 4rem auto;
  text-align: center;
  color: var(--text-secondary);
}
.blog-empty a { color: var(--accent); }

/* ── Draft-Banner (Preview-Mode) ───────── */
.draft-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--accent);
  color: var(--bg-primary);
  padding: 0.75rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.draft-banner strong { letter-spacing: 0.08em; text-transform: uppercase; }

/* ── FAQ section (from faq: frontmatter) ── */
.blog-faq { margin: 2.5rem 0 1rem; }
.blog-faq > h2 { margin-bottom: 1rem; }
.blog-faq-item {
  border: 1px solid var(--border, rgba(39,170,225,0.15));
  border-radius: 12px;
  margin-bottom: 0.75rem;
  background: var(--bg-card, rgba(255,255,255,0.02));
  overflow: hidden;
}
.blog-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.15rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.blog-faq-item summary::-webkit-details-marker { display: none; }
.blog-faq-item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); }
.blog-faq-item[open] summary::after { content: "\2212"; }
.blog-faq-item p { padding: 0 1.15rem 1.15rem; margin: 0; color: var(--text-secondary); }

/* ── Language switcher in nav (blog) ───── */
/* Uses same .lang-switcher / .lang-btn from assets/style.css — no override needed */

/* ── Teilen-Leiste ──────────────────────
   Optisch an .blog-tag angelehnt (gleiche Pille, gleicher Rahmen), damit die
   Leiste zwischen Artikelende und CTA nicht als Fremdkoerper wirkt. Buttons
   und Links teilen sich eine Klasse, weil "Kopieren" und "Teilen" per JS als
   <button> nachwachsen und identisch aussehen muessen. */
.blog-share {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
}
.blog-share-head {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.blog-share-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.blog-share-btn {
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.blog-share-btn:hover,
.blog-share-btn:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}
.blog-share-btn.is-done { border-color: var(--accent); color: var(--accent); }

@media (max-width: 480px) {
  .blog-share { flex-direction: column; align-items: flex-start; }
}