/* =========================================
   Blog – Intiqore (rounded, outline, open)
   Abhängig von layout.css
   ========================================= */

   .blog-page {
    --accent: var(--brand);
    --panel:  var(--surface);
    --line:   var(--border);
    --ease-out: cubic-bezier(.16,1,.3,1);
  
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-xxl: 30px;
  }
  
  /* Kompakte Sektionen (außen), innen im Text mehr Luft */
  .blog-page .section {
    padding-block: clamp(28px, 2vw, 72px);
  }
  
  /* Header / Typo */
  
  .blog-page .headline {
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: .1px;
  }
  
  .blog-page .h2 {
    font-size: clamp(2rem, 4.6vw, 2.7rem);
  }
  
  .blog-page .h3 {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  }
  
  .blog-page .sub {
    color: var(--muted);
    max-width: 70ch;
  }
  
  /* Meta */
  
  .blog-page .post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
    font-size: 0.9rem;
  }
  
  /* Optional Hero */
  
  .blog-page .hero-media {
    border-radius: var(--radius-xxl);
    border: 1px solid color-mix(in oklab, var(--line) 70%, var(--accent) 30%);
    overflow: clip;
    background:
      radial-gradient(560px 240px at 12% 8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
      linear-gradient(180deg, color-mix(in oklab, var(--panel) 98%, #000 2%), transparent);
  }
  
  .blog-page .hero-media img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  /* Reading Area – mehr Abstand & bessere Lesbarkeit */
  
  .blog-page .reading {
    max-width: 74ch;
    line-height: 1.7;              /* mehr Zeilenhöhe */
    font-size: 1rem;
  }
  
  .blog-page .reading p {
    margin: 0 0 16px;              /* mehr Abstand nach unten */
  }
  
  .blog-page .reading strong {
    font-weight: 700;
  }
  
  .blog-page .reading em {
    opacity: .97;
  }
  
  /* Überschriften im Text mit klaren Abständen */
  
  .blog-page .reading h2,
  .blog-page .reading .h2 {
    margin: 24px 0 10px;
    font-size: clamp(1.5rem, 2.4vw, 1.8rem);
  }
  
  .blog-page .reading h3,
  .blog-page .reading .h3 {
    margin: 20px 0 8px;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
  }
  
  /* Listen mit mehr Luft */
  
  .blog-page .reading ul,
  .blog-page .reading ol {
    margin: 10px 0 16px 0;
    padding-left: 1.2rem;
  }
  
  .blog-page .reading li {
    margin: 4px 0;
  }
  
  /* Key points */
  
  .blog-page .key-points {
    list-style: none;
    padding: 0;
    margin: 12px 0 18px;
    display: grid;
    gap: 8px;
  }
  
  .blog-page .key-points li {
    position: relative;
    padding-left: 26px;
  }
  
  .blog-page .key-points li::before {
    content: "•";
    position: absolute;
    left: 6px;
    top: 0;
    font-weight: 900;
    color: color-mix(in oklab, var(--accent) 85%, #fff 15%);
  }
  
  /* Pullquote – etwas mehr Abstand & eigener Block */
  
  .blog-page .pullquote {
    margin: 20px 0;
    padding: 10px 0 10px 16px;
    border-left: 4px solid color-mix(in oklab, var(--accent) 70%, #fff 30%);
  }
  
  .blog-page .pullquote q {
    display: block;
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    line-height: 1.7;
    quotes: "„" "“" "‚" "‘";
    position: relative;
    padding-right: 10px;
  }
  
  .blog-page .pullquote q::before {
    content: open-quote;
    position: absolute;
    left: -16px;
    top: -6px;
    opacity: .18;
    font-size: 1.4em;
  }
  
  .blog-page .pullquote q::after {
    content: close-quote;
    position: absolute;
    right: -6px;
    bottom: -6px;
    opacity: .18;
    font-size: 1.2em;
  }
  
  .blog-page .pullquote figcaption {
    margin-top: 6px;
  }
  
  /* Divider */
  
  .blog-page .divider {
    height: 1px;
    border: 0;
    margin: 18px 0;
    background: linear-gradient(
      90deg,
      transparent,
      color-mix(in oklab, var(--line) 80%, var(--accent) 20%),
      transparent
    );
  }
  
  /* End-Note etwas Abstand */
  
  .blog-page .end-note {
    margin-top: 4px;
  }
  
  /* Stat band (leicht, outline-ähnlich) */
  
  .blog-page .stat-band {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border: 1px solid color-mix(in oklab, var(--line) 65%, var(--accent) 35%);
    border-radius: var(--radius-xxl);
    padding: 14px;
    margin: 16px 0 20px;
    background:
      radial-gradient(420px 180px at 10% 8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
      linear-gradient(180deg, color-mix(in oklab, var(--panel) 99%, #000 1%), transparent);
  }
  
  @media (min-width: 720px) {
    .blog-page .stat-band {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  
  .blog-page .stat {
    text-align: center;
  }
  
  .blog-page .stat__value {
    font-size: clamp(1.3rem, 2.8vw, 1.6rem);
    font-weight: 900;
  }
  
  .blog-page .stat__label {
    color: var(--muted);
  }
  
  /* Related posts */
  
  .blog-page .related {
    margin-top: 8px;
  }
  
  .blog-page .related-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    margin-top: 10px;
  }
  
  @media (min-width: 880px) {
    .blog-page .related-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  
  .blog-page .outline-card {
    border: 1px solid color-mix(in oklab, var(--line) 70%, var(--accent) 30%);
    border-radius: var(--radius-xxl);
    padding: 14px;
    background:
      radial-gradient(420px 180px at 10% 8%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
      linear-gradient(180deg, color-mix(in oklab, var(--panel) 98%, #000 2%), transparent);
    transition:
      transform .16s var(--ease-out),
      border-color .16s var(--ease-out),
      box-shadow .16s var(--ease-out);
  }
  
  .blog-page .outline-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in oklab, var(--accent) 42%, var(--line));
    box-shadow: 0 12px 24px rgba(0,0,0,.24);
  }
  
  .blog-page .post-card__meta {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.8rem;
  }
  
  .blog-page .post-card__title {
    margin: 6px 0 6px;
    font-weight: 900;
    line-height: 1.2;
  }
  
  .blog-page .post-card__title a {
    text-decoration: none;
  }
  
  .blog-page .post-card__title a:hover {
    text-decoration: underline;
  }
  
  .blog-page .post-card__cta {
    margin-top: 8px;
  }
  
  /* Reveal */
  
  .blog-page .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity .45s var(--ease-out),
      transform .45s var(--ease-out);
  }
  
  .blog-page .reveal.in {
    opacity: 1;
    transform: none;
  }
  
  .blog-page [data-stagger] > * {
    --i: 0;
    transition-delay: calc(var(--i) * 80ms);
  }
  
  /* Reduced Motion */
  
  @media (prefers-reduced-motion: reduce) {
    .blog-page * {
      transition: none !important;
      animation: none !important;
    }
  }