/* =====================================================
   CI-Guide für Social Media — Schreinerei Markus Fichtl
   Mobile-first, scrollable handbook.
   ===================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; }
img { display: block; max-width: 100%; }

body {
  background: var(--bg-1);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; border-bottom: 0; }
a:hover { color: var(--link-hover); }
code {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-weight: var(--fw-bold);
}

/* ------- TOP BAR ------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-1);
}
.topbar__brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.topbar__brand img { height: 36px; width: auto; }
.guide-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule-2);
  background: var(--color-paper);
  margin-left: auto;
}
.guide-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-right: 1px solid var(--rule-1);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-1);
  white-space: nowrap;
}
.guide-switch__link:last-child { border-right: 0; }
.guide-switch__link:hover,
.guide-switch__link.is-active {
  color: var(--fg-on-dark-1);
  background: var(--color-walnut);
}
.nav__switch {
  margin: 0 0 34px;
  width: 100%;
}
.nav__switch .guide-switch__link {
  flex: 1 1 0;
}
.topbar__menu {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 8px 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-1);
  cursor: pointer;
}
.topbar__menu-icon {
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 22px;
}
.topbar__menu-icon span {
  display: block; height: 1.5px; background: var(--fg-1);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
body.nav-open .topbar__menu-icon span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .topbar__menu-icon span:nth-child(2) { opacity: 0; }
body.nav-open .topbar__menu-icon span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ------- NAV DRAWER ---------------------------------- */
.nav {
  position: fixed; inset: 0 0 0 auto;
  width: min(360px, 86vw);
  background: var(--bg-1);
  border-left: 1px solid var(--rule-1);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 40;
  overflow-y: auto;
  padding-top: env(safe-area-inset-top);
}
.nav__inner { padding: 88px 28px 40px; }
.nav__logo {
  display: block;
  margin: 0 0 42px;
}
.nav__logo img {
  width: 210px;
  height: auto;
}
.nav__eyebrow { color: var(--fg-3); margin-bottom: 18px; }
.nav__list {
  list-style: none; padding: 0; margin: 0 0 32px;
  counter-reset: nav;
}
.nav__list li { margin: 0; border-top: 1px solid var(--rule-1); }
.nav__list li:last-child { border-bottom: 1px solid var(--rule-1); }
.nav__list a {
  display: grid; grid-template-columns: 38px 1fr;
  align-items: baseline;
  padding: 16px 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__list a::before {
  content: attr(data-num);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--fg-3);
  font-weight: var(--fw-regular);
}
.nav__list a:hover { color: var(--color-brand); }
.nav__list a.is-active { color: var(--color-brand); }
.nav__foot {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

.nav__scrim {
  position: fixed; inset: 0;
  background: rgba(28, 24, 20, 0.36);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: 35;
}
body.nav-open .nav { transform: translateX(0); }
body.nav-open .nav__scrim { opacity: 1; pointer-events: auto; }
body.nav-open .topbar__menu[aria-expanded="false"] { /* state handled in JS */ }

@media (min-width: 960px) {
  .nav {
    transform: translateX(0);
    width: 320px;
    border-left: 0;
    border-right: 1px solid var(--rule-1);
    inset: 0 auto 0 0;
  }
  .nav__inner { padding: 72px 32px 40px; }
  .nav__scrim { display: none; }
  .topbar__menu { display: none; }
  .topbar__brand { display: none; }
  .topbar {
    margin-left: 320px;
    width: calc(100% - 320px);
  }
  main { margin-left: 320px; }
  .nav__switch { display: none; }
}
@media (max-width: 640px) {
  .topbar { gap: 10px; }
  .topbar__brand img { height: 34px; }
  .topbar > .guide-switch { display: none; }
  .topbar__menu { padding: 8px 0 8px 8px; }
  .topbar__menu-label { display: none; }
}

/* ------- HERO ---------------------------------------- */
.hero {
  padding: 56px 22px 24px;
}
@media (min-width: 720px) { .hero { padding: 96px 48px 48px; } }
.hero__inner { max-width: 960px; margin: 0 auto; }

.display-1, h1.display, h1 { font-family: var(--font-display); }

.hero h1.display-1 {
  font-size: clamp(40px, 9vw, 88px);
  line-height: 1.02;
  margin: 14px 0 18px;
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-light);
  color: var(--fg-1);
}
.hero__sub { margin: 0 0 32px; font-size: clamp(18px, 2.4vw, 24px); }
.hero__lead { max-width: 56ch; }
.hero__lead p { font-size: var(--fs-md); color: var(--fg-2); }
.hero__lead p.lead { font-weight: var(--fw-light); color: var(--fg-lead); }

.hero__strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 48px;
}
.hero__strip img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
@media (max-width: 520px) {
  .hero__strip { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .hero__strip img:nth-child(n+4) { display: none; }
}

/* ------- CHAPTER SHELL ------------------------------- */
.ch {
  padding: 64px 22px;
  border-top: 1px solid var(--rule-1);
}
@media (min-width: 720px) { .ch { padding: 112px 48px; } }
.ch__inner { max-width: 960px; margin: 0 auto; }
.ch--paper { background: var(--bg-2); }
.ch--dark {
  background: var(--color-walnut);
  color: var(--fg-on-dark-2);
}
.ch--dark .eyebrow { color: var(--fg-on-dark-3); }
.h--ondark, .ch--dark h2 { color: var(--fg-on-dark-1); }
.subline--ondark { color: var(--fg-on-dark-3); }
.eyebrow--ondark { color: var(--fg-on-dark-3) !important; }

.eyebrow .num {
  display: inline-block;
  margin-right: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.ch h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  margin: 16px 0 14px;
  color: var(--fg-1);
}
.subline { color: var(--fg-3); margin-bottom: 28px; }
.ch p { max-width: 60ch; }
.hero p { max-width: 60ch; }

.ch__h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 64px 0 24px;
  line-height: 1.2;
}
.ch--dark .ch__h3 { color: var(--fg-on-dark-1); }

.hint {
  font-size: var(--fs-sm);
  color: var(--fg-3);
  font-style: italic;
  margin-top: 12px;
}

/* ------- LOGO chapter -------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 32px 0 16px;
}
@media (min-width: 720px) {
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
}
.logo-tile {
  margin: 0;
  display: flex; flex-direction: column;
}
.logo-tile__stage {
  aspect-ratio: 4/3;
  display: grid; place-items: center;
  padding: 20px;
}
.logo-tile--linen .logo-tile__stage { background: var(--color-linen); border: 1px solid var(--rule-1); }
.logo-tile--paper .logo-tile__stage { background: var(--color-cream); }
.logo-tile--dark  .logo-tile__stage { background: var(--color-walnut); }
.logo-tile--dark  .logo-tile__stage img { filter: brightness(0) invert(1); }
.logo-tile__stage img { max-width: 80%; max-height: 80%; height: auto; object-fit: contain; }
.logo-tile figcaption {
  padding: 12px 2px 0;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: var(--lh-sm);
}
.logo-tile figcaption strong { color: var(--fg-1); font-weight: var(--fw-bold); display: block; }

.rules { list-style: none; padding: 0; margin: 24px 0 0; }
.rules li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--rule-1);
}
.rules li:last-child { border-bottom: 1px solid var(--rule-1); }
.rules__num {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 48px;
  line-height: 1;
  color: var(--color-brand);
}
.rules li strong { color: var(--fg-1); font-size: var(--fs-md); display: block; margin-bottom: 4px; }
.rules li p { margin: 0; font-size: var(--fs-base); }

.dont-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 28px;
}
@media (min-width: 720px) { .dont-grid { grid-template-columns: repeat(4, 1fr); } }
.dont { margin: 0; }
.dont__stage {
  aspect-ratio: 1/1;
  background: var(--color-linen);
  border: 1px solid var(--rule-1);
  display: grid; place-items: center;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.dont__stage--bad::after {
  content: "";
  position: absolute;
  width: 140%; height: 1.5px;
  background: #c12828;
  transform: rotate(-28deg);
  opacity: .8;
}
.dont__logo {
  width: 78%; max-height: 60%;
  object-fit: contain;
  position: relative; z-index: 1;
}
.dont--stretched { transform: scaleY(1.7) scaleX(0.7); }
.dont--tiny { width: 22%; }
.dont figcaption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-align: center;
  margin-top: 8px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ------- FARBEN -------------------------------------- */
.swatch-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 28px 0 8px;
}
@media (min-width: 720px) { .swatch-row { grid-template-columns: repeat(5, 1fr); } }

.swatch {
  position: relative;
  background: var(--c);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  padding: 20px 18px 18px;
  display: flex; flex-direction: column;
  text-align: left;
  cursor: pointer;
  min-height: 180px;
  font-family: var(--font-sans);
  transition: transform var(--dur-fast) var(--ease-out);
}
.swatch:hover { transform: translateY(-2px); }
.swatch:active { transform: translateY(1px); }
.swatch__chip { display: none; }
.swatch__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 2px;
}
.swatch__hex {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  opacity: .7;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.swatch__use {
  font-size: var(--fs-sm);
  line-height: 1.4;
  opacity: .85;
  margin-top: auto;
}
.swatch[style*="#FAF7F1"], .swatch[style*="#F4EFE6"] {
  border: 1px solid var(--rule-1);
}

/* ------- SCHRIFT ------------------------------------- */
.type-stack {
  display: grid;
  gap: 28px;
  margin: 32px 0;
  padding: 28px;
  background: var(--color-linen);
  border: 1px solid var(--rule-1);
}
.ch--paper .type-stack { background: var(--color-bone); }
.type-stack__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule-1);
}
.type-stack__row:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px) {
  .type-stack__row {
    grid-template-columns: 200px 1fr;
    align-items: baseline;
    gap: 32px;
  }
}
.type-stack__label .eyebrow { margin: 0 0 2px; }
.type-stack__label .caption { margin: 0; color: var(--fg-4); font-style: italic; }
.type-stack__sample { margin: 0; color: var(--fg-1); }
.h-sample {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}
.h-sample strong { font-weight: var(--fw-bold); }
.s-sample {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  color: var(--fg-3);
}
.b-sample {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--fg-2);
  max-width: 56ch;
}
.e-sample {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  color: var(--fg-3);
}

/* ------- COMPARE (good/bad) ------------------------- */
.compare {
  margin-top: 36px;
}
.compare__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}
@media (min-width: 720px) {
  .compare__head { flex-direction: row; align-items: center; justify-content: space-between; }
}
.compare__tabs {
  display: inline-flex;
  background: var(--color-linen);
  border: 1px solid var(--rule-1);
  padding: 4px;
  gap: 2px;
}
.ch--paper .compare__tabs { background: var(--color-bone); }
.compare__tab {
  background: transparent; border: 0;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-3);
  cursor: pointer;
}
.compare__tab.is-active {
  background: var(--color-walnut);
  color: var(--fg-on-dark-1);
}
.compare__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px 0;
}
.compare__pane { display: none; width: min(420px, 100%); }
.compare__pane.is-active { display: block; }

/* ------- BILDER -------------------------------------- */
.img-cat { margin: 36px 0; }
.img-cat p.eyebrow { margin-bottom: 8px; }
.img-cat p { margin-bottom: 16px; }
.img-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
@media (max-width: 720px) { .img-row { grid-template-columns: repeat(3, 1fr); } }
.img-row img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.img-row--square img { aspect-ratio: 1/1; }

.tip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}
@media (min-width: 720px) { .tip-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.tip {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-1);
}
.tip:nth-last-child(1), .tip:nth-last-child(2) { border-bottom: 1px solid var(--rule-1); }
@media (min-width: 720px) {
  .tip:nth-child(odd) { padding-right: 18px; }
  .tip:nth-child(even) { padding-left: 18px; }
}
.tip__num {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: 32px;
  color: var(--color-brand);
  margin: 0;
  line-height: 1;
}
.tip p { margin: 0; }

/* ------- SPRACHE ------------------------------------- */
.lang-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 28px 0;
}
@media (min-width: 720px) { .lang-grid { grid-template-columns: 1fr 1fr; gap: 0; } }
.lang { padding: 24px; }
.lang--good, .lang:nth-child(1) { background: var(--color-linen); }
.lang--bad,  .lang:nth-child(2) { background: var(--color-cream); }
.ch--paper .lang:nth-child(1) { background: var(--color-bone); }
.ch--paper .lang:nth-child(2) { background: var(--color-cream); }
.lang__h { margin: 0 0 14px; }
.lang__list { list-style: none; padding: 0; margin: 0; }
.lang__list li {
  padding: 8px 0;
  font-size: var(--fs-md);
  color: var(--fg-1);
  font-weight: var(--fw-light);
}
.lang__list--bad li { color: #8a6a6a; text-decoration: line-through; text-decoration-color: #c12828; text-decoration-thickness: 1px; }

.pron-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 22px 0;
}
@media (min-width: 720px) { .pron-grid { grid-template-columns: repeat(3, 1fr); } }
.pron {
  border-top: 1px solid var(--rule-1);
  padding: 18px 0;
}
.pron__case {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 8px;
}
.pron__words {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 6px;
}
.pron__words strong { font-weight: var(--fw-bold); color: var(--color-brand); }
.pron .caption { font-style: italic; }

/* ------- LAYOUTS / FORMATS --------------------------- */
.fmt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin: 32px 0 64px;
}
@media (min-width: 720px) { .fmt-grid { grid-template-columns: repeat(3, 1fr); } }
.fmt { margin: 0; }
.fmt__demo {
  background: var(--color-cream);
  padding: 24px;
  display: grid; place-items: center;
  min-height: 360px;
}
.ch--paper .fmt__demo { background: var(--color-linen); border: 1px solid var(--rule-1); }
.fmt__phone {
  width: 220px;
}
.fmt__phone--tall { width: 180px; }
.fmt__phone--wide { width: 280px; }
.fmt__body { padding: 16px 4px 0; }
.fmt__body h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  margin: 4px 0 8px;
  color: var(--fg-1);
}
.fmt__body p { margin: 0; font-size: var(--fs-sm); }

/* ---- POST MOCKUP ----------------------------------- */
.post {
  position: relative;
  overflow: hidden;
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--color-linen);
  width: 100%;
}
.post--square  { aspect-ratio: 1/1; }
.post--story   { aspect-ratio: 9/16; }
.post--wide    { aspect-ratio: 16/9; }
.post--linen   { background: var(--color-linen); border: 1px solid var(--rule-1); }
.post--paper   { background: var(--color-paper); }
.post--dark    { background: var(--color-walnut); color: var(--fg-on-dark-1); }
.post--bad     { background: #ffec; }

.post__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.post__overlay {
  position: absolute; inset: 0;
  background: rgba(28,24,20,0.36);
  z-index: 1;
}
.post__overlay--soft {
  background: rgba(28,24,20,0.24);
}
.post__pad {
  position: relative; z-index: 2;
  padding: 9% 9%;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 6%;
}
.post__pad--white { color: var(--fg-on-dark-1); }
.post__pad--center {
  justify-content: center; align-items: flex-start;
  text-align: left;
  gap: 0;
}
.post__pad--story { padding: 12% 9%; }
.post__pad--bottom { justify-content: flex-end; }
.post__split {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6%;
  align-items: stretch;
}
.post__half {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.post__logo {
  width: 38%; max-width: 140px;
  height: auto;
  align-self: flex-start;
}
.post--dark .post__logo, .post__pad--white .post__logo { filter: brightness(0) invert(1); }

/* Override: when post__pad--white wraps mf_logo_weiss already, brightness filter is fine (white→white) */

.eyebrow--white { color: rgba(255,255,255,0.85) !important; }

.post-h {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: clamp(16px, 4.6cqi, 32px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
  container-type: inline-size;
}
.post-h strong { font-weight: var(--fw-bold); }
.post-h--white { color: #fff; }
.post-h--small { font-size: clamp(14px, 3.8cqi, 26px); }

.post-sub {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: clamp(11px, 2.4cqi, 16px);
  color: var(--fg-3);
  margin: 8px 0 0;
}
.post-sub--white { color: rgba(255,255,255,0.82); }

.post-quote {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(20px, 6.4cqi, 44px);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 8px;
}
.post-quote em { font-style: italic; font-weight: var(--fw-light); }
.post-quote--light { color: #fff; }
.post__quote-foot {
  font-size: clamp(9px, 1.9cqi, 13px);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 24px;
}
.post__quote-foot--light { color: rgba(255,255,255,0.65); }

.post__sign {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--fg-3);
  margin-top: 16px;
}

/* All posts get container queries based on width */
.post { container-type: inline-size; }

/* The post-h--bad is the cramped, all-caps awful example */
.post-h--bad {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(14px, 4.2cqi, 28px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
}
.post-sub-bad {
  font-family: var(--font-sans);
  font-style: italic;
  color: #aa1a1a;
  font-size: clamp(10px, 2cqi, 14px);
  margin: 8px 0 0;
}
.post-h-bad {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(16px, 5cqi, 36px);
  color: #fff;
  text-shadow: 2px 2px 0 #aa1a1a;
  margin: 0;
  line-height: 1.05;
}

.post__pad--bad {
  background: rgba(0,0,0,0.44);
  justify-content: flex-end;
}

/* ------- ANATOMY ------------------------------------- */
.anatomy {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
  margin-top: 28px;
}
@media (min-width: 720px) {
  .anatomy { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.anatomy__post {
  max-width: 460px;
  width: 100%;
  position: relative;
}
.anatomy__pin {
  position: absolute;
  z-index: 5;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-bold);
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px rgba(125,78,36,0.18);
}
.anatomy__pin--1 { top: 7%;  left: 4%; }
.anatomy__pin--2 { top: 38%; right: 5%; }
.anatomy__pin--3 { top: 12%; left: 36%; }
.anatomy__pin--4 { bottom: 28%; left: 6%; }
.anatomy__pin--5 { bottom: 11%; left: 6%; }

.anatomy__list {
  list-style: none; padding: 0; margin: 0;
  counter-reset: anat;
}
.anatomy__list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-1);
}
.anatomy__list li:last-child { border-bottom: 1px solid var(--rule-1); }
.anatomy__list li span {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-size: 12px;
  font-weight: var(--fw-bold);
  display: grid; place-items: center;
}
.anatomy__list strong { color: var(--fg-1); display: block; }

/* ------- TABS (Beispiele) --------------------------- */
.tabs { margin-top: 32px; }
.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--rule-1);
  padding-bottom: 12px;
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tabs__btn {
  background: transparent;
  border: 1px solid var(--rule-1);
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.tabs__btn:hover { color: var(--fg-1); border-color: var(--rule-2); }
.tabs__btn.is-active {
  background: var(--color-walnut);
  color: var(--fg-on-dark-1);
  border-color: var(--color-walnut);
}
.tabs__pane { display: none; }
.tabs__pane.is-active { display: block; }
.tabs__copy { max-width: 56ch; margin-bottom: 24px; }
.tabs__copy h4 { font-family: var(--font-display); font-weight: var(--fw-light); font-size: var(--fs-xl); margin: 0 0 6px; color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.tabs__copy p { margin: 0; }

.post-deck {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 560px) { .post-deck { grid-template-columns: repeat(2, 1fr); } }
.example-caption { font-size: var(--fs-sm); color: var(--fg-3); margin-top: 16px; font-style: italic; }

/* ------- STYLE SWITCH (A vs B) ---------------------- */
.style-switch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 28px 0 24px;
  border: 1px solid var(--rule-1);
  padding: 4px;
  background: var(--color-linen);
}
@media (min-width: 720px) { .style-switch { flex-direction: row; } }
.style-switch__btn {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  cursor: pointer;
  text-align: left;
  letter-spacing: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.style-switch__btn.is-active {
  background: var(--color-walnut);
  color: var(--fg-on-dark-1);
}
.style-pane { display: none; }
.style-pane.is-active { display: block; }
.style-pane__caption { margin-bottom: 16px; font-style: italic; }

/* ------- DOS & DONTS -------------------------------- */
.dd-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 28px;
}
@media (min-width: 720px) { .dd-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; } }

.dd { margin: 0; }
.dd__stage {
  position: relative;
  aspect-ratio: 1/1;
  cursor: pointer;
}
.dd__side {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.dd__side.is-active { opacity: 1; pointer-events: auto; }
.dd__copy {
  margin-top: 14px;
}
.dd__tag {
  display: none;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin: 0 0 8px;
}
.dd__tag--good { color: #3a7a3a; }
.dd__tag--bad  { color: #c12828; }
.dd:not([data-state="bad"]) .dd__tag--good { display: block; }
.dd[data-state="bad"] .dd__tag--bad { display: block; }
.dd__copy p:not(.dd__tag) { font-size: var(--fs-sm); color: var(--fg-2); margin: 0; }

.post--bad-yikes { background: #ff7a3a; }

/* ------- CAMPAIGN GUIDE MODULES ---------------------- */
.intro-grid,
.platform-grid,
.setup-grid,
.rhythm-grid,
.roles-grid,
.starter-grid,
.question-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 32px 0 0;
}
@media (min-width: 760px) {
  .intro-grid,
  .platform-grid,
  .setup-grid,
  .rhythm-grid,
  .roles-grid,
  .starter-grid,
  .question-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .setup-grid { grid-template-columns: repeat(2, 1fr); }
  .starter-grid { grid-template-columns: repeat(2, 1fr); }
}
.guide-panel,
.copy-block,
.quote-pair,
.role,
.starter,
.mini-check {
  background: var(--bg-3);
  padding: 26px;
}
.ch--paper .guide-panel,
.ch--paper .copy-block,
.ch--paper .quote-pair,
.ch--paper .role,
.ch--paper .starter,
.ch--paper .mini-check {
  background: var(--color-linen);
}
.guide-panel h3,
.role h3,
.starter h3,
.mini-check h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--fg-1);
  font-size: var(--fs-md);
  margin: 0 0 10px;
  line-height: var(--lh-sm);
}
.guide-panel p,
.role p,
.starter p,
.mini-check p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.guide-panel ul,
.starter ul,
.mini-check ul {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.guide-panel li + li,
.starter li + li,
.mini-check li + li { margin-top: 8px; }
.numbered-steps {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  counter-reset: step;
}
.numbered-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--rule-1);
}
.numbered-steps li:last-child { border-bottom: 1px solid var(--rule-1); }
.numbered-steps li::before {
  content: counter(step, decimal-leading-zero);
  color: var(--color-brand);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
}
.numbered-steps h3 {
  margin: 0 0 6px;
  font-size: var(--fs-md);
  color: var(--fg-1);
}
.numbered-steps p,
.numbered-steps ul {
  margin: 0;
  padding-left: 0;
}
.numbered-steps ul {
  list-style: none;
  margin-top: 10px;
}
.numbered-steps li li {
  display: block;
  padding: 0;
  border: 0;
  counter-increment: none;
  margin-top: 6px;
}
.numbered-steps li li::before { content: ""; }
.copy-block {
  margin: 24px 0;
  border-left: 2px solid var(--color-brand);
}
.copy-block p {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--fg-1);
}
.copy-block p + p { margin-top: 14px; }
.copy-block__label {
  display: block;
  margin-bottom: 12px;
  color: var(--fg-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}
.quote-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
}
@media (min-width: 760px) { .quote-pair { grid-template-columns: 1fr 1fr; } }
.quote-pair__bad,
.quote-pair__good {
  padding-top: 18px;
  border-top: 1px solid var(--rule-1);
}
.quote-pair__label {
  margin: 0 0 10px;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}
.quote-pair blockquote {
  margin: 0;
  color: var(--fg-1);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.tag-row button,
.tag-row span {
  border: 1px solid var(--rule-1);
  background: var(--color-linen);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  padding: 8px 10px;
  cursor: pointer;
}
.ch--paper .tag-row button,
.ch--paper .tag-row span { background: var(--color-paper); }
.tag-row button:hover { border-color: var(--color-brand); color: var(--color-brand); }
.week-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 26px;
  font-size: var(--fs-sm);
}
.week-table th,
.week-table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 12px;
  border-top: 1px solid var(--rule-1);
}
.week-table th {
  color: var(--fg-1);
  font-weight: var(--fw-bold);
}
.image-led {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  margin-top: 32px;
}
@media (min-width: 860px) { .image-led { grid-template-columns: minmax(260px, 0.8fr) 1fr; } }
.image-led img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.footer-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.footer-switch a {
  border: 1px solid var(--rule-on-dark-2);
  color: var(--fg-on-dark-1);
  padding: 12px 16px;
  font-size: var(--fs-sm);
}
.footer-switch a:hover {
  background: var(--fg-on-dark-1);
  color: var(--color-walnut);
}

/* ------- CHEAT SHEET -------------------------------- */
.cheat {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-top: 32px;
}
@media (min-width: 720px) { .cheat { grid-template-columns: 1fr 1fr; gap: 64px; } }
.cheat__h {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-on-dark-1);
  margin: 0 0 16px;
}
.cheat__h--mt { margin-top: 32px; }
.cheat__list {
  list-style: none; padding: 0; margin: 0;
  color: var(--fg-on-dark-2);
}
.cheat__list li {
  padding: 12px 0 12px 28px;
  border-top: 1px solid var(--rule-on-dark-1);
  position: relative;
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
}
.cheat__list li:last-child { border-bottom: 1px solid var(--rule-on-dark-1); }
.cheat__list li::before {
  content: "";
  position: absolute; left: 0; top: 19px;
  width: 14px; height: 7px;
  border-left: 1.5px solid var(--color-brand-300);
  border-bottom: 1.5px solid var(--color-brand-300);
  transform: rotate(-45deg);
}

.cheat__codes { list-style: none; padding: 0; margin: 0; }
.cheat__codes li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-on-dark-1);
  color: var(--fg-on-dark-2);
}
.cheat__codes li:last-child { border-bottom: 1px solid var(--rule-on-dark-1); }
.cheat__sw {
  width: 22px; height: 22px;
  display: inline-block;
}
.cheat__codes code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--fs-sm);
  color: var(--fg-on-dark-3);
  font-variant-numeric: tabular-nums;
}

.cheat__formats { list-style: none; padding: 0; margin: 0; }
.cheat__formats li {
  padding: 8px 0;
  color: var(--fg-on-dark-2);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--rule-on-dark-1);
}
.cheat__formats li:last-child { border-bottom: 1px solid var(--rule-on-dark-1); }
.cheat__formats strong { color: var(--fg-on-dark-1); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ------- FOOTER ------------------------------------- */
.foot {
  background: var(--color-brand-900);
  color: var(--fg-on-dark-3);
  padding: 56px 22px;
  margin-left: 0;
}
.foot__inner {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
}
@media (min-width: 720px) {
  .foot__inner { grid-template-columns: auto 1fr auto; align-items: end; }
}
.foot__logo { height: 36px; width: auto; filter: brightness(0) invert(1); }
.foot__addr { color: var(--fg-on-dark-2); font-size: var(--fs-sm); margin: 0; max-width: none; }
.foot__credit { font-size: var(--fs-xs); color: var(--fg-on-dark-3); letter-spacing: var(--tracking-wide); margin: 0; }

/* ------- TOAST -------------------------------------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-walnut);
  color: var(--fg-on-dark-1);
  padding: 12px 18px;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  z-index: 80;
  box-shadow: var(--shadow-3);
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------- SMALL SCREEN TWEAKS ------------------------ */
@media (max-width: 559px) {
  .ch h2 { font-size: 32px; }
  .ch__h3 { font-size: 24px; margin-top: 40px; }
  .swatch { min-height: 150px; padding: 16px; }
  .anatomy__pin { width: 22px; height: 22px; font-size: 11px; }
  .nav__inner { padding: 88px 22px 40px; }
}