/* Ratgeber / Blog – Übersicht und Einzelbeitrag */

/* ---------- Übersicht (breiter, größere Karten) ---------- */
.blog-overview{ max-width: 1320px; }
.blog-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 34px; }
.blog-card{
  background: var(--color-white); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft); overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.blog-card__media{ display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.blog-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.blog-card:hover .blog-card__media img{ transform: scale(1.04); }
.blog-card__body{ padding: 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card__title{ font-size: 21px; margin: 4px 0; line-height: 1.3; }
.blog-card__title a:hover{ color: var(--color-orange); }
.blog-card__excerpt{ font-size: 15.5px; color: var(--color-anthracite-soft); margin: 0; flex: 1; line-height: 1.65; }
.blog-card__meta{ display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--color-grey-text); margin-top: 10px; }
.blog-card__more{ color: var(--color-orange); font-weight: 600; }

/* ---------- Lesefortschrittsanzeige ---------- */
.reading-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 1100; pointer-events: none;
}
.reading-progress__bar{
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--color-orange), var(--color-green));
  transform: scaleX(0); transform-origin: left center;
  will-change: transform;
}

/* ---------- Einzelbeitrag (größere Inhaltsbreite) ---------- */
.container-reading{ max-width: 1140px; }
.post-hero{ padding: calc(var(--header-height) + 60px) 0 24px; }
.post-hero h1{ font-size: 44px; margin-top: 14px; line-height: 1.15; }
.post-meta{ display: flex; gap: 18px; font-size: 14px; color: var(--color-grey-text); }
.post-figure{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-medium); margin-bottom: 40px; }

.post-shell{ display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 52px; align-items: start; }
.post-main{ min-width: 0; }

/* Inhaltsverzeichnis */
.post-toc{
  position: sticky; top: calc(var(--header-height) + 24px); align-self: start;
  background: var(--color-white); border: 1px solid var(--color-grey-border);
  border-radius: var(--radius-md); padding: 22px 24px;
}
.post-toc__title{ font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-grey-text); margin: 0 0 14px; }
.post-toc ul{ display: flex; flex-direction: column; gap: 4px; }
.post-toc__item a{ display: block; font-size: 14px; color: var(--color-anthracite-soft); padding: 5px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); }
.post-toc__item a:hover{ color: var(--color-orange); }
.post-toc__item--h3 a{ padding-left: 22px; font-size: 13.5px; }
.post-toc__item a.is-active{ color: var(--color-orange-dark); border-left-color: var(--color-orange); background: rgba(222, 120, 20, 0.07); font-weight: 600; }

/* Audio-Wiedergabe */
.post-audio{
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-cream-dark); border-radius: var(--radius-md);
  padding: 18px 22px; margin-bottom: 32px;
}
.post-audio__label{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--color-green-dark); }
.post-audio audio{ width: 100%; }

/* Inhalt */
.post-content{ font-size: 18px; color: var(--color-anthracite-soft); line-height: 1.85; }
.post-content > *{ max-width: 760px; }
.post-content h2{ font-size: 29px; color: var(--color-anthracite); margin-top: 44px; scroll-margin-top: calc(var(--header-height) + 20px); }
.post-content h3{ font-size: 22px; color: var(--color-anthracite); margin-top: 32px; scroll-margin-top: calc(var(--header-height) + 20px); }
.post-content ul, .post-content ol{ padding-left: 22px; margin-bottom: 20px; max-width: 760px; }
.post-content li{ margin-bottom: 9px; list-style: disc; }
.post-content a{ color: var(--color-orange); text-decoration: underline; text-underline-offset: 2px; }
.post-content a:hover{ color: var(--color-orange-dark); }
.post-content img{ border-radius: var(--radius-md); margin: 28px 0; max-width: 100%; }
.post-content blockquote{ border-left: 3px solid var(--color-orange); padding-left: 20px; margin: 26px 0; color: var(--color-anthracite); font-style: italic; }
.post-lead{ font-size: 21px; color: var(--color-anthracite); font-weight: 500; line-height: 1.6; }
.post-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0; }
.post-back{ margin: 24px 0 80px; }
.post-back a{ color: var(--color-orange); font-weight: 600; }

/* Verwandte Beiträge */
.related-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

@media (max-width: 980px){
  .blog-grid{ grid-template-columns: 1fr; }
  .post-hero h1{ font-size: 32px; }
  .post-shell{ grid-template-columns: 1fr; gap: 28px; }
  .post-toc{ position: static; }
  .post-content > *{ max-width: none; }
  .post-content ul, .post-content ol{ max-width: none; }
  .related-grid{ grid-template-columns: 1fr; }
}