/* ==========================================================================
   huuman 2.0 · BLOG layer (Webflow, huuman.life/blog) · production CSS
   Served by the hm2-assets Worker; linked by blog-proxy at the END of <head>
   only on html.hm2 pages (cookie-gated dark launch, then everyone at W2).

   Source of truth: redesign-2026-09/mockups/blog (NOTES.md mapping table,
   blog.css, blog-print.css). This file maps those decisions onto the LIVE
   Webflow DOM. Rules:
   - every selector starts with html.hm2 (test.mjs enforces it);
   - presentation only: no generated text, no reordering; hidden elements are
     listed in batches/blog/DELTAS.md;
   - calculators (section.section > .w-embed) are never reached: every rule is
     anchored to a named chrome container or to .w-richtext (no calculator
     contains one); DE hyphenation and all type roles are scoped the same way;
   - !important only where the site head (<style> §1-16) or an inline style
     from the footer scripts forces it (marked "head!" / "inline!");
   - scripts that build UI (ToC, meta bar, share, progress, back-to-top,
     lightbox, iOS banner, consent) stay authoritative: their output is
     restyled, never renamed or moved; fixed bars stay top:0 so the iOS
     banner's shiftDown() keeps working.
   ========================================================================== */

/* ---------- 0a. Metric-matched fallback faces (CLS): the site loads Playfair Display + DM Sans with display=swap;
   until they arrive, text renders in these LOCAL faces, scaled to the web fonts' average advance (measured in Chrome
   over the 240 live H1s and 40 kB of live EN+DE body text) with the web fonts' vertical metrics, so the swap does not
   re-wrap lines. local() only: no font request is added. Playfair 800 vs Georgia Bold 89.88 %. DM Sans is an
   optical-size variable font (opsz 9-40, Chrome sets opsz = font-size in px), so it is measured at TEXT sizes
   (400 @18 px body, 500/700 @16 px UI): DM Sans 400/500/700 vs Arial / Arial / Arial Bold 103.59 / 105.61 / 102.06 %
   (the v1 values 92.47 / 94.85 / 93.22 % were opsz-40 display widths, ~10 % too narrow for text; G3 2026-09-24).
   Android has neither Georgia nor Arial: its own faces come next in the stacks (skipped wherever Georgia/Arial load),
   same method, measured in Chrome on Google Fonts Noto Serif 2 and Roboto 3 (a local Roboto 2 copy agrees within
   0.1 %): Playfair 800 vs Noto Serif Bold 91.93 %; DM Sans 400/500/700 vs Roboto / Roboto Medium / Roboto Bold
   104.08 / 105.07 / 108.40 %. A local() name Android does not index (e.g. a variable-Roboto named instance) fails
   the face and the text falls through to the next family, i.e. today's behaviour.
   ascent/descent = web font hhea (1082/251, 992/310) / size-adjust. */
@font-face{font-family:"hm2 Playfair Fallback";src:local("Georgia Bold"),local("Georgia-Bold");font-weight:100 900;font-style:normal;size-adjust:89.88%;ascent-override:120.38%;descent-override:27.93%;line-gap-override:0%}
@font-face{font-family:"hm2 Playfair Android Fallback";src:local("Noto Serif Bold"),local("NotoSerif-Bold");font-weight:100 900;font-style:normal;size-adjust:91.93%;ascent-override:117.70%;descent-override:27.30%;line-gap-override:0%}
@font-face{font-family:"hm2 DM Sans Fallback";src:local("Arial"),local("ArialMT");font-weight:100 449;font-style:normal;size-adjust:103.59%;ascent-override:95.76%;descent-override:29.93%;line-gap-override:0%}
@font-face{font-family:"hm2 DM Sans Fallback";src:local("Arial"),local("ArialMT");font-weight:450 549;font-style:normal;size-adjust:105.61%;ascent-override:93.93%;descent-override:29.35%;line-gap-override:0%}
@font-face{font-family:"hm2 DM Sans Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:550 900;font-style:normal;size-adjust:102.06%;ascent-override:97.20%;descent-override:30.37%;line-gap-override:0%}
@font-face{font-family:"hm2 DM Sans Android Fallback";src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");font-weight:100 449;font-style:normal;size-adjust:104.08%;ascent-override:95.31%;descent-override:29.78%;line-gap-override:0%}
@font-face{font-family:"hm2 DM Sans Android Fallback";src:local("Roboto Medium"),local("Roboto-Medium");font-weight:450 549;font-style:normal;size-adjust:105.07%;ascent-override:94.41%;descent-override:29.50%;line-gap-override:0%}
@font-face{font-family:"hm2 DM Sans Android Fallback";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:550 900;font-style:normal;size-adjust:108.40%;ascent-override:91.51%;descent-override:28.60%;line-gap-override:0%}

/* ---------- 0. Tokens (tokens.css subset; the blog does not load tokens.css) ---------- */
html.hm2{
  --hm-espresso:#181513;--hm-walnut:#3B2B20;--hm-vicuna:#D3BBA6;--hm-cream:#F4EFEA;--hm-tint:#E7E0DA;
  --hm-frame:#C07030;--hm-heart:#CC2818;--hm-metabolism:#389850;--hm-recovery:#5830A0;--hm-mind:#2060A8;
  --hm-walnut-16:rgba(59,43,32,.16);--hm-walnut-20:rgba(59,43,32,.2);
  --hm-cream-04:rgba(244,239,234,.04);--hm-cream-06:rgba(244,239,234,.06);--hm-cream-12:rgba(244,239,234,.12);
  --hm-cream-14:rgba(244,239,234,.14);--hm-cream-36:rgba(244,239,234,.36);
  --hm-fg:var(--hm-espresso);--hm-fg-2:var(--hm-walnut);
  --hm-font-display:"Playfair Display","hm2 Playfair Fallback","hm2 Playfair Android Fallback",Georgia,serif;
  --hm-font-sans:"DM Sans","hm2 DM Sans Fallback","hm2 DM Sans Android Fallback",system-ui,-apple-system,sans-serif;
  --hm-max:1360px;--hm-g:40px;
  --hm-sec-pt:150px;--hm-blog-mt:150px;--hm-blog-pb:120px;--hm-foot-pt:80px;
  --hm-r-btn:6px;--hm-r-media:8px;--hm-r-card:16px;--hm-r-pill:100px;
  --hm-ease:cubic-bezier(.2,.7,.1,1);--hm-ease-develop:cubic-bezier(.16,1,.3,1);
  --paper:#FFFFFF;--col:680px;--rail:1032px;--toc-w:256px;--nav-h:72px;
}
@media (max-width:991px){html.hm2{--nav-h:64px}}
@media (max-width:959px){html.hm2{--hm-g:24px;--hm-sec-pt:112px;--hm-blog-mt:112px;--hm-blog-pb:96px;--hm-foot-pt:64px}}
@media (max-width:719px){html.hm2{--hm-g:20px}}

/* dark grounds (related band, blog-home latest band, footer): flipped text + brighter data dots */
html.hm2 .latest-posts,html.hm2 .footer{
  --hm-fg:var(--hm-cream);--hm-fg-2:var(--hm-vicuna);
  --hm-frame:#D08040;--hm-heart:#E04838;--hm-metabolism:#46B364;--hm-recovery:#8A63D2;--hm-mind:#3E8FD8;
}
/* category -> domain dot (data encoding only; the CMS href carries the slug) */
html.hm2 [href$="/category/frame"]{--c:var(--hm-frame)}
html.hm2 [href$="/category/heart"]{--c:var(--hm-heart)}
html.hm2 [href$="/category/metabolism"]{--c:var(--hm-metabolism)}
html.hm2 [href$="/category/recovery"]{--c:var(--hm-recovery)}
html.hm2 [href$="/category/mind"]{--c:var(--hm-mind)}
html.hm2 [href$="/category/general"]{--c:transparent;--ring:inset 0 0 0 1.5px var(--hm-fg-2)}

/* ---------- 1. DE typography (hyphenation values = company pages: hm2-home.css / hm2-chrome.css) ---------- */
html.hm2:lang(de) :is(.h1,.h2,.h3,.heading,.section-title-text,.navigation-link-text,.post-short-text,[data-hub-intro]):not(.w-embed *),
html.hm2:lang(de) .w-richtext :is(h2,h3,h4,p,li,blockquote,figcaption),
html.hm2:lang(de) .utility-content>:is(h1,p){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 6 8;overflow-wrap:break-word}
html.hm2:lang(de) :is(.w-richtext,.post-info-text,.top-post-text,#huuman-toc-inline,#huuman-toc-container,.footer){overflow-wrap:break-word}

/* focus rings on the chrome we own (never inside calculators) */
/* (outline follows each control's own radius: circles stay circles; skip link = Designer DOM, launch item) */
html.hm2 :is(.navigation,.footer,.title-section,.top-post,._3-posts,.latest-posts,.featured-posts,.post-content,#huuman-toc-container,.title-section.cc-detail) :focus-visible:not(.w-embed *),
html.hm2 :is(#hcro,#huuman-back-top):focus-visible{outline:2px solid var(--hm-fg);outline-offset:3px}

/* skip link (Nav symbol, first child of .navigation: a.hm2-only[data-hm2="skip"] href="#", decision #10): focusable but
   visually hidden until keyboard focus, then a pill top-left above everything; hm2.js moves focus to the main content */
html.hm2 .navigation .hm2-only[data-hm2="skip"]{display:block;position:fixed;top:12px;left:12px;z-index:2147483647;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
html.hm2 .navigation .hm2-only[data-hm2="skip"]:focus-visible{width:auto;height:auto;padding:12px 20px;overflow:visible;clip:auto;clip-path:none;border-radius:var(--hm-r-pill);
  background:var(--hm-espresso);color:var(--hm-cream);font:600 15px/1.2 var(--hm-font-sans);letter-spacing:0;text-decoration:none;outline:2px solid var(--hm-espresso);outline-offset:3px}
html.hm2 :is(.title-section,.post-content,main,.section,.top-post)[tabindex="-1"]:focus{outline:none}   /* the skip target (focused by script) needs no ring */

/* ---------- 2. Nav (homepage nav on today's Webflow nav symbol; fixed, 72/64 px) ---------- */
html.hm2 .navigation.w-nav{display:flex;align-items:center;justify-content:flex-start;gap:30px;height:var(--nav-h);
  padding:0 max(var(--hm-g),calc((100% - var(--hm-max)) / 2));border-bottom:0;background:var(--hm-cream);box-sizing:border-box}
html.hm2 .navigation.w-nav::before,html.hm2 .navigation.w-nav::after{position:absolute}   /* .w-nav clearfix: out of the flex row, still rendered */
/* stray duplicate Navigation instances (tools/stats 2, latest + tools hub 3, privacy 5; identical, stacked):
   show the first only. Contract selector (BUILD_SPEC §8.6): never :first-child (the iOS banner becomes body's first child) */
html.hm2 body>.navigation~.navigation,html.hm2 body>.navigation~* .navigation{display:none!important}
html.hm2 .navigation .navigation-container{display:flex;align-items:center;justify-content:flex-end;gap:30px;flex:1 1 auto;min-width:0;width:auto;max-width:none;height:100%;padding:0}
html.hm2 .navigation a.logo.logo-nav{position:static;display:flex;align-items:center;margin-right:auto;padding:8px 2px;color:var(--hm-espresso);text-decoration:none}
/* the cream PNG wordmark reads Espresso on Cream (brightness .098 x #F4EFEA = #181817) at the text wordmark's size */
html.hm2 .navigation .logo-nav .image-logo{display:block;width:auto;height:25px;max-width:none;filter:brightness(.098)}   /* interim, until N1 ships */
/* N1 text wordmark (inside the existing logo link); once present the PNG is hidden (BUILD_SPEC §8.6) */
html.hm2 .navigation .hm2-only[data-hm2="wordmark"]{display:block;font:800 28px/1 var(--hm-font-display);letter-spacing:-.03em;color:var(--hm-espresso);white-space:nowrap}
html.hm2 .navigation .logo-nav:has(>.hm2-only[data-hm2="wordmark"]) .image-logo{display:none}
@media (min-width:992px){html.hm2 .navigation .nav-menu{display:flex;align-items:center;gap:30px;float:none}}
html.hm2 .navigation .navigation-link{position:relative;display:flex;align-items:center;height:auto;padding:15px 0;background:none;
  color:var(--hm-espresso)!important;font-weight:500!important;font-size:15px!important;text-decoration:none}   /* head! §9 */
html.hm2 .navigation .navigation-link-text{color:var(--hm-espresso);-webkit-text-stroke-color:currentColor;font:500 15px/1 var(--hm-font-sans)}
html.hm2 .navigation .navigation-hover{display:none}
html.hm2 .navigation .navigation-link::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;background:currentColor;opacity:0;transition:opacity .2s}
html.hm2 .navigation .navigation-link:hover::after{opacity:1}
@media (min-width:992px) and (max-width:1180px){html.hm2 .navigation .nav-menu{gap:22px}}
/* locales: the Webflow locale list is shown inline as "EN / DE"; its dropdown toggle is hidden (NOTES) */
html.hm2 .navigation .nav-right-group{position:static;display:flex;align-items:center;gap:10px;flex:none;height:100%}
html.hm2 .navigation .dropdown-2{display:flex;align-items:center;margin:0;background:none;z-index:auto}
html.hm2 .navigation .dropdown-toggle-2{display:none}
html.hm2 .navigation .dropdown-2 .dropdown-list-2{display:block;position:static;min-width:0;background:none;border:0}
html.hm2 .navigation .locales-list{display:flex;align-items:center}
html.hm2 .navigation .locale{display:flex;align-items:center;background:none;border:0;border-radius:0;overflow:visible;color:var(--hm-walnut)}
html.hm2 .navigation .locale+.locale::before{content:"";flex:none;width:1px;height:12px;margin:0 3px;background:var(--hm-walnut);transform:rotate(18deg);opacity:.7}
html.hm2 .navigation .locale a.link{display:block;min-width:30px;padding:14px 5px;text-align:center;color:var(--hm-walnut);font:500 13px/1 var(--hm-font-sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
html.hm2 .navigation .locale a.link.w--current{color:var(--hm-espresso);font-weight:700}
html.hm2 .navigation .locale a.link:hover{color:var(--hm-espresso)}
/* N2 "Try for free" (primary button, small) */
html.hm2 .navigation .hm2-only[data-hm2="nav-cta"]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:20px;padding:10px 20px;border:0;border-radius:var(--hm-r-btn);
  background:var(--hm-espresso);color:var(--hm-cream);font:500 16px/1.25 var(--hm-font-sans);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--hm-ease)}
html.hm2 .navigation .hm2-only[data-hm2="nav-cta"]:hover{background:var(--hm-walnut)}
/* constant box across the font swap (CLS: the right group must not move): "Try for free" 82.6 px in DM Sans 500 16 px,
   73.6 px in the fallback; "Kostenlos testen" 125.3 / 112.2 px; + 2 x 20 px padding */
html.hm2 .navigation .hm2-only[data-hm2="nav-cta"]{min-width:124px}
html.hm2:lang(de) .navigation .hm2-only[data-hm2="nav-cta"]{min-width:167px}
/* <=400 px: wordmark + CTA + menu must fit 320 px of content even for "Kostenlos testen" (108 + 8 + 146 + 8 + 44 = 314) */
@media (max-width:400px){
  html.hm2 .navigation.w-nav,html.hm2 .navigation .nav-right-group{gap:8px}
  html.hm2 .navigation .hm2-only[data-hm2="nav-cta"]{min-width:106px;padding:10px 14px;font-size:15px}
  html.hm2:lang(de) .navigation .hm2-only[data-hm2="nav-cta"]{min-width:146px}
}
html.hm2 .navigation .hm2-only[data-hm2="nav-cta"] *{color:inherit;font:inherit}
/* collapsed nav (Webflow data-collapse="medium" = <=991) */
@media (max-width:991px){
  html.hm2 .navigation.w-nav{gap:10px}
  html.hm2 .navigation .navigation-container{gap:10px}
  html.hm2 .navigation .menu-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;background:none;color:var(--hm-espresso);float:none}
  html.hm2 .navigation .menu-button.w--open{background:none;color:var(--hm-espresso)}
  html.hm2 .navigation .menu-button .w-icon-nav-menu{display:none}   /* icon-font glyph -> canon two-line icon (DELTAS) */
  html.hm2 .navigation .menu-button::before,html.hm2 .navigation .menu-button::after{content:"";position:absolute;left:12px;right:12px;height:1.5px;border-radius:1px;background:var(--hm-espresso);transition:transform .3s var(--hm-ease)}
  html.hm2 .navigation .menu-button::before{top:17px}
  html.hm2 .navigation .menu-button::after{top:25.5px}
  html.hm2 .navigation .menu-button.w--open::before{transform:translateY(4.25px) rotate(45deg)}
  html.hm2 .navigation .menu-button.w--open::after{transform:translateY(-4.25px) rotate(-45deg)}
  /* open menu = homepage mobile menu: Cream panel under the bar, 52 px rows with hairlines */
  html.hm2 .navigation .w-nav-overlay{top:100%}
  html.hm2 .navigation .nav-menu[data-nav-menu-open]{display:block;margin:0;padding:8px var(--hm-g) 24px;background:var(--hm-cream);border-bottom:1px solid var(--hm-walnut-16);box-shadow:none}
  html.hm2 .navigation .nav-menu[data-nav-menu-open] .navigation-link{justify-content:flex-start;min-height:52px;height:auto;padding:0;border-bottom:1px solid var(--hm-walnut-16);font-size:19px!important}   /* head! §9 */
  html.hm2 .navigation .nav-menu[data-nav-menu-open] .navigation-link-text{font-size:19px;line-height:1.2}
  html.hm2 .navigation .nav-menu[data-nav-menu-open] .navigation-link::after{display:none}
  html.hm2 .navigation .hm2-only[data-hm2="nav-cta"]{margin-left:0}
  /* EN / DE live in the open menu (homepage): the switcher sits under the 4 link rows (4 x 53 px + 8 px) */
  html.hm2 .navigation .dropdown-2{display:none}
  html.hm2 .navigation:has(.menu-button.w--open) .dropdown-2{display:flex;position:absolute;left:var(--hm-g);top:calc(100% + 232px);z-index:2}
  html.hm2 .navigation:has(.menu-button.w--open) .nav-menu[data-nav-menu-open]{padding-bottom:84px}
  html.hm2 .navigation .locale a.link{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:15px}
}
@media (pointer:coarse){html.hm2 .navigation .locale a.link{min-height:44px;display:flex;align-items:center}}

/* ---------- 3. Shared roles: category label + dot, byline ---------- */
html.hm2 :is(.post-info-text,.top-post-text) .category-link,
html.hm2 .title-section .post-category-text{display:inline-flex;align-items:center;gap:8px;margin:0;font-family:var(--hm-font-sans)!important;font-size:11px!important;font-weight:400!important;
  line-height:1.3;letter-spacing:.15em!important;text-transform:uppercase!important;color:var(--hm-fg-2)!important;text-decoration:none}   /* head! §3 */
html.hm2 :is(.post-info-text,.top-post-text) .category-link::before,
html.hm2 .title-section .post-category-text::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,transparent);box-shadow:var(--ring,none)}
html.hm2 :is(.post-info-text,.top-post-text) .category-link:hover{text-decoration:underline;text-underline-offset:3px}
html.hm2 :is(.post-info-text,.top-post-text) .post-author-text{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px;font:400 13px/1.3 var(--hm-font-sans);color:var(--hm-fg-2)}
html.hm2 :is(.post-info-text,.top-post-text) .post-author{margin:0;font:inherit;letter-spacing:0;text-transform:none;color:inherit;text-decoration:none}
html.hm2 :is(.post-info-text,.top-post-text) a.post-author:hover{text-decoration:underline;text-underline-offset:3px}
/* band titles ("Latest articles", "Featured articles") */
html.hm2 :is(.latest-posts,.featured-posts)>.container>.section-title-text{margin:0 0 56px;font:800 clamp(34px,3.4vw,48px)/1.04 var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-fg);text-decoration:none;text-wrap:balance}
@media (max-width:719px){html.hm2 :is(.latest-posts,.featured-posts)>.container>.section-title-text{margin-bottom:36px}}
/* legacy separators between same-ground blocks: removed (NOTES) */
html.hm2 .separator,html.hm2 .separator-footer{display:none}

/* ---------- 4. Listing grids + cards (blog home, category, latest, related) ---------- */
html.hm2 :is(.top-post,._3-posts,.latest-posts,.featured-posts)>.container,
html.hm2 .title-section.cc-detail>.container{width:100%;max-width:var(--hm-max);margin:0 auto;padding:0}
html.hm2 :is(._3-posts,.latest-posts,.featured-posts,.title-section.cc-detail) :is(.posts-wrapper,.posts-collection-list-wrapper){display:block;width:100%}
html.hm2 .posts-collection-list.w-dyn-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 32px;margin:0;padding:0}
html.hm2 .posts-collection-list.w-dyn-items::before,html.hm2 .posts-collection-list.w-dyn-items::after{position:absolute}   /* .w-row clearfix: out of the grid, still rendered */
html.hm2 .posts-collection-list>.w-dyn-item{float:none;width:auto;min-height:0;margin:0;padding:0;display:block}
html.hm2 .latest-posts .posts-collection-list:has(>._4-collection-item){grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
html.hm2 :is(.latest-posts,.featured-posts) .posts-collection-list:has(>._2-collection-item){grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 32px}
html.hm2 .latest-posts .posts-collection-list:has(>._2-collection-item){gap:24px 32px}
/* open editorial card on Cream: cover r8 + label + title + byline */
html.hm2 .w-dyn-item>a.posts-image{display:block;margin:0;overflow:hidden;border-radius:var(--hm-r-media);background:var(--hm-tint);aspect-ratio:16/9}
html.hm2 .w-dyn-item>a.posts-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .9s var(--hm-ease)}
html.hm2 .w-dyn-item:hover>a.posts-image img{transform:scale(1.03)}
html.hm2 .w-dyn-item>.post-info-text{display:block;padding-top:18px}
html.hm2 .post-info-text .post-title{display:block;margin:10px 0 0;color:inherit;text-decoration:none}
html.hm2 .post-info-text .post-title :is(.h3,h2,h3){margin:0;font:800 22px/30px var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-fg);text-wrap:balance}
/* G3 V-01: a long compound never runs past a card edge, at any width. Root cause: overflow-wrap:break-word does not lower
   the min-content size, so a word wider than the card's text box ("Gewichtszunahme" 188 px at 22 px; the corpus maximum is
   "Langlebigkeits‑Protokoll:" 263 px, joined by U+2011) widened .post-info-text past the card's padding (clipped by the r16
   card). anywhere = last resort only (DE hyphenation 12 6 8 from section 1 and normal breaks come first) and it also lowers
   min-content, so the text box always stays inside the card. Same guard on every card-title role. */
html.hm2 :is(.post-info-text .post-title :is(.h3,h2,h3),.top-post-text .top-post-link-block .h2,#tools-grid .heading){overflow-wrap:anywhere}
html.hm2:lang(de) :is(.post-info-text .post-title :is(.h3,h2,h3),.top-post-text .top-post-link-block .h2,#tools-grid .heading){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 6 8}
html.hm2 .post-info-text .post-title:hover :is(.h3,h2,h3){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (max-width:767px){html.hm2 .post-info-text .post-title :is(.h3,h2,h3){font-size:20px;line-height:27.5px}}
/* dark band card = homepage blog card (Cream 4% fill, 12% border, r16, flush cover, whole card clickable) */
html.hm2 .latest-posts .w-dyn-item{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--hm-cream-12);border-radius:var(--hm-r-card);background:var(--hm-cream-04);transition:border-color .25s}
html.hm2 .latest-posts .w-dyn-item:hover{border-color:var(--hm-cream-36)}
html.hm2 .latest-posts .w-dyn-item>a.posts-image{border-radius:0;background:var(--hm-espresso)}
html.hm2 .latest-posts .w-dyn-item>.post-info-text{padding:16px 20px 22px}
html.hm2 .latest-posts .post-info-text .post-title::after{content:"";position:absolute;inset:0}
html.hm2 .latest-posts .post-info-text :is(.category-link,a.post-author){position:relative;z-index:1}
html.hm2 .latest-posts .post-info-text .post-title:hover :is(.h3,h2,h3){text-decoration:none}
@media (max-width:719px){html.hm2 .latest-posts .w-dyn-item>.post-info-text{padding:14px 18px 18px}}
/* G3 V-01 size step: the 4-up Espresso band has a 160-220 px text box at 960-1199 px; the title scales 18 -> 22 px so the
   corpus' long compounds ("Sonntagabend" 194 px, "Gewichtszunahme" 188 px at 22 px) fit whole; 22 px from ~1100 px on */
@media (min-width:960px) and (max-width:1199px){html.hm2 .latest-posts ._4-collection-item .post-title :is(.h3,h2,h3){font-size:clamp(18px,calc(2.83vw - 9.5px),22px);line-height:1.36}}
/* no card lift under hm2 (hmncardmotion4's hover; its entrance keeps running until cardmotion5 ships, and hm2.js then skips its own) */
html.hm2 :is(.top-post-item,._3-collection-item,._2-collection-item,._4-collection-item):hover{transform:none}
@media (max-width:959px){
  html.hm2 .posts-collection-list.w-dyn-items,
  html.hm2 .latest-posts .posts-collection-list:has(>._4-collection-item){grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 16px}
  html.hm2 .latest-posts .posts-collection-list:has(>._4-collection-item){gap:28px 16px}
}
@media (max-width:719px){
  html.hm2 .posts-collection-list.w-dyn-items,
  html.hm2 .latest-posts .posts-collection-list:has(>._4-collection-item),
  html.hm2 :is(.latest-posts,.featured-posts) .posts-collection-list:has(>._2-collection-item){grid-template-columns:minmax(0,1fr);gap:40px}
  html.hm2 .latest-posts .posts-collection-list.w-dyn-items{gap:12px}
}

/* ---------- 5. Blog home ---------- */
html.hm2 .top-post{display:block;padding:calc(var(--nav-h) + 64px) var(--hm-g) 0;background:var(--hm-cream)}
html.hm2 .top-post .posts-wrapper.cc-top-post{display:block}
html.hm2 .top-post-item{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;perspective:none}
html.hm2 .top-post-item>a.top-post-image{display:block;width:auto;margin:0;overflow:hidden;border-radius:var(--hm-r-media);aspect-ratio:16/9;background:var(--hm-tint)}
html.hm2 .top-post-item>a.top-post-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform .9s var(--hm-ease)}
html.hm2 .top-post-item:hover>a.top-post-image img{transform:scale(1.03)}
html.hm2 .top-post-item>.top-post-text{width:auto;padding:0}
html.hm2 .top-post-text .top-post-link-block{display:block;margin-top:16px;color:inherit;text-decoration:none}
html.hm2 .top-post-text .top-post-link-block .h2{margin:0;font:800 clamp(34px,3.4vw,52px)/1.06 var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-espresso);text-wrap:balance}
html.hm2 .top-post-text .top-post-link-block:hover .h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
html.hm2 .top-post-text .post-short-text{margin-top:20px;max-width:44ch;font:400 19px/1.55 var(--hm-font-sans);color:var(--hm-walnut);text-wrap:pretty}
html.hm2 .top-post-text .post-author-text{margin-top:18px}
html.hm2 ._3-posts{display:block;padding:96px var(--hm-g) 0;background:var(--hm-cream)}
html.hm2 .latest-posts{display:block;margin-top:var(--hm-blog-mt);padding:var(--hm-sec-pt) var(--hm-g) var(--hm-blog-pb);background:var(--hm-espresso);color:var(--hm-cream)}   /* head §14 margin-top overridden */
html.hm2 .featured-posts{display:block;padding:var(--hm-sec-pt) var(--hm-g) var(--hm-blog-mt);background:var(--hm-cream)}
html.hm2 .featured-posts .post-info-text .post-title :is(.h3,h2,h3){font-size:clamp(24px,2vw,28px);line-height:1.2}
/* "View all articles" = secondary button on Espresso */
html.hm2 .latest-posts a.button.w-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:44px;margin-top:64px;padding:10px 20px;
  border:1px solid var(--hm-cream-14);border-radius:var(--hm-r-btn);background:var(--hm-cream-06);color:var(--hm-cream);-webkit-text-stroke-color:currentColor;
  font:400 14px/1.3 var(--hm-font-sans);letter-spacing:0;text-transform:none;text-decoration:none;transition:background-color .3s,color .3s,border-color .3s}
html.hm2 .latest-posts a.button.w-button:hover{background:var(--hm-cream);border-color:var(--hm-cream);color:var(--hm-espresso)}
@media (max-width:959px){
  html.hm2 .top-post-item{grid-template-columns:minmax(0,1fr);gap:28px}
}
@media (max-width:719px){
  html.hm2 .top-post{padding-top:calc(var(--nav-h) + 28px)}
  html.hm2 .top-post-text .post-short-text{font-size:17px}
  html.hm2 ._3-posts{padding-top:64px}
  html.hm2 .latest-posts a.button.w-button{margin-top:34px;font-size:13px}
}

/* ---------- 6. Listing pages: category / latest / tags / hubs (.title-section.cc-detail) ---------- */
html.hm2 .title-section.cc-detail{display:block;padding:calc(var(--nav-h) + 72px) var(--hm-g) var(--hm-blog-mt)!important;background:var(--hm-cream)}   /* head! §3 */
html.hm2 .title-section.cc-detail .h2.cc-title-section{display:flex;align-items:center;gap:20px;margin:0;font:800 clamp(40px,4.45vw,64px)/1.02 var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-espresso);text-wrap:balance}
html.hm2 .title-section.cc-detail .cc-title-section+.posts-wrapper{margin-top:64px}
/* category H1 gets its domain dot from the canonical URL */
html.hm2:has(link[rel="canonical"][href*="/category/"]) .title-section.cc-detail .cc-title-section::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:var(--ring,none)}
html.hm2:has(link[rel="canonical"][href$="/category/frame"]) .cc-title-section{--c:var(--hm-frame)}
html.hm2:has(link[rel="canonical"][href$="/category/heart"]) .cc-title-section{--c:var(--hm-heart)}
html.hm2:has(link[rel="canonical"][href$="/category/metabolism"]) .cc-title-section{--c:var(--hm-metabolism)}
html.hm2:has(link[rel="canonical"][href$="/category/recovery"]) .cc-title-section{--c:var(--hm-recovery)}
html.hm2:has(link[rel="canonical"][href$="/category/mind"]) .cc-title-section{--c:var(--hm-mind)}
html.hm2:has(link[rel="canonical"][href$="/category/general"]) .cc-title-section{--c:transparent;--ring:inset 0 0 0 1.5px var(--hm-walnut)}
/* category + latest: the first card becomes a horizontal feature (same DOM) */
@media (min-width:960px){
  html.hm2 .title-section.cc-detail .posts-collection-list>._3-collection-item:first-child{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin-bottom:24px}
  html.hm2 .title-section.cc-detail .posts-collection-list>._3-collection-item:first-child>.post-info-text{padding:0}
  html.hm2 .title-section.cc-detail .posts-collection-list>._3-collection-item:first-child .post-title :is(.h3,h2,h3){font-size:clamp(30px,2.8vw,40px);line-height:1.1}
}
/* Webflow empty state (tags) */
html.hm2 .title-section.cc-detail .w-dyn-empty{display:grid;place-items:center;min-height:240px;padding:48px 24px;border:1px solid var(--hm-walnut-16);border-radius:var(--hm-r-card);background:var(--hm-tint);font:400 17px/1.55 var(--hm-font-sans);color:var(--hm-walnut);text-align:center}
@media (max-width:719px){
  html.hm2 .title-section.cc-detail{padding-top:calc(var(--nav-h) + 40px)!important}
  html.hm2 .title-section.cc-detail .h2.cc-title-section{gap:14px}
  html.hm2 .title-section.cc-detail .cc-title-section+.posts-wrapper{margin-top:40px}
  html.hm2:has(link[rel="canonical"][href*="/category/"]) .title-section.cc-detail .cc-title-section::before{width:12px;height:12px}
}
/* hubs: #tools-grid shared by tools + stats (head §16 intent kept: images get the card width + 16:9 box) */
html.hm2 .title-section.cc-detail [data-hub-intro]{max-width:640px;margin:22px 0 0;font:400 19px/1.55 var(--hm-font-sans);color:var(--hm-walnut);text-wrap:pretty}
html.hm2 .title-section.cc-detail #tools-grid{display:grid;grid-template:none;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-rows:auto;gap:48px 24px;margin-top:64px}   /* grid-template:none drops .div-block-2's 3 named rows (empty rows + gaps) */
html.hm2 #tools-grid>a{display:flex;flex-direction:column;gap:16px;color:var(--hm-espresso);text-decoration:none}
html.hm2 #tools-grid>a>div:first-child{overflow:hidden;border-radius:var(--hm-r-media);background:var(--hm-tint);aspect-ratio:16/9}
html.hm2 #tools-grid>a img{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;transition:transform .9s var(--hm-ease)}
html.hm2 #tools-grid>a:hover img{transform:scale(1.03)}
html.hm2 #tools-grid .heading{margin:0;font:800 22px/30px var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-espresso);text-wrap:balance}   /* balance kept (G3 V-06 re-run: pretty left MORE one-word last lines in the 186 px phone rows, 20 vs 14) */
html.hm2 #tools-grid>a:hover .heading{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (max-width:719px){
  html.hm2 .title-section.cc-detail [data-hub-intro]{margin-top:14px;font-size:17px}
  html.hm2 .title-section.cc-detail #tools-grid{grid-template-columns:minmax(0,1fr);gap:0;margin-top:40px}
  /* phone: compact index rows (thumb + title), 44 px+ targets */
  html.hm2 #tools-grid>a{flex-direction:row;align-items:center;gap:16px;min-height:88px;padding:10px 0}
  html.hm2 #tools-grid>a>div:first-child{flex:0 0 118px}
  html.hm2 #tools-grid .heading{font-size:20px;line-height:1.25}
}

/* ---------- 7. Article: Cream title area on the 1032 px rail ---------- */
/* H1 measure in em, not ch (G3 V-02): 1ch = the CURRENT font's "0", so a ch box changes width at the font swap whatever the
   fallback's size-adjust. Playfair Display 800 "0" = 0.66 em (measured), so 15.84em = 24ch and 14.52em = 22ch with the web font */
html.hm2 .title-section:not(.cc-detail){display:block;padding:calc(var(--nav-h) + 64px) var(--hm-g) 48px!important;background:var(--hm-cream)}   /* head! §3 */
html.hm2 .title-section:not(.cc-detail)>.container{display:block;width:100%;max-width:var(--rail);margin:0 auto}
html.hm2 .title-section:not(.cc-detail) .text-container{width:auto}
html.hm2 .title-section a.section-title-text{display:inline-flex;margin:0 0 22px;text-decoration:none}
html.hm2 .title-section .post-category-text{margin:0}
html.hm2 .title-section .h1{margin:0;max-width:15.84em;font-family:var(--hm-font-display)!important;font-size:clamp(40px,3.35vw,50px)!important;line-height:1.08!important;text-wrap:balance}   /* head! §3 (family/weight/colour already canon) */
html.hm2 .title-section .post-author-text.cc-center{display:flex;align-items:flex-start;min-height:40px;margin-top:28px}   /* reserved = built row (40 px circles): no shift when the script swaps the 30 px stub */
/* the footer script's unclassed meta row (inline flex style) = meta left, share right */
html.hm2 .title-section .post-author-text.cc-center>div{flex:1 1 auto;justify-content:space-between;gap:14px 24px!important;margin-top:0!important}   /* inline! */
html.hm2 #huuman-meta-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0;font:400 14px/1.4 var(--hm-font-sans);color:var(--hm-walnut)}
html.hm2 #huuman-meta-bar .meta-author{font-weight:600;color:var(--hm-espresso)}
html.hm2 #huuman-meta-bar .meta-divider{font-size:14px;color:var(--hm-walnut)}
html.hm2 #huuman-meta-bar .meta-reviewed{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:4px 10px;border:1px solid var(--hm-walnut-20);border-radius:var(--hm-r-btn);background:var(--hm-tint);
  font:500 12.5px/1 var(--hm-font-sans);letter-spacing:0;color:var(--hm-espresso);transition:background-color .2s,color .2s,border-color .2s}
html.hm2 #huuman-meta-bar .meta-reviewed:hover{background:var(--hm-espresso);border-color:var(--hm-espresso);color:var(--hm-cream)}
html.hm2 #huuman-share{display:flex;align-items:center;gap:8px;margin:0}
html.hm2 #huuman-share .share-sep{display:none}
html.hm2 #huuman-share a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--hm-walnut-20);border-radius:50%;background:transparent;color:var(--hm-walnut);font:500 14px/1 var(--hm-font-sans);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
html.hm2 #huuman-share a:hover{background:var(--hm-espresso);border-color:var(--hm-espresso);color:var(--hm-cream)}
@media (max-width:1111px){
  html.hm2 .title-section:not(.cc-detail)>.container{max-width:var(--col)}
  /* narrow rail: share row always under the meta line (EN and DE alike), so the reserved height is exact */
  html.hm2 #huuman-meta-bar{flex:1 1 100%}
  html.hm2 .title-section .post-author-text.cc-center{min-height:82px}   /* 28 + 14 + 40 */
}
@media (max-width:959px){
  html.hm2 .title-section .h1{font-size:36px!important;line-height:1.1!important;max-width:14.52em}
  html.hm2 #huuman-share a{width:44px;height:44px}
  html.hm2 .title-section .post-author-text.cc-center{min-height:86px}   /* 28 + 14 + 44 */
}
@media (max-width:719px){
  html.hm2 .title-section:not(.cc-detail){padding:calc(var(--nav-h) + 36px) var(--hm-g) 32px!important}
  html.hm2 .title-section a.section-title-text{margin-bottom:16px}
  html.hm2 .title-section .h1{font-size:28px!important;line-height:1.14!important;max-width:none;text-wrap:pretty}
  html.hm2 .title-section .post-author-text.cc-center{margin-top:22px;min-height:113px}   /* built row at <=719: author+date / read time+chip / share (18.9+8+28+14+44) */
  html.hm2 #huuman-meta-bar{column-gap:16px;font-size:13.5px}
  html.hm2 #huuman-meta-bar .meta-divider{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}   /* phone: no dangling separators at wrap points (DELTAS); visually hidden only, screen readers keep the "·" (G3 V-04; clip + clip-path hide the paint, no overflow:hidden so layout tools see no clipped text) */
}
/* hero: contained r8 on the rail, straddling the Cream -> white edge (hard stop) */
html.hm2 .post-image{display:block;overflow:visible;background:linear-gradient(var(--hm-cream) 50%,var(--paper) 50%)}
html.hm2 .post-image>.container.cc-post-image{width:100%;max-width:calc(var(--rail) + 2 * var(--hm-g));margin:0 auto;padding:0 var(--hm-g);box-sizing:border-box}
/* whole image, natural ratio, never cropped or distorted (HERO_AUDIT.md): the box is reserved at the corpus ratio
   (2400x1260 = 40:21) before load and follows the image's own ratio once decoded (aspect-ratio:auto <ratio>) */
html.hm2 .post-image>.container.cc-post-image>img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:auto 40/21;object-fit:contain;object-position:50% 50%;border-radius:var(--hm-r-media)}
@media (max-width:719px){
  html.hm2 .post-image>.container.cc-post-image{padding:0}
  html.hm2 .post-image>.container.cc-post-image>img{border-radius:0}   /* phone: full-bleed media stays square (blog canon) */
}

/* ---------- 8. Article + tool article: white reading surface ---------- */
html.hm2 .post-content{display:block;padding:72px var(--hm-g) 120px;background:var(--paper)}
html.hm2 .post-content>.post-content-wrapper{max-width:var(--rail);margin:0 auto}
html.hm2 .post-content .rich-text{max-width:var(--col)}
@media (max-width:1200px){html.hm2 .post-content .rich-text{margin:0 auto}}
@media (max-width:1111px){html.hm2 .post-content>.post-content-wrapper{max-width:var(--col)}}
@media (max-width:719px){html.hm2 .post-content{padding:44px var(--hm-g) 88px}}
/* rich text (pipeline contract). :where() keeps specificity flat */
html.hm2 .w-richtext{color:var(--hm-walnut);font:400 18px/1.7 var(--hm-font-sans)}
html.hm2 .w-richtext :where(p,li){font-family:var(--hm-font-sans)!important;font-size:18px;line-height:1.7;font-weight:400;color:var(--hm-walnut);text-wrap:pretty}   /* head! §1 family */
html.hm2 .w-richtext :where(p){margin:0 0 22px}
html.hm2 .w-richtext :where(strong,b){font-weight:600;color:var(--hm-espresso)}
html.hm2 .w-richtext :where(h2){margin:72px 0 18px;font:800 30px/1.16 var(--hm-font-display)!important;letter-spacing:0!important;text-transform:none!important;color:var(--hm-espresso);text-wrap:balance;scroll-margin-top:96px}   /* head! §1 */
html.hm2 .w-richtext :where(h3){margin:44px 0 12px;font:800 21px/1.3 var(--hm-font-display)!important;letter-spacing:0!important;text-transform:none!important;color:var(--hm-espresso);text-wrap:balance}   /* head! §1 */
html.hm2 .w-richtext :where(h4){margin:32px 0 8px;font:600 17px/1.4 var(--hm-font-sans)!important;color:var(--hm-espresso)}   /* head! §1 */
html.hm2 .w-richtext :where(h2+h3){margin-top:28px}
html.hm2 .w-richtext>:where(h2:first-child){margin-top:0}
html.hm2 .w-richtext :where(ul,ol){margin:0 0 26px;padding-left:1.35em}
html.hm2 .w-richtext :where(li){margin:0 0 10px;padding-left:.25em}
html.hm2 .w-richtext :where(li)::marker{color:var(--hm-walnut)!important;font-variant-numeric:tabular-nums}   /* head! §1 */
html.hm2 .w-richtext :where(a){color:var(--hm-espresso);text-decoration:underline;text-decoration-color:var(--hm-vicuna);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s}
html.hm2 .w-richtext :where(a):hover{text-decoration-color:var(--hm-espresso)}
/* inline figure + caption (figure.w-richtext-figure-type-image > div > img + figcaption) */
html.hm2 .w-richtext figure{margin:44px 0;max-width:100%}
html.hm2 .w-richtext figure>div{display:block;width:100%}
html.hm2 .w-richtext figure img{display:block;width:100%;max-width:100%;height:auto;margin:0;border-radius:var(--hm-r-media);cursor:zoom-in}
html.hm2 .w-richtext figcaption{margin-top:12px;font:400 14px/1.5 var(--hm-font-sans);color:var(--hm-walnut);text-align:left;text-wrap:pretty}
@media (max-width:719px){
  html.hm2 .w-richtext figure{margin:36px calc(var(--hm-g) * -1);max-width:none}
  html.hm2 .w-richtext figure img{border-radius:0}
  html.hm2 .w-richtext figcaption{padding:0 var(--hm-g)}
}
/* blockquote = Cream note card r8 (no accent stripe); "Key takeaways" = eyebrow + hanging numerals */
html.hm2 .w-richtext blockquote{margin:36px 0;padding:28px 32px 8px;border:0;border-radius:var(--hm-r-media);background:var(--hm-cream);color:var(--hm-walnut);font-style:normal}
html.hm2 .w-richtext blockquote p{margin-bottom:18px;font-size:17px;line-height:1.6}
html.hm2 .w-richtext blockquote>p:first-child:has(>strong:only-child){margin-bottom:16px;font:600 12px/1 var(--hm-font-sans)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--hm-walnut)}   /* head! §1 */
html.hm2 .w-richtext blockquote>p:first-child:has(>strong:only-child) strong{font-weight:600;color:var(--hm-walnut)}
html.hm2 .w-richtext blockquote:has(>p:first-child>strong:only-child)>p:not(:first-child){padding-left:1.35em;text-indent:-1.35em;color:var(--hm-espresso)}
@media (max-width:719px){html.hm2 .w-richtext blockquote{padding:24px 20px 6px}}
/* tables (none in the corpus today; ready inside .w-richtext) */
html.hm2 .w-richtext table{width:100%;margin:32px 0;border-collapse:collapse;font:400 15px/1.45 var(--hm-font-sans);font-variant-numeric:tabular-nums;color:var(--hm-walnut)}
html.hm2 .w-richtext :is(th,td){padding:12px 14px 12px 0;border-bottom:1px solid var(--hm-walnut-16);text-align:left;vertical-align:top;font-size:15px;line-height:1.45}
html.hm2 .w-richtext th{font:600 12px/1.2 var(--hm-font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--hm-espresso)}
/* FAQ ("Common questions" / "Häufige Fragen" / tool "Frequently Asked Questions"): homepage hairline rows, answers stay open */
html.hm2 .w-richtext :is(#section-common-questions,[id="section-häufige-fragen"],#section-frequently-asked-questions,[id="section-häufig-gestellte-fragen"])~h3:has(+p){margin:0;padding:24px 0 10px;border-top:1px solid var(--hm-walnut-16);font:500 20px/1.35 var(--hm-font-sans)!important;color:var(--hm-espresso)}   /* head! §1 */
html.hm2 .w-richtext :is(#section-common-questions,[id="section-häufige-fragen"],#section-frequently-asked-questions,[id="section-häufig-gestellte-fragen"])~h3:has(+p)+p{margin-bottom:24px;font-size:17px;line-height:1.62}
html.hm2 .w-richtext :is(#section-common-questions,[id="section-häufige-fragen"],#section-frequently-asked-questions,[id="section-häufig-gestellte-fragen"])+h3{margin-top:8px}
/* "More health topics to explore" (h3 + last ul) = next-read link tiles */
html.hm2 .w-richtext h3:has(+ul:last-of-type){margin:64px 0 16px;padding:0;border:0;font:600 12px/1 var(--hm-font-sans)!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--hm-walnut)}   /* head! §1 */
html.hm2 .w-richtext h3:has(+ul:last-of-type)+ul{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 8px;padding:0;list-style:none!important}   /* head! §1 */
html.hm2 .w-richtext h3:has(+ul:last-of-type)+ul li{display:flex;margin:0;padding:0}
html.hm2 .w-richtext h3:has(+ul:last-of-type)+ul a{display:flex;align-items:flex-start;width:100%;min-height:64px;padding:16px 18px;border-radius:var(--hm-r-media);background:var(--hm-cream);font:500 15.5px/1.4 var(--hm-font-sans);color:var(--hm-espresso);text-decoration:none;transition:background-color .2s}
html.hm2 .w-richtext h3:has(+ul:last-of-type)+ul a:hover{background:var(--hm-tint)}
@media (max-width:719px){html.hm2 .w-richtext h3:has(+ul:last-of-type)+ul{grid-template-columns:1fr}}
/* References / Quellen (h2 + ol) */
html.hm2 .w-richtext :is(#section-references,#section-quellen)+ol{padding-left:1.6em}
html.hm2 .w-richtext :is(#section-references,#section-quellen)+ol li{margin-bottom:8px;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
/* About this article (literal pipeline constant) + Disclaimer */
html.hm2 .w-richtext p:has(>small>em>strong){margin:44px 0 14px;padding:22px 24px;border-radius:var(--hm-r-media);background:var(--hm-cream)}
html.hm2 .w-richtext p:has(>small>em>strong) small{font-size:15px;line-height:1.6}
html.hm2 .w-richtext p:has(>small>em>strong) em{font-style:normal}
html.hm2 .w-richtext p:has(>em:only-child):last-child{margin:0;font-size:14px;line-height:1.6}
html.hm2 .w-richtext p:has(>em:only-child):last-child em{font-style:normal}
@media (max-width:719px){
  html.hm2 .w-richtext,html.hm2 .w-richtext :where(p,li){font-size:17px;line-height:1.65}
  html.hm2 .w-richtext :where(h2){margin-top:56px;font-size:25px!important;line-height:1.2!important}
  html.hm2 .w-richtext :where(h3){margin-top:36px;font-size:19px!important}
  html.hm2 .w-richtext :is(#section-common-questions,[id="section-häufige-fragen"],#section-frequently-asked-questions,[id="section-häufig-gestellte-fragen"])~h3:has(+p){font-size:18px!important}
  html.hm2 .w-richtext h3:has(+ul:last-of-type){font-size:12px!important}
}

/* ---------- 9. ToC: floating (>1200) + inline (<=1200); built + shown/hidden by the footer script ---------- */
html.hm2 #huuman-toc-container{top:calc(var(--nav-h) + 40px);right:max(var(--hm-g),calc((100% - var(--rail)) / 2));width:var(--toc-w);max-height:calc(100vh - var(--nav-h) - 80px);
  padding:4px 0 8px;border:0;border-radius:0;background:var(--paper);box-shadow:none;scrollbar-width:thin;box-sizing:border-box}
html.hm2 :is(#huuman-toc-container,#huuman-toc-inline) .toc-label{margin:0 0 14px;font:600 12px/1 var(--hm-font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--hm-walnut)}
html.hm2 #huuman-toc-container a:not(.toc-cta){position:relative;display:block;padding:7px 0 7px 16px;border:0;font:400 14px/1.4 var(--hm-font-sans);color:var(--hm-walnut);text-decoration:none;box-shadow:inset 1px 0 var(--hm-walnut-16);transition:color .2s,box-shadow .2s}
html.hm2 #huuman-toc-container a:not(.toc-cta):hover{color:var(--hm-espresso)}
html.hm2 #huuman-toc-container a.active{font-weight:500;color:var(--hm-espresso);box-shadow:inset 2px 0 var(--hm-espresso)}
html.hm2 a.toc-cta{display:flex!important;align-items:center;justify-content:center;min-height:44px;margin-top:22px;padding:12px 24px;border:0!important;border-radius:var(--hm-r-btn);background:var(--hm-espresso);
  color:var(--hm-cream)!important;font:500 16px/1.25 var(--hm-font-sans);letter-spacing:0;text-align:center;text-decoration:none!important;box-shadow:none!important;transition:background-color .25s var(--hm-ease)}   /* head! §7 */
html.hm2 a.toc-cta:hover{background:var(--hm-walnut)!important}
html.hm2 #huuman-toc-inline{margin:32px 0 40px;padding:24px;border:0;border-radius:var(--hm-r-media);background:var(--hm-cream)}
html.hm2 #huuman-toc-inline a:not(.toc-cta){display:flex;align-items:center;min-height:44px;padding:9px 0;border-top:1px solid var(--hm-walnut-16);border-bottom:0;font:500 16px/1.35 var(--hm-font-sans);color:var(--hm-espresso);text-decoration:none}
html.hm2 #huuman-toc-inline a:not(.toc-cta):last-of-type{border-bottom:1px solid var(--hm-walnut-16)}
html.hm2 #huuman-toc-inline a:not(.toc-cta):hover{color:var(--hm-walnut)}
@media (max-width:719px){html.hm2 #huuman-toc-inline{margin-inline:calc(var(--hm-g) * -1 + 8px);padding:22px 20px}}

/* ---------- 10. Progress, back to top, lightbox, cookie reopener ---------- */
html.hm2 #huuman-progress-track{height:2px;background:transparent}
html.hm2 #huuman-progress{height:2px;background:var(--hm-espresso);border-radius:0}
html.hm2 #huuman-back-top{right:24px;bottom:24px;width:48px;height:48px;border:1px solid var(--hm-walnut-20);border-radius:50%;background:var(--hm-cream);color:var(--hm-espresso);
  font:500 18px/1 var(--hm-font-sans);box-shadow:none;transition:background-color .2s,color .2s,border-color .2s,opacity .3s}
html.hm2 #huuman-back-top:hover{background:var(--hm-espresso);border-color:var(--hm-espresso);color:var(--hm-cream)}
html.hm2 #huuman-lightbox{background:var(--hm-espresso);-webkit-backdrop-filter:none;backdrop-filter:none}
html.hm2 #hcro{left:16px;bottom:16px;z-index:95;min-height:36px;padding:0 16px;border:1px solid var(--hm-walnut-20);border-radius:var(--hm-r-pill);background:var(--hm-cream);color:var(--hm-walnut);font:400 13px/1 var(--hm-font-sans);cursor:pointer}
html.hm2 #hcro:hover{background:var(--hm-espresso);border-color:var(--hm-espresso);color:var(--hm-cream)}
@media (pointer:coarse){html.hm2 #hcro{min-height:44px}}
/* consent card #hcc (huumanconsentbanner): restyled only (G3 V-03). Same DOM, text, fixed position, size limit and buttons;
   dark card canon = Espresso, Cream 14 % border, r16; title Playfair 800; DM Sans text; buttons r6 with EQUAL weight
   (same size, both Cream-bordered: accept filled, reject outlined, as today) */
html.hm2 #hcc{font-family:var(--hm-font-sans)}
html.hm2 #hcc .c{padding:24px 24px 22px;border:1px solid var(--hm-cream-14);border-radius:var(--hm-r-card);background:var(--hm-espresso);color:var(--hm-cream);box-shadow:none}
html.hm2 #hcc .t{margin:0 0 8px;font:800 22px/1.2 var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-cream)}
html.hm2 #hcc .b{margin:0 0 10px;font:400 14px/1.5 var(--hm-font-sans);color:var(--hm-vicuna);text-wrap:pretty}
html.hm2 #hcc .l{margin:0 0 18px;font:400 13px/1.4 var(--hm-font-sans);color:var(--hm-vicuna)}
html.hm2 #hcc .l a{color:var(--hm-cream);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html.hm2 #hcc .x{display:flex;gap:10px}
html.hm2 #hcc .x button{flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:10px 12px;border:1px solid var(--hm-cream);border-radius:var(--hm-r-btn);
  font:500 14px/1.3 var(--hm-font-sans);letter-spacing:0;text-transform:none;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
html.hm2 #hcc #hca{background:var(--hm-cream);color:var(--hm-espresso)}
html.hm2 #hcc #hca:hover{background:var(--hm-vicuna);border-color:var(--hm-vicuna)}
html.hm2 #hcc #hcr{background:transparent;color:var(--hm-cream)}
html.hm2 #hcc #hcr:hover{background:var(--hm-cream-12)}
html.hm2 #hcc :is(a,button):focus-visible{outline:2px solid var(--hm-cream);outline-offset:3px}
@media (max-width:719px){
  html.hm2 #hcc .c{padding:20px 18px 18px}
  html.hm2 #hcc .t{font-size:20px}
  html.hm2 #hcc .x button{font-size:13px}
}

/* ---------- 11. Related band (article): homepage blog band on Espresso, flowing into the footer ---------- */
html.hm2 .post-content~.latest-posts{margin-top:0;padding:120px var(--hm-g) var(--hm-blog-pb)}
html.hm2 .post-content~.latest-posts>.container{max-width:var(--rail)}
@media (max-width:1111px){html.hm2 .post-content~.latest-posts>.container{max-width:var(--hm-max)}}
@media (max-width:719px){html.hm2 .post-content~.latest-posts{padding-top:88px}}

/* ---------- 12. Tool + stat pages: calculator untouched (never styled inside), chrome only ---------- */
/* section.section keeps Webflow's padding-top:80px so the calculator stays exactly where it is today */
html.hm2 section.section>.post-content:has(>.post-content-wrapper:empty){display:none}   /* stats: empty white strip (DELTAS) */

/* ---------- 13. Footer: homepage footer on today's footer symbol (union of links; BUILD_SPEC §8.3/§8.6) ----------
   DOM: .container-footer > [C1 .container > .top-section > (giant F5) + a.logo.cc-footer]
                           + .separator-footer + [C2 .container > .bottom > (foot-cta F1) + .bottom-1 + .bottom-2, legal F4]
   Visual: C2 first ([F1 | categories | information], then ©), C1 last (giant wordmark, the logo link as its hit area).
   Until the Designer build ships (no F5), the cream logo stays on top, as today. The .footer root class is untouched. */
html.hm2 .footer{position:relative;display:block;margin-top:0;padding:var(--hm-foot-pt) var(--hm-g) 72px;overflow:hidden;background:var(--hm-espresso);color:var(--hm-cream);-webkit-text-stroke-color:currentColor}
html.hm2 .footer>.container-footer{display:flex;flex-direction:column;width:100%;max-width:var(--hm-max);margin:0 auto}
html.hm2 .footer .container-footer>.container{display:block;width:100%;max-width:none;margin:0;padding:0}
html.hm2 .footer .container-footer>.container:first-child{order:3}
html.hm2 .footer .container-footer:not(:has(.hm2-only[data-hm2="giant"]))>.container:first-child{order:0;margin-bottom:56px}
html.hm2 .footer .top-section{position:relative;display:block}
html.hm2 .footer .logo.cc-footer{display:inline-block;margin:0;padding:6px 0}
html.hm2 .footer .logo.cc-footer .image-logo{display:block;width:auto;height:30px;max-width:none}
html.hm2 .latest-posts+.footer{margin-top:-1px}   /* closes the seam between two Espresso bands only; never over a calculator (stat pages) */
html.hm2 .footer .dropdown{display:none}   /* phone "Categories" dropdown = duplicate of the category list (NOTES, BUILD_SPEC §8.6) */
html.hm2 .footer .bottom{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:48px;width:100%}
html.hm2 .footer .bottom:not(:has(>.hm2-only[data-hm2="foot-cta"])){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html.hm2 .footer .bottom-1,html.hm2 .footer .bottom-2{display:block;width:auto;margin:0;flex:none}
html.hm2 .footer .footer-categories{display:block;width:auto}   /* shown at every width (Webflow hides it <=767) */
html.hm2 .footer :is(.footer-links-container,.footer-links){display:block;width:auto;margin:0;padding:0}
html.hm2 .footer .footer-title-text{width:auto;margin:0 0 18px;font:600 12px/1 var(--hm-font-sans);letter-spacing:.16em;text-transform:uppercase;color:var(--hm-vicuna)}
html.hm2 .footer .footer-links-container.cc-categories .collection-list{display:flex;flex-direction:column;align-items:flex-start}
html.hm2 .footer .footer-collection-item{width:auto;margin:0;font:inherit;color:inherit}
html.hm2 .footer .footer-links-inner{display:flex;flex-direction:column;align-items:flex-start;width:auto;margin:0}
html.hm2 .footer :is(a.link-footer,a.nav-link.white,a[data-hm2="editorial"],a[data-hm2="cookie-settings"]){display:inline-flex;align-items:center;gap:10px;min-height:36px;margin:0;padding:0;border:0;background:none;
  font:400 15.5px/1.2 var(--hm-font-sans);letter-spacing:0;text-transform:none;color:var(--hm-cream);text-decoration:none;cursor:pointer}
html.hm2 .footer :is(a.link-footer,a.nav-link.white,a[data-hm2="editorial"],a[data-hm2="cookie-settings"]):hover{text-decoration:underline;text-underline-offset:4px}
html.hm2 .footer a.link-footer::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c,transparent);box-shadow:var(--ring,none)}
/* F1 slogan + CTA, F4 ©, F5 giant wordmark (+ the logo link as its invisible hit area) */
html.hm2 .footer .hm2-only[data-hm2="foot-cta"]{display:block}
html.hm2 .footer [data-hm2="slogan"]{margin:0;font:800 clamp(34px,3.3vw,48px)/1.02 var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-cream)}   /* "Stay in your prime": protected, never transformed */
html.hm2 .footer a[data-hm2="foot-cta-btn"]{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:30px;padding:12px 24px;border:0;border-radius:var(--hm-r-btn);background:var(--hm-cream);color:var(--hm-espresso);
  font:500 16px/1.25 var(--hm-font-sans);letter-spacing:0;text-transform:none;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--hm-ease)}
html.hm2 .footer a[data-hm2="foot-cta-btn"]:hover{background:var(--hm-tint)}
html.hm2 .footer a[data-hm2="foot-cta-btn"] *{color:inherit;font:inherit}
html.hm2 .footer .hm2-only[data-hm2="editorial"],html.hm2 .footer .hm2-only[data-hm2="cookie-settings"]{display:inline-flex}
html.hm2 .footer .hm2-only[data-hm2="legal"]{display:block;margin:72px 0 0;font:400 13px/1.4 var(--hm-font-sans);color:var(--hm-vicuna)}
html.hm2 .footer .hm2-only[data-hm2="giant"]{display:block;height:.75em;margin:64px 0 0;overflow:hidden;font:800 22vw/1 var(--hm-font-display);letter-spacing:-.03em;white-space:nowrap;color:var(--hm-cream);-webkit-user-select:none;user-select:none}
html.hm2 .footer .top-section:has(>.hm2-only[data-hm2="giant"])>a.logo.cc-footer{position:absolute;inset:0;z-index:1;display:block;padding:0}
html.hm2 .footer .top-section:has(>.hm2-only[data-hm2="giant"])>a.logo.cc-footer .image-logo{opacity:0}
html.hm2 .footer:has(.hm2-only[data-hm2="giant"]){padding-bottom:0}
@media (min-width:1440px){html.hm2 .footer .hm2-only[data-hm2="giant"]{font-size:317px}}
@media (max-width:959px){
  html.hm2 .footer .bottom,html.hm2 .footer .bottom:not(:has(>.hm2-only[data-hm2="foot-cta"])){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px 24px}
  html.hm2 .footer .hm2-only[data-hm2="foot-cta"]{grid-column:1/-1}
  html.hm2 .footer :is(a.link-footer,a.nav-link.white,a[data-hm2="editorial"],a[data-hm2="cookie-settings"]){min-height:44px}
}
@media (max-width:719px){
  html.hm2 .footer{padding-bottom:56px}
  html.hm2 .footer .hm2-only[data-hm2="legal"]{margin-top:56px}
  html.hm2 .footer .hm2-only[data-hm2="giant"]{margin-top:44px}
}

/* ---------- 14. Blog 404 (Webflow's bare error page: style the existing chrome only) ---------- */
html.hm2 body:has(>.utility-wrapper){background:var(--hm-cream);color:var(--hm-espresso);font-family:var(--hm-font-sans)}
html.hm2 .utility-wrapper{width:auto;min-height:100vh;padding:0 var(--hm-g);box-sizing:border-box}
html.hm2 .utility-wrapper>.utility-container{justify-content:flex-start;width:100%;height:auto;max-width:var(--hm-max);margin:0 auto;padding:clamp(56px,10vh,120px) 0 96px}
html.hm2 .utility-container>.text-mono{margin:0;font:800 clamp(140px,24vw,340px)/.8 var(--hm-font-display);letter-spacing:-.03em;text-transform:none;color:var(--hm-espresso);font-variant-numeric:lining-nums}
html.hm2 .utility-container>.utility-content{max-width:none;margin:48px 0 0}
html.hm2 .utility-content>h1{margin:0;font:800 clamp(40px,4.45vw,64px)/1.02 var(--hm-font-display);letter-spacing:0;color:var(--hm-espresso);text-wrap:balance}
html.hm2 .utility-content>p{max-width:36ch;margin:22px 0 0;font:400 19px/1.55 var(--hm-font-sans);color:var(--hm-walnut)}
@media (max-width:719px){html.hm2 .utility-container>.utility-content{margin-top:32px}html.hm2 .utility-content>p{font-size:17px}}

/* ---------- 14b. Blog 404, designed (Webflow 404 page, decision #3): Nav + main[data-hm2="notfound"] + Footer ----------
   main > [div[data-hm2=nf-code] aria-hidden "404", h1, div[data-hm2=nf-text] > [p, div[data-hm2=nf-links] > 3 a > div]]
   = mockups/blog/404-*.html (.hm-404): giant Playfair 800 code, H1 left 5/12 + line and secondary buttons right 7/12 */
html.hm2 body:has(>main[data-hm2="notfound"]){background:var(--hm-cream)}
html.hm2 main[data-hm2="notfound"]{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:96px;align-items:end;box-sizing:border-box;width:100%;margin:0;
  padding:calc(var(--nav-h) + 40px) max(var(--hm-g),calc((100% - var(--hm-max)) / 2)) var(--hm-blog-mt);background:var(--hm-cream);color:var(--hm-espresso)}
html.hm2 main[data-hm2="notfound"]>[data-hm2="nf-code"]{grid-column:1/-1;margin:0 0 48px;font:800 clamp(140px,24vw,340px)/.8 var(--hm-font-display);letter-spacing:-.03em;color:var(--hm-espresso);font-variant-numeric:lining-nums}
html.hm2 main[data-hm2="notfound"]>h1{grid-column:1;margin:0;max-width:15.84em;font:800 clamp(40px,3.35vw,50px)/1.08 var(--hm-font-display);letter-spacing:0;text-transform:none;color:var(--hm-espresso);text-wrap:balance}
html.hm2 main[data-hm2="notfound"]>[data-hm2="nf-text"]{grid-column:2;min-width:0}
html.hm2 main[data-hm2="notfound"] [data-hm2="nf-text"]>p{max-width:36ch;margin:0;font:400 19px/1.55 var(--hm-font-sans);color:var(--hm-walnut)}
html.hm2 main[data-hm2="notfound"] [data-hm2="nf-links"]{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0}
html.hm2 main[data-hm2="notfound"] [data-hm2="nf-links"]>a{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;min-height:44px;box-sizing:border-box;padding:10px 20px;
  border:1px solid var(--hm-walnut-20);border-radius:var(--hm-r-btn);background:var(--hm-tint);color:var(--hm-walnut);font:400 14px/1.3 var(--hm-font-sans);letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s}
html.hm2 main[data-hm2="notfound"] [data-hm2="nf-links"]>a:hover{background:var(--hm-espresso);border-color:var(--hm-espresso);color:var(--hm-cream)}
html.hm2 main[data-hm2="notfound"] a:focus-visible{outline:2px solid var(--hm-fg);outline-offset:3px}
@media (max-width:959px){
  html.hm2 main[data-hm2="notfound"]{grid-template-columns:minmax(0,1fr);row-gap:24px}
  html.hm2 main[data-hm2="notfound"]>[data-hm2="nf-code"]{margin-bottom:8px}
  html.hm2 main[data-hm2="notfound"]>h1{max-width:14.52em;font-size:36px;line-height:1.1}
  html.hm2 main[data-hm2="notfound"]>[data-hm2="nf-text"]{grid-column:1}
}
@media (max-width:719px){
  html.hm2 main[data-hm2="notfound"]>h1{max-width:none;font-size:28px;line-height:1.14;text-wrap:pretty}
  html.hm2 main[data-hm2="notfound"] [data-hm2="nf-links"]{flex-direction:column;align-items:flex-start}
  html.hm2 main[data-hm2="notfound"] [data-hm2="nf-links"]>a{white-space:normal;text-align:left}
}
html.hm2:lang(de) main[data-hm2="notfound"] :is(h1,p){hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 6 8;overflow-wrap:break-word}
/* the 404 is a Webflow utility page: Webflow renders no CMS items there, so the footer's category list is its empty state
   ("No items found.", EN even on /de); hide that column wherever it is empty (only the 404 today; the info column keeps its place) */
html.hm2 .footer .footer-categories:has(.w-dyn-empty){display:none}
@media (max-width:959px){html.hm2 .footer .bottom-1:has(.footer-categories .w-dyn-empty){display:none}}   /* 2-col phone/tablet grid: the info column moves left */

/* ---------- 15. hm2-only DOM additions: revealed per role only (BUILD_SPEC §8.6; Webflow base .hm2-only{display:none}) ----------
   Nav: wordmark (§2), nav-cta (§2). Footer: foot-cta, editorial, cookie-settings, legal, giant (§13).
   No generic .hm2-only reveal: an element the contract does not name stays hidden. */

/* ---------- 16. Card entrance motion (hm2.js adds html.hm2-motion; screen + no reduced motion only; at rest = visible) ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  html.hm2.hm2-motion :is(.top-post-item,._3-collection-item,._2-collection-item,._4-collection-item,#tools-grid>a):not(.hm2-in){opacity:0;translate:0 24px;clip-path:inset(100% -4% -24% -4%)}
  html.hm2.hm2-motion :is(.top-post-item,._3-collection-item,._2-collection-item,._4-collection-item,#tools-grid>a).hm2-in{opacity:1;translate:0 0;clip-path:inset(-24% -4% -24% -4%);
    transition:opacity .9s var(--hm-ease-develop),translate .9s var(--hm-ease-develop),clip-path 1.1s var(--hm-ease-develop),border-color .25s}
}

/* ---------- 17. Print (articles): chrome hidden, motion off, reference URLs printed ---------- */
@media print{
  @page{size:A4;margin:18mm 17mm 20mm}
  html.hm2,html.hm2 body{background:#FFFFFF!important}
  html.hm2 body{margin:0!important;padding:0!important}
  html.hm2 *,html.hm2 *::before,html.hm2 *::after{animation:none!important;transition:none!important}
  html.hm2 :is(.navigation,#huuman-progress-track,#huuman-toc-container,#huuman-toc-inline,#huuman-back-top,#huuman-lightbox,#huuman-share,#hcro,#hcc,#hmn-app-banner,.latest-posts,.footer,.post-image,.separator){display:none!important}
  html.hm2 .title-section:not(.cc-detail){padding:0 0 14pt!important;background:none!important}
  html.hm2 .title-section [data-w-id]{opacity:1!important;transform:none!important}   /* inline! IX2 initial state must never blank the printed title */
  html.hm2 .title-section:not(.cc-detail)>.container,html.hm2 .post-content>.post-content-wrapper,html.hm2 .post-content .rich-text{max-width:none!important;margin:0!important}
  html.hm2 .title-section .h1{max-width:none;font-size:24pt!important;line-height:1.12!important;color:#181513!important}
  html.hm2 .title-section .post-author-text.cc-center{min-height:0!important;margin-top:10pt}   /* the screen reservation is for the share row, hidden on paper */
  html.hm2 #huuman-meta-bar{font-size:9pt}
  html.hm2 #huuman-meta-bar .meta-reviewed{min-height:0;padding:0;border:0;background:none;font-size:9pt}
  html.hm2 .post-content{padding:10pt 0 0!important;background:none!important}
  html.hm2 .w-richtext,html.hm2 .w-richtext :where(p,li){font-size:10.5pt!important;line-height:1.55!important;color:#181513!important}
  html.hm2 .w-richtext :where(h2){margin:18pt 0 6pt!important;font-size:15pt!important;break-after:avoid;page-break-after:avoid}
  html.hm2 .w-richtext :where(h3){margin:12pt 0 4pt!important;font-size:12pt!important;break-after:avoid;page-break-after:avoid}
  html.hm2 .w-richtext :where(p,li){orphans:3;widows:3}
  html.hm2 .w-richtext figure{margin:12pt 0!important;padding:0!important;break-inside:avoid}
  html.hm2 .w-richtext figure img{width:auto!important;max-width:100%!important;max-height:110mm;border-radius:6px!important;cursor:auto}
  html.hm2 .w-richtext figcaption{padding:0!important;font-size:8.5pt!important}
  html.hm2 .w-richtext blockquote{padding:10pt 12pt 2pt!important;border:1px solid #181513!important;background:none!important;break-inside:avoid}
  html.hm2 .w-richtext blockquote p{font-size:10pt!important}
  html.hm2 .w-richtext a{color:#181513!important;text-decoration:underline!important;text-decoration-color:#D3BBA6!important}
  html.hm2 .w-richtext :is(#section-references,#section-quellen)+ol a[href^="http"]::after{content:" " attr(href);font-size:7.5pt;color:#3B2B20;overflow-wrap:anywhere}
  html.hm2 .w-richtext h3:has(+ul:last-of-type)+ul{display:block!important}
  html.hm2 .w-richtext h3:has(+ul:last-of-type)+ul a{min-height:0!important;padding:4pt 0!important;background:none!important}
  html.hm2 .w-richtext p:has(>small>em>strong){padding:8pt 0 0!important;border-top:1px solid #D3BBA6;background:none!important}
}

/* ---------- 18. Dark-launch marker: visible only while previewing (class hm2-preview, set by blog-proxy) ---------- */
html.hm2.hm2-preview body::after{content:"hm2 preview";position:fixed;left:12px;bottom:12px;z-index:2147483647;padding:6px 10px;border-radius:100px;background:#181513;color:#f4efea;
  font:600 11px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.08em;pointer-events:none;opacity:.85}
@media print{html.hm2.hm2-preview body::after{display:none}}
