/* =============================================================
   DOC 2 · Der perfekte Recruiting-Prozess
   Distinct visual system: THE CONVERGING FUNNEL.
   Shares CI from base.css; adds funnel motif, funnel-chart,
   word-for-word script blocks, MBTI cards, flag columns.
   ============================================================= */

.motif{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.glow-top{position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(144,207,232,.30), transparent 68%);}

/* ---------- cover funnel motif (grounded in flow, clear of the title) ---------- */
.cover .ttl{margin-top:16mm;}
.funnel-stage{margin-top:auto;position:relative;z-index:3;display:flex;justify-content:center;padding-bottom:2mm;}
.funnel{width:124mm;display:flex;flex-direction:column;align-items:center;gap:3.5mm;}
.funnel .lv{height:10mm;border-radius:4px;width:100%;
  background:linear-gradient(180deg, rgba(144,207,232,.40), rgba(23,150,201,.10));
  border:1px solid rgba(144,207,232,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
.funnel .lv:nth-child(1){width:100%;}
.funnel .lv:nth-child(2){width:76%;}
.funnel .lv:nth-child(3){width:54%;}
.funnel .lv:nth-child(4){width:32%;}
.funnel .drop{width:1px;height:8mm;background:linear-gradient(180deg,rgba(144,207,232,.6),transparent);}
.funnel .node{width:12mm;height:12mm;border-radius:50%;
  background:radial-gradient(circle, var(--ice), var(--blue));
  box-shadow:0 0 26px 4px rgba(144,207,232,.6),inset 0 2px 6px rgba(255,255,255,.4);}
.funnel .fcap{margin-top:6mm;font-family:var(--font-ui);font-weight:600;font-size:8pt;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);text-align:center;}

/* ---------- opener phase chips (clean, no overflow) ---------- */
.phasechips{display:flex;flex-wrap:wrap;gap:3mm;width:100%;}
.phasechips .pc{display:inline-flex;align-items:center;gap:3.5mm;padding:3mm 6mm 3mm 4mm;border-radius:100px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);}
.phasechips .pc .i{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:12pt;color:var(--ice);line-height:1;}
.phasechips .pc .l{font-family:var(--font-ui);font-weight:500;font-size:9pt;letter-spacing:.02em;color:rgba(255,255,255,.82);}

/* ============================================================
   FUNNEL CHART — the centerpiece (Stufe / Menge / Quote)
   ============================================================ */
.fchart{display:flex;flex-direction:column;align-items:center;gap:2mm;}
.fchart .seg{position:relative;color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:6mm;padding:3.6mm 9mm;border-radius:8px;overflow:hidden;
  background:linear-gradient(115deg, var(--deep) 0%, var(--blue-d) 100%);
  box-shadow:0 10px 26px -14px rgba(12,133,180,.5);}
.fchart .seg::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 1.6px);background-size:15px 15px;opacity:.4;}
.fchart .seg .lab{position:relative;font-family:var(--font-sans);font-weight:600;font-size:11pt;letter-spacing:-0.02em;}
.fchart .seg .num{position:relative;font-family:var(--font-display);font-style:italic;font-weight:300;font-size:18pt;letter-spacing:-0.03em;color:var(--ice);white-space:nowrap;}
.fchart .seg.s1{width:100%;}
.fchart .seg.s2{width:84%;}
.fchart .seg.s3{width:66%;}
.fchart .seg.s4{width:48%;}
.fchart .seg.s5{width:34%;background:linear-gradient(115deg,var(--ice) 0%, var(--blue) 100%);}
.fchart .seg.s5 .num{color:#fff;}
.fchart .quote{display:flex;align-items:center;gap:3mm;font-family:var(--font-ui);font-weight:500;font-size:7.6pt;letter-spacing:.04em;color:var(--accent-deep);}
.fchart .quote::before{content:"";width:10mm;height:1px;background:var(--rule);}

/* ---------- 5-phase process (numbered cards w/ count chips) ---------- */
.procflow{display:flex;flex-direction:column;gap:4mm;}
.procflow .pf{display:grid;grid-template-columns:auto 1fr auto;gap:6mm;align-items:start;
  padding:5mm 6mm;border-radius:10px;border:1px solid var(--rule);
  background:radial-gradient(ellipse 120% 100% at 0 0, rgba(144,207,232,.16), transparent 60%), #fff;}
.procflow .pf .ph{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:20pt;color:var(--grey-350);letter-spacing:-0.03em;line-height:1;width:14mm;}
.procflow .pf .ph b{color:var(--accent-deep);font-style:normal;}
.procflow .pf .t{font-family:var(--font-sans);font-weight:600;font-size:10.5pt;letter-spacing:-0.02em;color:#000;margin-bottom:1.5mm;}
.procflow .pf .d{font-size:8.8pt;line-height:1.45;color:var(--ink-60);}
.procflow .pf .cnt{font-family:var(--font-display);font-style:italic;font-size:13pt;color:var(--accent-deep);white-space:nowrap;align-self:center;}

/* ---------- word-for-word script blocks ---------- */
.script{display:flex;flex-direction:column;gap:3mm;}
.sblock{position:relative;border:1px solid var(--rule);border-radius:10px;padding:4mm 6mm 4mm 8mm;background:#fff;overflow:hidden;}
.sblock::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);}
.sblock .ph{display:flex;align-items:baseline;gap:3mm;margin-bottom:2.5mm;}
.sblock .ph .n{font-family:var(--font-ui);font-weight:600;font-size:7.2pt;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);}
.sblock .ph .t{font-family:var(--font-sans);font-weight:600;font-size:10pt;letter-spacing:-0.02em;color:#000;}
.sblock .ph .t em{font-family:var(--font-display);font-style:italic;font-weight:300;color:var(--grey-500);font-size:10.5pt;}
.sblock .say{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:11.5pt;line-height:1.32;color:#000;letter-spacing:-0.01em;}
.sblock .say::before{content:"„";color:var(--ice-2);}
.sblock .say::after{content:"";}
.sblock .goal{margin-top:2.5mm;font-size:8.4pt;line-height:1.45;color:var(--ink-60);}
.sblock .goal b{color:var(--accent-deep);font-weight:600;}

/* question list inside a script */
.qlist{margin:2mm 0 0;padding:0;list-style:none;counter-reset:q;display:grid;grid-template-columns:1fr 1fr;gap:1.2mm 6mm;}
.qlist li{counter-increment:q;font-size:8.8pt;line-height:1.35;color:var(--ink-78);display:grid;grid-template-columns:6mm 1fr;gap:2mm;}
.qlist li::before{content:counter(q);font-family:var(--font-display);font-style:italic;color:var(--accent-deep);font-size:10pt;}

/* ---------- MBTI cards ---------- */
.mbti{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm;}
.mbti .m{position:relative;border:1px solid var(--rule);border-radius:10px;padding:6mm 5mm;overflow:hidden;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 120% 60% at 50% 0%, rgba(144,207,232,.2), transparent 70%), #fff;}
.mbti .m .code{font-family:var(--font-display);font-weight:400;font-size:24pt;letter-spacing:-0.03em;color:#000;line-height:1;}
.mbti .m .role{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:13pt;color:var(--accent-deep);margin:1mm 0 3mm;}
.mbti .m .traits{display:flex;flex-wrap:wrap;gap:2mm;margin-bottom:3mm;}
.mbti .m .traits span{font-family:var(--font-ui);font-size:7pt;letter-spacing:.04em;padding:1.4mm 3mm;border-radius:100px;background:var(--sky-050);color:var(--accent-deep);border:1px solid rgba(23,150,201,.18);}
.mbti .m .d{font-size:8.5pt;line-height:1.45;color:var(--ink-60);margin-top:auto;}

/* ---------- flag columns ---------- */
.flags{display:grid;grid-template-columns:1fr 1fr;gap:6mm;align-items:start;}
.flagcol{border:1px solid var(--rule);border-radius:10px;overflow:hidden;}
.flagcol .hd{padding:4mm 6mm;font-family:var(--font-ui);font-weight:600;font-size:8.5pt;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:3mm;}
.flagcol.red .hd{background:#FBEEEA;color:#A23B22;}
.flagcol.orange .hd{background:#FBF3E6;color:#9A6B1E;}
.flagcol .hd .dot{width:8px;height:8px;border-radius:50%;}
.flagcol.red .hd .dot{background:#C8492B;}
.flagcol.orange .hd .dot{background:#D38A1E;}
.flagcol .li{padding:2.8mm 6mm;border-top:1px solid var(--rule-faint);font-size:8.8pt;line-height:1.35;color:var(--ink-78);}
.flagcol .li:first-of-type{border-top:none;}