/* =============================================================
   DOC 1 · Das Vertriebssystem hinter Exits
   Distinct visual system: FOUR LOAD-BEARING PILLARS.
   Shares all CI from base.css; this layer adds the pillar motif,
   pillar-overview, leadership-phases and a few doc-specific bits.
   ============================================================= */

/* ---------- Cover & opener pillar motif (graphic, no photos) ---------- */
.motif{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}

/* cover title sits in clear space; foundation is grounded below it */
.cover .ttl{margin-top:16mm;}
.temple-stage{margin-top:auto;position:relative;z-index:3;}

/* the foundation: four LABELLED pillars carrying a beam (= the system) */
.temple{width:100%;}
.temple .beam{
  height:6mm;border-radius:3px;
  background:linear-gradient(180deg, var(--ice) 0%, var(--blue) 100%);
  box-shadow:0 0 0 1px rgba(144,207,232,.22),0 12px 36px rgba(12,133,180,.38);
}
.temple .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:7mm;padding:0 1mm;margin-top:-1px;}
.temple .col{
  height:46mm;border-radius:0 0 3px 3px;
  background:linear-gradient(180deg, rgba(144,207,232,.32) 0%, rgba(23,150,201,.07) 78%, rgba(23,150,201,0) 100%);
  border:1px solid rgba(144,207,232,.18);border-top:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.temple .floorline{height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(144,207,232,.55),transparent);}
.temple .caps{display:grid;grid-template-columns:repeat(4,1fr);gap:7mm;padding:0 1mm;margin-top:4mm;}
.temple .caps span{font-family:var(--font-ui);font-weight:600;font-size:8pt;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);text-align:center;}

/* glow orbs behind temple on dark pages */
.glow-top{position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(144,207,232,.30), transparent 68%);}

/* ---------- opener: 4-pillar status row (which Säule) ---------- */
.pillrow{display:flex;gap:5mm;align-items:flex-end;height:30mm;}
.pillrow .p{flex:1;border-radius:3px 3px 0 0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-bottom:none;position:relative;height:60%;
  display:flex;align-items:flex-start;justify-content:center;padding-top:3mm;}
.pillrow .p .n{font-family:var(--font-ui);font-weight:600;font-size:7pt;letter-spacing:.14em;color:rgba(255,255,255,.4);}
.pillrow .p.on{height:100%;background:linear-gradient(180deg, rgba(144,207,232,.5), rgba(23,150,201,.12));border-color:rgba(144,207,232,.5);}
.pillrow .p.on .n{color:#fff;}
.pillrow .p.done{background:rgba(144,207,232,.16);border-color:rgba(144,207,232,.28);}
.pillrow .floor{height:1px;background:rgba(255,255,255,.16);margin-top:0;}

/* ---------- content: the 4 pillars overview (Ch1) ---------- */
.fourpillars{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;margin-top:2mm;}
.fourpillars .fp{position:relative;border:1px solid var(--rule);border-radius:10px;overflow:hidden;
  background:radial-gradient(ellipse 120% 60% at 50% 0%, rgba(144,207,232,.22), transparent 70%), #fff;
  padding:6mm 5mm;display:flex;flex-direction:column;min-height:62mm;}
.fourpillars .fp .top{height:3px;width:36%;border-radius:2px;background:var(--accent);margin-bottom:5mm;}
.fourpillars .fp .rn{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:18pt;color:var(--grey-350);letter-spacing:-0.03em;margin-bottom:1mm;}
.fourpillars .fp .nm{font-family:var(--font-sans);font-weight:600;font-size:12pt;letter-spacing:-0.02em;color:#000;margin-bottom:3mm;}
.fourpillars .fp .ds{font-size:8.7pt;line-height:1.5;color:var(--ink-60);margin-top:auto;}

/* ---------- diagnostic: 2×2 question→pillar grid ---------- */
.diag .four{display:grid;grid-template-columns:1fr 1fr;gap:5mm;margin-top:6mm;}
.diag .four .dcard .qn{font-family:var(--font-ui);font-weight:600;font-size:7.5pt;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:3mm;}
.diag .four .dcard .obj{min-height:auto;}

/* ---------- KPI funnel (culture chapter) ---------- */
.kpiflow{display:flex;flex-direction:column;gap:2.5mm;}
.kpiflow .stg{display:grid;grid-template-columns:42mm 1fr;gap:5mm;align-items:center;
  padding:3.6mm 6mm;border-radius:8px;border:1px solid var(--rule);background:#fff;position:relative;}
.kpiflow .stg .lb{font-family:var(--font-sans);font-weight:600;font-size:9.4pt;letter-spacing:-0.02em;color:#000;}
.kpiflow .stg .vs{font-size:8.6pt;line-height:1.4;color:var(--ink-60);}
.kpiflow .stg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:var(--accent);opacity:.5;}
.kpiflow .stg.meta{background:radial-gradient(ellipse 80% 100% at 0 50%, rgba(144,207,232,.22), transparent 60%), #fff;}
.kpiflow .stg.meta::before{opacity:1;}

/* ---------- leadership phases (the "bicycle") ---------- */
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:4mm;margin-top:2mm;counter-reset:ph;}
.phases .ph{border:1px solid var(--rule);border-radius:10px;padding:5mm;background:#fff;position:relative;display:flex;flex-direction:column;}
.phases .ph .ix{display:flex;align-items:center;gap:3mm;margin-bottom:3mm;}
.phases .ph .dotn{width:7mm;height:7mm;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-style:italic;font-size:11pt;color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-d));}
.phases .ph .wk{font-family:var(--font-ui);font-weight:600;font-size:6.8pt;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);}
.phases .ph .t{font-family:var(--font-sans);font-weight:600;font-size:9.6pt;letter-spacing:-0.02em;color:#000;margin-bottom:2mm;line-height:1.2;}
.phases .ph .d{font-size:8.2pt;line-height:1.45;color:var(--ink-60);}
.phases .ph .prog{position:absolute;left:5mm;right:5mm;bottom:4mm;height:3px;border-radius:2px;background:var(--grey-150);overflow:hidden;}
.phases .ph .prog i{display:block;height:100%;background:var(--accent);}

/* ---------- growth dynamics rail ---------- */
.growth{display:flex;flex-direction:column;gap:3mm;}
.growth .g{display:grid;grid-template-columns:26mm 1fr;gap:5mm;align-items:center;padding:3.6mm 6mm;border-radius:8px;border:1px solid var(--rule);background:#fff;}
.growth .g .rng{font-family:var(--font-display);font-style:italic;font-size:14pt;color:var(--accent-deep);letter-spacing:-0.02em;white-space:nowrap;}
.growth .g .tx{font-size:9pt;line-height:1.45;color:var(--ink-70);}

/* beliefs list */
.beliefs{display:flex;flex-direction:column;gap:0;}
.beliefs .b{display:grid;grid-template-columns:13mm 1fr;gap:4mm;align-items:baseline;padding:4mm 0;border-bottom:1px solid var(--rule);}
.beliefs .b:last-child{border-bottom:none;}
.beliefs .b .k{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:16pt;color:var(--grey-350);letter-spacing:-0.03em;}
.beliefs .b .v{font-size:9.6pt;line-height:1.5;color:var(--ink-78);}
.beliefs .b .v b{color:#000;font-weight:600;}

/* mistakes (numbered, two-tone) */
.mistakes{display:flex;flex-direction:column;gap:3.5mm;}
.mistakes .m{display:grid;grid-template-columns:1fr;gap:1.5mm;padding:5mm 6mm;border-radius:9px;border:1px solid var(--rule);
  background:linear-gradient(180deg,#fff, #FBFAF8);}
.mistakes .m .h{display:flex;align-items:baseline;gap:4mm;}
.mistakes .m .h .x{font-family:var(--font-display);font-style:italic;font-size:15pt;color:var(--grey-350);}
.mistakes .m .h .t{font-family:var(--font-sans);font-weight:600;font-size:10.5pt;letter-spacing:-0.02em;color:#000;}
.mistakes .m .fix{font-size:8.8pt;line-height:1.45;color:var(--accent-deep);padding-left:11mm;}
.mistakes .m .fix b{color:var(--accent-deep);}