/* ============================================================================
   LohnPulse Design System — blog.css  (v1.0)
   ----------------------------------------------------------------------------
   The blog-specific layer on top of tokens.css + fonts.css + components.css.
   Carries the TWO blog surfaces of the DS (DESIGN-SYSTEM.md §8, blog rows):
     · Blog index  — article-preview cards (§6.2) with Pulsstrich foot + mono
       dates, a :has() lead card breaking the grid, the featured magazine card.
     · Blog article — the ONE place Source Serif 4 is used: the longform
       reading column (--text-md / --measure / --leading-prose). Headings stay
       --font-display; figures/§-citations/dates are IBM Plex Mono.
   Figure mocks consume the components.css §9 ledger primitives (.figcard,
   .lrow, .l-sumrule) — vector CSS, never raster (editorial cover PNGs excluded:
   they are legit editorial covers, kept).
   LOAD ORDER (blog pages only):
     tokens.css → fonts.css → components.css → blog.css
   HARD RULES: role tokens + color-mix(in oklab) ONLY — no raw hex, never the
   polar lab color function (project render bug). Shadows may use the rgba
   ink-alpha precedent from tokens.css. Cards ≤ --radius-lg; --radius-xl for media frames only.
   Emphasis = rules + type + ONE beat — never a tinted left-stripe box
   (DESIGN-PRINCIPLES-DO-DONT.md §1a).
   JS contracts (js/blog.js, unchanged): [data-reveal] .in reveal ·
   #blogProgress > i width · .blog-tabs .blog-tab .active filter ·
   .blog-search input · .blog-card[hidden] · [data-blog-loadmore] ·
   .empty-state[hidden].
   ============================================================================ */

/* ============================================================================
   0 · REVEAL FAIL-SAFE — final-visible without JS / reduced-motion
   ============================================================================ */
[data-reveal]{ opacity:1; transform:none; }
html.js.motion [data-reveal]{ opacity:0; transform:translateY(18px);
  transition:opacity .6s var(--ease), transform .6s var(--ease); }
html.js.motion [data-reveal].in{ opacity:1; transform:none; }

/* ============================================================================
   1 · BLOG-HUB HEADER (compact forest masthead — quiet, dials 3/2/3)
   ============================================================================ */
.blog-head{ padding-block:clamp(2.6rem,6vw,4.2rem); }
.blog-head h1{ color:var(--white); font-size:var(--text-3xl); font-weight:700;
  line-height:var(--leading-snug); letter-spacing:var(--tracking-display);
  margin-top:.9rem; max-inline-size:20ch; }
.blog-head .bh-dek{ color:var(--d-sec); font-size:var(--text-md);
  line-height:1.6; max-inline-size:52ch; margin-top:1rem; }

.blog-main{ padding-block:clamp(2.2rem,5vw,3.6rem) clamp(3rem,6vw,4.5rem); }

/* ============================================================================
   2 · CATEGORY CHIPS / TAG CHIPS (mono micro-labels, token-pure)
   ============================================================================ */
.blog-tag{ display:inline-flex; align-items:center;
  font:600 var(--text-2xs)/1 var(--font-mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--green-800);
  background:var(--green-50); border:1px solid var(--green-200);
  padding:.3rem .6rem; border-radius:var(--radius-pill); white-space:nowrap; }
.blog-tag-compliance{ color:var(--accent-warm-text);
  background:var(--orange-50);
  border-color:color-mix(in oklab, var(--orange-500) 28%, var(--white)); }
/* Kanzlei = the restrained plum chip accent (§2.5) — never off-brand blue */
.blog-tag-kanzlei{ color:var(--plum-600); background:var(--plum-50);
  border-color:var(--plum-100); }
.blog-tag.on-cover{ background:color-mix(in oklab, var(--white) 92%, transparent);
  color:var(--green-800); border-color:transparent; box-shadow:var(--shadow-sm); }

/* ============================================================================
   3 · FEATURED MAGAZINE CARD (§6.2 — Pulsstrich ribbon on the cover,
       Summenstrich under the dek, mono meta; not "same card bigger")
   ============================================================================ */
.blog-featured{ display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(1.4rem,3.5vw,2.8rem); align-items:stretch;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md);
  margin-bottom:clamp(2.2rem,5vw,3.2rem); text-decoration:none;
  transition:box-shadow var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease); }
.blog-featured:hover{ box-shadow:var(--shadow-lg);
  border-color:var(--border-default); }
/* editorial cover PNG at its NATIVE 40/21 ratio, inset like a plate — the
   composition is typographic, so it is never cropped */
.blog-featured-cover{ position:relative; aspect-ratio:40/21; align-self:center;
  margin:1.1rem 0 1.1rem 1.1rem; border-radius:var(--radius-md);
  overflow:hidden; background:var(--surface-sunken); }
.blog-featured-cover img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
/* Pulsstrich ribbon: hairline that runs across the cover top and lifts into
   one beat at the label — a line + type, not a filled banner */
.blog-featured-ribbon{ position:absolute; top:1rem; left:1rem; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 var(--text-2xs)/1 var(--font-mono); letter-spacing:.07em;
  text-transform:uppercase; color:var(--green-800);
  background:color-mix(in oklab, var(--white) 94%, transparent);
  padding:.4rem .65rem; border-radius:var(--radius-xs);
  box-shadow:var(--shadow-sm); }
.blog-featured-ribbon::before{ content:""; width:26px; height:11px; flex:0 0 auto;
  background:var(--brand-primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.blog-featured-body{ padding:clamp(1.5rem,3vw,2.4rem)
  clamp(1.5rem,3vw,2.4rem) clamp(1.5rem,3vw,2.4rem) 0;
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:.85rem; }
.blog-featured-body h2{ font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:var(--tracking-tight); line-height:var(--leading-snug);
  color:var(--text-strong); text-wrap:balance; }
.blog-featured:hover h2{ color:var(--brand-strong); }
.blog-featured-body p{ color:var(--text-secondary);
  line-height:var(--leading-body); max-inline-size:52ch; text-wrap:pretty; }
/* Summenstrich closes the dek — the double rule that marks "the total" */
.bf-sum{ border:0; height:0; width:132px; margin:.1rem 0 0;
  border-top:3px double var(--fx-rule-sum); }

/* Meta line (cards + featured + article hero) — mono, tabular dates */
.blog-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:.45rem .6rem;
  font:500 var(--text-2xs)/1.5 var(--font-mono); color:var(--text-muted);
  font-variant-numeric:tabular-nums; }
.blog-meta .dot{ width:3px; height:3px; border-radius:50%;
  background:var(--ink-300); }
.blog-avatar{ width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:var(--green-700); color:var(--white);
  display:inline-flex; align-items:center; justify-content:center;
  font:700 .62rem/1 var(--font-mono); letter-spacing:.02em; }

/* ============================================================================
   4 · TAB BAR + SEARCH + RSS (progressive enhancement — all cards visible
       without JS; classes are the js/blog.js contract)
   ============================================================================ */
.blog-tabs{ display:flex; align-items:center; gap:.5rem;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:.45rem; margin-bottom:clamp(1.5rem,3vw,2.2rem);
  scrollbar-width:none; }
.blog-tabs::-webkit-scrollbar{ display:none; }
.blog-tab{ flex:0 0 auto; appearance:none; cursor:pointer;
  font:600 var(--text-xs)/1 var(--font-mono); letter-spacing:.02em;
  color:var(--text-secondary); background:var(--surface);
  border:1px solid var(--border-default);
  padding:.5rem 1rem; border-radius:var(--radius-pill);
  transition:border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),
             background var(--dur-fast) var(--ease); }
.blog-tab:hover{ border-color:var(--brand-primary); color:var(--text-strong); }
.blog-tab.active{ background:var(--btn-primary-bg);
  border-color:var(--btn-primary-bg); color:var(--btn-primary-text); }
.blog-tabs-spacer{ flex:1 1 auto; }
.blog-search{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.45rem;
  background:var(--surface); border:1px solid var(--border-default);
  border-radius:var(--radius-pill); padding:.45rem .95rem; min-width:220px;
  transition:border-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease); }
.blog-search:focus-within{ border-color:var(--border-focus);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--green-600) 18%, transparent); }
.blog-search svg{ width:14px; height:14px; color:var(--text-muted); flex:0 0 auto; }
.blog-search input{ border:0; outline:none; background:transparent;
  font:500 var(--text-xs)/1.4 var(--font-sans); color:var(--text-body);
  width:100%; min-width:0; }
.blog-search input::placeholder{ color:var(--text-muted); }
.blog-rss{ flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem;
  font:600 var(--text-2xs)/1 var(--font-mono); letter-spacing:.04em;
  color:var(--text-muted); text-decoration:none; }
.blog-rss:hover{ color:var(--green-700); }
.blog-rss svg{ width:14px; height:14px; }

/* ============================================================================
   5 · ARTICLE-PREVIEW CARDS (§6.2 — the loved .blog-card, refined:
       Pulsstrich foot with a beat-tick + mono tabular dates + :has() lead)
   ============================================================================ */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
  align-items:stretch; }
@media (max-width:1023px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } }

/* [hidden] must beat the flex display — the JS filter/search/load-more contract */
.blog-card[hidden]{ display:none !important; }
.blog-card{ display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); overflow:hidden; text-decoration:none;
  box-shadow:var(--shadow-xs); position:relative;
  transition:transform var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease); }
.blog-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md);
  border-color:var(--border-default); }
.blog-card-cover{ position:relative; aspect-ratio:40/21; overflow:hidden;
  background:var(--surface-sunken); }
.blog-card-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-cover .blog-tag{ position:absolute; top:.8rem; left:.8rem; z-index:2; }
.blog-card-body{ padding:1.15rem 1.3rem 1.2rem; display:flex;
  flex-direction:column; gap:.55rem; flex:1 1 auto; }
.blog-card-body h3{ font-size:var(--text-base); font-weight:700;
  line-height:var(--leading-heading); letter-spacing:var(--tracking-tight);
  color:var(--text-strong); text-wrap:balance; }
.blog-card:hover h3{ color:var(--brand-strong); }
.blog-card-body p{ font-size:var(--text-sm); color:var(--text-secondary);
  line-height:var(--leading-body); text-wrap:pretty; flex:1 1 auto;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; }
/* Pulsstrich foot: hairline rule interrupted by ONE small beat-tick, then the
   mono tabular meta — the card-scale instance of the Ledger-Puls motif (§6.4) */
.blog-card-foot{ position:relative; margin-top:auto; padding-top:.8rem;
  display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .55rem;
  font:500 var(--text-2xs)/1.5 var(--font-mono); color:var(--text-muted);
  font-variant-numeric:tabular-nums; }
.blog-card-foot::before{ content:""; position:absolute; top:0; left:0; right:0;
  height:1px; background:var(--border-hairline); }
.blog-card-foot .bc-tick{ position:absolute; top:-8px; left:12px;
  width:38px; height:16px; background:var(--surface); padding-inline:3px;
  box-sizing:content-box; }
.blog-card-foot .bc-tick path{ fill:none; stroke:var(--brand-primary);
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.blog-card-foot .dot{ width:3px; height:3px; border-radius:50%;
  background:var(--ink-300); }

/* :has() lead card — the newest post breaks the uniform grid (only once the
   grid is full enough to wrap around it): 2-col span, cover beside the body,
   the cover plate at its native ratio (typographic covers are never cropped) */
@media (min-width:1024px){
  .blog-grid:has(> .blog-card:nth-child(4)) > .blog-card:first-child{
    grid-column:span 2; display:grid; grid-template-columns:1.05fr 1fr;
    gap:.4rem; align-items:center; }
  .blog-grid:has(> .blog-card:nth-child(4)) > .blog-card:first-child .blog-card-cover{
    aspect-ratio:40/21; align-self:center; margin:1rem 0 1rem 1rem;
    border-radius:var(--radius-md); }
  .blog-grid:has(> .blog-card:nth-child(4)) > .blog-card:first-child h3{
    font-size:var(--text-xl); }
  .blog-grid:has(> .blog-card:nth-child(4)) > .blog-card:first-child .blog-card-body{
    padding:1.4rem 1.5rem 1.3rem 1rem; }
}

/* ============================================================================
   6 · CSS COVER-MOCKS (token-pure port — for posts without an editorial
       cover PNG; vector CSS, never raster — DS §11 spirit at card scale)
   ============================================================================ */
.cover-mock{ position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; overflow:hidden; }
.cm-forest{ background:linear-gradient(135deg, var(--green-950) 0%,
  var(--green-800) 55%, var(--green-600) 100%); }
.cm-mint{ background:linear-gradient(135deg, var(--green-700) 0%,
  var(--green-400) 100%); }
.cm-teal{ background:linear-gradient(135deg, var(--green-950) 0%,
  var(--green-500) 110%); }
.cm-light{ background:linear-gradient(135deg, var(--green-100) 0%,
  var(--green-50) 60%, var(--white) 100%); }
.cm-window{ width:72%; background:var(--surface);
  border-radius:var(--radius-lg); box-shadow:0 14px 34px rgba(11,20,16,.28);
  padding:.7rem .8rem; transform:rotate(-1.5deg); }
.cm-window.tilt-r{ transform:rotate(1.5deg); }
.cm-window-bar{ display:flex; gap:.25rem; margin-bottom:.55rem; }
.cm-window-bar i{ width:6px; height:6px; border-radius:50%;
  background:var(--ink-300); }
.cm-window-bar i:first-child{ background:var(--green-400); }
.cm-row{ height:8px; border-radius:4px; background:var(--ink-100);
  margin-bottom:.4rem; }
.cm-row.w60{ width:60%; } .cm-row.w80{ width:80%; }
.cm-row.w40{ width:40%; background:var(--green-100); }
.cm-row.fill{ height:14px; background:var(--green-100); border-radius:7px;
  margin-top:.45rem; }
.cm-kpis{ display:flex; gap:.4rem; margin-bottom:.45rem; }
.cm-kpi{ flex:1; background:var(--surface-sunken);
  border:1px solid var(--border-hairline); border-radius:var(--radius-sm);
  padding:.35rem .45rem; }
.cm-kpi b{ display:block; font:600 .72rem/1.1 var(--font-mono);
  color:var(--green-800); font-variant-numeric:tabular-nums; }
.cm-kpi span{ font:500 .5rem/1.3 var(--font-mono); color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em; }
.cm-pulse{ width:100%; height:34px; }
.cm-pulse path{ fill:none; stroke:var(--brand-primary); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.cm-bars{ display:flex; align-items:flex-end; gap:.3rem; height:42px; }
.cm-bars i{ flex:1; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, var(--green-400), var(--green-700)); }
.cm-check-row{ display:flex; align-items:center; gap:.3rem; margin-bottom:.35rem; }
.cm-check-row i{ width:12px; height:12px; border-radius:50%;
  background:var(--green-50); color:var(--green-700); font-style:normal;
  font:800 .5rem/1 var(--font-mono); display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 auto; }
.cm-check-row b{ height:6px; border-radius:3px; background:var(--ink-200);
  flex:1 1 auto; }
.cm-phone-mini{ width:92px; background:var(--ink-900); border-radius:14px;
  padding:4px; box-shadow:0 14px 34px rgba(11,20,16,.35);
  transform:rotate(-3deg); }
.cm-phone-mini > div{ background:var(--surface); border-radius:var(--radius-lg);
  padding:.55rem .45rem .7rem; }

/* ============================================================================
   7 · LOAD-MORE + EMPTY STATE
   ============================================================================ */
.blog-loadmore{ text-align:center; margin-top:clamp(2rem,4vw,3rem); }
.blog-loadmore .hint{ display:block; margin-top:.7rem;
  font:500 var(--text-2xs)/1.5 var(--font-mono); color:var(--text-muted); }
.empty-state{ grid-column:1 / -1; text-align:center; padding:3.2rem 2rem;
  background:var(--surface-sunken); border:1px dashed var(--border-default);
  border-radius:var(--radius-lg); }
.empty-state[hidden]{ display:none !important; }
.empty-state .es-icon{ width:48px; height:48px; margin:0 auto 1rem;
  border-radius:var(--radius-lg); background:var(--green-50);
  display:flex; align-items:center; justify-content:center;
  color:var(--green-700); }
.empty-state h3{ font-size:var(--text-base); color:var(--text-strong);
  margin-bottom:.35rem; }
.empty-state p{ font-size:var(--text-sm); color:var(--text-secondary);
  max-inline-size:42ch; margin-inline:auto; }

/* ============================================================================
   8 · ARTICLE PAGE — chrome (progress bar, breadcrumb)
   ============================================================================ */
.blog-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:70;
  background:transparent; pointer-events:none; }
.blog-progress i{ display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--green-800), var(--green-600) 70%,
    var(--green-400)); border-radius:0 2px 2px 0; }

.explainer-breadcrumb{ background:var(--surface-sunken);
  border-bottom:1px solid var(--border-hairline); }
.explainer-breadcrumb .l-center{ padding-block:.6rem; display:flex;
  align-items:center; flex-wrap:wrap; gap:.15rem .45rem;
  font:500 var(--text-2xs)/1.5 var(--font-mono); color:var(--text-muted); }
.explainer-breadcrumb a{ color:var(--green-700); text-decoration:none; }
.explainer-breadcrumb a:hover{ color:var(--green-800);
  text-decoration:underline; }
.explainer-breadcrumb span[aria-hidden]{ color:var(--ink-400); }

/* ============================================================================
   9 · ARTICLE HERO — title/kicker header, byline, editorial cover
   ============================================================================ */
/* two centered column widths: the --measure reading column (title, prose,
   lede, TL;DR) and the 820px breakout column (cover, figures, banners, grids) —
   both symmetric, classic editorial */
.blog-article .art-head{ max-inline-size:var(--measure); margin-inline:auto; }
.blog-article .art-wide{ max-inline-size:820px; margin-inline:auto; }
.article-hero{ padding-block:clamp(2.4rem,5vw,3.8rem) 0; }
.article-hero .kicker{ margin-bottom:.9rem; }
.article-hero h1{ font-size:var(--text-3xl); line-height:var(--leading-snug);
  letter-spacing:var(--tracking-display); color:var(--text-strong);
  max-inline-size:24ch; margin-bottom:1.1rem; text-wrap:balance; }
.article-byline{ display:flex; align-items:center; flex-wrap:wrap;
  gap:.5rem .8rem; margin-bottom:1.7rem; }
.article-byline .blog-avatar{ width:40px; height:40px; font-size:.8rem; }
.article-byline .who b{ display:block;
  font:600 var(--text-sm)/1.3 var(--font-sans); color:var(--text-body); }
.article-byline .who span{ font:500 var(--text-2xs)/1.4 var(--font-mono);
  color:var(--text-muted); }
.article-byline .sep{ width:1px; height:28px; background:var(--border-hairline);
  margin-inline:.3rem; }
.article-byline .dates{ font:500 var(--text-2xs)/1.6 var(--font-mono);
  color:var(--text-muted); font-variant-numeric:tabular-nums; }
.article-byline .dates b{ color:var(--text-body); font-weight:600; }
/* editorial cover PNG — media frame (radius-xl is media-only, allowed here) */
.article-cover{ position:relative; aspect-ratio:40/21;
  max-inline-size:820px; margin-inline:auto;
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-hairline); box-shadow:var(--shadow-lg); }
.article-cover img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Lede — serif lead under the cover (article voice starts here) */
.article-lede{ font-family:var(--font-serif); font-size:var(--text-lg);
  line-height:1.6; color:var(--text-body); max-inline-size:var(--measure);
  margin:clamp(1.6rem,3.5vw,2.4rem) auto 0; text-wrap:pretty; }

/* "Kurz gesagt" — the Pulsstrich TL;DR (§6.1): hairline opens, ONE beat at the
   label, single rule closes. Two rules + type + whitespace — NEVER a tinted
   left-stripe box (deny-list §1a). */
.blog-tldr{ max-inline-size:var(--measure);
  margin:clamp(1.6rem,3.5vw,2.4rem) auto 0;
  border-top:1px solid var(--border-hairline); padding-top:1rem; }
.blog-tldr > b{ display:inline-flex; align-items:center; gap:.55rem;
  font:600 var(--text-xs)/1 var(--font-mono); letter-spacing:var(--tracking-caps);
  text-transform:uppercase; color:var(--green-700); margin-bottom:.65rem; }
.blog-tldr > b::before{ content:""; width:28px; height:12px; flex:0 0 auto;
  background:var(--fx-beat);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'%3E%3Cpath d='M0 9 H14 l2 2 l3 -8 l3 11 l3 -5 H40' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.blog-tldr > b svg{ display:none; } /* legacy inline bolt icon retired — the beat carries the mark */
.blog-tldr p{ margin:0; font-family:var(--font-serif); font-size:var(--text-md);
  line-height:var(--leading-prose); color:var(--text-body); text-wrap:pretty; }
.blog-tldr::after{ content:""; display:block; margin-top:1.1rem;
  border-top:1px solid var(--border-default); }

/* Anchor nav (Inhalt) — hairline-bound mono row */
.blog-anchornav{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem;
  max-inline-size:820px; margin:1.7rem auto 0; padding-block:.8rem;
  border-top:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline); }
.blog-anchornav .lbl{ font:600 var(--text-2xs)/1 var(--font-mono);
  letter-spacing:var(--tracking-caps); text-transform:uppercase;
  color:var(--text-muted); margin-right:.6rem; }
.blog-anchornav a{ font:600 var(--text-2xs)/1 var(--font-mono);
  letter-spacing:.02em; color:var(--text-secondary); text-decoration:none;
  padding:.42rem .8rem; border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill);
  transition:border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease); }
.blog-anchornav a:hover{ border-color:var(--brand-primary);
  color:var(--green-800); }
.blog-anchornav a.current{ border-color:var(--brand-primary);
  color:var(--green-800);
  background:color-mix(in oklab, var(--brand-primary) 8%, var(--white)); }

/* ============================================================================
   10 · ARTICLE BODY — the Source Serif 4 reading column
        (--text-md · --measure · --leading-prose; headings stay display)
   ============================================================================ */
.band{ padding-block:clamp(2.6rem,5.5vw,4.2rem);
  scroll-margin-top:calc(var(--navh) + .8rem); }
.band-alt{ background:var(--surface-sunken); }
.band .kicker{ margin-bottom:.5rem; }

.blog-article-prose{ max-inline-size:var(--measure); margin-inline:auto; }
.blog-article-prose h2{ font-size:var(--text-2xl);
  line-height:var(--leading-snug); letter-spacing:var(--tracking-tight);
  color:var(--text-strong); margin-bottom:1rem; text-wrap:balance; }
.blog-article-prose h3{ font-size:var(--text-xl);
  line-height:var(--leading-heading); color:var(--text-strong);
  margin:1.8rem 0 .6rem; }
.blog-article-prose p{ font-family:var(--font-serif); font-size:var(--text-md);
  line-height:var(--leading-prose); color:var(--text-body);
  margin-bottom:1.05rem; text-wrap:pretty; }
.blog-article-prose p:last-child{ margin-bottom:0; }
.blog-article-prose p b, .blog-article-prose p strong{ font-weight:600;
  color:var(--text-strong); }
.blog-article-prose ul{ margin:0 0 1.2rem; }
.blog-article-prose li{ position:relative; padding:.4rem 0 .4rem 1.7rem;
  font-family:var(--font-serif); font-size:var(--text-md);
  line-height:var(--leading-prose); color:var(--text-body); }
.blog-article-prose li::before{ content:"✓"; position:absolute; left:0;
  top:.42rem; font:700 var(--text-sm)/var(--leading-prose) var(--font-mono);
  color:var(--green-700); }
.blog-article-prose li b{ font-weight:600; color:var(--text-strong); }
/* §-citations inside prose read as provenance — mono ink (usage matrix §8) */
.blog-article-prose .para{ font-family:var(--font-mono);
  font-size:.88em; color:var(--fx-src); }

/* section-scale headers outside the prose block (Für wen / Weiterlesen) */
.band .sec-h2{ font-size:var(--text-xl); letter-spacing:var(--tracking-tight);
  line-height:var(--leading-heading); margin-bottom:1.4rem; }

/* ============================================================================
   11 · ARTICLE FIGURES — forest stage + §9 ledger figcard (vector, no raster)
   ============================================================================ */
.article-figure{ max-inline-size:820px; margin:1.9rem auto 0; }
.article-figure + .app-banner{ margin-top:2rem; }
.article-figure .fig-frame{ position:relative; aspect-ratio:16/8.5;
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-hairline); box-shadow:var(--shadow-md); }
.article-figure figcaption{ margin-top:.65rem; padding-left:.2rem;
  font:500 var(--text-2xs)/1.6 var(--font-mono); color:var(--text-muted); }
.article-figure figcaption b{ color:var(--text-secondary); }
.article-figure figcaption em{ font-style:normal; }

/* forest stage behind a ledger card (replaces the legacy ad-hoc gradients) */
.fig-stage{ position:absolute; inset:0;
  background:linear-gradient(135deg, var(--green-950) 0%, var(--green-800) 65%,
    var(--green-600) 130%);
  display:flex; align-items:center; justify-content:center; padding:5% 7%; }
.fig-stage .figcard{ width:min(84%, 30rem); box-shadow:0 18px 44px rgba(11,20,16,.30); }
/* in-figure ledger extensions on top of components.css §9 */
.fig-stage .lrow{ font-size:clamp(.58rem, 1.55vw, .82rem); }
.fig-stage .lrow .warn{ color:var(--warning); font-weight:700; white-space:nowrap; }
.fig-stage .fc-kick .tag--ok{ color:var(--green-800); background:var(--green-50);
  border:1px solid var(--green-200); border-radius:var(--radius-pill);
  padding:.3rem .6rem; letter-spacing:.03em; text-transform:none; }
.fig-kpis{ display:flex; gap:.5rem; margin-block:.2rem .6rem; }
.fig-kpis > div{ flex:1; background:var(--surface-sunken);
  border:1px solid var(--border-hairline); border-radius:var(--radius-md);
  padding:.5rem .6rem; }
.fig-kpis b{ display:block; font:600 clamp(.8rem,2vw,1.1rem)/1.2 var(--font-mono);
  color:var(--ink-900); font-variant-numeric:tabular-nums; }
.fig-kpis span{ display:block; margin-top:.15rem;
  font:500 clamp(.46rem,1.2vw,.62rem)/1.3 var(--font-mono);
  color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
.fig-sub{ display:block; font:600 clamp(.5rem,1.3vw,.68rem)/1 var(--font-mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted);
  margin-block:.5rem .35rem; }
.fig-done{ display:flex; align-items:center; gap:.5rem; margin-top:.6rem;
  font:500 clamp(.56rem,1.4vw,.78rem)/1.45 var(--font-mono);
  color:var(--ink-700); }
.fig-done i{ display:inline-grid; place-items:center; width:15px; height:15px;
  border-radius:50%; background:var(--green-700); color:var(--white);
  font:700 .55rem/1 var(--font-sans); font-style:normal; flex:0 0 auto; }
.fig-note{ margin-top:.65rem; font:600 clamp(.5rem,1.3vw,.7rem)/1.5 var(--font-mono);
  color:var(--warning); }
/* mock form grid (DATEV article, Abb. 1) */
.fig-form{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem .7rem;
  font:500 clamp(.52rem,1.35vw,.74rem)/1.4 var(--font-mono); }
.fig-form label{ display:block; color:var(--text-muted); margin-bottom:.2rem; }
.fig-form .ff-val{ min-height:1.8em; display:flex; align-items:center;
  padding:0 .5em; border:1px solid var(--border-default);
  border-radius:var(--radius-sm); background:var(--surface);
  color:var(--ink-900); font-weight:600; white-space:nowrap; overflow:hidden; }
.fig-form .ff-val.is-active{ border-color:var(--green-700);
  color:var(--text-muted); font-weight:500; }
.fig-form .ff-val.is-empty{ border-style:dashed;
  border-color:var(--border-hairline); background:var(--surface-sunken); }
/* mock confirm row (DATEV article, Abb. 2) */
.fig-cta{ display:flex; align-items:center; gap:.6rem; margin-top:.7rem;
  padding-top:.6rem; border-top:1px solid var(--border-hairline);
  font:500 clamp(.52rem,1.35vw,.74rem)/1.4 var(--font-mono);
  color:var(--ink-700); }
.fig-cta .fig-btn{ background:var(--btn-primary-bg);
  color:var(--btn-primary-text); font-weight:700; padding:.4em .9em;
  border-radius:var(--radius-sm); white-space:nowrap; }
.fig-preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem; }
.fig-preview-grid .lrow{ border-top:1px solid var(--border-hairline);
  padding-block:.28em; }
.fig-stage .ok{ color:var(--green-700); font-weight:700; }

/* ============================================================================
   12 · IN-ARTICLE CTA BANNER (paper, hairline — no tinted alert box)
   ============================================================================ */
.app-banner{ max-inline-size:820px; margin:2rem auto 0;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
  padding:1.3rem 1.6rem; display:flex; align-items:center;
  justify-content:space-between; gap:1.4rem; flex-wrap:wrap; }
.app-banner p{ margin:0; font:600 var(--text-base)/1.45 var(--font-sans);
  color:var(--text-strong); }
.app-banner p span{ display:block; margin-top:.25rem;
  font:400 var(--text-sm)/1.5 var(--font-sans); color:var(--text-secondary); }
.app-banner > div{ display:flex; gap:.6rem; flex-wrap:wrap; flex-shrink:0; }
@media (max-width:560px){ .app-banner{ flex-direction:column;
  align-items:flex-start; } }

/* ============================================================================
   13 · FÜR-WEN CARDS (three quiet paper cards, role-dot + type)
   ============================================================================ */
.fuer-wen-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
  max-inline-size:820px; margin-inline:auto; }
@media (max-width:767px){ .fuer-wen-grid{ grid-template-columns:1fr; } }
.fuer-wen-card{ background:var(--surface);
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
  padding:1.25rem 1.35rem; }
.band-alt .fuer-wen-card{ box-shadow:var(--shadow-xs); }
.fuer-wen-card .role-line{ display:flex; align-items:center; gap:.55rem;
  margin-bottom:.55rem; }
.fuer-wen-card .role-dot{ width:8px; height:8px; border-radius:50%;
  flex:0 0 auto; }
.fuer-wen-card h3{ font-size:var(--text-base); color:var(--text-strong); }
.fuer-wen-card p{ font-size:var(--text-sm); color:var(--text-secondary);
  line-height:var(--leading-body); }
.fw-note{ max-inline-size:820px; margin:1.4rem auto 0;
  font:400 var(--text-sm)/1.65 var(--font-sans); color:var(--text-secondary); }
.fw-note b{ color:var(--text-body); }

/* ============================================================================
   14 · ROADMAP-HONEST (paper card + mono status pills, amber clock)
   ============================================================================ */
.roadmap-honest{ max-inline-size:820px; margin-inline:auto;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-xs);
  padding:1.5rem 1.7rem; }
.roadmap-honest .rh-head{ display:flex; align-items:center; gap:.6rem;
  margin-bottom:.9rem; }
.roadmap-honest .rh-head svg{ width:19px; height:19px; color:var(--amber);
  flex:0 0 auto; }
.roadmap-honest .rh-head h3{ font-size:var(--text-lg);
  line-height:var(--leading-heading); }
.roadmap-honest li{ display:grid; grid-template-columns:84px 1fr;
  column-gap:1rem; align-items:baseline; padding:.5rem 0;
  border-top:1px solid var(--border-hairline);
  font-size:var(--text-sm); color:var(--text-secondary); line-height:1.6; }
.roadmap-honest li:first-child{ border-top:0; }
.roadmap-honest li i{ justify-self:start; font-style:normal;
  font:700 var(--text-2xs)/1 var(--font-mono); letter-spacing:.05em;
  padding:.28rem .55rem; border-radius:var(--radius-pill); white-space:nowrap; }
.roadmap-honest li b{ color:var(--text-strong); }
.rh-soon{ background:var(--green-50); color:var(--green-800);
  border:1px solid var(--green-200); }
.rh-later{ background:var(--ink-100); color:var(--ink-600);
  border:1px solid var(--ink-200); }
.roadmap-honest .rh-note{ margin-top:.9rem;
  font:500 var(--text-2xs)/1.6 var(--font-mono); color:var(--text-muted); }

/* ============================================================================
   15 · ORIENT-BOX (Was ist LohnPulse?) — the DS forest card, not a tint panel
   ============================================================================ */
.orient-box{ max-inline-size:820px; margin-inline:auto;
  display:flex; gap:1.1rem; align-items:flex-start;
  background:var(--green-900);
  border:1px solid color-mix(in oklab, var(--mint) 30%, transparent);
  border-radius:var(--radius-lg); color:var(--d-text);
  padding:1.5rem 1.7rem; }
.orient-box svg{ flex:0 0 auto; margin-top:.15rem; }
.orient-box svg rect{ fill:color-mix(in oklab, var(--white) 14%, transparent); }
.orient-box svg path{ stroke:var(--mint); }
.orient-box h3{ color:var(--white); font-size:var(--text-base);
  margin-bottom:.4rem; }
.orient-box p{ font-size:var(--text-sm); color:var(--d-sec);
  line-height:var(--leading-body); margin-bottom:.7rem; }
.orient-box a.more{ font:600 var(--text-sm)/1 var(--font-sans);
  color:var(--mint); text-decoration:none; }
.orient-box a.more:hover{ color:var(--mint-calm); }

/* ============================================================================
   16 · CROSS-SELL / RELATED CARDS
   ============================================================================ */
.crosssell-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem;
  align-items:stretch; max-inline-size:820px; margin-inline:auto; }
@media (max-width:1023px){ .crosssell-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .crosssell-grid{ grid-template-columns:1fr; } }
.crosssell-card{ display:flex; flex-direction:column; gap:.45rem;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); padding:1.35rem 1.4rem;
  text-decoration:none; box-shadow:var(--shadow-xs);
  transition:transform var(--dur-base) var(--ease),
             box-shadow var(--dur-base) var(--ease),
             border-color var(--dur-base) var(--ease); }
.crosssell-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md);
  border-color:var(--border-default); }
.crosssell-card .blog-tag{ align-self:flex-start; }
.crosssell-card h3{ font-size:var(--text-base);
  line-height:var(--leading-heading); color:var(--text-strong);
  margin-top:.3rem; }
.crosssell-card:hover h3{ color:var(--brand-strong); }
.crosssell-card p{ font-size:var(--text-sm); color:var(--text-secondary);
  line-height:var(--leading-body); flex:1 1 auto; }
.crosssell-card .link{ font:600 var(--text-sm)/1 var(--font-sans);
  color:var(--green-700); margin-top:.2rem; }

/* ============================================================================
   17 · SMALL-VIEWPORT COLLAPSES
   ============================================================================ */
@media (max-width:860px){
  .blog-featured{ grid-template-columns:1fr; gap:0; }
  .blog-featured-body{ padding:1.4rem 1.5rem 1.5rem; }
  .blog-featured-cover{ margin:1.1rem 1.1rem 0; align-self:auto; }
}