*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Palatino Linotype',Palatino,'Book Antiqua',serif;line-height:1.9;color:#2a2a2a;background:#fefefe}
.wrapper-179798{max-width:640px;margin:0 auto;padding:0 20px}
.layout-6834b0{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.layout-6834b0 h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.layout-6834b0 p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.layout-6834b0 a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.layout-90bff1{padding:20px 0}
.layout-90bff1 h2{font-size:18px;font-weight:400;margin-bottom:4px}
.layout-90bff1 h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.layout-90bff1 h2 a:hover{border-bottom-color:#2a2a2a}
.layout-90bff1 .page-ae8487{font-size:12px;color:#aaa;margin-bottom:6px}
.layout-90bff1 p{font-size:14px;color:#666}
.region-ab9c08{color:#888;font-size:13px;text-decoration:none}
.region-ab9c08:hover{color:#2a2a2a}
.inner-eb992e{padding-bottom:60px}
.inner-eb992e h1{font-size:28px;font-weight:400;margin-bottom:8px}
.inner-eb992e .page-ae8487{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.inner-eb992e h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.inner-eb992e h3{font-size:17px;margin:28px 0 8px}
.inner-eb992e p{margin-bottom:18px;font-size:16px}
.inner-eb992e ul,.inner-eb992e ol{margin:0 0 18px 20px}
.inner-eb992e a{color:#555;border-bottom:1px solid #ccc}
.inner-eb992e a:hover{color:#000;border-bottom-color:#000}
.inner-eb992e img{max-width:100%;height:auto;margin:24px 0}
.panel-f8302a{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.panel-f8302a a{color:#aaa;text-decoration:none}
.widget-57e01a{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.region-d33081{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.module-1ab75e{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.wrapper-7b31a3{margin:0 auto 32px;max-width:720px}
.inner-af5453{width:100%;height:auto}
.layout-a45b9a{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.layout-a45b9a em{color:#aaa}
.layout-a45b9a a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.container-0a2a26{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.container-0a2a26 p{padding:3px 0;margin:0;font-size:15px}
.container-0a2a26 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.container-0a2a26 a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#262E36;--accent:#B8825C;--bg:#F0EAD9;--fg:#0E1118;--border:#C7BEA0;--r:9px;--fb:'Heebo';--fh:'Fraunces';--rust:#B34F2A;--moment:#8C4A00;--paper:#F5EFE1;--fs:'Newsreader';--fm:'Heebo'}
/* === Custom === */
/* v.9af651 — layout revision */
/* Editorial signature pass for mk-medit-de (Meditations-Tagebuch) — the Sunday-evening burnout-
   recovery diary of a Düsseldorf UX designer. Display voice = Fraunces (serif italic wordmark +
   featured title); text voice = Newsreader (calm reading serif); meta voice = Heebo (tracked
   uppercase sans). Moment colour #8C4A00 used exactly twice (featured drop cap + Editor's-Picks
   numerals). Signature = "Enso" open-ring monogram (still point at centre). Assigned hero-bg.jpg /
   hero-photo.jpg both 404 → gradient masthead + gradient section strips instead of photo.
   Structure: gradient masthead + enso monogram → boxed hero → 3 open Editor's Picks → strip
   (WEITER UNTEN) → 2-col journal grid → strip (ALLE BEITRÄGE) → magazine index tail. */

/* ---- Webfonts as @font-face (top-of-file @import is dropped by the concatenated pipeline) ---- */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NUu8FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0K7iN7hzFUPJH58nib14c7qv8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NVf8FyLNQOQZAnv9ZwNjucMHVn85Ni7emAe9lKqZTnbB-gzTK0K1ChJdt9vIVYX9G37lvd9sPEKsxx664UJf1hLTc7RrU8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9VfjOCX1hbuyalUrK49dLac06G1ZGsZBtoBAbNJYQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9XfjOCX1hbuyalUrK439vogqCz_goCYw7oRd6JFYYzbA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://fonts.gstatic.com/s/heebo/v28/NGS6v5_NC0k9P9H2TbE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  --paper: #F5EFE1; --moment: #8C4A00; --r: 9px;
  --fh: 'Fraunces'; --fs: 'Newsreader'; --fm: 'Heebo';
  --line: rgba(38,46,54,.13);
}

/* ---- Base ---- */
:root body { font-family: var(--fs), Cambria, 'Times New Roman', serif; color: var(--fg); background: var(--bg); line-height: 1.78; font-size: 17px; }
::selection { background: var(--accent); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

/* ============================================================ MASTHEAD (shared <header>) */
:root header {
  background-color: var(--primary);
  background-image: linear-gradient(128deg, #20272E 0%, #2C3843 52%, #40352B 100%);
  border-bottom: 3px solid var(--accent); border-radius: var(--r);
  padding: 54px 42px 42px; margin-bottom: 58px; position: relative; overflow: hidden;
}
:root header h1 {
  font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 42px; color: #F3ECDA; letter-spacing: -.01em; line-height: 1.06;
  text-transform: none; text-shadow: 0 2px 12px rgba(0,0,0,.4); max-width: 80%;
}
:root header a {
  font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 25px; color: #F3ECDA; text-transform: none; text-decoration: none;
  border-bottom: 0; padding-bottom: 0; letter-spacing: -.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
:root header h1 + p {
  font-family: var(--fs), Cambria, serif; font-size: 15px; font-style: italic;
  color: rgba(243,236,218,.84); line-height: 1.6; margin-top: 15px; max-width: 58ch;
  border-left: 3px solid var(--accent); padding-left: 15px;
}
/* home masthead: full-bleed dark band (M6) — background fills the viewport; inner content stays on the 1000px reading measure via computed side gutters; enso monogram tracks the content column's right edge */
:root header:has(> h1) {
  max-width: none; width: 100%; margin-left: 0; margin-right: 0; border-radius: 0;
  padding-left: max(24px, calc((100% - 1000px) / 2 + 42px));
  padding-right: max(24px, calc((100% - 1000px) / 2 + 42px));
}
:root header:has(> h1)::after {
  content: ""; position: absolute; top: 32px; right: max(24px, calc((100% - 1000px) / 2 + 34px)); width: 74px; height: 74px; opacity: .96;
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MiA3MiI+PHBhdGggZD0iTTUxIDE1IEEyNyAyNyAwIDEgMCA2MCA0OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRTdEOEJDIiBzdHJva2Utd2lkdGg9IjQuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGNpcmNsZSBjeD0iMzYiIGN5PSIzNiIgcj0iMi42IiBmaWxsPSIjQzg5QTZFIi8+PC9zdmc+") center/contain no-repeat;
}
/* article masthead (header w/o site <h1> — holds only the wordmark link): full-bleed dark band (M6) — background fills the viewport; inner wordmark stays on the 760px article reading measure via computed side gutters */
:root header:not(:has(> h1)) {
  max-width: none; width: 100%; margin-left: 0; margin-right: 0; border-radius: 0;
  padding-left: max(24px, calc((100% - 760px) / 2 + 42px));
  padding-right: max(24px, calc((100% - 760px) / 2 + 42px));
}

/* ============================================================ HOMEPAGE (main w/o <article>) */
:root main:not(:has(> article)) {
  max-width: 1000px; margin: 0 auto; padding-bottom: 104px;
  display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 34px; row-gap: 46px;
}

/* ---- Featured hero: first card, full width, boxed paper ---- */
:root main:not(:has(> article)) > div:has(> h2):first-of-type {
  grid-column: 1 / -1; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 2px 14px rgba(20,23,38,.07); padding: 46px 52px 48px; margin: 2px 0 0;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type::before {
  content: "Neuester Eintrag"; display: block; font-family: var(--fm), sans-serif;
  font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; margin-bottom: 18px;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type > p:first-child {
  font-family: var(--fm), sans-serif; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary); opacity: .6; margin-bottom: 20px; line-height: 1.4;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type > p:first-child::after {
  content: "  ·  Von Jannike Brehmer  ·  6 Min Lesezeit"; opacity: .92;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type > h2 {
  font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 600;
  font-size: 44px; line-height: 1.1; letter-spacing: -.015em; margin-bottom: 18px; text-transform: none;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:has(> h2):first-of-type > h2 a:hover { color: var(--accent); }
:root main:not(:has(> article)) > div:has(> h2):first-of-type > p:not(:first-child) {
  font-family: var(--fs), Cambria, serif; font-size: 20px; line-height: 1.5;
  color: var(--fg); opacity: .92; max-width: 64ch; margin-bottom: 26px;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type > p:not(:first-child)::first-letter {
  float: left; font-family: var(--fh), Georgia, serif; font-weight: 600; font-style: normal;
  font-size: 64px; line-height: .8; color: var(--moment); margin: 6px 13px -4px 0;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type > a:last-child {
  display: inline-block; font-family: var(--fm), sans-serif; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: var(--primary); background: transparent;
  border: 1.5px solid var(--primary); border-radius: 40px; padding: 11px 28px; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
:root main:not(:has(> article)) > div:has(> h2):first-of-type > a:last-child:hover { background: var(--primary); color: var(--paper); }

/* ---- Editor's Picks: three open entries under a full-width label ---- */
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2),
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3),
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) {
  grid-column: 1 / -1; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 24px 0 0; margin: 0; position: relative;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3),
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) { border-top: 1px solid var(--line); padding-top: 26px; }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) { margin-top: 80px; }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2)::before {
  content: "Empfehlungen der Redaktion — zuerst lesen"; position: absolute; left: 0; right: 0; top: -48px;
  border-bottom: 1px solid rgba(38,46,54,.26); padding-bottom: 12px;
  font-family: var(--fm), sans-serif; font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--primary); font-weight: 700;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > p:first-child,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > p:first-child,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > p:first-child {
  font-family: var(--fm), sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg); opacity: .55; margin-bottom: 9px; line-height: 1.4;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > p:first-child::before { content: "N° I\00A0\00A0"; color: var(--moment); opacity: 1; font-weight: 700; }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > p:first-child::before { content: "N° II\00A0\00A0"; color: var(--moment); opacity: 1; font-weight: 700; }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > p:first-child::before { content: "N° III\00A0\00A0"; color: var(--moment); opacity: 1; font-weight: 700; }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > h2,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > h2,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > h2 {
  font-family: var(--fh), Georgia, serif; font-weight: 600; font-size: 25px; line-height: 1.2;
  letter-spacing: -.005em; margin-bottom: 10px; text-transform: none;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > h2 a,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > h2 a,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > h2 a:hover,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > h2 a:hover,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > h2 a:hover { color: var(--accent); }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > p:not(:first-child),
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > p:not(:first-child),
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > p:not(:first-child) {
  font-family: var(--fs), Cambria, serif; font-size: 16.5px; line-height: 1.6;
  color: var(--fg); opacity: .88; max-width: 68ch; margin-bottom: 12px;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > a:last-child,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > a:last-child,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > a:last-child {
  display: inline-block; font-family: var(--fm), sans-serif; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(184,130,92,.5); padding-bottom: 1px;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(2) > a:last-child:hover,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(3) > a:last-child:hover,
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4) > a:last-child:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ---- Strip 1: gradient section break (WEITER UNTEN) between picks and journal ---- */
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(4)::after {
  content: "Weiter unten"; display: flex; align-items: center; justify-content: center;
  margin: 52px 0 4px; height: 200px; border-radius: var(--r);
  background-color: #2A3742;
  background-image: linear-gradient(rgba(22,26,30,.46), rgba(30,25,18,.56)), url("/theme-assets/hero-bg.jpg");
  background-size: cover; background-position: center;
  color: #F1E9D8; font-family: var(--fm), sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.55);
}

/* ---- Journal grid: 2-col cards (5th card onward) ---- */
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) {
  grid-column: span 3; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(20,23,38,.05); padding: 28px 32px 24px; margin: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5):hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(38,46,54,.11); }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) > p:first-child {
  font-family: var(--fm), sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg); opacity: .5; margin-bottom: 11px; line-height: 1.4;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) > h2 {
  font-family: var(--fh), Georgia, serif; font-weight: 600; font-size: 20px; line-height: 1.26;
  letter-spacing: -.005em; margin-bottom: 11px; text-transform: none;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) > h2 a { color: var(--primary); text-decoration: none; }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) > h2 a:hover { color: var(--accent); }
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) > p:not(:first-child) {
  font-family: var(--fs), Cambria, serif; font-size: 15.5px; line-height: 1.6;
  color: var(--fg); opacity: .84; margin-bottom: 16px; max-width: 62ch;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) > a:last-child {
  margin-top: auto; align-self: flex-start; display: inline-block;
  font-family: var(--fm), sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(184,130,92,.48); padding-bottom: 1px;
}
:root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) > a:last-child:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* ---- Compact archive tail: full-width magazine index + Strip 2 (ALLE BEITRÄGE) ---- */
:root main:not(:has(> article)) > div:not(:has(> h2)) {
  grid-column: 1 / -1; margin: 0; padding: 0; border: 0; background: transparent;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; align-items: stretch;
}
:root main:not(:has(> article)) > div:not(:has(> h2))::before {
  content: "Alle Beiträge"; display: flex; align-items: center; justify-content: center;
  grid-column: 1 / -1; margin: 54px 0 32px; height: 210px; border-radius: var(--r);
  background-color: #2A3742;
  background-image: linear-gradient(rgba(22,26,30,.46), rgba(30,25,18,.56)), url("/theme-assets/hero-photo.jpg");
  background-size: cover; background-position: center;
  color: #F1E9D8; font-family: var(--fm), sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: .34em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.55);
}
/* M7: tail is a first-class design zone — boxed cream cards matching the top journal cards (same paper, border, radius, shadow, hover lift) */
:root main:not(:has(> article)) > div:not(:has(> h2)) > p {
  margin: 0; padding: 18px 20px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(20,23,38,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
:root main:not(:has(> article)) > div:not(:has(> h2)) > p:hover {
  transform: translateY(-2px); box-shadow: 0 6px 16px rgba(38,46,54,.11); border-color: rgba(184,130,92,.5);
}
:root main:not(:has(> article)) > div:not(:has(> h2)) > p > a {
  display: block; font-family: var(--fh), Georgia, serif; font-weight: 500; font-size: 15px;
  line-height: 1.34; letter-spacing: -.003em; color: var(--primary); text-decoration: none;
}
:root main:not(:has(> article)) > div:not(:has(> h2)) > p > a:hover { color: var(--accent); }

@media (max-width: 720px) {
  :root header { padding: 38px 26px 30px; }
  :root header h1 { max-width: 100%; font-size: 32px; }
  :root header:has(> h1)::after { display: none; }
  :root header h1 + p { max-width: 100%; }
  :root main:not(:has(> article)) { grid-template-columns: 1fr; column-gap: 0; row-gap: 34px; }
  :root main:not(:has(> article)) > div:has(> h2):nth-of-type(n+5) { grid-column: 1 / -1; }
  :root main:not(:has(> article)) > div:has(> h2):first-of-type { padding: 32px 26px 34px; }
  :root main:not(:has(> article)) > div:has(> h2):first-of-type > h2 { font-size: 31px; }
  :root main:not(:has(> article)) > div:not(:has(> h2)) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  :root main:not(:has(> article)) > div:not(:has(> h2)) { grid-template-columns: 1fr; }
}

/* ============================================================ ARTICLE PAGE (main w/ <article>) */
:root main:has(> article) { max-width: 760px; margin-left: auto; margin-right: auto; padding-bottom: 80px; }
:root main:has(> article) > h1 {
  font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 600; font-size: 40px; line-height: 1.12;
  color: var(--primary); margin: 10px 0 8px; letter-spacing: -.015em; text-transform: none;
}
:root main:has(> article) > span {
  display: block; font-family: var(--fm), sans-serif; font-size: 11.5px; color: var(--accent);
  margin-bottom: 34px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
/* S6: article personality anchor — persona byline + reading-time appended to the date-only meta */
:root main:has(> article) > span::after { content: "  ·  Von Jannike Brehmer  ·  6 Min Lesezeit"; }

:root main > article > p { margin-bottom: 20px; font-size: 18.5px; line-height: 1.8; }
:root main > article > p:first-of-type::first-letter {
  float: left; font-family: var(--fh), Georgia, serif; font-weight: 600;
  font-size: 62px; line-height: .82; color: var(--primary); margin: 7px 12px -2px 0;
}

:root main > article > h2 {
  font-family: var(--fh), Georgia, serif; font-weight: 600; font-size: 27px; color: var(--primary);
  margin: 2.3em 0 .55em; padding-top: 15px; border-top: 2px solid var(--accent);
  letter-spacing: -.005em; text-transform: none;
}
:root main > article > h2::before {
  content: "◦ ◦ ◦"; display: block; font-family: var(--fh), Georgia, serif; font-size: 15px; letter-spacing: .5em;
  color: var(--accent); opacity: .7; margin-bottom: 20px; font-weight: 400; text-indent: .5em;
}
:root main > article > h3 {
  font-family: var(--fh), Georgia, serif; font-style: italic; font-weight: 600; font-size: 20px;
  color: var(--primary); margin: 26px 0 10px; text-transform: none;
}
:root main > article ul, :root main > article ol { margin: 0 0 20px 24px; }
:root main > article li { margin-bottom: 8px; line-height: 1.7; }

:root main > article > blockquote {
  position: relative; border-left: 4px solid var(--accent); padding: 8px 0 8px 40px; margin: 28px 0;
  font-family: var(--fh), Georgia, serif; font-style: italic; font-size: 21px; line-height: 1.5;
  color: var(--primary); background: rgba(184,130,92,.08); border-radius: 0 var(--r) var(--r) 0;
}
:root main > article > blockquote::before {
  content: "\00201C"; position: absolute; left: 8px; top: -6px;
  font-family: var(--fh), Georgia, serif; font-size: 56px; line-height: 1; color: var(--accent); opacity: .5;
}

/* comparison / feature box (h3 + ul in a div) — kill inherited white, warm paper frame */
:root main > article > div:has(> ul) {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(20,23,38,.05); padding: 22px 30px; margin: 28px 0;
}

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

/* affiliate CTA (/ref/ /try/ /check/ /partner/ /go/) — full body-link path + attr so it strictly out-specifies body links */
:root main > article > p a[href^="/ref/"], :root main > article > p a[href^="/ref/"]:visited,
:root main > article > p a[href^="/try/"], :root main > article > p a[href^="/try/"]:visited,
:root main > article > p a[href^="/check/"], :root main > article > p a[href^="/check/"]:visited,
:root main > article > p a[href^="/partner/"], :root main > article > p a[href^="/partner/"]:visited,
:root main > article > p a[href^="/go/"], :root main > article > p a[href^="/go/"]:visited,
:root main > article > li a[href^="/ref/"], :root main > article > li a[href^="/try/"],
:root main > article > li a[href^="/check/"], :root main > article > li a[href^="/partner/"],
:root main > article > li a[href^="/go/"] {
  display: inline-block; font-family: var(--fm), sans-serif; font-size: 12.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700; color: var(--paper); background: var(--primary);
  border: 0; border-radius: 40px; padding: 9px 22px; margin: 4px 2px; text-decoration: none;
  line-height: 1.3; vertical-align: baseline;
}
: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,
:root main > article > p a[href^="/go/"]:hover,
:root main > article > li a[href^="/ref/"]:hover, :root main > article > li a[href^="/try/"]:hover,
:root main > article > li a[href^="/check/"]:hover, :root main > article > li a[href^="/partner/"]:hover,
:root main > article > li a[href^="/go/"]:hover { background: var(--accent); color: var(--primary); text-decoration: none; }

/* images (hero + inline) */
:root main > article > img {
  width: 100%; height: auto; display: block; margin: 6px 0 30px;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 4px 18px rgba(20,23,38,.12);
}

/* disclaimer aside (if present) */
:root main > article > aside {
  background: rgba(38,46,54,.05); border-left: 4px solid var(--accent); border-top: 0; border-bottom: 0;
  border-radius: 0 var(--r) var(--r) 0; padding: 16px 22px; margin: 40px 0 0;
  font-family: var(--fs), Cambria, serif; font-style: italic; font-size: 14.5px; color: var(--fg);
}
:root main > article > aside b {
  display: block; font-family: var(--fm), sans-serif; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); font-style: normal; font-weight: 700; margin-bottom: 7px;
}

/* related-links nav (Verwandte Artikel) — carded list treatment */
:root main > nav {
  margin-top: 54px; padding: 26px 30px; border-top: 2px solid var(--primary);
  background: var(--paper); border-radius: var(--r); box-shadow: 0 1px 4px rgba(20,23,38,.05);
  font-family: var(--fs), Cambria, serif; font-size: 15.5px;
}
:root main > nav p { margin: 0; }
:root main > nav p em {
  display: block; font-family: var(--fm), sans-serif; font-size: 11.5px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .18em; font-style: normal; font-weight: 700; margin-bottom: 14px;
}
:root main > nav p a {
  color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--border);
  padding-bottom: 1px; font-weight: 500;
}
:root main > nav p a:hover { border-bottom-color: var(--accent); color: var(--accent); }

@media (max-width: 720px) {
  :root main:has(> article) > h1 { font-size: 30px; }
  :root main > article > p { font-size: 17.5px; }
  :root main > article > h2 { font-size: 23px; }
}

/* ============================================================ FOOTER */
:root footer {
  background: transparent; border-top: 1px solid var(--border); padding: 26px 0 38px; margin-top: 60px;
  text-align: center; font-family: var(--fm), sans-serif; font-size: 11px; color: var(--fg); opacity: .62;
  letter-spacing: .12em; text-transform: uppercase;
}
: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(--accent); }


/* 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;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Monocle-Swiss overlay=25% grid=asymmetric scale=dramatic family=flat-divs */


/* ── 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: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: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: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: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;
}

/* ── flat-divs family: cards 5 & 6 also get photo headers ── */
:root main:not(:has(> h1)) > div:nth-of-type(5) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-1.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:nth-of-type(6) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/theme-assets/premium-hero-strip-2.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: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: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: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: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))::before,
  :root main:not(:has(> h1))::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}