*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;line-height:1.75;color:#333;background:#f0f2f5}
.Post_area__u3KyE{max-width:860px;margin:0 auto;padding:0 20px}
.Nav_root__RXE4H{background:#fff;padding:28px 0;margin-bottom:32px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.Nav_root__RXE4H h1{font-size:22px;font-weight:700;margin-bottom:2px}
.Nav_root__RXE4H p{font-size:14px;color:#666}
.Nav_root__RXE4H a{color:#333;text-decoration:none;font-size:18px;font-weight:700}
.Module_foot__A2SV9{display:flex;flex-direction:column;gap:20px}
.Hero_head__6cAkl{background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:24px 28px;transition:transform .15s,box-shadow .15s}
.Hero_head__6cAkl:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
.Hero_head__6cAkl h2{font-size:19px;margin-bottom:6px}
.Hero_head__6cAkl h2 a{color:#1a1a1a;text-decoration:none}
.Hero_head__6cAkl .Nav_head__8yaqr{font-size:12px;color:#999;margin-bottom:8px}
.Hero_head__6cAkl p{font-size:14px;color:#555;margin-bottom:12px}
.Post_inner__ZumUW{display:inline-block;background:#5865f2;color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;text-decoration:none}
.Post_inner__ZumUW:hover{background:#4752c4}
.Nav_content__KqvJt{padding-bottom:60px}
.Nav_content__KqvJt h1{font-size:30px;font-weight:700;margin-bottom:8px}
.Nav_content__KqvJt time{font-size:12px;color:#999;display:block;margin-bottom:24px}
.Nav_content__KqvJt h2{font-size:22px;margin:32px 0 12px}
.Nav_content__KqvJt h3{font-size:18px;margin:24px 0 8px}
.Nav_content__KqvJt p{margin-bottom:16px}
.Nav_content__KqvJt ul,.Nav_content__KqvJt ol{margin:0 0 16px 24px}
.Nav_content__KqvJt a{color:#5865f2}
.Nav_content__KqvJt img{max-width:100%;height:auto;border-radius:12px;margin:16px 0}
.Sidebar_title__GBxOI{padding:24px 0;margin-top:40px;text-align:center;font-size:12px;color:#999}
.Sidebar_title__GBxOI a{color:#999;text-decoration:none}
.Card_item__8yHDx{background:#e8eaf0;border-radius:8px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:#888;font-style:italic}
.Article_foot__Ps0eF{background:#fff8e1;border-radius:8px;padding:12px 16px;margin-top:24px;font-size:12px;color:#9e8600}
.Post_link__66SgA{display:inline-block;background:#f0f2f7;border-radius:12px;padding:4px 12px;margin:-18px 0 24px;font-size:12px;color:#777}
.Wrapper_box__hgmpL{text-align:center;margin:0 0 24px}
.Card_box__DU2Fi{max-width:100%;height:auto;border-radius:12px}
.Content_foot__xiLf2{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0}
.Content_foot__xiLf2 h3{font-size:16px;font-weight:700;margin-bottom:12px}
.crd-related-list{display:flex;flex-direction:column;gap:8px}
.crd-related-link{display:block;background:#fff;border-radius:8px;padding:10px 14px;color:#333;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);font-size:14px}
.crd-related-link:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
.Article_head__VeRCk{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.Page_row__InRbi{display:block;background:#fff;border-radius:8px;padding:10px 16px;color:#1a1a1a;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.05);font-size:15px}
.Page_row__InRbi:hover{box-shadow:0 2px 8px rgba(0,0,0,.1)}
/* === Theme === */
:root{--primary:#38384A;--accent:#C2884A;--bg:#ECE4D0;--fg:#1A1A22;--border:#C5BBA8;--r:6px;--fb:'Spectral';--fh:'Fraunces';--fm:'Jost';--rust:#B34F2A}
/* === Custom === */
/* v.9dca7f — layout revision */
/* Font loading: the theme's @import lands AFTER style rules in the concatenated
   site.css and Chromium drops it per spec, so the Fraunces/Spectral/Jost voices
   never appeared. Declare them position-independently via @font-face instead. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeA.woff2) format('woff2');}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400 600;font-display:swap;src:url(https://fonts.gstatic.com/s/fraunces/v38/6NU58FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChjeveQ.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/spectral/v15/rnCr-xNNww_2s0amA9M5kng.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/spectral/v15/rnCs-xNNww_2s0amA9vKsW3BafY.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/spectral/v15/rnCs-xNNww_2s0amA9vmtm3BafY.woff2) format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/spectral/v15/rnCt-xNNww_2s0amA9M8onrmTA.woff2) format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400 600;font-display:swap;src:url(https://fonts.gstatic.com/s/jost/v20/92zatBhPNqw73oTd4g.woff2) format('woff2');}

/* Forest-green moment colour (assigned): plants in the photography + the yoga
   persona. Used only on the illuminated drop-cap initials — a decision, not decor. */
:root { --moment: #3D5A47; }

:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.74; font-size: 17px; }
::selection { background: var(--primary); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

:root header { background: var(--primary); color: var(--bg); padding: 40px 0 26px; margin-bottom: 40px; border-bottom: 5px solid var(--accent); }
:root header h1, :root header span a { font-family: var(--fh), system-ui, sans-serif; color: var(--bg); font-weight: 700; letter-spacing: .02em; text-decoration: none; text-transform: uppercase; }
:root header h1 { font-size: 34px; line-height: 1.16; }
:root header span a { font-size: 24px; }
:root header p { color: rgba(236, 228, 208, .82); font-size: 14px; font-style: italic; font-family: var(--fb), system-ui, sans-serif; margin-top: 6px; text-transform: none; }

:root main { padding-bottom: 80px; }
:root main > h1 { font-family: var(--fh), system-ui, sans-serif; font-size: 38px; line-height: 1.16; color: var(--primary); margin: 8px 0 6px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
:root main > time { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 28px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }

:root main > article > p { margin-bottom: 18px; font-size: 17px; line-height: 1.8; }
:root main > article > h2 { font-family: var(--fh), system-ui, sans-serif; font-size: 26px; font-weight: 700; color: var(--primary); margin: 2.5em 0 0.6em; padding-bottom: 6px; border-bottom: 2px solid var(--accent); text-transform: uppercase; letter-spacing: .02em; }
:root main > article > h3 { font-family: var(--fh), system-ui, sans-serif; font-size: 20px; font-weight: 500; color: var(--accent); margin: 2em 0 0.5em; text-transform: uppercase; letter-spacing: .03em; }
:root main > article ul, :root main > article ol { margin: 0 0 18px 22px; }
:root main > article li { margin-bottom: 6px; line-height: 1.8; }
:root main > article blockquote { border-left: 4px solid var(--accent); padding: 8px 0 8px 18px; margin: 24px 0; font-style: italic; color: var(--primary); background: rgba(194, 136, 74, .06); border-radius: 0 var(--r) var(--r) 0; }

:root main > article > p a, :root main > article > p a:visited { color: var(--primary); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 500; }
:root main > article > p a:hover { color: var(--accent); text-decoration-color: var(--primary); }

:root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/try/"], :root main > article > p a[href^="/check/"], :root main > article > p a[href^="/partner/"] { background: var(--accent); color: var(--bg); padding: 2px 10px; border-radius: var(--r); text-decoration: none; font-weight: 700; font-family: var(--fh), system-ui, sans-serif; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; }
:root main > article > p a[href^="/ref/"]:hover, :root main > article > p a[href^="/try/"]:hover, :root main > article > p a[href^="/check/"]:hover, :root main > article > p a[href^="/partner/"]:hover { background: var(--primary); }

:root article > div[role="img"] { margin: 0 0 28px; }
:root article > div[role="img"] > img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: 0 3px 14px rgba(26, 26, 34, .12); }

:root article > section { background: rgba(56, 56, 74, .07); border-left: 4px solid var(--primary); border-radius: 0 var(--r) var(--r) 0; padding: 14px 18px; margin-top: 32px; font-size: 14px; color: var(--fg); font-family: var(--fb), system-ui, sans-serif; font-style: italic; }
:root article > section b { color: var(--primary); font-weight: 700; font-style: normal; text-transform: uppercase; font-size: 11px; letter-spacing: .14em; display: inline-block; margin-right: 8px; font-family: var(--fh), system-ui, sans-serif; }

:root main > div > div:not(.crd-related-list) { background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--r); padding: 24px 26px; box-shadow: 0 2px 8px rgba(26, 26, 34, .05); transition: transform .15s ease, box-shadow .15s ease, border-left-color .15s ease; }
:root main > div > div:not(.crd-related-list):hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(56, 56, 74, .12); border-left-color: var(--primary); }
:root main > div > div:not(.crd-related-list) > p:first-child { font-family: var(--fb), system-ui, sans-serif; font-size: 11px; color: var(--accent); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }
:root main > div > div:not(.crd-related-list) > h2 { font-family: var(--fh), system-ui, sans-serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; line-height: 1.24; letter-spacing: .02em; text-transform: uppercase; }
:root main > div > div:not(.crd-related-list) > h2 a { color: var(--primary); text-decoration: none; }
:root main > div > div:not(.crd-related-list) > h2 a:hover { color: var(--accent); }
:root main > div > div:not(.crd-related-list) > p:not(:first-child) { font-size: 14.5px; color: var(--fg); opacity: .85; margin-bottom: 12px; }
:root main > div > div:not(.crd-related-list) > a:last-child { font-family: var(--fh), system-ui, sans-serif; font-size: 12.5px; color: var(--bg); background: var(--primary); padding: 7px 18px; border-radius: var(--r); text-decoration: none; letter-spacing: .06em; font-weight: 700; display: inline-block; text-transform: uppercase; }
:root main > div > div:not(.crd-related-list) > a:last-child:hover { background: var(--accent); }

:root main > div:has(> .crd-related-list) { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--accent); }
:root main > div:has(> .crd-related-list) > h3 { font-family: var(--fh), system-ui, sans-serif; font-size: 16px; color: var(--primary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .12em; }
:root .crd-related-list { display: flex; flex-direction: column; gap: 8px; }
:root .crd-related-link { background: var(--bg); border: none; border-bottom: 1px solid rgba(0,0,0,0.07); border-radius: 0; padding: 0.55em 0.2em; color: var(--fg); text-decoration: none; font-size: 14.5px; font-family: var(--fb), system-ui, sans-serif; display: block; transition: border-color .15s ease, background .15s ease; }
:root .crd-related-link:hover { border-color: var(--primary); background: rgba(56, 56, 74, .04); }

:root footer { background: transparent; border-top: 1px solid var(--accent); padding: 26px 0 36px; margin-top: 60px; text-align: center; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--fg); opacity: .60; letter-spacing: .04em; }
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* === R2 fixes (2026-06-08T00:40:04.918391+00:00) === */
.Hero_head__6cAkl { border-bottom: 1px solid rgba(0,0,0,0.09); padding-bottom: 1.8em; margin-bottom: 1.8em; }
.Card_item__8yHDx { background-color: #EDE4D3; border: none; border-left: 3px solid #9B8060; padding: 1em 1.2em; font-style: normal; font-size: 0.88em; border-radius: 0; }
.Nav_root__RXE4H h1 { font-weight: 700; font-size: 1.4em; letter-spacing: 0.04em; }

/* === R3 fixes (2026-06-08T01:20:03.818110+00:00) === */
[class*='InlineCard'], [class*='inline-card'], [class*='InlineBox'], .crd-inline { background-color: #EDE4D3; border-left: 3px solid #9B8060; border-radius: 0; color: inherit; padding: 1em 1.2em; }
.Nav_root__RXE4H p { font-size: 0.88em; color: rgba(0,0,0,0.6); margin-top: 0.3em; line-height: 1.4; }
/* .Post_inner__ZumUW a:last-child — superseded by R4 (selector missed, class is on <a> itself) */
.Content_foot__xiLf2 .crd-related-link { padding: 0.65em 0.3em; font-size: 0.91em; line-height: 1.45; }

/* === R4 fixes (2026-06-08T02:00:05.490737+00:00) === */
.Post_inner__ZumUW { display: inline-block; padding: 0.4em 0.9em; border: 1px solid rgba(0,0,0,0.22); font-size: 0.83em; color: rgba(0,0,0,0.65); text-decoration: none; margin-top: 0.5em; }
.Post_inner__ZumUW:hover { border-color: var(--primary); color: var(--primary); }
:root main > article > p a[href^="/top/"] { background: var(--accent); color: var(--bg); padding: 2px 10px; border-radius: var(--r); text-decoration: none; font-weight: 700; font-family: var(--fh), system-ui, sans-serif; font-size: 14.5px; letter-spacing: .04em; text-transform: uppercase; }
:root main > article > p a[href^="/top/"]:hover { background: var(--primary); }

/* === QA round-1 fixes (2026-07-18T00:38:19+0800) === */

/* — Meta voice: Jost (sans, tracked) for kickers, time, labels & buttons — */
:root main > time,
:root main > div > div:not(.crd-related-list) > p:first-child,
:root article > section b,
:root main > div:has(> .crd-related-list) > h3,
:root main > div > div:not(.crd-related-list) > a:last-child,
:root main > article > p a[href^="/ref/"],
:root main > article > p a[href^="/try/"],
:root main > article > p a[href^="/check/"],
:root main > article > p a[href^="/partner/"],
:root main > article > p a[href^="/top/"] { font-family: var(--fm), system-ui, sans-serif; }

/* — Masthead: photo + gradient + serif italic wordmark + manifesto line — */
:root header {
  background-image: linear-gradient(148deg, rgba(56,56,74,.90) 0%, rgba(56,56,74,.80) 60%, rgba(56,56,74,.88) 100%), url("/theme-assets/hero-masthead.jpg");
  background-size: cover; background-position: center; text-align: center; padding: 56px 0 30px;
}
:root header h1, :root header span a {
  font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 400; text-transform: none; letter-spacing: .005em;
}
:root header h1 { font-size: 46px; line-height: 1.06; }
:root header span a { font-size: 30px; }
:root header p {
  font-family: var(--fb), Georgia, serif; font-style: italic; color: rgba(236,228,208,.88);
  font-size: 15px; max-width: 36em; margin: 12px auto 0; padding-top: 12px;
  border-top: 2px solid var(--accent); display: inline-block;
}

/* — Article: display title, drop cap, dinkus dividers, hanging quote — */
:root main > h1 {
  font-family: var(--fh), Georgia, serif; font-weight: 600; text-transform: none;
  letter-spacing: -.012em; font-size: 46px; line-height: 1.08;
}
:root main > article > p:first-of-type::first-letter {
  float: left; font-family: var(--fh), Georgia, serif; font-size: 66px; line-height: .78;
  font-weight: 600; color: var(--moment); margin: 7px 12px 0 0;
}
:root main > article > h2 {
  font-family: var(--fh), Georgia, serif; font-weight: 600; text-transform: none;
  letter-spacing: -.01em; font-size: 29px; border-bottom: 0; padding-bottom: 0; margin-top: 2.2em;
}
:root main > article > h2::before {
  content: "✳ ✳ ✳"; display: block; text-align: center; color: var(--accent);
  font-family: var(--fm), sans-serif; font-size: 14px; letter-spacing: .5em; margin: 0 0 .8em; opacity: .8;
}
:root main > article > h3 {
  font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: 23px;
}
:root main > article > blockquote {
  position: relative; border-left: 0; background: transparent; border-radius: 0;
  padding: 4px 0 4px 56px; margin: 30px 0; font-family: var(--fh), Georgia, serif; font-size: 22px; line-height: 1.5;
}
:root main > article > blockquote::before {
  content: "\201C"; position: absolute; left: 2px; top: -2px;
  font-family: var(--fh), Georgia, serif; font-size: 70px; line-height: 1; color: var(--accent);
}

/* — In-article links: tinted, branded, unmistakable (fixes plain-blue look) — */
:root main > article a:not([href^="/ref/"]):not([href^="/try/"]):not([href^="/check/"]):not([href^="/partner/"]):not([href^="/top/"]) {
  color: var(--primary); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; background: rgba(194,136,74,.12);
  padding: 0 3px; border-radius: 3px;
}
:root main > article a:not([href^="/ref/"]):not([href^="/try/"]):not([href^="/check/"]):not([href^="/partner/"]):not([href^="/top/"]):hover {
  color: var(--accent); background: rgba(194,136,74,.24);
}

/* — Homepage HERO (first card): loud display voice + drop cap + N° badge — */
:root main > div > div:not(.crd-related-list):first-child {
  border-left: 0; border-top: 4px solid var(--accent); padding: 34px 40px 32px;
  box-shadow: 0 5px 22px rgba(26,26,34,.11);
}
:root main > div > div:not(.crd-related-list):first-child > p:first-child { color: var(--accent); font-size: 12px; }
:root main > div > div:not(.crd-related-list):first-child > p:first-child::before { content: "N° I · "; }
:root main > div > div:not(.crd-related-list):first-child > h2 {
  font-family: var(--fh), Georgia, serif; font-size: 40px; text-transform: none; letter-spacing: -.015em; line-height: 1.06;
}
:root main > div > div:not(.crd-related-list):first-child > p:nth-of-type(2) { font-size: 16.5px; opacity: .92; }
:root main > div > div:not(.crd-related-list):first-child > p:nth-of-type(2)::first-letter {
  float: left; font-family: var(--fh), Georgia, serif; font-size: 54px; line-height: .76;
  font-weight: 600; color: var(--moment); margin: 5px 11px 0 0;
}

/* — Second confident moment: cards 2–4 as a navy "Empfehlungen" band — */
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) {
  background: var(--primary); border-color: var(--primary); border-left-color: var(--accent);
  box-shadow: 0 3px 15px rgba(26,26,34,.16);
}
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > p:first-child { color: var(--accent); }
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > h2 a { color: var(--bg); }
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > h2 a:hover { color: var(--accent); }
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > p:not(:first-child) { color: rgba(236,228,208,.80); opacity: 1; }
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > a:last-child { background: var(--accent); color: var(--primary); }
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > a:last-child:hover { background: var(--bg); }

/* — Non-hero card titles: warm serif display voice — */
:root main > div > div:not(.crd-related-list) > h2 {
  font-family: var(--fh), Georgia, serif; text-transform: none; letter-spacing: -.008em;
}

/* — Archive index: deliberate 2-column register, labelled header — */
:root main > div:has(> .crd-related-list) > h3 {
  text-align: center; letter-spacing: .22em; border-top: 1px solid var(--border); padding-top: 24px;
}
:root main > div:has(> .crd-related-list) > h3::after {
  content: ""; display: block; width: 42px; height: 2px; background: var(--accent); margin: 11px auto 0;
}
:root .crd-related-list { display: block; column-count: 2; column-gap: 44px; }
:root .crd-related-link { break-inside: avoid; }
@media (max-width: 640px) { :root .crd-related-list { column-count: 1; } }

/* === v.9dca7f — homepage rhythm strips + archive index === */
/* M6 — "DAS NOTIZBUCH" section break after the Empfehlungen band (card 4).
   Was an in-flow ::after with negative margins, so it read as glued to the card's
   navy bottom. Now absolute-positioned inside a reserved 236px gap below card 4 so
   it floats as a STANDALONE ~200px photo strip between the picks band and the
   journal — the same standalone treatment DAS ARCHIV already gets on its bare
   container. Card 4 is the positioned ancestor; the strip lives in the empty gap
   on the page-paper background, not inside the card frame. */
:root main > div:first-child > .Hero_head__6cAkl:nth-child(4) {
  position: relative; overflow: visible; margin-bottom: 236px;
}
:root main > div:first-child > .Hero_head__6cAkl:nth-child(4)::after {
  content: "DAS NOTIZBUCH";
  position: absolute; left: 0; right: 0; top: calc(100% + 18px);
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(30,26,20,.50), rgba(30,26,20,.34)), url("/theme-assets/article-hero.jpg");
  background-size: cover; background-position: center 78%;
  border-radius: 8px;
  color: #faf5ec; font-family: var(--fm), system-ui, sans-serif;
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
  text-shadow: 0 1px 7px rgba(0,0,0,.72);
}

/* Homepage archive tail — precise Next-module class (stable on this build, not
   obfuscated). DAS ARCHIV photo strip (Strip 2) + boxed magazine index grid.
   Scoped to .Article_head__VeRCk so it never touches the article "Verwandte
   Artikel" block (which is .Content_foot__xiLf2). */
/* M7 — the archive tail is a first-class design zone, not a list of links.
   Boxed cream cards in a 3-col grid that reuse the top journal cards' visual
   system: same paper bg, same border + accent-left, same radius, same shadow,
   same serif title voice, same hover lift. Grid stretch keeps every cell in a
   row the same height. DAS ARCHIV (Strip 2) spans all columns via grid-column. */
:root main > .Article_head__VeRCk {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px;
  margin: 0; padding: 0;
  background: transparent; border: 0; box-shadow: none;
}
:root main > .Article_head__VeRCk::before {
  grid-column: 1 / -1; content: "DAS ARCHIV";
  display: flex; align-items: center; justify-content: center;
  height: 200px; margin: 84px 0 20px;
  background: linear-gradient(rgba(30,26,20,.50), rgba(30,26,20,.34)), url("/theme-assets/article-hero.jpg");
  background-size: cover; background-position: center 28%;
  border-radius: 8px;
  color: #faf5ec; font-family: var(--fm), system-ui, sans-serif;
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase;
  text-shadow: 0 1px 7px rgba(0,0,0,.72);
}
:root main > .Article_head__VeRCk > a {
  display: flex; align-items: center;
  background: var(--bg);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--r); box-shadow: 0 1px 4px rgba(26,26,34,.05);
  padding: 18px 20px; margin: 0;
  font-family: var(--fh), Georgia, serif; font-size: 15px; line-height: 1.34;
  font-weight: 500; letter-spacing: -.004em;
  color: var(--primary); text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-left-color .15s ease;
}
:root main > .Article_head__VeRCk > a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(56,56,74,.12);
  border-left-color: var(--primary);
}
@media (max-width: 900px) {
  :root main > .Article_head__VeRCk { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  :root main > .Article_head__VeRCk { grid-template-columns: 1fr; }
}


/* related-articles-nav-fix v1 */
:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}


/* mobile-overflow-fix v1 */
:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}


/* mobile-overflow-fix v2 */
@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  /* Any 3+ col grid inside main → 1 col on mobile */
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  /* Any CSS multi-column layout → 1 col on mobile */
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  /* Article body images stay inside viewport */
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}


/* mobile-padding-fix v1 */
@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* === QA refix iter=1 (M2 + S6) === */

/* M2 — Section labels live OUTSIDE the card frames and span the full row.
   Two full-width uppercase-tracked label bands with a hairline underline sit
   ABOVE their row of cards, floating in reserved margin above the card (absolute,
   so they escape the card's own background/border box instead of wrapping inside
   the first card's frame). Band 1 labels the featured hero; Band 2 marks the
   transition from the cream hero into the dark "Empfehlungen" picks cards — the
   exact seam the review flagged as unlabelled. Homepage-only: article <main>
   starts with <h1>, so `main > div:first-child` never matches there. */
:root main > div:first-child > .Hero_head__6cAkl:nth-child(1) {
  position: relative; overflow: visible; margin-top: 56px;
}
:root main > div:first-child > .Hero_head__6cAkl:nth-child(1)::before {
  content: "Aktueller Beitrag";
  position: absolute; left: 0; right: 0; bottom: calc(100% + 15px);
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
  font-family: var(--fm), system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--primary);
}
:root main > div:first-child > .Hero_head__6cAkl:nth-child(2) {
  position: relative; overflow: visible; margin-top: 52px;
}
:root main > div:first-child > .Hero_head__6cAkl:nth-child(2)::before {
  content: "Empfehlungen";
  position: absolute; left: 0; right: 0; bottom: calc(100% + 15px);
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
  font-family: var(--fm), system-ui, sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase; color: var(--primary);
}

/* S6 — article personality anchor: append a byline + location to the otherwise
   date-only meta line (author/location per this site's own JSON-LD). Article
   pages only — the homepage has no `main > time` (feature dates are <p>). */
:root main > time::after {
  content: " · Von Franziska Meier · München";
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Racquet-moody overlay=55% grid=asymmetric scale=balanced family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 55%) ── */
:root main:not(:has(> h1)) > div:has(> div)::before {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%),
    url("/theme-assets/premium-hero-strip-1.webp") center 40% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}
:root main:not(:has(> h1)) > div:has(> div)::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%),
    url("/theme-assets/premium-hero-strip-2.webp") center 45% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}


/* ── CARD 1: featured full-row with 300px photo header (via card-own background, NOT ::before —
    leaves ::before free for existing site's M2 label / meta content). ── */
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      /* anchor for existing site's ::before label if it uses absolute */
  overflow: visible;       /* let above-card labels render without clipping */
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  /* room for above-card M2 label (existing site convention) */
}

/* ── CARDS 2-4: medium with 180px photo header (background technique, ::before untouched) ── */
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

/* ── Article page: drop cap + dinkus dividers ── */
:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

/* ── Mobile responsive: adjust photo heights via background-size on the card itself ── */
@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/theme-assets/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/theme-assets/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div)::before,
  :root main:not(:has(> h1)) > div:has(> div)::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}


/* premium-upgrade v4 */
/* premium-upgrade v4 — surgical bundle. Applied 2026-08-30.
   Fixes: M10 CTA / M11 dinkus leak / M4 heights / M9 typography / M5 frames.
   Kills v2 "LATEST" label (proven counterproductive from v2 diagnosis). */

/* ── Kill v2 counterproductive homepage label ── */
:root main:not(:has(> h1))::before { content: none !important; }

/* ── M10: affiliate CTA visibility on article body ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

/* ── M11: prevent dinkus leaking onto article page's first h2 ── */
:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

/* ── M4: force equal-height cards via grid stretch + card fill ── */
:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* also for flat-divs family */
:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

/* ── M9: cap small-title weight so Bebas/Anton counters don't fill in ── */
:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

/* ── M5: universal soft frame fallback for card-like elements ── */
:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}


/* premium-upgrade v5 */
/* premium-upgrade v5 — big M2 band + wider M10 CTA net + M8 breathing. 2026-08-31. */

/* ── M2: PROMINENT full-row label, not the small word v2 tried ── */
:root main:not(:has(> h1))::before {
  content: "◆ LATEST FEATURES ◆" !important;
  display: block !important;
  font-family: var(--fh, "PT Sans"), Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  padding: 16px 24px 20px !important;
  margin: 0 0 40px !important;
  border-top: 3px solid var(--primary, #333) !important;
  border-bottom: 1px solid var(--border, #ccc) !important;
  color: var(--primary, #333) !important;
  background: transparent !important;
}

/* ── M10: broaden CTA net (Amazon, aff/ path, [target=_blank] product-shaped) ── */
:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href^="/aff/"],
:root main:has(> h1) a[href^="/product/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"],
:root main:has(> h1) a[href*="amazon."],
:root main:has(> h1) a[href*="/track/"],
:root main:has(> h1) a[href*="/link/"],
:root main:has(> h1) a[href*="lstrk.net"],
:root main:has(> h1) a[href*="thrivecart"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 8px 18px !important;
  border-radius: 5px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  margin: 4px 2px !important;
}

/* ── M8: article body breathing ── */
:root main:has(> h1) > article > p {
  line-height: 1.8 !important;
  margin-bottom: 20px !important;
}
:root main:has(> h1) > article > h2 {
  margin-top: 48px !important;
  margin-bottom: 18px !important;
}
:root main:not(:has(> h1)) > div:has(> div) {
  gap: 40px 32px !important;
}


/* === QA refix iter=1 (M8 home) === */
/* Cards 2–4 (the "Empfehlungen" band) now render on a CREAM photo-card body — the
   premium-upgrade v1 block overrode the old navy band background via !important
   (lines ~423-443). But the old navy-band TEXT rules (lines ~179-181) still colour
   the title and excerpt cream (var(--bg) / rgba(236,228,208,…)), so both vanish into
   the cream card body, leaving only the orange date + orange "MEHR ARTIKEL" button
   over large empty card bodies. Recolour title + excerpt to the dark reading tones
   the cream featured card already uses so the title→excerpt rhythm reads again.
   Same selector as the band rules but later in source, so it wins at equal
   specificity without needing !important. Also clears the S2 "mostly blank cards"
   note as a side effect. */
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > h2 a {
  color: var(--primary);
}
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > h2 a:hover {
  color: var(--accent);
}
:root main > div > div:not(.crd-related-list):nth-child(n+2):nth-child(-n+4) > p:not(:first-child) {
  color: var(--fg); opacity: .85;
}