/* ─────────────────────────────────────────────────────
   IT-CARVEOUT — EDITORIAL REDESIGN · V2
   Adds bespoke chapter layouts on top of pk.css tokens.
   Replaces tile-grid monotony with real diagrams,
   charts, scenario splits and editorial rhythm.
   ───────────────────────────────────────────────────── */

/* shared chapter chrome (slimmer, more editorial than pk-co-chapter) */
.co2-body { background: var(--white); }
.co2-chap { padding: 96px 0 8px; border-top: 1px solid var(--hair); }
.co2-chap:first-of-type { border-top: none; }
.co2-chap-rail {
  display:grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start;
  margin-bottom: 56px;
}
.co2-rail {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); padding-top: 6px; border-top: 1px solid var(--ink);
}
.co2-rail .num { display:block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 42px; line-height: 1; color: var(--ink); letter-spacing: -.02em; margin-top: 14px; }
.co2-rail .label { display:block; margin-top: 6px; color: var(--ink-60); font-size: 10.5px; }
.co2-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.6vw, 50px);
  line-height: 1.04; letter-spacing: -.022em; color: var(--ink); max-width: 22ch; margin: 0 0 24px;
}
.co2-head h2 em { color: var(--steel); font-style: italic; font-weight: 400; }
.co2-head .lead {
  font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink-80); max-width: 60ch;
}

/* big pull quote */
.co2-pull {
  margin: 72px 0 0; padding: 40px 0 0; border-top: 1px solid var(--ink);
  display:grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start;
}
.co2-pull-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); }
.co2-pull p {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px); line-height: 1.32; color: var(--ink);
  letter-spacing: -.012em; max-width: 30ch; margin: 0;
}
.co2-pull p::before { content: '»'; color: var(--gold); margin-right: .15em; font-style: normal; }
.co2-pull p::after { content: '«'; color: var(--gold); margin-left: .12em; font-style: normal; }

/* ─── KOMPLEXITÄT & DAUER · Tabelle ─────────────────── */
.co2-duration { padding: 96px 0 8px; border-top: 1px solid var(--hair); }
.co2-duration .co2-chap-rail { margin-bottom: 56px; }

.co2-duration-wrap {
  overflow-x: auto;
  margin: 40px 0;
  border: 1px solid var(--hair);
  border-radius: 4px;
  background: var(--bone);
}

.co2-duration-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
}

.co2-duration-table thead {
  background: var(--ink);
  color: var(--white);
  position: sticky;
  top: 0;
  z-index: 10;
}

.co2-duration-table th {
  padding: 16px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.co2-duration-table th:last-child {
  border-right: none;
}

.co2-duration-table tbody tr {
  border-bottom: 1px solid var(--hair);
}

.co2-duration-table tbody tr:last-child {
  border-bottom: none;
}

.co2-duration-table td {
  padding: 20px 12px;
  border-right: 1px solid var(--hair);
  vertical-align: top;
}

.co2-duration-table td:last-child {
  border-right: none;
}

/* Row colors */
.co2-duration-table tr.small td {
  background: rgba(200, 169, 107, 0.06);
}

.co2-duration-table tr.small td:first-child,
.co2-duration-table tr.small td:nth-child(2) {
  background: rgba(200, 169, 107, 0.12);
  font-weight: 600;
}

.co2-duration-table tr.medium td {
  background: rgba(90, 107, 134, 0.04);
}

.co2-duration-table tr.medium td:first-child,
.co2-duration-table tr.medium td:nth-child(2) {
  background: rgba(90, 107, 134, 0.10);
  font-weight: 600;
}

.co2-duration-table tr.large td {
  background: rgba(198, 107, 92, 0.04);
}

.co2-duration-table tr.large td:first-child,
.co2-duration-table tr.large td:nth-child(2) {
  background: rgba(198, 107, 92, 0.12);
  font-weight: 600;
}

/* Duration badge */
.duration {
  display: inline-block;
  padding: 4px 8px;
  background: var(--ink);
  color: var(--white);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Mobile responsive */
@media (max-width: 1100px) {
  .co2-duration-wrap {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .co2-duration-table {
    min-width: 900px;
    font-size: 12px;
  }

  .co2-duration-table th,
  .co2-duration-table td {
    padding: 12px 8px;
  }

  .co2-duration-table th {
    font-size: 11px;
  }

  .duration {
    font-size: 11px;
    padding: 3px 6px;
  }
}

/* ─── 01 POSITIONIERUNG · Lebenszyklus timeline ─────── */
.co2-life {
  margin-top: 8px; padding: 56px 56px 64px;
  background: var(--bone); border: 1px solid var(--hair);
  position: relative;
}
.co2-life-phases {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  padding-bottom: 18px;
}
.co2-life-phases .phase {
  text-align: center; position: relative; padding-bottom: 22px;
}
.co2-life-phases .phase .time {
  display:block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--ink-60); text-transform: uppercase;
}
.co2-life-phases .phase .lbl {
  display:block; font-family: var(--serif); font-weight: 500; font-size: 16px;
  color: var(--ink); margin-top: 4px; letter-spacing: -.012em;
}
.co2-life-phases .phase::after {
  content:""; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 12px; height: 12px; background: var(--white); border: 2px solid var(--ink); border-radius: 50%;
  z-index: 2;
}
.co2-life-phases .phase.last::after { background: var(--gold); border-color: var(--gold); }
.co2-life-phases .phase.first::after { background: var(--ink); }
.co2-life-line {
  height: 2px; background: var(--ink-40); margin: 0 0 48px; position: relative;
}
.co2-life-caps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px;
  padding-bottom: 8px;
}
.co2-life-cap {
  padding-top: 18px; border-top: 1px solid var(--ink);
}
.co2-life-cap .num {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--gold); margin-bottom: 10px;
}
.co2-life-cap h3 {
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.18;
  letter-spacing: -.012em; color: var(--ink); margin: 0 0 8px;
}
.co2-life-cap p {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-80);
  margin: 0; max-width: 30ch;
}
.co2-life-foot {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  padding-top: 40px; border-top: 1px solid var(--hair);
  margin-top: 48px;
}
.co2-life-foot .item { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink-80); }
.co2-life-foot .item strong { display:block; color: var(--ink); font-weight: 500; font-size: 17px; margin-bottom: 6px; letter-spacing: -.01em; }

/* ─── 02 REALITÄT · Cascade + dense list ───────────── */
.co2-real {
  display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 80px;
  margin-top: 8px; padding-top: 24px;
}
.co2-real-list { }
.co2-real-list h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 28px; padding-bottom: 14px; border-bottom: 1px solid var(--ink);
}
.co2-frik {
  display:grid; grid-template-columns: 36px 1fr; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--hair);
}
.co2-frik:last-child { border-bottom: none; }
.co2-frik .n { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--gold); padding-top: 4px; }
.co2-frik h4 {
  font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; letter-spacing: -.014em;
  color: var(--ink); margin: 0 0 8px;
}
.co2-frik p {
  font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-80); margin: 0; max-width: 50ch;
}

.co2-cascade {
  position: sticky; top: 80px; align-self: start;
  background: var(--ink); color: var(--mist); padding: 40px;
  border: 1px solid var(--ink);
}
.co2-cascade-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.co2-cascade h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.18; color: #fff; margin: 0 0 28px; max-width: 18ch; letter-spacing: -.014em; }
.co2-cascade-stats { display:grid; grid-template-columns: 1fr 1fr; gap: 32px 28px; padding-top: 24px; border-top: 1px solid rgba(219,226,239,.18); }
.co2-cascade-stat .num { font-family: var(--serif); font-size: 44px; line-height: 1; color: #fff; letter-spacing: -.024em; margin-bottom: 8px; }
.co2-cascade-stat .num small { font-size: 22px; color: var(--gold); margin-left: 2px; }
.co2-cascade-stat .lbl { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.7); }
.co2-cascade-chain { margin-top: 32px; padding-top: 28px; border-top: 1px solid rgba(219,226,239,.18); display:flex; flex-direction:column; gap:10px; }
.co2-cascade-link { display:flex; align-items:center; gap:14px; font-size: 13px; color: var(--mist); }
.co2-cascade-link .step { width: 22px; height: 22px; border:1px solid var(--gold); color: var(--gold); display:grid; place-items:center; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; flex-shrink: 0; }
.co2-cascade-link strong { color: #fff; font-weight: 500; }
.co2-cascade-link .arr { color: var(--gold); margin-left: auto; }

/* ─── 03 WERTLOGIK · EBITDA waterfall (full-bleed dark) ─── */
.co2-fullbleed {
  margin: 64px calc(50% - 50vw) 0;
  width: 100vw;
  background: var(--ink); color: #fff;
  padding: 96px 0;
}
.co2-fullbleed .pk-container { color: #fff; }
.co2-wl-head {
  display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 80px; align-items: end;
  padding-bottom: 56px; margin-bottom: 64px; border-bottom: 1px solid rgba(219,226,239,.2);
}
.co2-wl-head .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.co2-wl-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -.022em; color: #fff; margin: 0; max-width: 18ch; }
.co2-wl-head h2 em { color: var(--gold); font-style: italic; font-weight: 400; }
.co2-wl-head .lead { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--mist); margin: 0; max-width: 42ch; }

.co2-wf {
  display:grid; grid-template-columns: 1fr 1fr; gap: 64px;
}
.co2-wf-scenario { }
.co2-wf-scenario .title { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.co2-wf-scenario.bad .title { color: #E89A8B; }
.co2-wf-scenario.good .title { color: var(--gold); }
.co2-wf-scenario .verdict { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: #fff; margin: 0 0 28px; max-width: 26ch; letter-spacing: -.012em; }
.co2-wf-chart {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(219,226,239,.25);
  height: 280px; align-items: end;
  position: relative;
  padding: 0 4px;
}
.co2-wf-bar {
  position: relative; margin: 0 8px; min-height: 6px;
  display: flex; align-items: end; justify-content: center;
  color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
}
.co2-wf-bar .v {
  position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 14px; color: #fff; white-space: nowrap;
}
.co2-wf-bar .body { width: 100%; height: 100%; }
.co2-wf-scenario.bad .body--neg { background: #C66B5C; }
.co2-wf-scenario.bad .body--pos { background: #6E83A6; }
.co2-wf-scenario.bad .body--final { background: #8C3F32; }
.co2-wf-scenario.good .body--neg { background: #6E83A6; }
.co2-wf-scenario.good .body--pos { background: var(--gold); }
.co2-wf-scenario.good .body--final { background: #C8A96B; }
.co2-wf-scenario .body--start { background: var(--mist); }
.co2-wf-axis {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: rgba(255,255,255,.6);
  margin-top: 14px; text-align: center; line-height: 1.25; padding: 0 4px;
}
.co2-wf-axis div { padding: 0 4px; }
.co2-wf-impact {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(219,226,239,.15);
  display:flex; align-items: baseline; gap: 14px;
}
.co2-wf-impact .num { font-family: var(--serif); font-size: 42px; line-height: 1; letter-spacing: -.024em; }
.co2-wf-scenario.bad .co2-wf-impact .num { color: #E89A8B; }
.co2-wf-scenario.good .co2-wf-impact .num { color: var(--gold); }
.co2-wf-impact .lbl { font-size: 13px; color: var(--mist); max-width: 22ch; line-height: 1.4; }

.co2-wl-defs {
  margin-top: 80px; padding-top: 48px; border-top: 1px solid rgba(219,226,239,.2);
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.co2-wl-def {
  padding: 4px 32px 0; border-right: 1px solid rgba(219,226,239,.15);
}
.co2-wl-def:first-child { padding-left: 0; }
.co2-wl-def:last-child { border-right: none; padding-right: 0; }
.co2-wl-def .num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--gold); margin-bottom: 14px; }
.co2-wl-def h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.18; letter-spacing: -.012em; color: #fff; margin: 0 0 12px; }
.co2-wl-def p { font-family: var(--serif); font-size: 14px; line-height: 1.55; color: var(--mist); margin: 0; }

/* ─── 04 DAY-1 · Iceberg / Silent Dependencies ──────── */
.co2-iceberg {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px;
  align-items: start; margin-top: 8px;
}
.co2-ice-vis {
  position: sticky; top: 80px;
  background: var(--bone); border: 1px solid var(--hair); padding: 40px;
}
.co2-ice-vis-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: 24px; }
.co2-ice-stack { position: relative; }
.co2-ice-line {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--gold);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  padding-top: 6px; padding-left: 4px;
}
.co2-ice-row {
  display:grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center;
  padding: 14px 16px; border-radius: 1px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
}
.co2-ice-row + .co2-ice-row { margin-top: 6px; }
.co2-ice-row.visible { background: var(--mist); color: var(--ink); }
.co2-ice-row.hidden { background: var(--ink); color: var(--mist); }
.co2-ice-row.hidden em { color: #E89A8B; font-style: normal; }
.co2-ice-row .lyr { color: var(--gold); }
.co2-ice-row.visible .lyr { color: var(--steel); }

.co2-ice-cards { }
.co2-ice-card {
  padding: 32px 0; border-bottom: 1px solid var(--hair);
}
.co2-ice-card:first-child { padding-top: 0; }
.co2-ice-card:last-child { border-bottom: none; }
.co2-ice-card .mark { display:flex; align-items: baseline; gap: 18px; margin-bottom: 14px; }
.co2-ice-card .mark .letter { font-family: var(--serif); font-size: 36px; font-style: italic; color: var(--gold); line-height: 1; letter-spacing: -.02em; }
.co2-ice-card h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.18; letter-spacing: -.014em; color: var(--ink); margin: 0; }
.co2-ice-card p { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink-80); margin: 0 0 14px; }
.co2-ice-card .defense {
  display:grid; grid-template-columns: 100px 1fr; gap: 16px;
  padding: 14px 0 4px; border-top: 1px solid var(--hair); margin-top: 14px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-80);
}
.co2-ice-card .defense .lbl {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}

/* ─── 05 IAM · Hourglass bottleneck ─────────────────── */
.co2-hg {
  margin-top: 8px;
  display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 80px;
  align-items: start;
}
.co2-hg-vis {
  position: relative;
  background: var(--bone); border: 1px solid var(--hair);
  padding: 40px; min-height: 480px;
}
.co2-hg-vis .top, .co2-hg-vis .bot {
  position: relative; padding: 22px 18px;
}
.co2-hg-vis .top {
  background: linear-gradient(180deg, var(--mist) 0%, rgba(219,226,239,.4) 100%);
  clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
  text-align: center;
}
.co2-hg-vis .neck {
  position: relative;
  background: var(--ink); color: #fff; padding: 18px;
  width: 50%; margin: 0 auto;
  text-align: center;
}
.co2-hg-vis .neck::before, .co2-hg-vis .neck::after {
  content:""; position:absolute; left: 0; right: 0; height: 12px;
  background: var(--gold);
}
.co2-hg-vis .neck::before { top: 0; }
.co2-hg-vis .neck::after { bottom: 0; }
.co2-hg-vis .bot {
  background: linear-gradient(180deg, rgba(200,169,107,.18) 0%, rgba(200,169,107,.45) 100%);
  clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%);
  text-align: center;
}
.co2-hg-vis .top h4, .co2-hg-vis .bot h4, .co2-hg-vis .neck h4 {
  font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -.012em; margin: 0 0 8px;
}
.co2-hg-vis .top h4 { color: var(--ink); }
.co2-hg-vis .bot h4 { color: var(--ink); }
.co2-hg-vis .neck h4 { color: #fff; }
.co2-hg-vis .top p, .co2-hg-vis .bot p { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-80); margin: 0; line-height: 1.45; }
.co2-hg-vis .neck p { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0; }

.co2-hg-cards { }
.co2-hg-card { padding: 28px 0; border-bottom: 1px solid var(--hair); display:grid; grid-template-columns: 60px 1fr; gap: 24px; align-items: start; }
.co2-hg-card:first-child { padding-top: 0; }
.co2-hg-card:last-child { border-bottom: none; }
.co2-hg-card .num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--gold); padding-top: 4px; }
.co2-hg-card h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.2; letter-spacing: -.014em; color: var(--ink); margin: 0 0 10px; }
.co2-hg-card p { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-80); margin: 0; }

/* ─── 06 TSA · Real burn-down chart (SVG) ───────────── */
.co2-tsa-chart-wrap {
  margin-top: 8px;
  background: var(--bone); border: 1px solid var(--hair);
  padding: 48px 56px 40px;
}
.co2-tsa-chart-head {
  display:flex; justify-content:space-between; align-items: end; gap: 32px;
  padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--hair);
}
.co2-tsa-chart-head .ttl { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); margin: 0; max-width: 38ch; line-height: 1.3; letter-spacing: -.012em; }
.co2-tsa-legend { display:flex; gap: 24px; }
.co2-tsa-legend .lg { display:flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-80); }
.co2-tsa-legend .sw { width: 16px; height: 3px; }
.co2-tsa-legend .sw--bad { background: #C66B5C; }
.co2-tsa-legend .sw--good { background: var(--gold); }
.co2-tsa-svg { width: 100%; height: auto; display:block; }
.co2-tsa-mech {
  margin-top: 56px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.co2-tsa-m { padding: 4px 28px 0; border-right: 1px solid var(--hair); }
.co2-tsa-m:first-child { padding-left: 0; }
.co2-tsa-m:last-child { border-right: none; padding-right: 0; }
.co2-tsa-m .num { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--gold); margin-bottom: 12px; }
.co2-tsa-m h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; letter-spacing: -.014em; color: var(--ink); margin: 0 0 10px; }
.co2-tsa-m p { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-80); margin: 0; }

/* ─── 07 ABLAUF · Gantt timeline ─────────────────────── */
.co2-gantt {
  margin-top: 8px;
  background: var(--white); border: 1px solid var(--hair);
  padding: 40px;
}
.co2-gantt-axis {
  display:grid;
  grid-template-columns: 160px repeat(20, 1fr);
  border-bottom: 1px solid var(--hair); padding-bottom: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-60);
  margin-bottom: 48px;
}
.co2-gantt-rows { position: relative; }
.co2-gantt-axis .ax { text-align: center; }
.co2-gantt-axis .ax--lbl { text-align: left; color: var(--ink-80); text-transform: uppercase; letter-spacing: .14em; }
.co2-gantt-row {
  display:grid;
  grid-template-columns: 160px repeat(20, 1fr);
  align-items: center; min-height: 56px; border-bottom: 1px dashed var(--hair);
  position: relative;
}
.co2-gantt-row:last-of-type { border-bottom: none; }
.co2-gantt-row .lbl {
  font-family: var(--serif); font-weight: 500; font-size: 15px; color: var(--ink); padding-right: 16px;
  letter-spacing: -.01em;
}
.co2-gantt-row .lbl small { display:block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--steel); margin-top: 4px; font-weight: 400; }
.co2-gantt-bar {
  height: 22px; background: var(--ink); color: #fff;
  display:flex; align-items: center; padding: 0 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  position: relative;
}
.co2-gantt-bar.b--gold { background: var(--gold); color: var(--ink); }
.co2-gantt-bar.b--steel { background: var(--steel); color: #fff; }
.co2-gantt-bar.b--mist { background: var(--mist); color: var(--ink); }
.co2-gantt-marker {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 2px dashed var(--gold);
  z-index: 6; pointer-events: none;
}
.co2-gantt-marker.col-13 { left: calc(160px + 12 * (100% - 160px) / 20); }
.co2-gantt-marker.col-18 { left: calc(160px + 17 * (100% - 160px) / 20); }
.co2-gantt-marker.col-21 { left: calc(160px + 20 * (100% - 160px) / 20); }
.co2-gantt-marker .pin {
  position: absolute; top: -32px; left: 0; transform: translateX(-50%);
  background: var(--gold); color: var(--ink); padding: 4px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap;
}
.co2-gantt-bar { overflow: hidden; text-overflow: ellipsis; }
.co2-gantt-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hair);
  display:flex; gap: 32px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-80);
}
.co2-gantt-foot .lg { display:flex; align-items: center; gap: 8px; }
.co2-gantt-foot .sw { width: 16px; height: 8px; }

/* ─── 08 RISIKEN · 2x2 severity matrix ──────────────── */
.co2-risk {
  display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px;
  margin-top: 8px;
}
.co2-risk-matrix {
  position: relative; aspect-ratio: 1.05 / 1;
  background: var(--bone); border: 1px solid var(--hair); padding: 24px;
}
.co2-risk-grid {
  position: absolute; inset: 56px 24px 56px 88px;
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: 25% 25%;
  background-position: 0 0;
  border: 1px solid var(--ink);
}
.co2-risk-grid::before {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, transparent 49%, var(--ink) 49%, var(--ink) 51%, transparent 51%);
  opacity: 0;
}
.co2-risk-zone {
  position: absolute;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60);
}
.co2-risk-zone.tl { top: 8px; left: 8px; }
.co2-risk-zone.tr { top: 8px; right: 8px; color: #C66B5C; }
.co2-risk-zone.bl { bottom: 8px; left: 8px; }
.co2-risk-zone.br { bottom: 8px; right: 8px; }
.co2-risk-axis-x, .co2-risk-axis-y {
  position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.co2-risk-axis-x { bottom: 16px; left: 50%; transform: translateX(-50%); }
.co2-risk-axis-x::after, .co2-risk-axis-y::before { content: ""; }
.co2-risk-axis-y {
  left: 24px; top: 50%; transform: translateX(-50%) rotate(-90deg) translateY(-50%); transform-origin: left center;
  white-space: nowrap;
}
.co2-risk-dot {
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display:grid; place-items: center;
  font-family: var(--serif); font-weight: 500; font-size: 16px;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 16px rgba(17,45,78,.18);
  z-index: 2;
}
.co2-risk-dot--hot { background: #C66B5C; }
.co2-risk-dot--warm { background: var(--gold); color: var(--ink); }

.co2-risk-list { }
.co2-risk-list h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-60); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid var(--ink);
}
.co2-risk-row { display:grid; grid-template-columns: 50px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.co2-risk-row:last-child { border-bottom: none; }
.co2-risk-row .badge {
  font-family: var(--serif); font-size: 22px; font-style: italic; color: var(--gold); line-height: 1; letter-spacing: -.02em;
}
.co2-risk-row h4 { font-family: var(--serif); font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -.012em; color: var(--ink); margin: 0 0 6px; }
.co2-risk-row p { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--ink-80); margin: 0; }

/* ─── 09 DELIVERABLES · timeline track ──────────────── */
.co2-deliv {
  margin-top: 8px;
  background: var(--ink); color: #fff;
  padding: 64px 56px;
  position: relative;
}
.co2-deliv-track {
  position: relative;
  margin: 16px 0 8px;
  padding-top: 80px;
}
.co2-deliv-track::before {
  content:""; position:absolute; top: 80px; left: 0; right: 0; height: 1px; background: var(--gold);
}
.co2-deliv-stages {
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.co2-deliv-stage { position: relative; padding: 0 12px; }
.co2-deliv-stage::before {
  content:""; position: absolute; top: -88px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; background: var(--gold); border-radius: 50%;
}
.co2-deliv-stage::after {
  content:""; position: absolute; top: -68px; left: 50%; width: 1px; height: 56px; background: rgba(200,169,107,.4);
}
.co2-deliv-stage .moment {
  position: absolute; top: -118px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.co2-deliv-stage h4 {
  font-family: var(--serif); font-weight: 500; font-size: 18px; color: #fff; margin: 0 0 16px;
  text-align: center; letter-spacing: -.012em;
}
.co2-deliv-stage ul {
  list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: 8px;
}
.co2-deliv-stage li {
  font-family: var(--serif); font-size: 14px; line-height: 1.45; color: var(--mist);
  padding-left: 14px; position: relative;
}
.co2-deliv-stage li::before {
  content:""; position: absolute; left: 0; top: .65em; width: 6px; height: 1px; background: var(--gold);
}
.co2-deliv-foot {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15);
  display:flex; justify-content: space-between; align-items: baseline; gap: 32px;
}
.co2-deliv-foot p { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.45; color: var(--mist); margin: 0; max-width: 50ch; }
.co2-deliv-foot p::before { content:'»'; color: var(--gold); margin-right: 4px; font-style: normal; }
.co2-deliv-foot p::after { content:'«'; color: var(--gold); margin-left: 2px; font-style: normal; }
.co2-deliv-foot .credit { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }

/* ─── 10 STAKEHOLDER · triad ─────────────────────────── */
.co2-triad {
  margin-top: 8px;
  display:grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; align-items: center;
}
.co2-triad-vis {
  position: relative; aspect-ratio: 1 / .92;
}
.co2-triad-vis svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.co2-triad-node {
  position: absolute; width: 220px; transform: translate(-50%, -50%);
  text-align: center;
}
.co2-triad-node .ring {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; margin: 0 auto 16px;
  font-family: var(--serif); font-style: italic; font-size: 30px; letter-spacing: -.02em;
  border: 4px solid var(--bone);
  box-shadow: 0 6px 24px rgba(17,45,78,.22);
  position: relative; z-index: 2;
}
.co2-triad-node.gold .ring { background: var(--gold); color: var(--ink); }
.co2-triad-node.steel .ring { background: var(--steel); }
.co2-triad-node h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; line-height: 1.2; color: var(--ink); margin: 0 0 8px; letter-spacing: -.014em; }
.co2-triad-node p { font-family: var(--serif); font-size: 13.5px; line-height: 1.45; color: var(--ink-80); margin: 0; }

.co2-triad-node.n1 { left: 50%; top: 18%; }
.co2-triad-node.n2 { left: 18%; top: 78%; }
.co2-triad-node.n3 { left: 82%; top: 78%; }

.co2-triad-tension {
  position: absolute; padding: 8px 14px;
  background: var(--bone); border: 1px solid var(--hair);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink); white-space: nowrap;
  z-index: 1;
}
.co2-triad-tension.t1 { left: 28%; top: 50%; transform: translateY(-50%) rotate(-58deg); }
.co2-triad-tension.t2 { right: 28%; top: 50%; transform: translateY(-50%) rotate(58deg); }
.co2-triad-tension.t3 { left: 50%; bottom: 14%; transform: translate(-50%, 50%); }

.co2-triad-side h3 { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); margin: 0 0 16px; }
.co2-triad-side p.lede { font-family: var(--serif); font-size: 22px; line-height: 1.32; color: var(--ink); margin: 0 0 28px; max-width: 28ch; letter-spacing: -.014em; }
.co2-triad-side .stat { display:grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--hair); }
.co2-triad-side .stat:last-child { border-bottom: 1px solid var(--hair); }
.co2-triad-side .stat .num { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--gold); letter-spacing: -.02em; }
.co2-triad-side .stat .lbl { font-family: var(--serif); font-size: 14px; line-height: 1.45; color: var(--ink-80); }

/* ─── 11 ERFOLGSFAKTOREN · 4-phase playbook ─────────── */
.co2-pb {
  margin-top: 8px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 2px solid var(--ink);
}
.co2-pb-col { padding: 32px 24px 0; border-right: 1px solid var(--hair); }
.co2-pb-col:first-child { padding-left: 0; }
.co2-pb-col:last-child { border-right: none; padding-right: 0; }
.co2-pb-col .phase { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.co2-pb-col h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.18; letter-spacing: -.014em; color: var(--ink); margin: 0 0 28px; }
.co2-pb-item { padding: 16px 0; border-top: 1px dashed var(--hair); display:grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.co2-pb-item:first-of-type { border-top: none; padding-top: 0; }
.co2-pb-item .nm { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--steel); padding-top: 3px; }
.co2-pb-item p { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink-80); margin: 0; }
.co2-pb-item p strong { display:block; color: var(--ink); font-weight: 500; font-size: 15.5px; margin-bottom: 4px; letter-spacing: -.01em; }

/* ─── 12 GLOSSAR · compact preview ──────────────────── */
.co2-gloss {
  margin-top: 8px;
  background: var(--bone); padding: 48px 56px; border: 1px solid var(--hair);
}
.co2-gloss-head { display:flex; justify-content: space-between; align-items: baseline; gap: 32px; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--hair); }
.co2-gloss-head .ttl { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 0; letter-spacing: -.012em; max-width: 38ch; }
.co2-gloss-head .count { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); }
.co2-gloss-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px 32px;
}
.co2-gloss-letter {
  border-top: 1px solid var(--ink-40); padding-top: 14px;
}
.co2-gloss-letter .ltr { font-family: var(--serif); font-style: italic; font-size: 28px; color: var(--gold); line-height: 1; letter-spacing: -.02em; margin-bottom: 12px; }
.co2-gloss-letter ul { margin: 0; padding: 0; list-style: none; }
.co2-gloss-letter li { font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--ink); padding: 4px 0; }
.co2-gloss-letter li small { display:block; color: var(--ink-60); font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.co2-gloss-foot {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--hair);
  display:flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-80);
}
.co2-gloss-foot a { color: var(--steel); }

/* ─── 13 FAZIT · closing CTA ─────────────────────────── */
.co2-cta {
  margin: 96px calc(50% - 50vw) 0;
  width: 100vw;
  background: var(--bone); color: var(--ink);
  padding: 120px 0;
  border-top: 1px solid var(--hair);
}
.co2-cta-grid { display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 80px; align-items: end; }
.co2-cta-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.co2-cta h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.024em; color: var(--ink); margin: 0 0 32px; max-width: 18ch; }
.co2-cta h2 em { color: var(--steel); font-style: italic; }
.co2-cta-body { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-80); max-width: 44ch; margin: 0; }
.co2-cta-side { padding: 32px 0 0; border-top: 1px solid var(--hair); }
.co2-cta-side .label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 16px; }
.co2-cta-side .btn {
  display:inline-flex; align-items: center; gap: 14px;
  font-family: var(--serif); font-size: 22px; color: var(--ink); letter-spacing: -.014em;
  padding: 20px 0; border-bottom: 1px solid var(--gold);
}
.co2-cta-side .btn .arr { color: var(--gold); }
.co2-cta-side .meta { margin-top: 32px; font-family: var(--serif); font-size: 14px; line-height: 1.6; color: var(--ink-60); }
.co2-cta-side .meta strong { color: var(--ink); font-weight: 500; }

/* RESPONSIVE · tablet down */
@media (max-width: 1100px) {
  .co2-real, .co2-iceberg, .co2-hg, .co2-risk, .co2-triad, .co2-cta-grid { grid-template-columns: 1fr; }
  .co2-pb, .co2-wl-defs, .co2-tsa-mech { grid-template-columns: 1fr 1fr; }
  .co2-pb-col { border-right: none; border-bottom: 1px solid var(--hair); padding: 32px 0 24px; }
  .co2-deliv-stages { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .co2-deliv-track::before, .co2-deliv-stage::before, .co2-deliv-stage::after { display:none; }
  .co2-deliv-stage .moment { position: static; text-align: left; margin-bottom: 8px; }
}