*{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}
.sc-PBgIRp{max-width:640px;margin:0 auto;padding:0 20px}
.sc-uSreEy{padding:60px 0 40px;border-bottom:1px solid #ccc;margin-bottom:48px}
.sc-uSreEy h1{font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-uSreEy p{font-size:14px;color:#777;margin-top:6px;font-style:italic}
.sc-uSreEy a{color:#2a2a2a;text-decoration:none;font-size:24px;font-weight:400;letter-spacing:-.5px}
.sc-cETpcY{padding:20px 0}
.sc-cETpcY h2{font-size:18px;font-weight:400;margin-bottom:4px}
.sc-cETpcY h2 a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-cETpcY h2 a:hover{border-bottom-color:#2a2a2a}
.sc-cETpcY .sc-LljtEq{font-size:12px;color:#aaa;margin-bottom:6px}
.sc-cETpcY p{font-size:14px;color:#666}
.sc-tDuHkr{color:#888;font-size:13px;text-decoration:none}
.sc-tDuHkr:hover{color:#2a2a2a}
.sc-LTTGld{padding-bottom:60px}
.sc-LTTGld h1{font-size:28px;font-weight:400;margin-bottom:8px}
.sc-LTTGld .sc-LljtEq{font-size:12px;color:#aaa;display:block;margin-bottom:32px}
.sc-LTTGld h2{font-size:21px;font-weight:400;margin:40px 0 12px;border-bottom:1px solid #eee;padding-bottom:6px}
.sc-LTTGld h3{font-size:17px;margin:28px 0 8px}
.sc-LTTGld p{margin-bottom:18px;font-size:16px}
.sc-LTTGld ul,.sc-LTTGld ol{margin:0 0 18px 20px}
.sc-LTTGld a{color:#555;border-bottom:1px solid #ccc}
.sc-LTTGld a:hover{color:#000;border-bottom-color:#000}
.sc-LTTGld img{max-width:100%;height:auto;margin:24px 0}
.sc-FHBZdQ{border-top:1px solid #ddd;padding:20px 0;margin-top:48px;text-align:center;font-size:12px;color:#aaa}
.sc-FHBZdQ a{color:#aaa;text-decoration:none}
.sc-BDVZwc{padding:0 0 16px;margin-bottom:24px;font-size:12px;color:#aaa;font-style:italic;border-bottom:1px solid #eee}
.sc-qLMuPm{padding:16px 0 0;margin-top:32px;font-size:11px;color:#999;border-top:1px solid #eee}
.sc-ktPLzT{font-size:12px;color:#aaa;margin:-26px 0 32px;font-weight:300}
.sc-evCkLc{margin:0 auto 32px;max-width:720px}
.sc-pKKqSG{width:100%;height:auto}
.sc-hSNwht{margin-top:40px;padding-top:20px;border-top:1px solid #eee;font-size:14px;color:#888}
.sc-hSNwht em{color:#aaa}
.sc-hSNwht a{color:#555;border-bottom:1px solid #ddd;text-decoration:none}
.sc-lfxKpl{padding:24px 0 0;border-top:1px solid #eee;margin-top:24px}
.sc-lfxKpl p{padding:3px 0;margin:0;font-size:15px}
.sc-lfxKpl a{color:#2a2a2a;text-decoration:none;border-bottom:1px solid transparent}
.sc-lfxKpl a:hover{border-bottom-color:#2a2a2a}
/* === Theme === */
:root{--primary:#5B4757;--accent:#A88C5C;--bg:#EEE8DC;--fg:#1F1A22;--border:#C9BFA8;--r:13px;--fb:'Mulish';--fh:'Cormorant Garamond';--moment:#5C6B4A}
/* === Custom === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Mulish:ital,wght@0,400;0,500;0,700;1,400&display=swap');

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

:root header { border-bottom: 1px solid var(--accent); padding: 56px 0 24px; margin-bottom: 42px; background: transparent; }
:root header h1 { font-family: var(--fh), Cambria, serif; font-size: 38px; font-weight: 500; color: var(--primary); letter-spacing: 0; line-height: 1.14; }
:root header h1 + p { font-family: var(--fb), system-ui, sans-serif; font-size: 14px; color: var(--fg); opacity: .78; margin-top: 6px; font-style: italic; }
:root header a { font-family: var(--fh), Cambria, serif; font-size: 26px; color: var(--primary); text-decoration: none; font-weight: 500; }

:root main { padding-bottom: 80px; }
:root main > h1 { font-family: var(--fh), Cambria, serif; font-size: 34px; font-weight: 500; line-height: 1.18; color: var(--primary); margin: 8px 0 6px; }
:root main > span { display: block; font-family: var(--fb), system-ui, sans-serif; font-size: 12px; color: var(--accent); margin-bottom: 30px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }

:root main > article > p { margin-bottom: 18px; font-size: 16.5px; }
:root main > article > h2 { font-family: var(--fh), Cambria, serif; font-size: 24px; font-weight: 500; color: var(--primary); margin: 40px 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--accent); letter-spacing: 0; }
:root main > article > h3 { font-family: var(--fh), Cambria, serif; font-size: 19px; font-weight: 500; color: var(--accent); margin: 26px 0 10px; font-style: italic; }
:root main > article ul, :root main > article ol { margin: 0 0 18px 24px; }
:root main > article li { margin-bottom: 6px; }
:root main > article blockquote { border-left: 3px solid var(--accent); padding: 8px 0 8px 20px; margin: 26px 0; font-style: italic; color: var(--primary); background: rgba(168, 140, 92, .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: none; border-bottom: 1.5px solid var(--accent); padding-bottom: 1px; font-weight: 500; }
:root main > article > p a:hover { color: var(--accent); border-bottom-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/"], :root main > article > p a[href^="/go/"] { font-family: var(--fb), system-ui, sans-serif; font-size: 13.5px; color: var(--bg); background: var(--primary); border: 0; padding: 3px 12px; border-radius: var(--r); text-decoration: none; letter-spacing: .03em; font-weight: 700; }
: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 { background: var(--accent); color: var(--fg); }

:root main > article > img { width: 100%; height: auto; display: block; margin: 0 0 28px; border-radius: var(--r); box-shadow: 0 3px 14px rgba(31, 26, 34, .10); }

:root main > article > aside { border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); padding: 14px 16px; margin-top: 32px; font-size: 13.5px; color: var(--fg); font-family: var(--fb), system-ui, sans-serif; font-style: italic; background: rgba(91, 71, 87, .05); }
:root main > article > aside b { color: var(--primary); font-weight: 700; font-style: normal; font-size: 11px; letter-spacing: .14em; display: inline-block; margin-right: 8px; font-family: var(--fb), system-ui, sans-serif; text-transform: uppercase; }

:root main > div { padding: 22px 0; border-bottom: 1px dotted var(--border); }
:root main > div:last-of-type { border-bottom: 0; }
:root main > div > 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: 8px; font-weight: 700; }
:root main > div > h2 { font-family: var(--fh), Cambria, serif; font-size: 22px; font-weight: 500; margin-bottom: 6px; line-height: 1.22; letter-spacing: 0; }
:root main > div > h2 a { color: var(--primary); text-decoration: none; }
:root main > div > h2 a:hover { color: var(--accent); }
:root main > div > p:not(:first-child) { font-size: 14.5px; color: var(--fg); opacity: .85; margin-bottom: 10px; }
:root main > div > a:last-child { font-family: var(--fb), system-ui, sans-serif; font-size: 11.5px; color: var(--accent); text-decoration: none; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
:root main > div > a:last-child:hover { color: var(--primary); }

:root main > nav { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--accent); font-size: 14px; }
:root main > nav p em { font-family: var(--fb), system-ui, sans-serif; font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-style: normal; margin-right: 6px; font-weight: 700; }
: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); }

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

/* === R2 fixes (2026-06-08T14:40:04.759817+00:00) === */

/* Brand name: heavier weight + distinct color so it reads as a real site name, not a breadcrumb */
:root header a { font-size: 1.7rem; font-weight: 700; letter-spacing: 0.03em; color: #3d2b35; }

/* Article paragraphs: slightly more line-height for long comparison articles */
:root main > article > p, .sc-LTTGld p { line-height: 1.75; }

/* H2 sections: generous top margin so section breaks are obvious while scrolling */
:root main > article > h2 { margin-top: 2.5em; margin-bottom: 0.6em; }

/* H3 subheadings: own color + weight so they don't look like bold body text */
:root main > article > h3 { font-size: 1.05rem; font-weight: 700; font-style: normal; margin-top: 1.8em; margin-bottom: 0.3em; color: #5B4757; }

/* Header tagline: readable trust anchor for first-time visitors */
:root header h1 + p { font-size: 0.95rem; line-height: 1.5; max-width: 48ch; color: #5B4757; opacity: 0.85; }

/* === R3 fixes (2026-06-08T15:20:04.418020+00:00) === */

/* H3: restore optical weight so subheadings read as structure, not colored body text */
:root main > article > h3 { font-size: 1.15rem; }

/* CTA pill links: larger text + more padding for a clear click target */
: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^="/go/"] { font-size: 14.5px; padding: 6px 16px; }

/* Date/category label: quieter so article title dominates when scanning the list */
:root main > div > p:first-child { font-size: 10px; color: var(--fg); opacity: 0.50; letter-spacing: .10em; font-weight: 500; }

/* Article excerpts on home: slightly more presence to encourage click-through */
:root main > div > p:not(:first-child) { font-size: 15px; opacity: 0.92; }

/* Post-article nav: box treatment makes it read as a 'what's next' invitation, not a footer */
:root main > nav { background: rgba(91, 71, 87, 0.05); border: 1px solid var(--accent); border-radius: var(--r); padding: 16px 20px; margin-top: 48px; }

/* === R4 fixes (2026-06-08T16:00:05.053034+00:00) === */

/* H3: weight 600 + italic so it sits clearly below H2 (700+500 weight ladder was inverted) */
:root main > article > h3 { font-weight: 600; font-style: italic; }

/* CTA pill links: larger text + more padding — reads as recommendation, not footnote */
: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^="/go/"] { font-size: 15.5px; padding: 8px 20px; }

/* First homepage entry: larger title gives a visual anchor when scanning the list */
:root main > div:first-of-type > h2 { font-size: 25px; line-height: 1.18; }

/* /choice/ links: heavier weight + thicker underline marks them as personal picks mid-sentence */
:root main > article > p a[href^="/choice/"] { font-weight: 700; border-bottom-width: 2px; }

/* ============================================================= */
/* v.946185 — layout revision                                    */
/* Editorial homepage: photo masthead, hero-featured card,       */
/* Editor's-Picks pair, two post-header strip bands, journal      */
/* grid. Home is a FLAT list of <div> cards under <main> (no      */
/* tail); scoped to `body:has(main > div > h2)` so article pages  */
/* (whose main > div is the "Überarbeitet" line, no h2) are       */
/* untouched. Moment colour #5C6B4A used in exactly 2 places:     */
/* hero drop-cap + Editor's-Picks label underline.               */
/* ============================================================= */

/* ---- HOME MASTHEAD: atmospheric photo + serif-italic wordmark ---- */
body:has(main > div > h2) header {
  position: relative;
  background: linear-gradient(rgba(40,32,42,.66), rgba(40,32,42,.44)), url("/theme-assets/site-hero.jpg");
  background-size: cover;
  background-position: center 42%;
  border-bottom: 3px solid var(--accent);
  border-radius: 0 0 14px 14px;
  padding: 74px 34px 48px;
  margin-bottom: 60px;
  text-align: center;
}
body:has(main > div > h2) header::before {
  content: "Pilates-Onlinekurse · Ehrlich getestet · München";
  display: block;
  font-family: var(--fb), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
body:has(main > div > h2) header h1 {
  font-family: var(--fh), Cambria, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 7vw, 56px);
  line-height: 1.02;
  color: #f7f2e9;
  letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
body:has(main > div > h2) header h1 + p {
  font-family: var(--fh), Cambria, serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: #efe7d9;
  opacity: .96;
  max-width: 58ch;
  margin: 16px auto 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* ---- HOME GRID: 6-col editorial layout ---- */
body:has(main > div > h2) main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 30px;
  row-gap: 42px;
  padding-bottom: 40px;
}

/* base card (journal default) — soft frame, warm paper, never white */
body:has(main > div > h2) main > div {
  order: 5;
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px 34px 30px;
  background: #f6f0e3;
  border: 1px solid rgba(91,71,87,.14);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(31,26,34,.05);
}
body:has(main > div > h2) main > div:last-of-type { border-bottom: 1px solid rgba(91,71,87,.14); }
body:has(main > div > h2) main > div > p:first-child {
  font-size: 10.5px; letter-spacing: .16em; opacity: .55; font-weight: 700; margin-bottom: 10px;
}
body:has(main > div > h2) main > div > h2 { font-size: 20px; line-height: 1.26; margin-bottom: 12px; }
body:has(main > div > h2) main > div > p:nth-of-type(2) {
  font-size: 15px; line-height: 1.6; opacity: .9; margin-bottom: 16px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
body:has(main > div > h2) main > div > a:last-child { margin-top: auto; }
/* a lone trailing journal card (odd count) spans the row instead of leaving an empty column */
body:has(main > div > h2) main > div:last-of-type:nth-of-type(even) { grid-column: 1 / -1; }
body:has(main > div > h2) main > div:last-of-type:nth-of-type(even) > p:nth-of-type(2) { max-width: 66ch; }

/* ---- HERO / FEATURED CARD (first entry) ---- */
body:has(main > div > h2) main > div:first-of-type {
  order: 1;
  grid-column: 1 / -1;
  padding: 40px 44px;
  background: linear-gradient(180deg, #f8f2e6, #f1eadb);
  border: 1px solid rgba(91,71,87,.2);
  border-radius: 12px;
  box-shadow: 0 3px 14px rgba(31,26,34,.07);
  position: relative;
  overflow: visible;
}
/* editorial reorder: badge → title → byline → excerpt → CTA → picks label */
body:has(main > div > h2) main > div:first-of-type::before {
  content: "Aktuellster Test";
  order: 0;
  font-family: var(--fb), sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
body:has(main > div > h2) main > div:first-of-type > h2 { order: 1; margin: 0 0 14px; font-size: clamp(30px, 4.6vw, 45px); }
body:has(main > div > h2) main > div:first-of-type > h2 a { font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 500; line-height: 1.1; color: var(--primary); }
body:has(main > div > h2) main > div:first-of-type > p:nth-of-type(1) { order: 2; font-size: 0; margin: 0 0 20px; }
body:has(main > div > h2) main > div:first-of-type > p:nth-of-type(1)::before {
  content: "Von Carolin Hofer · 6 Min Lesen";
  font-family: var(--fb), sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fg); opacity: .68;
}
body:has(main > div > h2) main > div:first-of-type > p:nth-of-type(2) {
  order: 3; display: block; overflow: visible;
  font-size: 19px; line-height: 1.56; opacity: 1; max-width: 64ch; margin-bottom: 4px;
}
body:has(main > div > h2) main > div:first-of-type > p:nth-of-type(2)::first-letter {
  float: left; font-family: var(--fh), Cambria, serif; font-weight: 600; font-style: normal;
  font-size: 60px; line-height: .78; margin: 5px 12px 0 0; color: #5C6B4A;
}
body:has(main > div > h2) main > div:first-of-type > a:last-child {
  order: 4; align-self: flex-start; margin: 22px 0 0;
  font-family: var(--fb), sans-serif;
  border: 1.5px solid var(--primary); color: var(--primary);
  padding: 9px 24px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
body:has(main > div > h2) main > div:first-of-type > a:last-child:hover { background: var(--primary); color: var(--bg); }
/* Editor's-Picks section label — full-width band floating in the gap ABOVE
   the editor-pick cards (not a shaded strip inside the featured card). */
body:has(main > div > h2) main > div:first-of-type::after {
  content: "Redaktions-Tipps — zuerst lesen";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  margin-top: 6px;
  padding: 8px 44px 7px;
  font-family: var(--fb), sans-serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--primary);
  background: transparent;
  border-bottom: 2px solid #5C6B4A;
}

/* ---- EDITOR'S PICKS (entries 2 & 3) — paired band with N° anchor ---- */
body:has(main > div > h2) main > div:nth-of-type(2),
body:has(main > div > h2) main > div:nth-of-type(3) {
  order: 3;
  position: relative;
  background: #f4eddd;
  border-color: rgba(168,140,92,.28);
}
body:has(main > div > h2) main > div:nth-of-type(2)::before,
body:has(main > div > h2) main > div:nth-of-type(3)::before {
  position: absolute; top: 14px; right: 24px;
  font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 34px; line-height: 1;
  color: rgba(168,140,92,.42);
}
body:has(main > div > h2) main > div:nth-of-type(2)::before { content: "N° I"; }
body:has(main > div > h2) main > div:nth-of-type(3)::before { content: "N° II"; }
body:has(main > div > h2) main > div:nth-of-type(2) > h2,
body:has(main > div > h2) main > div:nth-of-type(3) > h2 { padding-right: 48px; }

/* ---- STRIP 1: section break before the journal ---- */
body:has(main > div > h2) main::before {
  content: "IN SCHREIBREIHENFOLGE";
  order: 4;
  grid-column: 1 / -1;
  min-height: 200px;
  margin: 26px 0 8px;
  display: flex; align-items: flex-end;
  padding: 0 40px 28px;
  background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/post-header.jpg");
  background-size: cover; background-position: center 30%;
  border-radius: 10px;
  font-family: var(--fb), sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: #f4efe6; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
/* ---- STRIP 2: section break after the journal ---- */
body:has(main > div > h2) main::after {
  content: "MEHR ARTIKEL";
  order: 6;
  grid-column: 1 / -1;
  min-height: 210px;
  margin: 30px 0 0;
  display: flex; align-items: flex-end;
  padding: 0 40px 30px;
  background: linear-gradient(rgba(24,20,28,.5), rgba(24,20,28,.34)), url("/theme-assets/post-header.jpg");
  background-size: cover; background-position: center 70%;
  border-radius: 10px;
  font-family: var(--fb), sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase;
  color: #f4efe6; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* ---- Single-column reflow on narrow viewports ---- */
@media (max-width: 720px) {
  body:has(main > div > h2) main { grid-template-columns: 1fr; row-gap: 26px; }
  body:has(main > div > h2) main > div,
  body:has(main > div > h2) main > div:first-of-type,
  body:has(main > div > h2) main > div:nth-of-type(2),
  body:has(main > div > h2) main > div:nth-of-type(3) { grid-column: 1 / -1; }
  body:has(main > div > h2) main > div:first-of-type { padding: 30px 26px; }
  body:has(main > div > h2) main > div:first-of-type::after { margin: 26px -26px -30px; padding: 14px 26px; }
  body:has(main > div > h2) header h1 { font-size: clamp(32px, 9vw, 44px); }
}

/* ============================================================= */
/* ARTICLE PAGE — restrained editorial touches (preserve existing) */
/* ============================================================= */
/* Wordmark: match masthead's serif-italic display voice */
:root header a { font-family: var(--fh), Cambria, serif; font-style: italic; }
/* Drop cap on the opening paragraph */
:root main > article > p:first-of-type::first-letter {
  float: left; font-family: var(--fh), Cambria, serif; font-weight: 600;
  font-size: 54px; line-height: .8; margin: 6px 10px 0 0; color: var(--primary);
}
/* Dinkus divider above every H2 section after the first */
:root main > article > h2:not(:first-of-type)::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; border: 0;
  color: var(--accent); opacity: .65;
  font-size: 13px; font-weight: 400; letter-spacing: .5em;
  margin: 10px 0 30px;
}


/* 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 (2026-08-22) — surgical M2/M3/M7/M10/S6 == */
/* Addresses only the codex-flagged violations. No new fonts/     */
/* sections/concepts. Preserves v.946185 marker, moment colour    */
/* #5C6B4A, hero filenames, and the overlay label text.           */
/* ============================================================= */

/* M3 — content cards (journal + picks): assert ≥32px horizontal
   padding and a visibly present hairline frame so the breathing
   room reads. The hero (44px) and the compact archive (below) keep
   their own padding/border via higher-specificity rules. */
body:has(main > div > h2) main > div {
  padding-left: 36px;
  padding-right: 36px;
  border-color: rgba(91,71,87,.22);
}

/* M7 — compact archive tail: cards from the 8th onward become a
   full-width magazine index rendered AFTER strip 2 (order 7). Each
   is an individually boxed cream cell sharing the journal design
   system (border, radius, shadow, hover) — 3-up on desktop, stacked
   and still individually boxed on mobile. */
body:has(main > div > h2) main > div:nth-of-type(n+8) {
  order: 7;
  grid-column: span 2;
  min-width: 0; /* stop long German compounds blowing out a 1fr track and forcing < 3 per row */
  padding: 20px 24px;
  background: #f6f0e3;
  border: 1px solid rgba(91,71,87,.20);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(31,26,34,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* neutralise the lone-trailing-card full-width rule inside the archive */
body:has(main > div > h2) main > div:nth-of-type(n+8):last-of-type { grid-column: span 2; }

/* M7 (iter2) — the iter1 tail relied on grid AUTO-FLOW to pack span-2 cards
   3-up. Some engines pack order-grouped mixed-span items into a single left
   column instead (the reported bug). Fix: PIN every archive card to an
   explicit column pair (1-2 / 3-4 / 5-6) so the 3-up magazine index is
   deterministic and can never collapse. Scoped to desktop (>720px) so it
   never fights the mobile single-column rule below; specificity (0,2,6)
   beats both the lone-trailing-card `1 / -1` rule and the iter1 neutraliser.
   The `:nth-of-type(n+8)` compound restricts each modulo to the archive
   (An+B also matches earlier cards, e.g. 3n+8 would match card 2 and 5). */
@media (min-width: 721px) {
  body:has(main > div > h2) main > div:nth-of-type(n+8):nth-of-type(3n+8)  { grid-column: 1 / span 2; }
  body:has(main > div > h2) main > div:nth-of-type(n+8):nth-of-type(3n+9)  { grid-column: 3 / span 2; }
  body:has(main > div > h2) main > div:nth-of-type(n+8):nth-of-type(3n+10) { grid-column: 5 / span 2; }
}
body:has(main > div > h2) main > div:nth-of-type(n+8):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(31,26,34,.10);
}
/* compact index: title-forward — drop excerpt + read-more, tighten meta */
body:has(main > div > h2) main > div:nth-of-type(n+8) > p:first-child {
  font-size: 9.5px; letter-spacing: .14em; margin-bottom: 7px;
}
body:has(main > div > h2) main > div:nth-of-type(n+8) > h2 {
  font-size: 15.5px; line-height: 1.32; margin-bottom: 0;
}
body:has(main > div > h2) main > div:nth-of-type(n+8) > p:nth-of-type(2),
body:has(main > div > h2) main > div:nth-of-type(n+8) > a:last-child { display: none; }

/* M10 — affiliate /choice/ product links (they appear in both <p>
   and <li>) render as distinct pill CTAs, not underlined prose
   links. Overrides the earlier prose-weight rule for /choice/. */
:root main > article p a[href^="/choice/"],
:root main > article li a[href^="/choice/"] {
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 14px;
  color: var(--bg);
  background: var(--primary);
  border: 0;
  border-bottom: 0;
  padding: 3px 13px;
  border-radius: var(--r);
  text-decoration: none;
  letter-spacing: .03em;
  font-weight: 700;
}
:root main > article p a[href^="/choice/"]:hover,
:root main > article li a[href^="/choice/"]:hover {
  background: var(--accent);
  color: var(--fg);
}

/* S6 — article personality anchor: extend the date-only meta line
   with a byline + reading-time (persona matches the homepage hero). */
:root main > h1 + span::after {
  content: " · Von Carolin Hofer · 6 Min Lesen";
}

/* Mobile parity for the above: give the floating picks-label band
   room above the picks, and stack the archive cells full-width. */
@media (max-width: 720px) {
  body:has(main > div > h2) main > div:first-of-type { margin-bottom: 30px; }
  body:has(main > div > h2) main > div:first-of-type::after { margin-top: 8px; padding: 8px 26px 7px; }
  body:has(main > div > h2) main > div:nth-of-type(n+8) { grid-column: 1 / -1; }
  /* M7 (iter1 refix) — the LAST archive card still matched the higher-specificity
     `:nth-of-type(n+8):last-of-type { grid-column: span 2 }` (desktop pinning
     neutraliser) even on mobile, spawning a phantom 2nd grid track. Every
     `1 / -1` card then spanned BOTH tracks and the whole tail overflowed the
     viewport, clipping card content on the right. Pin the last card back to the
     single column on mobile with equal specificity + later source order so the
     mobile grid stays exactly one full-width track. */
  body:has(main > div > h2) main > div:nth-of-type(n+8):last-of-type { grid-column: 1 / -1; }
}

/* ============================================================= */
/* === QA refix iter=2 (2026-08-23) — archive container M7/M2 === */
/* Root cause (found by rendering the LIVE custom.css against the   */
/* LIVE 16-article DOM): the homepage now ends with a deep-archive  */
/* container `<div>` whose rows are bare `<p><a>` title links and   */
/* which has NO `<h2>` child — a sibling of the 16 feature cards.   */
/* The base `main > div` grid rules + the :nth-of-type(n+8) tail-   */
/* card rules captured it as ONE narrow 2-col cell, so every link   */
/* stacked vertically on the left with the right ~3/4 of the page   */
/* empty (M7), and its first row — styled by the base as an upper-  */
/* case kicker — read as a heading trapped in that narrow column    */
/* (M2). Fix: select that container STRUCTURALLY (the only          */
/* `main > div` with no `> h2`; obfuscated class names are off-      */
/* limits) and make it a full-width 3-up magazine index of boxed    */
/* cream link cells that share the tail design system, with a       */
/* full-row section label above it. No new fonts/concepts;          */
/* v.946185 marker + moment colour #5C6B4A preserved.               */
/* ============================================================= */

/* Archive container → full-row band + inner 3-up grid.
   The high-specificity chain (:root + :last-of-type) is required to
   beat the base card rule, the :nth-of-type(n+8) tail-card rules
   and the desktop column-pinning that otherwise trap this div in a
   single narrow cell. `:not(:has(> h2))` is what distinguishes the
   bare-link container from the feature cards (which all have > h2);
   the two :has() are siblings, not nested, so Chromium honours them. */
:root body:has(main > div > h2) main > div:not(:has(> h2)):last-of-type {
  order: 8;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  margin: 6px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* M2 — full-row uppercase section label above the archive index,
   so its opening row is never mistaken for a heading trapped in a
   narrow left cell. Spans all three columns as a hairline band. */
:root body:has(main > div > h2) main > div:not(:has(> h2)):last-of-type::before {
  content: "Das komplette Archiv";
  grid-column: 1 / -1;
  font-family: var(--fb), sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 0 0 8px;
  border-bottom: 2px solid var(--accent);
}
/* each archive row → one compact boxed cream cell (tail parity);
   also neutralises the base p:first-child kicker + p:nth-of-type(2)
   webkit-box clamp that the container's rows would otherwise inherit. */
:root body:has(main > div > h2) main > div:not(:has(> h2)):last-of-type > p {
  margin: 0;
  min-width: 0;
  padding: 14px 18px;
  background: #f6f0e3;
  border: 1px solid rgba(91,71,87,.20);
  border-radius: 9px;
  box-shadow: 0 1px 4px rgba(31,26,34,.05);
  transition: transform .15s ease, box-shadow .15s ease;
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
:root body:has(main > div > h2) main > div:not(:has(> h2)):last-of-type > p:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(31,26,34,.10);
}
:root body:has(main > div > h2) main > div:not(:has(> h2)):last-of-type > p a {
  font-family: var(--fh), Cambria, serif;
  font-size: 14.5px;
  line-height: 1.32;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 0;
  overflow-wrap: break-word;
}
:root body:has(main > div > h2) main > div:not(:has(> h2)):last-of-type > p a:hover {
  color: var(--accent);
}
/* mobile: the archive index collapses to a single column */
@media (max-width: 720px) {
  :root body:has(main > div > h2) main > div:not(:has(> h2)):last-of-type {
    grid-template-columns: 1fr;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Racquet-moody overlay=40% grid=equal scale=balanced 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; }
}


/* 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. */

/* ── M6 (QA refix iter=1, 2026-09-02): restore hero-photo STRIP 1 ──
   v5 had converted this ::before — the section break between Editor's
   Picks and the Journal grid — into a flat centred text label on empty
   paper (codex M6 flag: "only a centred text label with empty paper
   space"). Restore it to the atmospheric hero-photo band it was in
   v.946185, mirroring the still-working strip 2 (::after 'MEHR
   ARTIKEL') so the two homepage section breaks read as one coherent
   pair. order:4 keeps it between picks (order 3) and journal (order 5);
   `main:not(:has(> h1))` keeps it homepage-only (no M11 leak). Per-site
   variations preserved: post-header.jpg + German label. Only `content`
   keeps !important (to beat v4's `content: none !important`); dropping
   !important on `background` also fixes the shorthand-resets-size trap
   so background-size:cover applies. */
:root main:not(:has(> h1))::before {
  content: "IN SCHREIBREIHENFOLGE" !important;
  order: 4;
  grid-column: 1 / -1;
  min-height: 200px;
  margin: 26px 0 8px;
  display: flex;
  align-items: flex-end;
  text-align: left;
  padding: 0 40px 28px;
  background: linear-gradient(rgba(20,24,28,.55), rgba(20,24,28,.25)), url("/theme-assets/post-header.jpg");
  background-size: cover;
  background-position: center 30%;
  border-radius: 10px;
  border-top: 0;
  border-bottom: 0;
  font-family: var(--fb), sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #f4efe6;
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

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


/* === Link & button colour audit (2026-09-16) ===
   Generated from a measured crawl of this site's own pages: every link and
   button was checked for text-vs-surface contrast at rest and on hover.
   Replacement colours keep the original hue and move only lightness, so the
   design reads the same. Verified by re-rendering before this was written. */
/* 8x 2.11:1 -> needs 4.5 | “Mehr erfahren →” */
:root :is(#lnkfix, main) > article > div > table > tbody > tr > td > a[style*="fd7e14"], :root :is(#lnkfix, main) > article > div > table > tbody > tr > td > a[style*="eee8dc"] { color: #9F4901 !important; }
/* 3x 2.57:1 -> needs 4.5 | “Jetzt Hüfte mobilisieren →” */
:root :is(#lnkfix, main) > article > div > div > a[style*="ffffff"], :root :is(#lnkfix, main) > article > div > div > a[style*="fd7e14"] { background: #5C6B4A !important; }
/* 1x 2.81:1 -> needs 4.5 | “read more →” */
:root :is(#lnkfix, main) > div > a:not([href^="/choice/"]) { color: #796441; }
/* hover 2.62:1 -> needs 4.5 on #EEE8DC */
:root :is(#lnkfix, main) > article > p > a:not([href^="/choice/"]):hover { color: #735F3D; }
/* hover 2.44:1 -> needs 4.5 on #E7E0D5 */
:root :is(#lnkfix, main) > nav > p > a:not([href^="/choice/"]):hover { color: #6E5B3B; }