*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.sc-Jgzxjp{max-width:1100px;margin:0 auto;padding:0 24px}
.sc-DbdizN{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.sc-DbdizN h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.sc-DbdizN p{font-size:16px;opacity:.8;font-style:italic}
.sc-DbdizN .sc-lGexXe{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.sc-BSmxOq{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.sc-vaxcwU{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.sc-vaxcwU:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.sc-vaxcwU h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.sc-vaxcwU h2 a{color:#2c3e50;text-decoration:none}
.sc-vaxcwU .sc-QfFdXB{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.sc-vaxcwU p{font-size:15px;color:#555;margin-bottom:14px}
.sc-ZPiMpJ{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.sc-rWRCdc{max-width:780px;margin:0 auto;padding:0 24px 60px}
.sc-rWRCdc h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.sc-rWRCdc .sc-QfFdXB{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.sc-rWRCdc h2{font-size:24px;margin:36px 0 14px}
.sc-rWRCdc h3{font-size:19px;margin:28px 0 10px}
.sc-rWRCdc p{margin-bottom:18px;font-size:17px}
.sc-rWRCdc ul,.sc-rWRCdc ol{margin:0 0 18px 28px}
.sc-rWRCdc a{color:#e74c3c}
.sc-rWRCdc img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.sc-bObCVr{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.sc-bObCVr a{color:#888}
.sc-eFLJkV{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.sc-CVzOvc{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.sc-zMWMov{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.sc-Zbzugq{margin:0 0 28px}
.sc-TDKreZ{width:100%;height:auto;border-radius:4px}
.sc-HTXbcc{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.sc-HTXbcc h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.sc-WZtQEn{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.sc-WZtQEn p{font-size:15px;padding:4px 0;margin:0}
.sc-WZtQEn .sc-QfFdXB{margin:0 8px 0 0;display:inline}
.sc-WZtQEn a{color:#2c3e50;text-decoration:none}
.sc-WZtQEn a:hover{color:#e74c3c}
/* === Theme === */
:root{--primary:#6F4A7A;--accent:#D9A87A;--bg:#F5EBE0;--fg:#1F0F1A;--border:#C4A8B0;--rust:#8B2E2E;--paper:#FFFCF7;--r:3px;--fb:'Gentium Book Plus';--fh:'Andada Pro';--fm:'Archivo'}
/* === Custom === */
/* v.e0e6c6 — layout revision */
/* Mein Strickweg — editorial magazine, rebuilt from the live design (repo copy was stale).
   Voice: Marlies' Lerntagebuch. Andada Pro (display, italic wordmark + featured title),
   Gentium Book Plus (running text), Archivo (uppercase tracked meta).
   Signature: the knit-stitch chevron — masthead texture, section dinkus, footer mark.
   Moment colour #8B2E2E in two roles: drop caps + affiliate CTA pill (per-site assigned hex).
   Enhancements this pass: photo masthead + two article-cover photo strips (DAS NOTIZBUCH / MEHR LESEN).
   All selectors are element/structural — class names are obfuscated per-site at deploy. */

/* Webfonts must be @font-face, not @import: the deploy concatenates custom.css AFTER
   the template + theme rules, so a trailing @import is dropped by the CSS parser. Latin subset. */
@font-face{font-family:'Andada Pro';font-style:normal;font-weight:400 840;font-display:swap;src:url(https://fonts.gstatic.com/s/andadapro/v26/HhyRU5Qi9-SuOEhPe4LtAIlqSJsL9_A.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Andada Pro';font-style:italic;font-weight:400 840;font-display:swap;src:url(https://fonts.gstatic.com/s/andadapro/v26/HhyTU5Qi9-SuOEhPe4LtAIxaSpEM1fI93A.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Gentium Book Plus';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/gentiumbookplus/v1/vEFL2-RHBgUK5fbjKxRpbBtJPyRpocKYf7PsrsPU.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Gentium Book Plus';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/gentiumbookplus/v1/vEFO2-RHBgUK5fbjKxRpbBtJPyRpocojWqbBjM7-f7e0.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Gentium Book Plus';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/gentiumbookplus/v1/vEFN2-RHBgUK5fbjKxRpbBtJPyRpocKdT7HmqeHWdb8.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --primary:#6F4A7A; --accent:#D9A87A; --bg:#F5EBE0; --fg:#1F0F1A;
  --rust:#8B2E2E; --paper:#FFFCF7; --line:rgba(111,74,122,.22); --r:6px;
  --fh:'Andada Pro'; --fb:'Gentium Book Plus'; --fm:'Archivo';
  --knit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='24'%3E%3Cg fill='none' stroke='%23F5EBE0' stroke-opacity='.17' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 0 9 12 18 0 27 12 36 0'/%3E%3Cpath d='M-9 12 0 24 9 12 18 24 27 12 36 24 45 12'/%3E%3C/g%3E%3C/svg%3E");
  --mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='16'%3E%3Cg fill='none' stroke='%23D9A87A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3 11 13 19 3M23 3 31 13 39 3M43 3 51 13 59 3'/%3E%3C/g%3E%3C/svg%3E");
}

:root body{font-family:var(--fb),Georgia,serif;color:var(--fg);background:var(--bg);line-height:1.8;font-size:16.5px}
::selection{background:var(--accent);color:#1F0F1A}

/* ============================================================= MASTHEAD (both templates)
   :first-of-type buys the class-weight unit to out-specify the template's own descendant pairs. */
:root>body>nav:first-of-type{
  max-width:none;padding:0;margin:0 0 56px;text-align:left;color:#F7EFE6;
  background:
    linear-gradient(100deg, rgba(74,45,84,.90) 0%, rgba(101,66,112,.82) 52%, rgba(101,66,112,.70) 100%),
    url("/theme-assets/masthead-bg.jpg") center 46%/cover no-repeat, #6F4A7A;
  border-bottom:3px solid var(--accent);position:relative;overflow:hidden}
:root>body>nav:first-of-type::before{
  content:"";position:absolute;inset:0;background-image:var(--knit);
  background-size:36px 24px;opacity:.6;pointer-events:none}
:root>body>nav:first-of-type>div{
  max-width:1080px;margin:0 auto;padding:52px 24px 40px;position:relative}

/* home masthead: kicker → serif-italic wordmark → stitch rule → manifesto */
:root>body>nav:first-of-type>div>h1{
  font-family:var(--fh),Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(38px,6.4vw,62px);line-height:1.02;letter-spacing:-.015em;
  text-transform:none;color:#FBF5EE;margin:0 0 18px;text-shadow:0 2px 18px rgba(40,18,48,.5)}
:root>body>nav:first-of-type>div>h1::before{
  content:"Lerntagebuch\0000A0·\0000A0Augsburg\0000A0·\0000A0seit Frühjahr 2025";
  display:block;font-family:var(--fm),system-ui,sans-serif;font-style:normal;font-weight:600;
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);margin-bottom:18px;text-shadow:0 1px 6px rgba(40,18,48,.5)}
:root>body>nav:first-of-type>div>p{
  font-family:var(--fb),Georgia,serif;font-style:italic;font-weight:400;font-size:17px;
  line-height:1.6;color:rgba(251,245,238,.92);max-width:52ch;margin:0;
  padding-top:20px;text-shadow:0 1px 8px rgba(40,18,48,.45);
  background:var(--mark) left top/62px 16px no-repeat}

/* article masthead: compact, wordmark left + standing line right */
:root>body>nav:first-of-type:has(>div>a)>div{
  padding:26px 24px 24px;display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
:root>body>nav:first-of-type>div>a{
  font-family:var(--fh),Georgia,serif;font-style:italic;font-weight:500;font-size:27px;
  letter-spacing:-.01em;text-transform:none;color:#FBF5EE;text-decoration:none;
  text-shadow:0 2px 14px rgba(40,18,48,.5)}
:root>body>nav:first-of-type>div>a:hover{color:var(--accent)}
:root>body>nav:first-of-type:has(>div>a)>div::after{
  content:"Maschinenstricken\0000A0\002014\0000A0von Null gelernt";
  font-family:var(--fm),system-ui,sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(240,222,200,.95);
  text-shadow:0 1px 8px rgba(40,18,48,.6)}

/* ------------------------------------------------------------ HOME: canvas */
:root main:has(>div>div>h2){max-width:1080px;margin:0 auto;padding:0 24px 90px}
:root main:has(>div>div>h2)>div:has(>div>h2){
  display:grid;grid-template-columns:repeat(6,1fr);column-gap:30px;row-gap:0;align-items:stretch}

/* strip every card of the template's white box; the rhythm is built back below */
:root main>div>div:nth-of-type(n){
  background:none;border:0;border-radius:0;box-shadow:none;padding:0;transition:none}
:root main>div>div:nth-of-type(n):hover{box-shadow:none;transform:none}

/* --- 1. THE HERO: metadata rail + display title + drop cap + outlined CTA --- */
:root main>div>div:nth-of-type(1){
  grid-column:1/-1;order:0;display:grid;grid-template-columns:212px 1fr;column-gap:46px;
  background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--primary);
  border-radius:var(--r);padding:42px 46px 46px;margin-bottom:10px;box-shadow:0 1px 4px rgba(31,15,26,.05)}
:root main>div>div:nth-of-type(1)>p:first-child{
  grid-column:1;grid-row:1/span 3;align-self:stretch;text-align:right;
  padding-right:26px;border-right:1px solid var(--line);
  font-family:var(--fm),system-ui,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:none;color:rgba(31,15,26,.45);opacity:1;margin:0}
:root main>div>div:nth-of-type(1)>p:first-child::before{
  content:"Neueste Notiz";display:block;font-weight:700;font-size:10.5px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--primary);
  padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--primary)}
:root main>div>div:nth-of-type(1)>p:first-child::after{
  content:"Von Marlies\0000A0·\0000A0Werkstattnotiz";display:block;margin-top:14px;
  font-family:var(--fb),Georgia,serif;font-style:italic;font-size:14px;letter-spacing:0;
  line-height:1.5;color:rgba(31,15,26,.5)}
:root main>div>div:nth-of-type(1)>h2{
  grid-column:2;grid-row:1;font-family:var(--fh),Georgia,serif;font-style:italic;
  font-weight:500;font-size:clamp(31px,4.3vw,53px);line-height:1.06;letter-spacing:-.018em;
  margin:0 0 20px;padding:0;border:0}
:root main>div>div:nth-of-type(1)>h2>a{color:var(--primary);text-decoration:none}
:root main>div>div:nth-of-type(1)>h2>a:hover{color:var(--rust)}
:root main>div>div:nth-of-type(1)>p:not(:first-child){
  grid-column:2;grid-row:2;font-family:var(--fb),Georgia,serif;font-size:18.5px;
  line-height:1.62;color:rgba(31,15,26,.84);margin:0 0 28px;max-width:60ch;opacity:1}
:root main>div>div:nth-of-type(1)>p:not(:first-child)::first-letter{
  float:left;font-family:var(--fh),Georgia,serif;font-weight:700;font-style:normal;
  font-size:64px;line-height:.78;margin:7px 13px 0 0;color:var(--rust)}
:root main>div>div:nth-of-type(1)>a:last-child{
  grid-column:2;grid-row:3;justify-self:start;display:inline-block;
  font-family:var(--fm),system-ui,sans-serif;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--primary);background:none;
  border:1.5px solid var(--primary);border-radius:var(--r);padding:12px 28px;
  text-decoration:none;transition:background .16s ease,color .16s ease;font-size:0}
:root main>div>div:nth-of-type(1)>a:last-child::after{
  content:"Weiterlesen\0000A0\002192";display:inline-block;vertical-align:top;
  font-size:11.5px;line-height:1.35;letter-spacing:.18em}
:root main>div>div:nth-of-type(1)>a:last-child:hover{background:var(--primary);color:#FBF5EE}

/* --- 2. "Zuerst lesen" band (cards 2-4): the second confident moment --- */
:root main>div>div:nth-of-type(n+2):nth-of-type(-n+4){
  grid-column:span 2;order:0;margin-top:86px;padding:26px 0 8px;
  border-top:1px solid var(--line);position:relative}
:root main>div>div:nth-of-type(2)::before{
  content:"Zuerst lesen\0000A0\002014\0000A0drei Einstiegsnotizen";position:absolute;
  left:0;bottom:calc(100% + 20px);width:calc(300% + 60px);
  font-family:var(--fm),system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--primary);
  padding-bottom:10px;border-bottom:2px solid var(--primary)}
:root main>div>div:nth-of-type(4)::before{
  content:"Wenn du noch keine Maschine hast";position:absolute;right:0;
  bottom:calc(100% + 30px);font-family:var(--fb),Georgia,serif;font-style:italic;
  font-size:14px;color:rgba(31,15,26,.5);white-space:nowrap}
:root main>div>div:nth-of-type(n+2):nth-of-type(-n+4)>p:first-child{
  font-family:var(--fm),system-ui,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(31,15,26,.4);opacity:1;margin:0 0 10px}
:root main>div>div:nth-of-type(n+2):nth-of-type(-n+4)>h2{
  font-family:var(--fh),Georgia,serif;font-style:normal;font-weight:600;font-size:21px;
  line-height:1.26;letter-spacing:-.005em;margin:0 0 10px;padding:0;border:0}
:root main>div>div:nth-of-type(2)>h2::before{content:"I.\0000A0";color:rgba(111,74,122,.42)}
:root main>div>div:nth-of-type(3)>h2::before{content:"II.\0000A0";color:rgba(111,74,122,.42)}
:root main>div>div:nth-of-type(4)>h2::before{content:"III.\0000A0";color:rgba(111,74,122,.42)}

/* --- STRIP 1: DAS NOTIZBUCH — photo band between the picks band and the journal (RULE F) --- */
:root main:has(>div>div>h2)>div:has(>div>h2)::after{
  content:"Das Notizbuch";order:1;grid-column:1/-1;
  height:190px;display:flex;align-items:center;justify-content:center;
  margin:56px 0 6px;border-radius:var(--r);
  background:linear-gradient(rgba(20,24,28,.55),rgba(20,24,28,.25)),
    url("/theme-assets/article-cover.jpg") center 30%/cover no-repeat;
  color:#F5ECE0;font-family:var(--fm),system-ui,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.6)}

/* --- 3. Chronological grid (cards 5+): consistent, hairline-divided rows --- */
:root main>div>div:nth-of-type(n+5){
  grid-column:span 3;order:2;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 4px rgba(31,15,26,.05);
  padding:26px 32px 24px;margin-bottom:30px;position:relative;
  transition:box-shadow .16s ease,transform .16s ease}
:root main>div>div:nth-of-type(n+5):hover{
  box-shadow:0 5px 16px rgba(31,15,26,.11);transform:translateY(-2px)}
:root main>div>div:nth-of-type(5),
:root main>div>div:nth-of-type(6){margin-top:0}
:root main>div>div:nth-of-type(5)::before,
:root main>div>div:nth-of-type(6)::before{content:none}
:root main>div>div:nth-of-type(n+5)>p:first-child{
  font-family:var(--fm),system-ui,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(31,15,26,.4);opacity:1;margin:0 0 9px}
:root main>div>div:nth-of-type(n+5)>h2{
  font-family:var(--fh),Georgia,serif;font-style:normal;font-weight:600;font-size:20px;
  line-height:1.28;margin:0 0 9px;padding:0;border:0}

/* shared card interior for everything after the hero */
:root main>div>div:nth-of-type(n+2)>h2>a{color:var(--primary);text-decoration:none}
:root main>div>div:nth-of-type(n+2)>h2>a:hover{color:var(--rust)}
:root main>div>div:nth-of-type(n+2)>p:not(:first-child){
  font-family:var(--fb),Georgia,serif;font-size:15.5px;line-height:1.62;
  color:rgba(31,15,26,.72);opacity:1;margin:0 0 14px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
:root main>div>div:nth-of-type(n+2)>a:last-child{
  display:inline-block;font-family:var(--fm),system-ui,sans-serif;font-size:0;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);
  background:none;border:0;border-bottom:1px solid var(--accent);border-radius:0;
  padding:0 0 3px;text-decoration:none}
:root main>div>div:nth-of-type(n+2)>a:last-child::after{
  content:"Weiterlesen\0000A0\002192";display:inline-block;vertical-align:top;
  font-size:10px;line-height:1.4;letter-spacing:.2em}
:root main>div>div:nth-of-type(n+2)>a:last-child:hover{
  color:var(--rust);border-bottom-color:var(--rust);background:none}

/* --- STRIP 2 + ARCHIVE: photo band (MEHR LESEN, RULE F) then two columns of dated rows --- */
:root main>div:nth-of-type(2){
  background:none;box-shadow:none;border-radius:0;border-top:0;
  margin-top:64px;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px;align-items:stretch}
:root main>div:nth-of-type(2)::before{
  content:"Mehr lesen";grid-column:1/-1;display:flex;align-items:center;justify-content:center;
  height:200px;margin:0 0 30px;padding:0;border-radius:var(--r);
  background:linear-gradient(rgba(28,20,30,.58),rgba(28,20,30,.28)),
    url("/theme-assets/article-cover.jpg") center 70%/cover no-repeat;
  color:#F5ECE0;font-family:var(--fm),system-ui,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.6)}
:root main>div:nth-of-type(2)>p{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 1px 4px rgba(31,15,26,.05);
  font-size:15.5px;margin:0;padding:18px 20px;line-height:1.5;
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
:root main>div:nth-of-type(2)>p:hover{
  box-shadow:0 5px 16px rgba(31,15,26,.11);transform:translateY(-2px);border-color:var(--accent)}
:root main>div:nth-of-type(2)>p>span{
  display:inline-block;min-width:78px;margin:0 10px 0 0;
  font-family:var(--fm),system-ui,sans-serif;font-size:10px;font-weight:600;
  letter-spacing:.14em;color:rgba(31,15,26,.4)}
:root main>div:nth-of-type(2)>p>a{
  font-family:var(--fb),Georgia,serif;color:var(--fg);text-decoration:none}
:root main>div:nth-of-type(2)>p>a:hover{color:var(--primary)}

/* ------------------------------------------------------- ARTICLE: the page */
:root main:nth-of-type(1):has(>article){max-width:720px;margin:0 auto;padding:0 24px 96px}
:root main:nth-of-type(1):has(>article)>h1{
  font-family:var(--fh),Georgia,serif;font-style:normal;font-weight:600;
  font-size:clamp(33px,5.4vw,50px);line-height:1.08;letter-spacing:-.018em;
  color:var(--primary);margin:0 0 16px}
:root main:nth-of-type(1):has(>article)>h1::before{
  content:"Lerntagebuch\0000A0·\0000A0Notiz";display:block;
  font-family:var(--fm),system-ui,sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(31,15,26,.45);margin-bottom:16px}
:root main:nth-of-type(1):has(>article)>time{
  display:block;font-family:var(--fm),system-ui,sans-serif;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(31,15,26,.48);
  margin:0 0 34px;padding-bottom:20px;border-bottom:1px solid var(--line)}
:root main:nth-of-type(1):has(>article)>time::after{content:"\0000A0·\0000A0Von Marlies, Augsburg"}

/* the template repeats the date as the article's first <p> — hide it; the <time> above carries it */
:root main:nth-of-type(1):has(>article)>article>p:first-of-type{display:none}
:root main:nth-of-type(1):has(>article)>article>p{
  font-family:var(--fb),Georgia,serif;font-size:18px;line-height:1.82;margin:0 0 22px}
:root main:nth-of-type(1):has(>article)>article>p:nth-of-type(2){font-size:19.5px;line-height:1.72}
:root main:nth-of-type(1):has(>article)>article>p:nth-of-type(2)::first-letter{
  float:left;font-family:var(--fh),Georgia,serif;font-weight:700;font-size:60px;
  line-height:.78;margin:6px 12px 0 0;color:var(--rust)}
:root main:nth-of-type(1):has(>article)>article>p>strong,
:root main:nth-of-type(1):has(>article)>article li>strong{color:var(--primary);font-weight:700}

/* h2 sections carry the knit-stitch dinkus — the site's signature mark */
:root main:nth-of-type(1):has(>article)>article>h2{
  font-family:var(--fh),Georgia,serif;font-style:normal;font-weight:600;font-size:27px;
  line-height:1.22;letter-spacing:-.012em;color:var(--primary);
  margin:64px 0 16px;padding:0;border:0}
:root main:nth-of-type(1):has(>article)>article>h2::before{
  content:"";display:block;width:62px;height:16px;margin-bottom:22px;
  background:var(--mark) left center/62px 16px no-repeat}
:root main:nth-of-type(1):has(>article)>article>h3{
  font-family:var(--fm),system-ui,sans-serif;font-weight:700;font-size:12.5px;
  font-style:normal;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(31,15,26,.6);margin:38px 0 12px}

:root main:nth-of-type(1):has(>article)>article ul,
:root main:nth-of-type(1):has(>article)>article ol{margin:0 0 22px 24px}
:root main:nth-of-type(1):has(>article)>article li{
  font-family:var(--fb),Georgia,serif;font-size:17px;line-height:1.72;margin-bottom:9px;padding-left:6px}
:root main:nth-of-type(1):has(>article)>article li::marker{color:var(--accent)}

:root main:nth-of-type(1):has(>article)>article blockquote{
  position:relative;margin:40px 0;padding:4px 0 4px 48px;border:0;
  border-left:2px solid var(--accent);background:none;border-radius:0;
  font-family:var(--fh),Georgia,serif;font-style:italic;font-weight:400;
  font-size:21px;line-height:1.5;color:var(--primary)}
:root main:nth-of-type(1):has(>article)>article blockquote::before{
  content:"\00201E";position:absolute;left:12px;top:-4px;font-family:var(--fh),Georgia,serif;
  font-style:normal;font-size:56px;line-height:1;color:var(--accent)}
:root main:nth-of-type(1):has(>article)>article blockquote p{
  margin:0 0 10px;font-size:inherit;line-height:inherit;font-family:inherit}

:root main:nth-of-type(1):has(>article)>article>figure{margin:0 0 32px}
:root main:nth-of-type(1):has(>article)>article>figure>img{
  width:100%;height:auto;display:block;margin:0;border-radius:var(--r);
  box-shadow:0 6px 26px rgba(31,15,26,.14)}
:root main:nth-of-type(1):has(>article)>article>figure>figcaption{
  font-family:var(--fm),system-ui,sans-serif;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(31,15,26,.45);margin-top:10px}

:root main:nth-of-type(1):has(>article)>article table{
  width:100%;border-collapse:collapse;margin:0 0 28px;font-size:15.5px}
:root main:nth-of-type(1):has(>article)>article th{
  font-family:var(--fm),system-ui,sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;text-align:left;color:var(--primary);
  padding:10px 14px 10px 0;border-bottom:2px solid var(--primary)}
:root main:nth-of-type(1):has(>article)>article td{
  padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}

/* editorial links stay quiet text; affiliate links are the one loud moment (RULE J: full path + attr) */
:root main:nth-of-type(1):has(>article)>article>p a,
:root main:nth-of-type(1):has(>article)>article li a{
  color:var(--primary);text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:3px;text-decoration-thickness:1.5px;font-weight:400}
:root main:nth-of-type(1):has(>article)>article>p a:hover,
:root main:nth-of-type(1):has(>article)>article li a:hover{
  color:var(--rust);text-decoration-color:var(--rust)}

:root main:nth-of-type(1):has(>article)>article>p a[href^="/deal/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/ref/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/go/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/link/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/see/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/best/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/try/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/check/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/suggest/"],
:root main:nth-of-type(1):has(>article)>article>p a[href^="/partner/"],
:root main:nth-of-type(1):has(>article)>article li a[href^="/deal/"],
:root main:nth-of-type(1):has(>article)>article li a[href^="/go/"],
:root main:nth-of-type(1):has(>article)>article li a[href^="/ref/"]{
  display:inline-block;background:var(--rust);color:#FFF6EE;
  font-family:var(--fm),system-ui,sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
  padding:7px 19px 8px;border-radius:var(--r);text-decoration:none;
  box-shadow:0 2px 0 rgba(90,20,20,.4);transition:background .16s ease,box-shadow .16s ease}
:root main:nth-of-type(1):has(>article)>article>p a[href^="/deal/"]::after,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/ref/"]::after,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/go/"]::after,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/link/"]::after,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/see/"]::after,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/best/"]::after{content:"\0000A0\002192"}
:root main:nth-of-type(1):has(>article)>article>p a[href^="/deal/"]:hover,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/ref/"]:hover,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/go/"]:hover,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/link/"]:hover,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/see/"]:hover,
:root main:nth-of-type(1):has(>article)>article>p a[href^="/best/"]:hover,
:root main:nth-of-type(1):has(>article)>article li a[href^="/deal/"]:hover,
:root main:nth-of-type(1):has(>article)>article li a[href^="/go/"]:hover,
:root main:nth-of-type(1):has(>article)>article li a[href^="/ref/"]:hover{
  background:var(--primary);color:#FBF5EE;box-shadow:0 2px 0 rgba(60,32,68,.42)}

/* affiliate disclosure — a quiet aside, not body copy */
:root main:nth-of-type(1):has(>article)>article>div:has(>em){
  background:rgba(111,74,122,.05);border:0;border-left:2px solid var(--accent);
  border-radius:0;padding:13px 18px;margin:0 0 30px;text-align:left;
  font-family:var(--fm),system-ui,sans-serif;font-size:12px;line-height:1.65;color:rgba(31,15,26,.58)}
:root main:nth-of-type(1):has(>article)>article>div:has(>em) em{font-style:normal}

/* related articles — numbered, hairline-ruled close to the piece */
:root main:nth-of-type(1):has(>article)>aside{
  border-top:2px solid var(--primary);margin-top:72px;padding-top:0}
:root main:nth-of-type(1):has(>article)>aside>h4{
  font-family:var(--fm),system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--primary);opacity:1;
  margin:0;padding:26px 0 24px;border:0}
:root main:nth-of-type(1):has(>article)>aside>div{
  display:grid;grid-template-columns:1fr 1fr;gap:22px 36px;counter-reset:rel}
:root main:nth-of-type(1):has(>article)>aside>div>div{
  counter-increment:rel;display:block;background:none;border-radius:0;
  border-top:1px solid var(--line);padding:16px 0 0;margin:0}
:root main:nth-of-type(1):has(>article)>aside>div>div::before{
  content:counter(rel,decimal-leading-zero);float:left;margin-right:12px;
  font-family:var(--fm),system-ui,sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.1em;color:var(--accent);line-height:2.1}
:root main:nth-of-type(1):has(>article)>aside>div>div>a{
  font-family:var(--fb),Georgia,serif;font-size:15.5px;line-height:1.6;
  color:var(--fg);text-decoration:none;display:block;overflow:hidden}
:root main:nth-of-type(1):has(>article)>aside>div>div>a:hover{color:var(--primary)}

/* -------------------------------------------------------------------- FOOTER */
:root footer{
  background:none;border-top:1px solid var(--line);margin-top:70px;padding:0 0 48px;
  text-align:center;color:rgba(31,15,26,.55);font-size:12px}
:root footer>p{
  max-width:1080px;margin:0 auto;padding:26px 24px 0;
  font-family:var(--fm),system-ui,sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase}
:root footer>p::before{
  content:"";display:block;width:62px;height:16px;margin:0 auto 22px;
  background:var(--mark) center/62px 16px no-repeat;opacity:.85}
:root footer a{color:rgba(31,15,26,.55);text-decoration:none;border-bottom:1px solid var(--line)}
:root footer a:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* ---------------------------------------------------------------- RESPONSIVE
   `grid-column: span N` creates implicit tracks, so every span must be reset per breakpoint. */
@media (max-width:1000px){
  :root main:has(>div>div>h2)>div:has(>div>h2){grid-template-columns:repeat(2,1fr)}
  :root main>div>div:nth-of-type(1){
    grid-column:1/-1;grid-template-columns:180px 1fr;column-gap:32px;padding:34px 32px 38px}
  :root main>div>div:nth-of-type(n+2):nth-of-type(-n+4){grid-column:span 1;margin-top:80px}
  :root main>div>div:nth-of-type(4){margin-top:34px}
  :root main>div>div:nth-of-type(2)::before{width:calc(200% + 30px)}
  :root main>div>div:nth-of-type(4)::before{display:none}
  :root main>div>div:nth-of-type(n+5){grid-column:span 1}
  :root main:has(>div>div>h2)>div:has(>div>h2)::after{height:160px;margin:46px 0 4px}
}
@media (max-width:680px){
  :root>body>nav:first-of-type>div{padding:38px 20px 30px}
  :root>body>nav:first-of-type>div>h1::before{letter-spacing:.18em;font-size:10px}
  :root main>div>div:nth-of-type(2)::before,
  :root main>div>div:nth-of-type(5)::before,
  :root main>div:nth-of-type(2)::before{letter-spacing:.24em}
  :root main:has(>div>div>h2){padding:0 20px 70px}
  :root main:has(>div>div>h2)>div:has(>div>h2){grid-template-columns:1fr}
  :root main>div>div:nth-of-type(n){grid-column:1/-1}
  :root main>div>div:nth-of-type(1){grid-template-columns:1fr;padding:28px 24px 32px}
  :root main>div>div:nth-of-type(1)>p:first-child{
    grid-row:auto;text-align:left;padding:0 0 16px;border-right:0;
    border-bottom:1px solid var(--line);margin-bottom:22px}
  :root main>div>div:nth-of-type(1)>h2,
  :root main>div>div:nth-of-type(1)>p:not(:first-child),
  :root main>div>div:nth-of-type(1)>a:last-child{grid-column:1;grid-row:auto}
  :root main>div>div:nth-of-type(n+2):nth-of-type(-n+4){margin-top:74px}
  :root main>div>div:nth-of-type(3),
  :root main>div>div:nth-of-type(4){margin-top:30px}
  :root main>div>div:nth-of-type(2)::before{width:100%}
  :root main:has(>div>div>h2)>div:has(>div>h2)::after{height:140px;margin:40px 0 2px}
  :root main>div:nth-of-type(2){grid-template-columns:1fr}
  :root main>div:nth-of-type(2)::before{height:150px}
  :root main:nth-of-type(1):has(>article){padding:0 20px 72px}
  :root main:nth-of-type(1):has(>article)>aside>div{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;
  }
}


/* premium-upgrade v1 */
/* premium editorial upgrade — style=Cereal-Nordic overlay=25% grid=equal scale=dramatic family=astro-grid */

/* ── HERO STRIPS: site-level atmospheric photos (overlay 25%) ── */
: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.25) 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.25) 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;
}