/**
 * dreimorgen – Scrollytelling (3-Größen-Typo: .td .tb .tl)
 * Nur var(--sz-d), var(--sz-b), var(--sz-u). Fonts aus style.css.
 */

/* ── Theme-Overrides ─────────────────────────────────────────── */
#bg, #bg-front, #page-bg, #baseline-grid, #grid-overlay, #grid-hint, .nav-gc { display:none !important; }
body { overflow-x:clip !important; }
#presentation section, #hero, #finale { background-color:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
body.single-post #page-bg { display:none !important; }

/* ── Dunkler Hintergrund (alle Scrollytellings) ────────────────── */
body.dm-scrollytelling { background:#0a0909 !important; --ci:#0693e3; }
body.dm-scrollytelling main { background:transparent !important; }

/* ── --ci: Standard; page-scrollytelling überschreibt nur, wenn _dm_st_accent_color gesetzt ── */

/* ── Post-Header ─────────────────────────────────────────────── */
#wf-post-header {
  position:relative; z-index:10; margin-top:var(--nav-h);
  padding:var(--s10) 0 var(--s8);
  background:rgba(249,248,245,0.95);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.admin-bar #wf-post-header { margin-top:calc(var(--nav-h) + 32px); }

/* ── Container ───────────────────────────────────────────────── */
.wf-inner { max-width:var(--container); margin:0 auto; padding:0 var(--margin); }

/* ── Presentation ────────────────────────────────────────────── */
#presentation { background:var(--black,#0a0909); color:var(--white,#f4f0e8); position:relative; z-index:10; }

/* ── Progress bar ────────────────────────────────────────────── */
#prog { position:fixed; top:0; left:0; height:2px; width:0%; background:var(--ci); z-index:200; transition:width 80ms linear; }

/* ── Site-Nav: weiß auf dunklem, schwarz auf hellem ──────────── */
header.nav-light .n-logo, header.nav-light .n-logo svg,
header.nav-light .n-item, header.nav-light .n-item a,
header.nav-light .n-cta, header.nav-light .n-termin { color:var(--white,#f4f0e8) !important; }
header.nav-light .n-item { background-image:linear-gradient(var(--white,#f4f0e8),var(--white,#f4f0e8)) !important; }

body header:not(.nav-light) .n-logo, body header:not(.nav-light) .n-logo svg,
body header:not(.nav-light) .n-item, body header:not(.nav-light) .n-item a,
body header:not(.nav-light) .n-cta, body header:not(.nav-light) .n-termin { color:var(--black,#0a0909) !important; }
body header:not(.nav-light) .n-item { background-image:linear-gradient(var(--black,#0a0909),var(--black,#0a0909)) !important; }
body:not(.nav-open) header.nav-light .n-hamburger,
body:not(.nav-open) header.nav-light .n-hamburger span,
body:not(.nav-open) header.nav-light .n-hamburger::before,
body:not(.nav-open) header.nav-light .n-hamburger::after { background:transparent !important; color:var(--white,#f4f0e8) !important; }
body.nav-open header .n-logo,
body.nav-open header .n-logo svg,
body.nav-open header .n-hamburger { color:#000 !important; }
body.nav-open header { background:rgba(249,248,245,0.95) !important; }

/* ── Hero (.td .tb .tl) ──────────────────────────────────────── */
body.dm-scrollytelling #hero {
  height:auto; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center;
  padding:calc(var(--nav-h) + var(--s15)) 0 var(--s15); position:relative; overflow:hidden;
}
body.dm-scrollytelling #hero .wf-inner { width:100%; transform:translateY(-50px); }
#hero .wf-inner { display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); align-items:center; }
.hero-content { grid-column:1/13; }
body.dm-scrollytelling.admin-bar #hero { padding-top:calc(var(--nav-h) + 32px + var(--s15)); }

.hero-eyebrow {
  font-family:var(--fm); font-size:calc(var(--sz-u) * 0.85); line-height:var(--lh-u); letter-spacing:0.32em;
  text-transform:uppercase; color:var(--ci); margin-bottom:52px;
  opacity:0; animation:st-up 0.9s ease forwards 0.2s;
}
.hero-h {
  font-family:var(--f); font-size:clamp(61px,10.2vw,136px);
  line-height:0.94; letter-spacing:-0.02em;
}
.hero-h .l1 { display:block; font-weight:400; font-style:oblique; color:rgba(244,240,232,0.75); opacity:0; animation:st-up 0.9s ease forwards 0.4s; }
.hero-h .l2 { display:block; font-weight:700; color:var(--ci); opacity:0; animation:st-up 0.9s ease forwards 0.6s; }
.hero-h .l3 { display:block; font-weight:400; font-style:oblique; opacity:0; animation:st-up 0.9s ease forwards 0.8s; }
.hero-sub {
  margin-top:44px; max-width:75%; font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b);
  color:rgba(244,240,232,0.72);
  opacity:0; animation:st-up 0.9s ease forwards 1.0s;
}
.hero-sub strong { color:var(--white,#f4f0e8); font-weight:700; }

.hero-steps {
  display:flex; gap:var(--s8); margin-top:var(--s10);
  opacity:0; animation:st-up 0.9s ease forwards 1.2s;
}
.hero-step {
  font-family:var(--fm); font-size:calc(var(--sz-u) * 0.85); line-height:var(--lh-u);
  color:rgba(244,240,232,0.5); position:relative; padding-left:var(--s4);
}
.hero-step::before {
  content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--ci);
}
.hero-step span { display:block; }

/* ── Act layout (.td .tb .tl) ─────────────────────────────────── */
.act { padding:var(--s10) 0; }
.act-cols { display:grid; grid-template-columns:1fr 1fr; }
/* Vis-left: Illu links, Text rechts (via order) */
.act-vis-left .act-cols { display:flex; flex-wrap:wrap; }
.act-vis-left .act-text { order:2; flex:1; min-width:280px; padding:var(--s10) 0 var(--s10) var(--s8) !important; }
.act-vis-left .act-vis  { order:1; flex:1; min-width:280px; padding:var(--s10) var(--s8) var(--s10) 0 !important; }
.act-text {
  display:flex; flex-direction:column; justify-content:center;
  gap:var(--s4);
  padding:var(--s10) var(--s8) var(--s10) 0;
}
.act-vis {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--s10) 0 var(--s10) var(--s8);
  opacity:0; transform:translateY(24px); transition:opacity 0.8s var(--ease) 0.3s, transform 0.8s var(--ease) 0.3s;
}
.act-vis.on { opacity:1; transform:translateY(0); }

.step-label {
  font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u); letter-spacing:0.1em;
  text-transform:uppercase; color:var(--ci);
  opacity:0; transform:translateY(20px); transition:opacity 0.8s ease, transform 0.8s var(--ease);
}
.step-label.on { opacity:1; transform:translateY(0); }
.act-text h2 {
  font-family:var(--f); font-size:var(--sz-d); line-height:var(--lh-d); font-weight:700;
  color:var(--white,#f4f0e8);
  opacity:0; transform:translateY(36px); transition:opacity 0.9s ease 0.12s, transform 0.9s var(--ease) 0.12s;
}
.act-text h2.on { opacity:1; transform:translateY(0); }
.step-body {
  font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b);
  color:rgba(244,240,232,0.6);
  opacity:0; transform:translateY(20px); transition:opacity 0.9s ease 0.28s, transform 0.9s var(--ease) 0.28s;
}
.step-body z, .step-note z {
  display:inline-block; font-family:var(--fm); font-size:17px; line-height:var(--lh-u);
  border-left:2px solid var(--ci); padding-left:calc(0.4em + 15px); padding-right:0.2em;
  color:rgba(244,240,232,0.92); font-style:oblique; vertical-align:top;
}
.step-body.on { opacity:1; transform:translateY(0); }
.step-note {
  font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u); letter-spacing:var(--ls-u);
  color:rgba(244,240,232,0.6);
  opacity:0; transition:opacity 0.7s ease 0.5s;
}
.step-note.on { opacity:1; }

/* ── Finale ──────────────────────────────────────────────────── */
#finale { padding:var(--s10) 0; }
#finale .wf-inner { display:flex; flex-direction:column; align-items:flex-start; }
.fin-tag {
  font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u);
  letter-spacing:0.2em; text-transform:uppercase; color:rgba(244,240,232,0.6);
  margin-bottom:var(--s4);
  opacity:0; transition:opacity 1s ease 0.4s;
}
.fin-tag.on { opacity:1; }
.fin-h {
  font-family:var(--f); font-size:clamp(44px,6.5vw,88px); line-height:1.05; font-weight:700;
  color:var(--white,#f4f0e8); margin-bottom:var(--s4);
  opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s ease;
}
.fin-h.on { opacity:1; transform:translateY(0); }
.fin-h em { font-style:oblique; color:var(--ci); }
.fin-sub {
  font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b);
  color:rgba(244,240,232,0.6); max-width:75%;
  opacity:0; transform:translateY(16px); transition:opacity 1s ease 0.2s, transform 1s ease 0.2s;
}
.fin-sub.on { opacity:1; transform:translateY(0); }

/* ── CTA (#wf-download) ──────────────────────────────────────── */
#wf-download {
  padding:var(--s10) 0 var(--s12); background:#f9f8f5;
  border-top:1px solid rgba(0,0,0,0.06); position:relative; z-index:10;
}
#wf-download .grid { display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--gutter); }
.wf-dl-cat { display:block; font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u); letter-spacing:var(--ls-u); color:#000; margin-bottom:var(--s4); }
.wf-dl-h   { font-family:var(--f); font-size:var(--sz-d); line-height:var(--lh-d); font-weight:700; color:#000; margin-bottom:var(--s4); }
.wf-dl-ex  { font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b); color:#000; margin-bottom:var(--s8); }

.st-fade { opacity:0; transform:translateY(24px); transition:opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.st-fade.on { opacity:1; transform:none; }

/* ── ILLUSTRATIONEN (SEO, John, …) – seo-* Bausteine · letter-spacing 0.08em für Uppercase ── */
.seo-stat-label, .seo-paradox-sub { letter-spacing: 0.08em; }
.seo-stats { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); width:100%; }
.seo-stat-card {
  border-radius:6px; background:rgba(244,240,232,0.03);
  border:1px solid rgba(244,240,232,0.08);
  padding:var(--s6);
  opacity:0; transform:translateY(32px);
  transition:opacity 0.8s ease, transform 0.8s var(--ease);
}
.seo-stat-card.on { opacity:1; transform:translateY(0); }
.seo-stat-num {
  font-family:var(--f); font-size:var(--sz-d); line-height:var(--lh-d); font-weight:700;
  color:var(--green); margin-bottom:var(--s2);
}
.seo-stat-label {
  font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u);
  text-transform:uppercase; color:rgba(244,240,232,0.5);
}
.seo-intent { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); width:100%; }
.seo-intent-card {
  border-radius:6px; background:rgba(244,240,232,0.03);
  border:1px solid rgba(244,240,232,0.08); padding:var(--s5);
  opacity:0; transform:translateY(32px);
  transition:opacity 0.8s ease, transform 0.8s var(--ease);
}
.seo-intent-card.on { opacity:1; transform:translateY(0); }
.seo-intent-card-wrong { border-top:2px solid var(--orange); }
.seo-intent-card-right { border-top:2px solid var(--green); transition-delay:0.2s; }
.seo-intent-head { display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s3); }
.seo-intent-icon { font-size:var(--sz-u); line-height:var(--lh-u); flex-shrink:0; }
.seo-intent-card-wrong .seo-intent-icon { color:var(--orange); }
.seo-intent-card-right .seo-intent-icon { color:var(--green); }
.seo-intent-text { font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); color:rgba(244,240,232,0.7); }
.seo-checklist { display:flex; flex-direction:column; gap:var(--s3); width:100%; }
.seo-cl-item {
  display:flex; align-items:flex-start; gap:var(--s3);
  opacity:0; transform:translateX(-20px);
  transition:opacity 0.6s ease, transform 0.6s var(--ease);
}
.seo-cl-item.on { opacity:1; transform:translateX(0); }
.seo-cl-num {
  min-width:40px; height:40px; border-radius:50%;
  background:var(--green); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u); font-weight:700;
}
.seo-cl-text { flex:1; }
.seo-cl-title { font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); font-weight:500; color:var(--white); margin-bottom:4px; }
.seo-cl-desc { font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); color:rgba(244,240,232,0.6); }
.seo-eeat { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); width:100%; }
.seo-eeat-item {
  border:1px solid rgba(244,240,232,0.08);
  border-radius:6px; padding:var(--s5);
  opacity:0; transform:translateY(20px);
  transition:opacity 0.7s ease, transform 0.7s var(--ease);
}
.seo-eeat-item.on { opacity:1; transform:translateY(0); }
.seo-eeat-letter { font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b); font-weight:700; color:var(--green); margin-bottom:var(--s2); }
.seo-eeat-title { font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); font-weight:500; color:var(--white); margin-bottom:var(--s1); }
.seo-eeat-desc { font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); color:rgba(244,240,232,0.6); }
.seo-paradox { text-align:center; width:100%; }
.seo-paradox-card {
  border:2px solid var(--ci); border-radius:8px;
  background:rgba(244,240,232,0.03); padding:var(--s8);
  opacity:0; transform:scale(0.95);
  transition:opacity 1s ease, transform 1s var(--ease);
}
.seo-paradox-card.on { opacity:1; transform:scale(1); }
.seo-paradox-icon { font-size:var(--sz-d); line-height:var(--lh-d); color:var(--ci); margin-bottom:var(--s4); }
.seo-paradox-text { font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b); font-weight:500; color:var(--white); margin-bottom:var(--s4); }
.seo-paradox-sub { font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u); color:rgba(244,240,232,0.6); }
.seo-process { display:flex; flex-direction:column; align-items:center; gap:var(--s4); width:100%; }
.seo-process-step {
  display:flex; align-items:center; gap:var(--s3);
  opacity:0; transform:translateX(-30px);
  transition:opacity 0.8s ease, transform 0.8s var(--ease);
}
.seo-process-step.on { opacity:1; transform:translateX(0); }
.seo-process-step:nth-child(3) { transition-delay:0.2s; }
.seo-process-step:nth-child(5) { transition-delay:0.4s; }
.seo-process-num {
  min-width:48px; height:48px; border-radius:50%;
  background:var(--green); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); font-weight:700;
}
.seo-process-text { flex:1; }
.seo-process-title { font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b); font-weight:500; color:var(--white); margin-bottom:4px; }
.seo-process-desc { font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); color:rgba(244,240,232,0.6); }
.seo-process-arrow { font-family:var(--f); font-size:var(--sz-b); line-height:var(--lh-b); color:var(--green); opacity:0; transform:scale(0.8); transition:opacity 0.6s ease, transform 0.6s ease; }
.seo-process-arrow.on { opacity:1; transform:scale(1); }
.seo-process-arrow:nth-child(2) { transition-delay:0.6s; }
.seo-process-arrow:nth-child(4) { transition-delay:0.8s; }
.seo-process-result { margin-top:var(--s4); display:flex; flex-direction:column; align-items:center; gap:var(--s2); opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s var(--ease); transition-delay:1s; }
.seo-process-result.on { opacity:1; transform:translateY(0); }
.seo-process-icon { font-size:var(--sz-b); line-height:var(--lh-b); }
.seo-process-final { font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); font-weight:500; color:var(--green); text-align:center; }

/* Konzentrische Ringe (Venn) – generischer Baustein */
.seo-rings { display:flex; flex-direction:column; align-items:center; gap:var(--s4); width:100%; opacity:0; transform:scale(0.9); transition:opacity 0.9s ease, transform 0.9s var(--ease); }
.seo-rings.on { opacity:1; transform:scale(1); }
.seo-rings-svg { width:280px; height:280px; flex-shrink:0; }
.seo-rings-svg .seo-rings-ring { fill:none; }
.seo-rings-svg .r1 { stroke:var(--ci); stroke-width:12; }
.seo-rings-svg .r2 { stroke:var(--ci); stroke-width:8; stroke-opacity:0.8; }
.seo-rings-svg .r3 { stroke:var(--ci); stroke-width:5; stroke-opacity:0.6; }
.seo-rings-svg .r4 { stroke:var(--ci); stroke-width:3; stroke-opacity:0.4; }
.seo-rings-svg .seo-rings-nums { font-family:var(--fm); font-size:var(--sz-u); line-height:var(--lh-u); font-weight:700; }
.seo-rings-svg .seo-rings-nums .n1 { fill:var(--ci); }
.seo-rings-svg .seo-rings-nums .n2 { fill:var(--ci); opacity:0.8; }
.seo-rings-svg .seo-rings-nums .n3 { fill:var(--ci); opacity:0.6; }
.seo-rings-svg .seo-rings-nums .n4 { fill:var(--ci); opacity:0.4; }
.seo-rings-lege { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); font-family:var(--f); font-size:var(--sz-u); line-height:var(--lh-u); color:rgba(244,240,232,0.9); text-align:left; max-width:100%; }
.seo-rings-lege span { display:block; }
.seo-rings-lege span:nth-child(1) strong { color:var(--ci); margin-right:4px; }
.seo-rings-lege span:nth-child(2) strong { color:var(--ci); margin-right:4px; opacity:0.8; }
.seo-rings-lege span:nth-child(3) strong { color:var(--ci); margin-right:4px; opacity:0.6; }
.seo-rings-lege span:nth-child(4) strong { color:var(--ci); margin-right:4px; opacity:0.4; }

@keyframes st-up { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width:768px) {
  #wf-post-header { padding:var(--s5) 0 var(--s4); }
  #wf-post-header .grid > div { grid-column:1/13 !important; }
  #hero { padding:var(--s8) 0 var(--s10); }
  .hero-content { grid-column:1/-1 !important; margin-left:0 !important; }
  .hero-eyebrow { margin-bottom:var(--s4); }
  .hero-sub { margin-top:var(--s4); max-width:100%; }
  .hero-steps { flex-direction:column; gap:var(--s3); margin-top:var(--s6); }
  .act { padding:var(--s6) 0; }
  .act-cols { grid-template-columns:1fr; }
  .act-text { padding:var(--s5) 0 var(--s3); order:1; width:100%; }
  .act-vis  { padding:var(--s3) 0 var(--s5) !important; order:2; width:100%; }
  .act-vis-left .act-text, .act-vis-left .act-vis { min-width:0; }
  .fin-sub { max-width:100%; }
  .seo-stats, .seo-intent, .seo-eeat { grid-template-columns:1fr; }
  .seo-rings-svg { width:220px; height:220px; }
  .jd-fabriken { flex-direction:column; }
  .jd-venn-svg { width:220px; height:220px; }
  .jd-vergleich { grid-template-columns:1fr; }
  #finale { padding:var(--s8) 0; }
  .fin-h { font-size:clamp(36px,9vw,64px); }
  #wf-download { padding:var(--s6) 0 var(--s8); }
  #wf-download .grid > div { grid-column:1/-1 !important; }
  .wf-dl-ex { margin-bottom:var(--s5); }
  .btn.btn-p { width:100%; text-align:center; box-sizing:border-box; }
}
@media (max-width:480px) {
  .hero-h { font-size:clamp(32px,9.35vw,51px); }
  .act-text h2 { font-size:clamp(28px,8vw,42px); line-height:1.1; }
}

/* Guide-only additions; this stylesheet is enqueued exclusively for the two migrated articles. */
body.dm-editorial-guide { --black:#0a0909; --white:#f4f0e8; --green:var(--ci); --cyan:#0693e3; --purple:#9b51e0; --orange:#ff6900; --amber:#f5a623; }
.dm-editorial-guide .wf-seo-block { position:relative;z-index:10;padding:var(--s10) 0;background:var(--black);color:var(--white);border-top:1px solid rgba(244,240,232,.12); }
.dm-editorial-guide .wf-seo-block h3 { font-family:var(--fm);font-size:var(--sz-u);line-height:var(--lh-u);margin-bottom:var(--s4); }
.dm-editorial-guide .wf-seo-block .lei-list { border-color:rgba(244,240,232,.2); }
.dm-editorial-guide .wf-seo-block .lei-item { border-color:rgba(244,240,232,.2); }
.dm-editorial-guide .wf-seo-block .lei-head,.dm-editorial-guide .wf-seo-block .lei-name,.dm-editorial-guide .wf-seo-block .lei-desc { color:var(--white); }
.dm-editorial-guide .wf-interne-list { display:flex;flex-wrap:wrap;gap:var(--s4);list-style:none;padding:0;margin:0; }
.dm-editorial-guide .wf-interne-list a { color:var(--white);font-family:var(--fm);font-size:var(--sz-u);line-height:var(--lh-u); }
@media(prefers-reduced-motion:reduce) { .dm-editorial-guide #presentation * { animation:none!important;transition:none!important;opacity:1!important;transform:none!important; } }

/* Left-hand illustrations also stack beneath their text on small screens. */
@media (max-width:768px) {
  .dm-editorial-guide .act-vis-left .act-cols { display:grid; grid-template-columns:minmax(0,1fr); }
  .dm-editorial-guide .act-vis-left .act-text { order:1; width:100%; padding:var(--s5) 0 var(--s3)!important; }
  .dm-editorial-guide .act-vis-left .act-vis { order:2; width:100%; padding:var(--s3) 0 var(--s5)!important; }
}

/* Compact desktop FAQ questions; hovering must not change the text measure. */
@media (min-width:1024px) {
  .dm-editorial-guide #wf-faq .lei-name {
    font-size:24px;
    line-height:32px;
    letter-spacing:0;
  }
  .dm-editorial-guide #wf-faq .lei-head,
  .dm-editorial-guide #wf-faq .lei-head:hover {
    padding-left:0;
  }
}