{"id":4560,"date":"2026-03-25T18:21:06","date_gmt":"2026-03-25T18:21:06","guid":{"rendered":"https:\/\/nexqube.com\/?page_id=4560"},"modified":"2026-04-01T10:41:15","modified_gmt":"2026-04-01T10:41:15","slug":"demo-strategischer-vertrieb","status":"publish","type":"page","link":"https:\/\/nexqube.com\/en\/demo-strategischer-vertrieb\/","title":{"rendered":"Demo Strategischer Vertrieb"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t
\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nCERTUM Deal Simulator<\/title>\n<style>\n* { margin: 0; padding: 0; box-sizing: border-box; }\n:root {\n --primary: #2E5CA8;\n --primary-dark: #1e4080;\n --primary-light:#dce8f7;\n --sand: #D28D04;\n --sand-light: #fdf3dc;\n --sand-mid: #f5d98a;\n --green-dark: #14532d;\n --green-mid: #166534;\n --green-light: #dcfce7;\n --proc-bg: #dce8f7;\n --proc-text: #1e4080;\n --white: #ffffff;\n --bg: #ffffff;\n --bg-section: #f0f4f9;\n --border: #d6e0f0;\n --text: #1a2332;\n --text-light: #6b7a99;\n --success: #22c55e;\n --warning: #f59e0b;\n --danger: #ef4444;\n}\n\nbody { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }\n\n.certum-app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }\n\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.header { background: var(--primary); color: var(--white); padding: 0 18px; height: 52px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.18); }\n.header-logo { font-size: 15px; font-weight: 700; letter-spacing: .4px; }\n.header-logo span { opacity: .7; font-weight: 400; }\n.header-badge { background: var(--sand); color: var(--white); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: .4px; }\n.header-right { margin-left: auto; display: flex; align-items: center; gap: 7px; }\n.progress-info { color: rgba(255,255,255,.8); font-size: 12px; margin-right: 4px; }\n.btn-hdr { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: var(--white); padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s; white-space: nowrap; }\n.btn-hdr:hover { background: rgba(255,255,255,.26); }\n.btn-hdr.active { background: var(--sand); border-color: var(--sand); }\n\n\/* \u2500\u2500 MILESTONE BANNER \u2500\u2500 *\/\n.milestone-banner { background: var(--primary-light); border-bottom: 1px solid var(--border); padding: 6px 18px; display: none; align-items: center; gap: 10px; flex-shrink: 0; }\n.milestone-banner.show { display: flex; }\n.milestone-text { font-size: 12px; font-weight: 700; color: var(--primary); }\n.milestone-sub { font-size: 11px; color: var(--text-light); margin-left: 6px; }\n\n\/* \u2500\u2500 RFP MODAL \u2500\u2500 *\/\n.rfp-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(10,20,40,.55); z-index: 999; align-items: center; justify-content: center; padding: 24px; }\n.rfp-modal-overlay.open { display: flex; }\n.rfp-modal { background: var(--white); border-radius: 14px; width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); animation: fadeUp .3s ease; }\n.rfp-modal-header { background: var(--primary); color: var(--white); padding: 14px 18px; border-radius: 14px 14px 0 0; display: flex; align-items: center; gap: 10px; }\n.rfp-modal-title { font-size: 14px; font-weight: 700; flex: 1; }\n.rfp-modal-close { background: rgba(255,255,255,.2); border: none; color: var(--white); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; }\n.rfp-modal-close:hover { background: rgba(255,255,255,.35); }\n.rfp-modal-body { padding: 20px; }\n.rfp-modal-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }\n.btn-pdf { background: var(--primary); color: var(--white); border: none; padding: 8px 16px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; }\n.btn-close-modal { background: var(--bg-section); color: var(--text); border: 1px solid var(--border); padding: 8px 16px; border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer; }\n\n\/* \u2500\u2500 MAIN \u2500\u2500 *\/\n.main { display: flex; flex: 1; overflow: hidden; }\n\n\/* \u2500\u2500 INTRO \u2500\u2500 *\/\n.intro-screen { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 20px; gap: 14px; text-align: center; background: var(--bg-section); overflow-y: auto; }\n.intro-logo { width: 64px; height: 64px; background: var(--primary); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; }\n.intro-title { font-size: 22px; font-weight: 800; color: var(--primary); }\n.intro-subtitle { font-size: 13.5px; color: var(--text-light); max-width: 420px; line-height: 1.6; }\n.intro-milestones { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; max-width: 420px; width: 100%; text-align: left; }\n.intro-milestones h3 { font-size: 10px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 9px; }\n.intro-ms-item { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--bg-section); font-size: 12.5px; }\n.intro-ms-item:last-child { border-bottom: none; }\n.intro-ms-num { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.intro-features { display: flex; gap: 7px; flex-wrap: wrap; justify-content: center; max-width: 420px; }\n.intro-feat { background: var(--white); border: 1.5px solid var(--border); border-radius: 9px; padding: 7px 11px; font-size: 12px; font-weight: 500; }\n.btn-start { padding: 12px 36px; background: var(--primary); color: var(--white); border: none; border-radius: 11px; font-size: 15px; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s; }\n.btn-start:hover { background: var(--primary-dark); transform: translateY(-2px); }\n\n\/* \u2500\u2500 THREE COLUMNS \u2500\u2500 *\/\n.comp-col, .g1-col { flex: 38 1 0; min-width: 0; display: none; flex-direction: column; overflow: hidden; }\n.comp-col.show, .g1-col.show { display: flex; }\n\n.process-col { flex: 24 1 0; min-width: 160px; display: none; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg-section); overflow-y: auto; padding: 14px 12px; gap: 16px; }\n.process-col.show { display: flex; }\n\n\/* \u2500\u2500 COLUMN DIVIDER (between coaching and antizipation) \u2500\u2500 *\/\n.col-divider {\n display: none;\n flex-shrink: 0;\n width: 10px;\n position: relative;\n background: linear-gradient(180deg,\n rgba(20,83,45,0.07) 0%,\n rgba(210,141,4,0.13) 40%,\n rgba(210,141,4,0.08) 60%,\n rgba(20,83,45,0.07) 100%\n );\n}\n.col-divider.show { display: block; }\n.col-divider::before {\n content: '';\n position: absolute;\n left: 4px;\n top: 0; bottom: 0;\n width: 1.5px;\n background: linear-gradient(180deg,\n transparent 0%,\n rgba(20,83,45,0.25) 20%,\n rgba(210,141,4,0.4) 50%,\n rgba(20,83,45,0.25) 80%,\n transparent 100%\n );\n}\n.col-divider::after {\n content: '\u22b8';\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%) rotate(90deg);\n font-size: 14px;\n color: rgba(210,141,4,0.35);\n text-shadow: 0 0 6px rgba(210,141,4,0.2);\n}\n\n\/* \u2500\u2500 HARVARD TOGGLE COL \u2500\u2500 *\/\n.harvard-col { flex: 0 0 272px; display: none; flex-direction: column; overflow: hidden; background: var(--bg-section); border-left: 1px solid var(--border); }\n.harvard-col.show { display: flex; }\n\n\/* \u2500\u2500 COLUMN HEADERS \u2500\u2500 *\/\n.col-header { padding: 9px 13px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; flex-shrink: 0; display: flex; align-items: center; gap: 7px; }\n\n\/* Prozessfortschritt \u2013 hellblau *\/\n.col-header.proc {\n background: var(--proc-bg);\n color: var(--proc-text);\n border-bottom: 2px solid rgba(30,64,128,.18);\n font-size: 10.5px;\n}\n\n\/* Begleitung \/ Coach \u2013 dunkelgr\u00fcn *\/\n.col-header.comp {\n background: var(--green-dark);\n color: #fff;\n border-bottom: 2px solid rgba(255,255,255,.12);\n}\n.col-header.comp .ch-accent {\n display: inline-block;\n background: rgba(255,255,255,.15);\n padding: 2px 7px;\n border-radius: 5px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: .3px;\n margin-left: 4px;\n}\n\n\/* Einsch\u00e4tzung \/ Antizipation \u2013 sandfarben *\/\n.col-header.g1 {\n background: var(--sand);\n color: #fff;\n border-bottom: 2px solid rgba(255,255,255,.18);\n}\n.col-header.g1 .ch-accent {\n display: inline-block;\n background: rgba(255,255,255,.2);\n padding: 2px 7px;\n border-radius: 5px;\n font-size: 10px;\n font-weight: 600;\n letter-spacing: .3px;\n margin-left: 4px;\n}\n.col-header.harv { background: var(--white); color: var(--text-light); border-bottom: 1px solid var(--border); font-size: 10px; }\n\n\/* \u2500\u2500 MESSAGES \u2500\u2500 *\/\n.chat-messages { flex: 1; overflow-y: auto; padding: 13px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-section); min-height: 80px; }\n.message { display: flex; gap: 8px; max-width: 96%; }\n.message.user { align-self: flex-end; flex-direction: row-reverse; }\n.msg-avatar { width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }\n.message.assistant .msg-avatar { background: var(--green-mid); color: var(--white); }\n.message.user .msg-avatar { background: var(--primary-dark); color: var(--white); }\n.message.system .msg-avatar { background: var(--sand); color: var(--white); }\n.g1-col .message.assistant .msg-avatar { background: var(--sand); color: var(--white); }\n.msg-bubble { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font-size: 13px; line-height: 1.6; }\n.message.user .msg-bubble { background: var(--primary); color: var(--white); border-color: var(--primary); }\n.message.system .msg-bubble { background: #fff8e7; border-color: var(--sand); border-left: 3px solid var(--sand); }\n\n\/* \u2500\u2500 RFP DOC \u2500\u2500 *\/\n.rfp-doc { background: var(--white); border: 2px solid var(--primary); border-radius: 10px; padding: 13px; font-size: 12px; }\n.rfp-doc-header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 2px solid var(--primary-light); }\n.rfp-icon { width: 36px; height: 36px; background: var(--primary); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }\n.rfp-doc-title { font-size: 12.5px; font-weight: 700; color: var(--primary); }\n.rfp-doc-subtitle { font-size: 10.5px; color: var(--text-light); margin-top: 1px; }\n.rfp-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }\n.rfp-meta-item { background: var(--bg-section); border-radius: 5px; padding: 5px 7px; }\n.rfp-meta-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); }\n.rfp-meta-value { font-size: 11.5px; font-weight: 600; color: var(--text); margin-top: 1px; }\n.rfp-section-title { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); margin-bottom: 5px; }\n.rfp-req-list { list-style: none; display: flex; flex-direction: column; gap: 3px; }\n.rfp-req-list li { font-size: 11.5px; padding-left: 13px; position: relative; line-height: 1.5; }\n.rfp-req-list li::before { content: \"\u2022\"; position: absolute; left: 3px; color: var(--primary); font-weight: 700; }\n.rfp-note { margin-top: 9px; padding: 6px 9px; background: #fff8e7; border-left: 3px solid var(--sand); border-radius: 3px; font-size: 11px; color: #7a5a00; font-style: italic; }\n\n\/* \u2500\u2500 COLUMN BOTTOMS \u2500\u2500 *\/\n.col-bottom {\n padding: 11px 13px;\n background: var(--white);\n flex-shrink: 0;\n max-height: 54%;\n overflow-y: auto;\n}\n\n\/* GREEN frame for Coaching choices window *\/\n#compBottom {\n border-top: none;\n margin: 8px 8px 8px 8px;\n border-radius: 10px;\n border: 2.5px solid #16a34a;\n box-shadow: 0 0 0 3px rgba(22,163,74,0.08), inset 0 1px 0 rgba(22,163,74,0.07);\n}\n#compBottomLabel {\n font-size: 9.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .7px;\n color: #16a34a;\n margin-bottom: 7px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n#compBottomLabel::before {\n content: '';\n display: inline-block;\n width: 8px; height: 8px;\n border-radius: 50%;\n background: #16a34a;\n flex-shrink: 0;\n}\n\n\/* RED frame for Einsch\u00e4tzung window *\/\n#g1Bottom {\n border-top: none;\n margin: 8px;\n border-radius: 10px;\n border: 2.5px solid #ef4444;\n box-shadow: 0 0 0 3px rgba(239,68,68,0.08), inset 0 1px 0 rgba(239,68,68,0.07);\n padding: 11px 13px;\n background: var(--white);\n flex-shrink: 0;\n max-height: 52%;\n overflow-y: auto;\n display: none;\n}\n#g1BottomLabel {\n font-size: 9.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: .7px;\n color: #ef4444;\n margin-bottom: 7px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n#g1BottomLabel::before {\n content: '';\n display: inline-block;\n width: 8px; height: 8px;\n border-radius: 50%;\n background: #ef4444;\n flex-shrink: 0;\n}\n\n\/* \u2500\u2500 CHOICES \u2500\u2500 *\/\n.choice-label { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 7px; line-height: 1.4; }\n.choice-buttons { display: flex; flex-direction: column; gap: 6px; }\n.choice-btn { width: 100%; padding: 8px 11px; background: var(--white); border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 12.5px; font-family: inherit; text-align: left; line-height: 1.4; color: var(--text) !important; transition: border-color .15s, background .15s; display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow: hidden; }\n.choice-btn span { min-width: 0; overflow-wrap: break-word; word-break: break-word; color: var(--text) !important; }\n.choice-btn:hover:not(.locked):not(.disabled) { border-color: var(--green-mid); background: var(--green-light); }\n.choice-btn-label { width: 20px; height: 20px; border-radius: 50%; background: var(--green-light); color: var(--green-mid) !important; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }\n.choice-btn.locked { opacity: .32; cursor: not-allowed; pointer-events: none; }\n.choice-btn.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; color: #4a5568 !important; }\n.choice-btn.disabled span { color: #4a5568 !important; }\n.choice-btn.selected-best { border-color: var(--success); background: #f0fdf4; }\n.choice-btn.selected-good { border-color: var(--warning); background: #fffbeb; }\n.choice-btn.selected-wrong { border-color: var(--danger); background: #fef2f2; }\n.joker-badge { background: var(--sand); color: var(--white); font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 9px; margin-left: auto; white-space: nowrap; flex-shrink: 0; align-self: center; }\n.btn-row { display: flex; gap: 7px; margin-top: 8px; }\n.btn-continue { flex: 1; padding: 9px; background: var(--green-dark); color: var(--white); border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; display: none; }\n.btn-continue:hover { background: var(--green-mid); }\n.btn-back { padding: 9px 13px; background: var(--white); color: var(--text-light); border: 1.5px solid var(--border); border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; white-space: nowrap; }\n.btn-back:hover { border-color: var(--primary); color: var(--primary); }\n\n\/* \u2500\u2500 PRE-CHECK \u2500\u2500 *\/\n.precheck-area { display: none; }\n.precheck-area.show { display: block; }\n.precheck-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--danger); margin-bottom: 6px; }\n.precheck-q { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; line-height: 1.4; }\n.precheck-opts { display: flex; flex-direction: column; gap: 5px; }\n.precheck-opt { background: var(--white); border: 1.5px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 12px; cursor: pointer; text-align: left; font-family: inherit; color: var(--text); line-height: 1.4; transition: border-color .15s; width: 100%; overflow-wrap: break-word; word-break: break-word; }\n.precheck-opt:hover:not(:disabled) { border-color: var(--danger); }\n.precheck-opt.pc-insight { border-color: var(--success); background: #f0fdf4; cursor: default; }\n.precheck-opt.pc-partial { border-color: var(--warning); background: #fffbeb; cursor: default; }\n.precheck-opt.pc-miss { background: var(--bg-section); border-color: var(--border); cursor: default; opacity: .5; }\n.precheck-fb { font-size: 11.5px; color: var(--text); margin-top: 7px; padding: 6px 10px; background: #fff8e7; border-radius: 6px; border-left: 3px solid var(--sand); line-height: 1.5; font-style: italic; animation: fadeUp .3s ease; }\n\n\/* \u2500\u2500 PROCESS PANEL \u2500\u2500 *\/\n.pp-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--text-light); margin-bottom: 7px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }\n.pp-card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 10px 11px; max-height: 190px; overflow-y: auto; }\n.pp-empty { font-size: 11.5px; color: var(--text-light); font-style: italic; text-align: center; padding: 5px 0; }\n.ms-item { display: flex; gap: 7px; position: relative; padding-bottom: 2px; }\n.ms-item:not(:last-child)::after { content: ''; position: absolute; left: 9px; top: 22px; width: 1px; height: calc(100% + 2px); background: var(--border); z-index: 0; }\n.ms-item.done::after { background: var(--success); opacity: .35; }\n.ms-item.current::after { background: var(--primary); opacity: .25; }\n.ms-dot-wrap { width: 20px; flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 1px; position: relative; z-index: 1; }\n.ms-dot { width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; flex-shrink: 0; }\n.ms-dot.done { background: var(--success); color: white; }\n.ms-dot.current { background: var(--primary); color: white; box-shadow: 0 0 0 3px rgba(46,92,168,.18); }\n.ms-dot.future { background: var(--white); border: 1.5px solid var(--border); color: var(--text-light); }\n.ms-body { flex: 1; padding: 0 0 11px 5px; }\n.ms-label { font-size: 11.5px; font-weight: 600; color: var(--text); line-height: 1.35; }\n.ms-label.current { color: var(--primary); }\n.ms-label.future { color: var(--text-light); font-weight: 400; }\n.ms-label.done { color: var(--text-light); font-weight: 500; }\n.ms-here { font-size: 9px; background: var(--primary); color: white; border-radius: 3px; padding: 1px 5px; margin-left: 4px; font-weight: 700; letter-spacing: .3px; vertical-align: middle; }\n.ms-sub { font-size: 10.5px; color: var(--text-light); margin-top: 2px; line-height: 1.4; }\n.finding-item { display: flex; gap: 6px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 12px; line-height: 1.5; }\n.finding-item:last-child { border-bottom: none; padding-bottom: 0; }\n.hm-log-item { padding: 7px 0; border-bottom: 1px solid var(--border); }\n.hm-log-item:last-child { border-bottom: none; padding-bottom: 0; }\n.hm-log-step { font-size: 9.5px; color: var(--text-light); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }\n.hm-log-row { display: flex; gap: 6px; margin-bottom: 2px; font-size: 11.5px; line-height: 1.5; }\n.hm-log-label { font-weight: 700; font-size: 10px; min-width: 56px; flex-shrink: 0; margin-top: 1px; }\n.hm-log-label.pos { color: var(--danger); }\n.hm-log-label.int { color: var(--success); }\n.hm-log-verdict { font-size: 10.5px; color: var(--text-light); font-style: italic; margin-top: 3px; }\n\n\/* \u2500\u2500 HARVARD DASHBOARD \u2500\u2500 *\/\n.dash-header { background: var(--white); border-bottom: 1px solid var(--border); padding: 9px 12px; flex-shrink: 0; }\n.dash-header-title { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-light); margin-bottom: 7px; }\n.progress-bar-wrap { background: var(--border); border-radius: 3px; height: 5px; }\n.progress-bar-fill { height: 5px; border-radius: 3px; background: var(--primary); transition: width .5s ease; }\n.dash-content { flex: 1; overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 9px; }\n.card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 11px; }\n.card-title { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-light); margin-bottom: 8px; }\n.score-card { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: var(--white); border-radius: 8px; padding: 11px; text-align: center; }\n.score-number { font-size: 28px; font-weight: 800; }\n.score-label { font-size: 10px; opacity: .8; margin-top: 1px; }\n.score-bar-wrap { background: rgba(255,255,255,.2); border-radius: 3px; height: 5px; margin-top: 7px; }\n.score-bar-fill { height: 5px; border-radius: 3px; background: var(--sand); transition: width .6s ease; }\n.phase-list { display: flex; flex-direction: column; gap: 3px; }\n.phase-item { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px; font-size: 11px; }\n.phase-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }\n.phase-item.done { color: var(--text-light); }\n.phase-item.pending { color: var(--text-light); opacity: .4; }\n.phase-dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; }\n.phase-item.active .phase-dot { background: var(--primary); border-color: var(--primary); }\n.phase-item.done .phase-dot { background: var(--success); border-color: var(--success); }\n.linsen-list { display: flex; flex-direction: column; gap: 7px; }\n.linse-row { display: flex; align-items: center; gap: 6px; }\n.linse-label { font-size: 11px; flex: 1; }\n.linse-label strong { color: var(--primary); font-size: 10px; display: block; }\n.linse-label small { font-size: 9.5px; color: var(--text-light); }\n.linse-bars { display: flex; gap: 2px; }\n.linse-bar { width: 13px; height: 11px; border-radius: 2px; background: var(--border); transition: background .4s; }\n.linse-bar.hi { background: var(--primary); }\n.linse-bar.mid { background: var(--warning); }\n.linse-bar.lo { background: var(--danger); }\n.linse-status { font-size: 11px; width: 16px; text-align: center; }\n.s-mini-list { display: flex; flex-direction: column; gap: 5px; }\n.s-mini { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; }\n.s-mini-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.s-mini-info { flex: 1; }\n.s-mini-name { font-weight: 600; font-size: 11px; }\n.s-mini-role { font-size: 9.5px; color: var(--text-light); }\n.s-mini-status { font-size: 9.5px; padding: 2px 5px; border-radius: 7px; font-weight: 600; white-space: nowrap; }\n.st-neutral { background: var(--bg-section); color: var(--text-light); }\n.st-active { background: var(--primary-light); color: var(--primary); }\n.st-good { background: #f0fdf4; color: #16a34a; }\n.st-risk { background: #fef2f2; color: #dc2626; }\n\n\/* \u2500\u2500 RESULT SCREEN \u2500\u2500 *\/\n.result-screen { flex: 1; display: none; flex-direction: column; align-items: center; overflow-y: auto; padding: 14px 18px; background: var(--bg-section); }\n.result-screen.show { display: flex; }\n.rg-wrap { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }\n.rg-badge { border-radius: 10px; padding: 16px 18px; text-align: center; color: var(--white); }\n.rg-badge-stufe { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; opacity: .85; margin-bottom: 3px; }\n.rg-badge-name { font-size: 20px; font-weight: 800; margin-bottom: 2px; }\n.rg-badge-pct { font-size: 13px; opacity: .85; }\n.rg-scale { display: flex; gap: 2px; }\n.rg-scale-item { flex: 1; padding: 5px 3px; border-radius: 5px; text-align: center; font-size: 9px; font-weight: 600; background: var(--bg-section); color: var(--text-light); line-height: 1.3; }\n.rg-scale-item.current { color: var(--white); }\n.rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }\n.rg-card { background: var(--white); border: 1px solid var(--border); border-radius: 9px; padding: 12px; }\n.rg-card-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--text-light); margin-bottom: 10px; }\n.rg-radar-center { display: flex; justify-content: center; }\n.rg-step-list { display: flex; flex-direction: column; gap: 8px; }\n.rg-step-row { display: flex; flex-direction: column; gap: 2px; }\n.rg-step-meta { display: flex; justify-content: space-between; align-items: center; }\n.rg-step-name { font-size: 11px; color: var(--text); font-weight: 500; }\n.rg-step-lbl { font-size: 10px; font-weight: 600; }\n.rg-step-bar-bg { background: var(--border); border-radius: 3px; height: 6px; }\n.rg-step-bar-fill { height: 6px; border-radius: 3px; transition: width .7s ease; }\n.rg-assess-list { display: flex; flex-direction: column; gap: 7px; }\n.rg-assess-row { background: var(--white); border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; display: flex; gap: 9px; align-items: flex-start; }\n.rg-assess-icon { font-size: 13px; flex-shrink: 0; margin-top: 1px; }\n.rg-assess-right { flex: 1; }\n.rg-assess-dim { font-size: 10.5px; font-weight: 700; color: var(--primary); margin-bottom: 2px; }\n.rg-assess-text { font-size: 11.5px; color: var(--text); line-height: 1.5; }\n.btn-restart { padding: 11px 28px; background: var(--green-dark); color: var(--white); border: none; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; align-self: center; }\n.btn-restart:hover { background: var(--green-mid); }\n\n\/* \u2500\u2500 TYPING \u2500\u2500 *\/\n.typing { display: flex; gap: 4px; align-items: center; padding: 3px 0; }\n.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-light); animation: tb 1.2s infinite; }\n.typing-dot:nth-child(2) { animation-delay: .2s; }\n.typing-dot:nth-child(3) { animation-delay: .4s; }\n@keyframes tb { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }\n@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }\n.fade-in { animation: fadeUp .35s ease; }\n\n#g1ToastMsg { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--primary-dark); color: #fff; padding: 7px 16px; border-radius: 16px; font-size: 12.5px; font-weight: 600; z-index: 9999; opacity: 0; transition: opacity .3s; pointer-events: none; }\n\n@media print {\n body > *:not(#printArea){ display:none !important; }\n #printArea{ display:block !important; position:fixed; inset:0; background:white; padding:40px; z-index:9999; }\n}\n#printArea { display: none; }\n<\/style>\n<\/head>\n<body>\n<div class=\"certum-app\">\n<div id=\"g1ToastMsg\"><\/div>\n\n<!-- \u2500\u2500 HEADER \u2500\u2500 -->\n<div class=\"header\">\n <div class=\"header-logo\">CERTUM <span>\/ Deal Simulator<\/span><\/div>\n <div class=\"header-badge\">TRAINING<\/div>\n <div class=\"header-right\">\n <span class=\"progress-info\" id=\"stepInfo\">Demo<\/span>\n <button class=\"btn-hdr\" onclick=\"openRFP()\">\ud83d\udccb RFP<\/button>\n <button class=\"btn-hdr\" id=\"btnHarvard\" onclick=\"toggleHarvard()\" style=\"display:none\">\ud83d\udcca Harvard-Analyse<\/button>\n <\/div>\n<\/div>\n\n<!-- \u2500\u2500 MILESTONE BANNER \u2500\u2500 -->\n<div class=\"milestone-banner\" id=\"milestoneBanner\">\n <span id=\"milestoneIcon\">\ud83d\udccc<\/span>\n <span class=\"milestone-text\" id=\"milestoneText\"><\/span>\n <span class=\"milestone-sub\" id=\"milestoneSub\"><\/span>\n<\/div>\n\n<!-- \u2500\u2500 RFP MODAL \u2500\u2500 -->\n<div class=\"rfp-modal-overlay\" id=\"rfpOverlay\" onclick=\"closeRFP(event)\">\n <div class=\"rfp-modal\">\n <div class=\"rfp-modal-header\">\n <span style=\"font-size:18px\">\ud83d\udccb<\/span>\n <div class=\"rfp-modal-title\">CERTUM AG \u2013 Anfrage zur Angebotsabgabe<\/div>\n <button class=\"rfp-modal-close\" onclick=\"closeRFPBtn()\">\u2715<\/button>\n <\/div>\n <div class=\"rfp-modal-body\">\n <div style=\"background:var(--bg-section);border-radius:7px;padding:9px 12px;margin-bottom:14px;font-size:11.5px;color:var(--text-light);\">Vertraulich \u00b7 Eingang: heute, 09:14 Uhr \u00b7 CRM-System Evaluierung<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px;\">\n <div style=\"background:var(--bg-section);border-radius:6px;padding:7px 10px;\"><div style=\"font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);\">Auftragsvolumen<\/div><div style=\"font-size:13px;font-weight:600;margin-top:1px;\">\u20ac 340.000 \u2013 420.000<\/div><\/div>\n <div style=\"background:var(--bg-section);border-radius:6px;padding:7px 10px;\"><div style=\"font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);\">Angebotsfrist<\/div><div style=\"font-size:13px;font-weight:600;margin-top:1px;\">in 21 Tagen<\/div><\/div>\n <div style=\"background:var(--bg-section);border-radius:6px;padding:7px 10px;\"><div style=\"font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);\">Wettbewerber<\/div><div style=\"font-size:13px;font-weight:600;margin-top:1px;\">6 eingeladen<\/div><\/div>\n <div style=\"background:var(--bg-section);border-radius:6px;padding:7px 10px;\"><div style=\"font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);\">Projektstart<\/div><div style=\"font-size:13px;font-weight:600;margin-top:1px;\">Q3 dieses Jahr<\/div><\/div>\n <div style=\"background:var(--bg-section);border-radius:6px;padding:7px 10px;\"><div style=\"font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);\">Projektlaufzeit<\/div><div style=\"font-size:13px;font-weight:600;margin-top:1px;\">18 Monate<\/div><\/div>\n <div style=\"background:var(--bg-section);border-radius:6px;padding:7px 10px;\"><div style=\"font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-light);\">Anwender<\/div><div style=\"font-size:13px;font-weight:600;margin-top:1px;\">120 Personen<\/div><\/div>\n <\/div>\n <div style=\"font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-light);margin-bottom:7px;\">Meilensteine laut RFP<\/div>\n <div style=\"display:flex;flex-direction:column;gap:4px;margin-bottom:14px;\">\n <div style=\"display:flex;gap:9px;align-items:center;padding:6px 10px;background:var(--bg-section);border-radius:6px;font-size:12px;\"><span style=\"color:var(--primary);font-weight:700;width:16px;\">1<\/span> Bieter-Antwort: RFP Go\/No-Go<\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:6px 10px;background:var(--bg-section);border-radius:6px;font-size:12px;\"><span style=\"color:var(--primary);font-weight:700;width:16px;\">2<\/span> Einreichen der fachlichen R\u00fcckfragen<\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:6px 10px;background:var(--bg-section);border-radius:6px;font-size:12px;\"><span style=\"color:var(--primary);font-weight:700;width:16px;\">3<\/span> Vorbereitung Meeting mit Fachbereich<\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:6px 10px;background:var(--primary-light);border-radius:6px;font-size:12px;font-weight:600;color:var(--primary);\"><span style=\"font-weight:700;width:16px;\">T1<\/span> Touchpoint 1: 45 Min. Meeting Fachbereich<\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:6px 10px;background:var(--bg-section);border-radius:6px;font-size:12px;\"><span style=\"color:var(--primary);font-weight:700;width:16px;\">5<\/span> Einladung Angebotspr\u00e4sentation<\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:6px 10px;background:var(--primary-light);border-radius:6px;font-size:12px;font-weight:600;color:var(--primary);\"><span style=\"font-weight:700;width:16px;\">T2<\/span> Touchpoint 2: Angebotspr\u00e4sentation<\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:6px 10px;background:var(--primary-light);border-radius:6px;font-size:12px;font-weight:600;color:var(--primary);\"><span style=\"font-weight:700;width:16px;\">T3<\/span> Touchpoint 3: Meeting mit Einkauf<\/div>\n <\/div>\n <div style=\"font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-light);margin-bottom:7px;\">Technische Anforderungen<\/div>\n <ul class=\"rfp-req-list\" style=\"margin-bottom:13px;\">\n <li>Mobile CRM-App f\u00fcr Au\u00dfendienst (iOS & Android)<\/li>\n <li>REST-API Integration ERP-System (SAP S\/4HANA)<\/li>\n <li>Echtzeit-Reporting Dashboard f\u00fcr Vertriebsleitung<\/li>\n <li>Automatisiertes Lead-Scoring Modul<\/li>\n <li>DSGVO-konforme Datenhaltung (On-Premise oder zertifizierte Cloud DE)<\/li>\n <li>SSO (Azure AD), Offline-Funktionalit\u00e4t Au\u00dfendienst<\/li>\n <li>Onboarding & Schulung f\u00fcr 120 Anwender<\/li>\n <\/ul>\n <div style=\"font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-light);margin-bottom:7px;\">Benannte Ansprechpartner<\/div>\n <div style=\"display:flex;flex-direction:column;gap:6px;margin-bottom:13px;\">\n <div style=\"display:flex;gap:9px;align-items:center;padding:7px 10px;background:var(--bg-section);border-radius:7px;font-size:12.5px;\"><div style=\"width:28px;height:28px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;\">MB<\/div><div><strong>Marcus Brenner<\/strong> \u2013 VP Sales \u00b7 Ansprechpartner & Projektverantwortlicher<\/div><\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:7px 10px;background:var(--bg-section);border-radius:7px;font-size:12.5px;\"><div style=\"width:28px;height:28px;border-radius:50%;background:var(--primary);color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;\">FM<\/div><div><strong>Frank M\u00fcller<\/strong> \u2013 Leiter Einkauf \u00b7 Vertragsverhandlung & Lieferantenmanagement<\/div><\/div>\n <div style=\"display:flex;gap:9px;align-items:center;padding:7px 10px;background:var(--bg-section);border-radius:7px;font-size:12.5px;\"><div style=\"width:28px;height:28px;border-radius:50%;background:var(--primary-dark);color:white;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;\">KS<\/div><div><strong>Kai Stein<\/strong> \u2013 IT-Leiter \u00b7 Technische Evaluierung<\/div><\/div>\n <\/div>\n <div class=\"rfp-note\">\u26a0\ufe0f Hinweis: Der Kunde ist offen f\u00fcr weitere Kl\u00e4rungsgespr\u00e4che sofern diese im Prozesskontext legitim sind. Schriftliche Angebote an M. Brenner. Pr\u00e4sentationen nur auf Einladung.<\/div>\n <\/div>\n <div class=\"rfp-modal-footer\">\n <button class=\"btn-close-modal\" onclick=\"closeRFPBtn()\">Schlie\u00dfen<\/button>\n <button class=\"btn-pdf\" onclick=\"printRFP()\">\u2b07 Als PDF speichern<\/button>\n <\/div>\n <\/div>\n<\/div>\n<div id=\"printArea\"><\/div>\n\n<!-- \u2500\u2500 MAIN LAYOUT \u2500\u2500 -->\n<div class=\"main\" id=\"mainLayout\">\n\n <!-- INTRO -->\n <div class=\"intro-screen\" id=\"introScreen\">\n <div class=\"intro-logo\">\ud83c\udfaf<\/div>\n <div class=\"intro-title\">CERTUM Deal Simulator<\/div>\n <div class=\"intro-subtitle\">Du spielst Julia, Account Executive. 7 kritische Entscheidungen entlang der RFP-Meilensteine. Kein Freitext \u2013 nur echte Optionen.<\/div>\n <div class=\"intro-milestones\">\n <h3>RFP-Meilensteine<\/h3>\n <div class=\"intro-ms-item\"><div class=\"intro-ms-num\">1<\/div><span>Go\/No-Go zum RFP<\/span><\/div>\n <div class=\"intro-ms-item\"><div class=\"intro-ms-num\">2<\/div><span>Fachliche R\u00fcckfragen einreichen<\/span><\/div>\n <div class=\"intro-ms-item\"><div class=\"intro-ms-num\">3<\/div><span>Vorbereitung Meeting Fachbereich<\/span><\/div>\n <div class=\"intro-ms-item\"><div class=\"intro-ms-num\" style=\"background:var(--sand);\">T1<\/div><span><strong>Touchpoint 1:<\/strong> 45 Min. Meeting Fachbereich<\/span><\/div>\n <div class=\"intro-ms-item\"><div class=\"intro-ms-num\">5<\/div><span>Vorbereitung Angebotspr\u00e4sentation<\/span><\/div>\n <div class=\"intro-ms-item\"><div class=\"intro-ms-num\" style=\"background:var(--sand);\">T2<\/div><span><strong>Touchpoint 2:<\/strong> Angebotspr\u00e4sentation<\/span><\/div>\n <div class=\"intro-ms-item\"><div class=\"intro-ms-num\" style=\"background:var(--sand);\">T3<\/div><span><strong>Touchpoint 3:<\/strong> Meeting mit Einkauf<\/span><\/div>\n <\/div>\n <div class=\"intro-features\">\n <div class=\"intro-feat\">\ud83d\udccb Echter RFP<\/div>\n <div class=\"intro-feat\">\ud83e\udde0 Antizipation<\/div>\n <div class=\"intro-feat\">\u2696\ufe0f Harvard-Prozess<\/div>\n <div class=\"intro-feat\">\ud83d\udcca Reifegrad-Chart<\/div>\n <\/div>\n <button class=\"btn-start\" onclick=\"startSim()\">Simulation starten \u2192<\/button>\n <\/div>\n\n <!-- RESULT -->\n <div class=\"result-screen\" id=\"resultScreen\"><\/div>\n\n <!-- \u2500\u2500 COLUMN ORDER: PROCESS \u2192 COACHING \u2192 [DIVIDER] \u2192 ANTIZIPATION \u2500\u2500 -->\n\n <!-- 1. PROZESSFORTSCHRITT (left, 24%) -->\n <div class=\"process-col\" id=\"processCol\">\n <div class=\"col-header proc\">\ud83d\udccd Prozessfortschritt<\/div>\n <div id=\"processInner\" style=\"padding:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:14px 12px;\">\n <div>\n <div class=\"pp-title\">Meilensteine<\/div>\n <div id=\"milestoneStepper\"><\/div>\n <\/div>\n <div id=\"findingsWrap\" style=\"display:none\">\n <div class=\"pp-title\">\ud83d\udd0d Erkenntnisse<\/div>\n <div class=\"pp-card\" id=\"findingsList\"><\/div>\n <\/div>\n <div>\n <div class=\"pp-title\">\u2696\ufe0f Harvard Momente<\/div>\n <div class=\"pp-card\" id=\"hmLogList\"><div class=\"pp-empty\">Erscheinen nach jeder Entscheidung<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- 2. BEGLEITUNG \/ COACH (middle, 38%) \u2014 dark green header -->\n <div class=\"comp-col\" id=\"compCol\" style=\"border-left:1px solid var(--border);border-right:none;\">\n <div class=\"col-header comp\">\n \ud83d\udfe2 Begleitung\n <span class=\"ch-accent\">Coach<\/span>\n <\/div>\n <div class=\"chat-messages\" id=\"compMsg\"><\/div>\n <div class=\"col-bottom\" id=\"compBottom\" style=\"display:none;\">\n <div id=\"compBottomLabel\">Deine Entscheidung<\/div>\n <div class=\"choice-label\" id=\"choiceLabel\"><\/div>\n <div class=\"choice-buttons\" id=\"choiceButtons\"><\/div>\n <div class=\"btn-row\">\n <button class=\"btn-back\" id=\"btnBack\" style=\"display:none\" onclick=\"goBack()\">\u2190 Zur\u00fcck<\/button>\n <button class=\"btn-continue\" id=\"btnContinue\">Weiter \u2192<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- DIVIDER between coaching and antizipation -->\n <div class=\"col-divider\" id=\"colDivider\"><\/div>\n\n <!-- 3. EINSCH\u00c4TZUNG \/ ANTIZIPATION (right, 38%) \u2014 sand header -->\n <div class=\"g1-col\" id=\"g1Col\" style=\"border-right:1px solid var(--border);\">\n <div class=\"col-header g1\">\n \ud83d\udfe1 Antizipation\n <span class=\"ch-accent\">Einsch\u00e4tzung<\/span>\n <\/div>\n <div class=\"chat-messages\" id=\"g1Msg\"><\/div>\n <div id=\"g1Bottom\">\n <div id=\"g1BottomLabel\">\u270f\ufe0f Deine Einsch\u00e4tzung<\/div>\n <div class=\"precheck-area\" id=\"precheckArea\"><\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500 HARVARD COLUMN (toggle) \u2500\u2500 -->\n <div class=\"harvard-col\" id=\"harvardCol\">\n <div class=\"col-header harv\">\ud83d\udcca Harvard-Analyse<\/div>\n <div class=\"dash-header\">\n <div class=\"dash-header-title\">Fortschritt<\/div>\n <div class=\"progress-bar-wrap\"><div class=\"progress-bar-fill\" id=\"progBar\" style=\"width:0%\"><\/div><\/div>\n <\/div>\n <div class=\"dash-content\">\n <div class=\"score-card\">\n <div class=\"score-number\" id=\"scoreNum\">0%<\/div>\n <div class=\"score-label\">Harvard-Score<\/div>\n <div class=\"score-bar-wrap\"><div class=\"score-bar-fill\" id=\"scoreBar\" style=\"width:0%\"><\/div><\/div>\n <\/div>\n <div class=\"card\"><div class=\"card-title\">Harvard-Prozess<\/div><div class=\"phase-list\" id=\"phaseList\"><\/div><\/div>\n <div class=\"card\"><div class=\"card-title\">Harvard-Linsen<\/div><div class=\"linsen-list\" id=\"linsenList\"><\/div><\/div>\n <div class=\"card\"><div class=\"card-title\">Stakeholder CERTUM<\/div><div class=\"s-mini-list\" id=\"shList\"><\/div><\/div>\n <\/div>\n <\/div>\n\n<\/div><!-- \/.main -->\n<\/div><!-- \/.certum-app -->\n\n<script>\n\/\/ \u2500\u2500 STATE \u2500\u2500\nlet S = {\n step:0, score:0, max:0, phase:0,\n currentIdx:0,\n stepScores:[],\n stepHistory:[],\n linsen:{i:2, o:1, k:1, b:2, ba:1},\n sh:[\n {ini:'MB', name:'M. Brenner', role:'VP Sales', st:'neutral'},\n {ini:'KS', name:'K. Stein', role:'IT-Leiter', st:'neutral'},\n {ini:'AL', name:'A. Lauer', role:'Betriebsrat', st:'hidden'},\n {ini:'FM', name:'F. M\u00fcller', role:'Einkauf', st:'neutral'},\n {ini:'TW', name:'T. Weber', role:'CFO', st:'hidden'},\n ],\n};\n\nconst PHASES = ['Vorbereitung & Go\/No-Go','Interessen verstehen','Optionen & Pr\u00e4sentation','Kriterien & Einkauf','Vereinbarung'];\nconst STEP_LABELS = ['Go\/No-Go','R\u00fcckfragen','Vorb. TP1','Touchpoint 1','Vorb. TP2','Touchpoint 2','Einkauf TP3'];\nconst MILESTONES = [\n {icon:'\ud83d\udccb', text:'Meilenstein 1: Go\/No-Go', sub:'RFP analysieren \u2013 was steckt wirklich dahinter?'},\n {icon:'\u270d\ufe0f', text:'Meilenstein 2: Fachliche R\u00fcckfragen', sub:'Was verr\u00e4t die Art deiner Fragen \u00fcber dich?'},\n {icon:'\ud83d\udd0d', text:'Meilenstein 3: Vorbereitung TP1', sub:'45 Min. Meeting Fachbereich \u2013 wie bereitest du dich vor?'},\n {icon:'\ud83e\udd1d', text:'Touchpoint 1: Meeting Fachbereich', sub:'45 Minuten \u2013 jede Minute z\u00e4hlt'},\n {icon:'\ud83d\udcca', text:'Meilenstein 5: Vorbereitung Pr\u00e4sentation', sub:'Teilnehmerkreis unbekannt \u2013 wie gehst du damit um?'},\n {icon:'\ud83c\udfaf', text:'Touchpoint 2: Angebotspr\u00e4sentation', sub:'Den Raum lesen \u2013 Interessen werden gezeigt, nicht genannt'},\n {icon:'\ud83d\udcbc', text:'Touchpoint 3: Meeting mit Einkauf', sub:'M\u00fcller spricht \u2013 Weber denkt. Erkennst du den Joker?'},\n];\n\nconst STEPS = [\n {\n phase:0,\n comp:[\n {r:'assistant',av:'CO', t:'Das CERTUM RFP ist soeben eingegangen. 6 Wettbewerber wurden parallel angeschrieben. Bevor du irgendetwas tust \u2013 der Go\/No-Go Moment ist strategischer als er aussieht.'},\n {r:'rfp'},\n {r:'assistant',av:'CO', t:'\u26a0\ufe0f <strong>Der h\u00e4ufigste Fehler:<\/strong> Das RFP wird als Anforderungsliste gelesen. Alle 6 Wettbewerber lesen dieselbe Liste. Wer nur pr\u00fcft ob er liefern kann, k\u00e4mpft im Commodity-Wettbewerb.'},\n ],\n g1:[\n {r:'system',av:'G1', t:'\ud83d\udd0d <strong>Antizipation \u2013 Was denkt CERTUM beim Versenden des RFPs?<\/strong>'},\n {r:'assistant',av:'G1', t:'<strong>Brenner (VP Sales):<\/strong> <em>\"Ich brauche eine L\u00f6sung die unser Wachstum skaliert. Intern habe ich Gegenwind von IT und Betriebsrat. Das Projekt muss ein Erfolg werden \u2013 das steht pers\u00f6nlich f\u00fcr mich auf dem Spiel.\"<\/em>'},\n {r:'assistant',av:'G1', t:'<strong>Was fehlt im RFP?<\/strong> Kein Wort \u00fcber den Betriebsrat. Bei 120 Anwendern und einem 7 Jahre alten System ist das kein Zufall \u2013 und kein Unwichtiges.<br><br>Harvard Prinzip 1: <strong>Interessen \u2260 Positionen. Unsichtbare Stakeholder \u2260 unwichtige Stakeholder.<\/strong>'},\n ],\n pc:{\n q:'Erster Blick auf das RFP: Siehst du alle relevanten Stakeholder?',\n opts:[\n {id:'a', txt:'Ja \u2013 Brenner, Weber und Stein sind benannt. Das sind die Entscheider.', level:'miss'},\n {id:'b', txt:'Nein \u2013 bei 120 Anwendern und 7 Jahren altem System fehlt der Betriebsrat. Das ist ein Blind Spot.', level:'insight', lauer:true},\n {id:'c', txt:'Ich w\u00fcrde gezielt nachfragen wer intern noch involviert ist.', level:'partial'},\n ],\n fb:'Anna Lauer (Betriebsrat) taucht im RFP nie auf \u2013 sie kann den Deal dennoch in der Endphase blockieren. Unsichtbare Stakeholder sind die gef\u00e4hrlichsten.'\n },\n ql:'Worauf achtest du beim Go\/No-Go f\u00fcr dieses RFP?',\n choices:[\n {id:'a',lb:'A', txt:'Ob alle technischen Anforderungen aus der Liste mit unserem Portfolio abgedeckt werden k\u00f6nnen.', q:'wrong',\n cr:'\u274c <strong>Positions-Denken.<\/strong> Du pr\u00fcfst Lieferf\u00e4higkeit \u2013 alle 6 Wettbewerber tun dasselbe. Kein Differenzierungspunkt.',\n gr:'Linse \"Interessen\" nicht aktiviert. CERTUM sieht dich als Standard-Anbieter.', sc:0, ld:{}, sd:{},\n pi:{pos:'RFP passt zu unserem Portfolio \u2013 also rein.',int:'Was ist CERTUMs echtes Problem das im RFP nicht steht?'}},\n {id:'b',lb:'B', txt:'Ob Volumen, Timing und Wettbewerbssituation wirtschaftlich sinnvoll sind \u2013 und ob die Gewinnwahrscheinlichkeit den Aufwand rechtfertigt.', q:'good',\n cr:'\u2705 <strong>Gut!<\/strong> Strategisches Ressourcendenken. Aber du fokussierst noch auf dich \u2013 nicht auf CERTUMs echte Interessen.',\n gr:'Wirtschaftliche Analyse gut. Interesse-Dimension noch nicht aktiviert.', sc:1, ld:{i:1}, sd:{0:'active'},\n pi:{pos:'Strategische Kundenbewertung vor dem Go.',int:'Was ist CERTUMs Wachstumsdruck \u2013 warum jetzt, warum 380k?'}},\n {id:'c',lb:'C', txt:'Ob wir die Interessen hinter dem RFP verstehen UND ob wir einen strategischen Vorteil gegen\u00fcber 6 Wettbewerbern aufbauen k\u00f6nnen. Nicht nur: k\u00f6nnen wir liefern? Sondern: warum sollte CERTUM uns w\u00e4hlen?', q:'best',\n cr:'\ud83c\udfc6 <strong>Harvard-Niveau!<\/strong> Du fragst nach strategischer Differenzierung, nicht nach Lieferf\u00e4higkeit.',\n gr:'Linse \"Interessen\" aktiviert. Du startest mit dem richtigen Blickwinkel.', sc:2, ld:{i:2, b:1}, sd:{0:'active'},\n pi:{pos:'RFP analysieren um Go\/No-Go zu entscheiden.',int:'Brenner pers\u00f6nlich, IT-Skepsis, Betriebsrat fehlt \u2013 das sind die echten Faktoren.'}},\n ]\n },\n {\n phase:0,\n comp:[\n {r:'assistant',av:'CO', t:'Das RFP erlaubt schriftliche R\u00fcckfragen bis Ende der Woche. Das ist kein Pflichtschritt \u2013 es ist eine strategische Chance.'},\n {r:'assistant',av:'CO', t:'Deine Fragen sind das erste Signal das CERTUM von dir bekommt. Sie zeigen wie du denkst \u2013 bevor du ein Wort gesprochen hast.'},\n ],\n g1:[\n {r:'system',av:'G1', t:'\ud83d\udd0d <strong>Antizipation \u2013 Wie liest Brenner eure R\u00fcckfragen?<\/strong>'},\n {r:'assistant',av:'G1', t:'<strong>Brenner liest jede Frage und denkt:<\/strong> <em>\"Verstehen die wirklich unser Problem \u2013 oder suchen die nur technische L\u00fccken?\"<\/em>'},\n {r:'assistant',av:'G1', t:'Wenn ihr nach <strong>Interessen<\/strong> fragt statt nach Datenbankversionen, seid ihr in Brenners Ged\u00e4chtnis. Alle anderen fragen nach SAP-Schnittstellen.'},\n ],\n pc:{\n q:'Was ist das prim\u00e4re Ziel eurer R\u00fcckfragen an CERTUM?',\n opts:[\n {id:'a', txt:'Technische Unklarheiten kl\u00e4ren \u2013 SAP-Integration, DSGVO-Details, Offline-Umfang.', level:'miss'},\n {id:'b', txt:'Entscheidungsstruktur und echte Interessen besser verstehen.', level:'insight'},\n {id:'c', txt:'Uns als kompetenten und vorbereiteten Partner positionieren.', level:'partial'},\n ],\n fb:'Fragen sind Positionierung. Was du fragst zeigt wie du denkst \u2013 noch bevor du sprichst.'\n },\n ql:'Worauf achtest du bei der Formulierung eurer R\u00fcckfragen?',\n choices:[\n {id:'a',lb:'A', txt:'Technische Unklarheiten kl\u00e4ren: SAP S\/4HANA Integration, DSGVO-Anforderungen, Offline-Funktionsumfang.', q:'wrong',\n cr:'\u274c <strong>Technisch korrekt \u2013 strategisch verschenkt.<\/strong> Das fragen alle 6. Brenner sieht: \"Ein weiterer Anbieter der nach Specs fragt.\"',\n gr:'Keine Differenzierung. Ihr seid in Brenners Ged\u00e4chtnis austauschbar.', sc:0, ld:{}, sd:{},\n pi:{pos:'Technische L\u00fccken im RFP schlie\u00dfen.',int:'Was verr\u00e4t eine technische Frage \u00fcber unsere strategische Reife?'}},\n {id:'b',lb:'B', txt:'Fragen so formulieren, dass sie unsere St\u00e4rken sichtbar machen \u2013 z.B. nach SAP-Integrationserfahrungen fragen wo wir f\u00fchrend sind.', q:'good',\n cr:'\u2705 <strong>Taktisch gut!<\/strong> Brenner bemerkt die Positionierung. Aber du fokussierst noch auf dich statt auf CERTUMs Interessen.',\n gr:'Leichte Differenzierung. Brenner notiert euch als aktiv.', sc:1, ld:{i:1, b:1}, sd:{0:'active'},\n pi:{pos:'Unsere St\u00e4rken durch Fragen positionieren.',int:'Was will Brenner aus unseren Fragen \u00fcber uns lernen?'}},\n {id:'c',lb:'C', txt:'Fragen stellen die echte Interessen und Entscheidungskriterien enth\u00fcllen \u2013 z.B. welches Ergebnis das Projekt f\u00fcr Brenner pers\u00f6nlich erfolgreich macht.', q:'best',\n cr:'\ud83c\udfc6 <strong>Meisterzug!<\/strong> Brenner denkt: \"Die wollen verstehen was wir wirklich brauchen.\" Das hebt euch sofort aus dem Wettbewerb heraus.',\n gr:'Linse \"Interessen\" gest\u00e4rkt. Brenner sieht euch als Partner, nicht als Vendor.', sc:2, ld:{i:2, b:1, o:1}, sd:{0:'good'},\n pi:{pos:'Mehr Klarheit \u00fcber die Anforderungen gewinnen.',int:'Jede Frage ist ein Spiegel \u2013 welches Bild von uns wollen wir erzeugen?'}},\n ]\n },\n {\n phase:1,\n comp:[\n {r:'assistant',av:'CO', t:'Das 45-Minuten-Meeting mit dem Fachbereich ist in 3 Tagen best\u00e4tigt. Brenner ist gesetzt. Kai Stein (IT) m\u00f6glicherweise dabei \u2013 Brenner war in der Best\u00e4tigung vage.'},\n {r:'assistant',av:'CO', t:'45 Minuten sind kurz. Was du in diesen 45 Minuten <em>nicht<\/em> erf\u00e4hrst, fehlt dir beim Angebot. Vorbereitung bedeutet hier: <strong>Fragen, nicht Folien.<\/strong>'},\n ],\n g1:[\n {r:'system',av:'G1', t:'\ud83d\udd0d <strong>Antizipation \u2013 Was erwartet der Fachbereich?<\/strong>'},\n {r:'assistant',av:'G1', t:'<strong>Brenner:<\/strong> <em>\"Ich hoffe die kommen nicht mit einer Folie.\"<\/em><br><strong>Stein (falls dabei):<\/strong> <em>\"Ich will wissen ob die unsere Infrastruktur wirklich verstehen.\"<\/em><br><strong>Au\u00dfendienst-Mitarbeiter:<\/strong> <em>\"Macht das meinen Alltag leichter?\"<\/em>'},\n {r:'assistant',av:'G1', t:'Jeder im Raum hat eine Frage die er <strong>nicht stellt<\/strong>. Deine Aufgabe: diese ungestellten Fragen antizipieren \u2013 und Raum schaffen damit sie gestellt werden.'},\n ],\n pc:{\n q:'Was ist dein wichtigstes Ziel f\u00fcr das 45-Minuten-Meeting?',\n opts:[\n {id:'a', txt:'Unser Produkt professionell vorstellen und die RFP-Anforderungen abdecken.', level:'miss'},\n {id:'b', txt:'Vertrauen aufbauen und echte Interessen verstehen.', level:'insight'},\n {id:'c', txt:'Klarheit \u00fcber die interne Entscheidungsstruktur gewinnen.', level:'partial'},\n ],\n fb:'Wer redet, verliert Information. Das wichtigste Werkzeug im Meeting ist eine gute offene Frage.'\n },\n ql:'Worauf legst du bei der Vorbereitung auf das Fachbereich-Meeting den Schwerpunkt?',\n choices:[\n {id:'a',lb:'A', txt:'Eine professionelle Produktvorstellung mit Live-Demo vorbereiten \u2013 zeigen was unser System kann.', q:'wrong',\n cr:'\u274c <strong>Falscher Fokus.<\/strong> Du bereitest eine Antwort vor \u2013 aber du kennst die echten Fragen noch nicht.',\n gr:'Demo-Vorbereitung ohne Kontext. Brenner erwartet Zuh\u00f6ren \u2013 du bringst Reden.', sc:0, ld:{}, sd:{},\n pi:{pos:'Gut vorbereitet und professionell in das Meeting gehen.',int:'Eine Agenda schicken = Kontrolle \u00fcbernehmen. Wessen Agenda soll das sein?'}},\n {id:'b',lb:'B', txt:'Den Schmerz des 7 Jahre alten Systems analysieren und offene Fragen f\u00fcr das Gespr\u00e4ch vorbereiten.', q:'good',\n cr:'\u2705 <strong>Gut!<\/strong> Du denkst in Problemen statt in Produkten. Brenner wird das merken.',\n gr:'Linse \"Interessen\" aktiviert. Du bist auf das Gespr\u00e4ch vorbereitet, nicht auf die Pr\u00e4sentation.', sc:1, ld:{i:1, b:1}, sd:{0:'good'},\n pi:{pos:'F\u00fcr jeden Stakeholder gezielt vorbereiten.',int:'Was ist die ungestellte Frage jedes Teilnehmers die er nie laut sagen w\u00fcrde?'}},\n {id:'c',lb:'C', txt:'F\u00fcr jeden m\u00f6glichen Teilnehmer eine Antizipation erstellen: Was treibt diese Person, was ist ihr Kerninteresse, was k\u00f6nnte ihr Einwand sein?', q:'best',\n cr:'\ud83c\udfc6 <strong>Harvard-Vorbereitung!<\/strong> Du gehst nicht in ein Meeting \u2013 du gehst in ein strategisches Gespr\u00e4ch bei dem du bereits wei\u00dft was die Gegenseite denkt.',\n gr:'Alle Stakeholder antizipiert. Du kannst im Meeting Energie lesen statt Folien zeigen.', sc:2, ld:{i:2, b:2, k:1}, sd:{0:'good', 1:'active'},\n pi:{pos:'45 Minuten optimal nutzen.',int:'Das wichtigste Meeting-Werkzeug ist eine gute Frage \u2013 nicht eine Folie.'}},\n ]\n },\n {\n phase:1,\n comp:[\n {r:'assistant',av:'CO', t:'Das Meeting beginnt. Brenner sitzt dir gegen\u00fcber, Stein daneben \u2013 Arme verschr\u00e4nkt. Zwei Vertriebsmitarbeiter wirken gespannt. Du hast 45 Minuten.'},\n {r:'assistant',av:'CO', t:'Die ersten 10 Minuten setzen den Ton f\u00fcr den gesamten Deal. <strong>Vertrauen entsteht hier \u2013 oder nie.<\/strong>'},\n ],\n g1:[\n {r:'system',av:'G1', t:'\ud83d\udd0d <strong>Antizipation \u2013 Was passiert gerade in diesem Raum?<\/strong>'},\n {r:'assistant',av:'G1', t:'<strong>Brenner:<\/strong> <em>\"Hoffentlich keine Feature-Parade.\"<\/em><br><strong>Stein:<\/strong> <em>\"Ich warte auf den ersten technischen Fehler.\"<\/em><br><strong>Au\u00dfendienstler:<\/strong> <em>\"Macht das unseren Job leichter?\"<\/em>'},\n {r:'assistant',av:'G1', t:'Wer in den ersten 10 Minuten <strong>zuh\u00f6rt statt spricht<\/strong>, gewinnt mehr Information als jede Marktanalyse liefern kann. Steins verschr\u00e4nkte Arme sind keine Feindseligkeit \u2013 sie sind Angst. <strong>Kontrolle<\/strong> ist sein Kerninteresse.'},\n ],\n pc:{\n q:'Stein sitzt mit verschr\u00e4nkten Armen. Was nimmst du wahr?',\n opts:[\n {id:'a', txt:'Er ist ein Gegner \u2013 ich muss ihn mit Fakten und Specs \u00fcberzeugen.', level:'miss'},\n {id:'b', txt:'Er hat Angst, keine Feindseligkeit. Kontrolle und Sicherheit sind sein Kerninteresse.', level:'insight'},\n {id:'c', txt:'Ich lese den Raum erstmal ohne zu bewerten.', level:'partial'},\n ],\n fb:'Verschr\u00e4nkte Arme sind kein Nein \u2013 sie sind eine Frage: \"Bist du wirklich hier um zu helfen?\"'\n },\n ql:'Das Meeting beginnt. Worauf achtest du in den ersten 10 Minuten?',\n choices:[\n {id:'a',lb:'A', txt:'Den vorbereiteten Ablauf vorstellen und die Agenda setzen \u2013 strukturiert und professionell starten.', q:'wrong',\n cr:'\u274c <strong>Du \u00fcbernimmst den Rahmen \u2013 und verlierst den Raum.<\/strong> Brenner wollte ein Gespr\u00e4ch, kein Briefing.',\n gr:'Brenner ist h\u00f6flich aber emotional distanziert. Der erste Eindruck ist verpasst.', sc:0, ld:{b:-1}, sd:{},\n pi:{pos:'Stein ist skeptisch und blockiert.',int:'Stein will Kontrolle \u2013 nicht \u00dcberzeugung. Was gibt ihm das Gef\u00fchl der Sicherheit?'}},\n {id:'b',lb:'B', txt:'Beobachten: Wer spricht mit wem, wer nickt, wer z\u00f6gert \u2013 die informelle Hierarchie im Raum aktiv lesen.', q:'good',\n cr:'\u2705 <strong>Stark!<\/strong> Du liest den Raum. Du wei\u00dft jetzt wer wirklich Einfluss hat \u2013 unabh\u00e4ngig vom Titel.',\n gr:'Informelle Dynamik erkannt. Du wei\u00dft mehr als deine Mitbewerber.', sc:1, ld:{b:1, i:1}, sd:{0:'active', 1:'active'},\n pi:{pos:'Steins Einw\u00e4nde m\u00fcssen adressiert werden.',int:'Ein Einwand ist eine Angst. Welche Angst steckt hinter Steins Cloud-Skepsis?'}},\n {id:'c',lb:'C', txt:'Mit einer einzigen offenen Frage starten die den echten Schmerz adressiert \u2013 und dann aktiv zuh\u00f6ren statt sprechen.', q:'best',\n cr:'\ud83c\udfc6 <strong>Perfekt!<\/strong> Brenner redet und verr\u00e4t was kein RFP enth\u00e4lt. Stein senkt langsam die Arme.',\n gr:'Brenner \u00f6ffnet sich. Er sagt Dinge die er keinem anderen Anbieter gesagt hat.', sc:2, ld:{i:2, b:2, o:1}, sd:{0:'good', 1:'active'},\n pi:{pos:'Stein ist ein schwieriger Gespr\u00e4chspartner.',int:'Stein als Experten anerkennen verwandelt den Gegner in den Verb\u00fcndeten.'}},\n ]\n },\n {\n phase:2,\n comp:[\n {r:'assistant',av:'CO', t:'Ihr habt die Einladung zur Angebotspr\u00e4sentation. Datum und Uhrzeit best\u00e4tigt. Aber: die Einladung nennt keine Teilnehmernamen \u2013 nur <em>\"relevante Stakeholder\"<\/em>.'},\n {r:'assistant',av:'CO', t:'Die Frage wer im Raum sitzt entscheidet was die Pr\u00e4sentation leisten muss \u2013 und welche Sprache sie sprechen muss.'},\n ],\n g1:[\n {r:'system',av:'G1', t:'\ud83d\udd0d <strong>Antizipation \u2013 Was wei\u00dft du bereits \u00fcber m\u00f6gliche Teilnehmer?<\/strong>'},\n {r:'assistant',av:'G1', t:'<strong>Brenner<\/strong> sicher. <strong>Stein<\/strong> sehr wahrscheinlich. <strong>Weber (CFO)<\/strong> m\u00f6glich \u2013 das w\u00e4re ein Signal dass der Deal intern hochgestuft wurde. <strong>Lauer (Betriebsrat)<\/strong>? Unwahrscheinlich \u2013 aber nicht ausgeschlossen.'},\n {r:'assistant',av:'G1', t:'Weber denkt in ROI und Risiko. Stein in Infrastruktur und Kontrolle. Lauer in Mitarbeiterschutz. <strong>Eine Pr\u00e4sentation die f\u00fcr alle gleichzeitig spricht, erreicht niemanden vollst\u00e4ndig.<\/strong>'},\n ],\n pc:{\n q:'Einladung ohne Teilnehmerliste. Was ist dein gr\u00f6\u00dftes Risiko?',\n opts:[\n {id:'a', txt:'Inhaltlich nicht auf alle Themen vorbereitet zu sein.', level:'partial'},\n {id:'b', txt:'Weber k\u00f6nnte dabei sein \u2013 dann braucht die Pr\u00e4sentation eine andere Sprache.', level:'insight'},\n {id:'c', txt:'Jemanden zu untersch\u00e4tzen der intern mehr Einfluss hat als sein Titel zeigt.', level:'partial'},\n ],\n fb:'Unbekannte Teilnehmer sind eine Einladung zur Antizipation \u2013 keine Einladung zur Panik.'\n },\n ql:'Die Einladung nennt keinen Teilnehmerkreis. Worauf achtest du bei der Vorbereitung?',\n choices:[\n {id:'a',lb:'A', txt:'Eine vollst\u00e4ndige Standard-Pr\u00e4sentation vorbereiten die alle Ebenen abdeckt \u2013 von Technik \u00fcber Projektplan bis Preis.', q:'wrong',\n cr:'\u274c <strong>F\u00fcr jeden etwas \u2013 f\u00fcr niemanden wirklich relevant.<\/strong> Weber schl\u00e4ft nach 10 Minuten Technik ein.',\n gr:'Generische Pr\u00e4sentation. Kein Stakeholder wird sich wirklich angesprochen f\u00fchlen.', sc:0, ld:{}, sd:{},\n pi:{pos:'Starke Pr\u00e4sentation = \u00dcberzeugung.',int:'F\u00fcr wen genau? Jeder Stakeholder braucht einen anderen Frame.'}},\n {id:'b',lb:'B', txt:'Bei Brenner informell nachfragen wer dabei sein wird \u2013 damit wir gezielt vorbereiten k\u00f6nnen.', q:'good',\n cr:'\u2705 <strong>Guter Zug!<\/strong> Information beschaffen bevor die Situation eintritt. Brenner wird die Frage sch\u00e4tzen.',\n gr:'Brenner gibt einen Hinweis. Ihr wisst mehr \u2013 aber habt noch keinen Plan B.', sc:1, ld:{b:1, i:1}, sd:{0:'good'},\n pi:{pos:'Brenner ist der Hauptansprechpartner.',int:'Wer ist sonst noch involviert \u2013 wen hat die Einladung bewusst nicht erw\u00e4hnt?'}},\n {id:'c',lb:'C', txt:'F\u00fcr alle m\u00f6glichen Stakeholder-Kombinationen vorbereiten: Jeden antizipieren, seine Hauptfrage kennen, eine flexible Einstiegsstruktur entwickeln die sich live anpasst.', q:'best',\n cr:'\ud83c\udfc6 <strong>Antizipation in Reinform!<\/strong> Du bereitest dich nicht auf eine Pr\u00e4sentation vor \u2013 du bereitest dich auf einen Raum voller Menschen mit verschiedenen Interessen vor.',\n gr:'Maximale Vorbereitung. Egal wer kommt \u2013 du bist f\u00fcr alle Szenarien ger\u00fcstet.', sc:2, ld:{i:2, b:1, o:2, k:1}, sd:{0:'good', 1:'good'},\n pi:{pos:'Unbekannte Teilnehmer = Risiko.',int:'Unbekannte Teilnehmer = Chance zur Antizipation. Was k\u00f6nnen wir f\u00fcr jeden denkbaren Frame vorbereiten?'}},\n ]\n },\n {\n phase:2,\n comp:[\n {r:'assistant',av:'CO', t:'Die Angebotspr\u00e4sentation beginnt. Im Raum: Brenner, Stein und zwei Au\u00dfendienstmitarbeiter.'},\n {r:'assistant',av:'CO', t:'F\u00fcnf Menschen. F\u00fcnf unterschiedliche Interessen. Brenner will \u00dcberzeugung. Stein will Kontrolle. Die Au\u00dfendienstler wollen Einfachheit. Wer eine generische Pr\u00e4sentation h\u00e4lt, erreicht niemanden vollst\u00e4ndig.'},\n ],\n g1:[\n {r:'system',av:'G1', t:'\ud83d\udd0d <strong>Antizipation \u2013 Was geht gerade in den K\u00f6pfen vor?<\/strong>'},\n {r:'assistant',av:'G1', t:'<strong>Brenner:<\/strong> <em>\"Endlich \u2013 ich hoffe das \u00fcberzeugt mein Team.\"<\/em><br><strong>Stein:<\/strong> <em>\"Ich warte auf den ersten Fehler.\"<\/em><br><strong>Au\u00dfendienstler:<\/strong> <em>\"Bitte nicht noch eine komplizierte Software.\"<\/em>'},\n {r:'assistant',av:'G1', t:'Jeder tr\u00e4gt sein Interesse mit sich \u2013 unausgesprochen. Wer zuh\u00f6rt bevor er spricht, gewinnt mehr Information als jede Marktanalyse. <strong>Interessen werden selten genannt. Sie werden gezeigt.<\/strong>'},\n ],\n pc:{\n q:'Du stehst vor dem Raum. Worauf achtest du als erstes?',\n opts:[\n {id:'a', txt:'Den Einstieg mit starken Produktfeatures beginnen \u2013 Aufmerksamkeit sofort gewinnen.', level:'miss'},\n {id:'b', txt:'Den Raum lesen \u2013 wer wirkt offen, wer skeptisch? Einstieg dann situativ anpassen.', level:'insight'},\n {id:'c', txt:'Auf Brenner fokussieren \u2013 er ist unser Champion und tr\u00e4gt die Entscheidung.', level:'partial'},\n ],\n fb:'Jede Person im Raum sendet Signale. Wer liest bevor er spricht, f\u00fchrt das Gespr\u00e4ch \u2013 auch ohne Agenda.'\n },\n ql:'Die Pr\u00e4sentation beginnt. Worauf achtest du in den ersten f\u00fcnf Minuten?',\n choices:[\n {id:'a',lb:'A', txt:'Die Pr\u00e4sentation strukturiert von Anfang bis Ende durchlaufen \u2013 Technik, Implementierung, Preis.', q:'wrong',\n cr:'\u274c <strong>Struktur statt Situationswahrnehmung.<\/strong> Stein schl\u00e4ft in Minute 10 ein. Die Au\u00dfendienstler f\u00fchlen sich nicht abgeholt.',\n gr:'Keiner f\u00fchlt sich direkt angesprochen. Generisch = vergesslich.', sc:0, ld:{}, sd:{},\n pi:{pos:'Eine starke Pr\u00e4sentation \u00fcberzeugt.',int:'Wen genau? Brenner, Stein und die Au\u00dfendienstler brauchen drei verschiedene Sprachen.'}},\n {id:'b',lb:'B', txt:'Zu Beginn kurz in die Runde fragen: \"Was ist heute das wichtigste Ergebnis f\u00fcr jeden von Ihnen?\"', q:'good',\n cr:'\u2705 <strong>Mutig und richtig!<\/strong> Du gibst den Teilnehmern Stimme bevor du die Agenda setzt. Brenner wird das bemerken.',\n gr:'Stein nennt Datensicherheit. Au\u00dfendienstler nennen Mobilit\u00e4t. Du hast deine echte Agenda.', sc:1, ld:{i:1, b:1}, sd:{},\n pi:{pos:'Wir haben eine gute Pr\u00e4sentation vorbereitet.',int:'Was bewegt jeden einzelnen im Raum \u2013 heute, in diesem Moment?'}},\n {id:'c',lb:'C', txt:'Den Raum lesen \u2013 K\u00f6rpersprache, Sitzordnung, wer spricht mit wem. Dann Einstieg mit dem wichtigsten Interesse beginnen: Einfachheit f\u00fcr den Au\u00dfendienst, Kontrolle f\u00fcr Stein.', q:'best',\n cr:'\ud83c\udfc6 <strong>Meisterhafte Situationsanalyse!<\/strong> Du liest den Raum bevor du sprichst. Jeder Teilnehmer h\u00f6rt seinen Frame zuerst.',\n gr:'Stein entspannt nach 5 Minuten. Au\u00dfendienstler nicken. Brenner l\u00e4chelt. Du hast in 10 Minuten mehr aufgebaut als andere in 45.', sc:2, ld:{i:2, b:1, o:1}, sd:{1:'active', 0:'good'},\n pi:{pos:'Alle Teilnehmer sollen \u00fcberzeugt werden.',int:'F\u00fcnf Menschen, f\u00fcnf Interessen \u2013 Interessen werden selten genannt, sie werden gezeigt.'}}\n ]\n },\n {\n phase:3,\n comp:[\n {r:'assistant',av:'CO', t:'Frank M\u00fcller (Einkauf) hat zum Gespr\u00e4ch eingeladen. Sein erster Satz: <em>\"Wir haben ein Konkurrenzangebot das 22% g\u00fcnstiger ist. Mein Chef \u2013 der CFO \u2013 m\u00f6chte wissen was Sie tun k\u00f6nnen.\"<\/em>'},\n {r:'assistant',av:'CO', t:'Moment. M\u00fcller verweist auf <strong>seinen Chef \u2013 den CFO<\/strong>. Weber sitzt nicht im Raum, aber er ist pr\u00e4sent. Eink\u00e4ufer die auf den CFO verweisen, suchen Deckung \u2013 nicht Rabatt.'},\n ],\n g1:[\n {r:'system',av:'G1', t:'\ud83d\udd0d <strong>Antizipation \u2013 Was steckt hinter M\u00fcllers Verweis auf \"meinen Chef\"?<\/strong>'},\n {r:'assistant',av:'G1', t:'M\u00fcller verhandelt nicht allein. Der CFO Weber steht im Hintergrund \u2013 er ist der echte Entscheider. M\u00fcller ist sein Werkzeug. <strong>Weber will nicht als Geiziger dastehen \u2013 er braucht Argumente, keine Konzessionen.<\/strong>'},\n {r:'assistant',av:'G1', t:'<strong>Webers echtes Interesse (im Hintergrund):<\/strong> Intern rechtfertigen dass er nicht das g\u00fcnstigste Angebot w\u00e4hlte.<br><strong>Deine BATNA:<\/strong> Brenner, Stein, Lauer \u2013 der Wettbewerber startet bei null.<br><br>M\u00fcller ist die T\u00fcr. Weber ist dein <strong>JOKER<\/strong>.'},\n ],\n pc:{\n q:'M\u00fcller sagt: \"Mein Chef \u2013 der CFO \u2013 hat Bedenken zum Preis.\" Was steckt dahinter?',\n opts:[\n {id:'a', txt:'Weber delegiert die Verhandlung vollst\u00e4ndig an den Einkauf \u2013 er h\u00e4lt sich raus.', level:'miss'},\n {id:'b', txt:'Weber testet \u00fcber M\u00fcller ob wir unter Druck nachgeben.', level:'partial'},\n {id:'c', txt:'Weber braucht intern Argumente. M\u00fcller ist sein Werkzeug \u2013 Weber ist mein Joker.', level:'insight', weber:true},\n ],\n fb:'Der Eink\u00e4ufer ist die T\u00fcr. Der CFO im Hintergrund ist der echte Entscheider \u2013 und dein Joker wenn du sein Interesse kennst.'\n },\n ql:'M\u00fcller er\u00f6ffnet mit Preisdruck und verweist auf \"seinen Chef\". Worauf achtest du jetzt?',\n choices:[\n {id:'a',lb:'A', txt:'Verhandlungsspielraum kalkulieren \u2013 wir k\u00f6nnen bis zu 15% anbieten wenn M\u00fcller diese Woche unterschreibt.', q:'wrong',\n cr:'\u274c <strong>BATNA ignoriert, Marge geopfert.<\/strong> Du hast nachgegeben ohne zu verstehen was Weber wirklich braucht. Jetzt wird er 20% fordern.',\n gr:'Weber hat gewonnen. Margenverlust ohne Gegenwert.', sc:0, ld:{ba:-1}, sd:{3:'neutral'},\n pi:{pos:'Es gibt ein g\u00fcnstigeres Konkurrenzangebot.',int:'Weber will keinen Rabatt \u2013 er will eine Geschichte die er intern erz\u00e4hlen kann.'}},\n {id:'b',lb:'B', txt:'Den Rahmen verschieben: nicht Preis gegen Preis, sondern Gesamtkosten \u00fcber 3 Jahre \u2013 Implementierung, Change Management, Migrationsrisiken eingerechnet.', q:'good',\n cr:'\u2705 <strong>Gut!<\/strong> Du verschiebst den Verhandlungsrahmen. Weber muss jetzt antworten \u2013 nicht du.',\n gr:'Weber denkt nach. Er braucht Zahlen f\u00fcr die interne Rechtfertigung.', sc:1, ld:{ba:1, k:2}, sd:{3:'active'},\n pi:{pos:'Preis vs. Preis Verhandlung.',int:'TCO > Kaufpreis. Was kostet der Wettbewerber wirklich \u00fcber 3 Jahre?'}},\n {id:'c',lb:'C', txt:'Webers echtes Interesse adressieren: Er braucht intern Argumente \u2013 kein Geschenk. Gemeinsam ein ROI-Modell entwickeln das Weber intern sch\u00fctzt.', q:'best', joker:true,\n cr:'\ud83c\udfc6 <strong>Joker gespielt!<\/strong> Du hilfst Weber sein internes Problem zu l\u00f6sen \u2013 nicht dein Preisproblem. Er wird zum Verb\u00fcndeten weil du ihn verstehst. Kein Wettbewerber denkt so.',\n gr:'Weber \u00f6ffnet sich vollst\u00e4ndig. Kein Rabatt n\u00f6tig \u2013 er hat jetzt Argumente. Deal-Wahrscheinlichkeit 90%+', sc:2, ld:{ba:2, k:2, i:1, b:1}, sd:{3:'good'},\n pi:{pos:'Weber fordert Preisnachlass via Eink\u00e4ufer.',int:'Weber spricht von sich in der dritten Person \u2013 er sucht Deckung und Argumente, keinen Rabatt.'}},\n ]\n },\n];\n\n\/\/ \u2500\u2500 RFP HTML \u2500\u2500\nfunction rfpHtml() {\n return `<div class=\"rfp-doc fade-in\">\n <div class=\"rfp-doc-header\">\n <div class=\"rfp-icon\">\ud83d\udccb<\/div>\n <div><div class=\"rfp-doc-title\">CERTUM AG \u2013 Anfrage zur Angebotsabgabe<\/div><div class=\"rfp-doc-subtitle\">CRM-System Evaluierung \u00b7 Vertraulich<\/div><\/div>\n <\/div>\n <div class=\"rfp-meta\">\n <div class=\"rfp-meta-item\"><div class=\"rfp-meta-label\">Volumen<\/div><div class=\"rfp-meta-value\">\u20ac 340k \u2013 420k<\/div><\/div>\n <div class=\"rfp-meta-item\"><div class=\"rfp-meta-label\">Frist<\/div><div class=\"rfp-meta-value\">21 Tage<\/div><\/div>\n <div class=\"rfp-meta-item\"><div class=\"rfp-meta-label\">Wettbewerber<\/div><div class=\"rfp-meta-value\">6 eingeladen<\/div><\/div>\n <div class=\"rfp-meta-item\"><div class=\"rfp-meta-label\">Anwender<\/div><div class=\"rfp-meta-value\">120 Pers.<\/div><\/div>\n <\/div>\n <div class=\"rfp-section-title\">Meilensteine<\/div>\n <ul class=\"rfp-req-list\" style=\"margin-bottom:9px;\">\n <li>Go\/No-Go \u00b7 R\u00fcckfragen \u00b7 TP1 Fachbereich<\/li>\n <li>TP2 Pr\u00e4sentation \u00b7 TP3 Einkauf<\/li>\n <\/ul>\n <div class=\"rfp-section-title\">Anforderungen<\/div>\n <ul class=\"rfp-req-list\">\n <li>Mobile CRM-App (iOS & Android)<\/li>\n <li>SAP S\/4HANA REST-API Integration<\/li>\n <li>Echtzeit-Reporting, Lead-Scoring, DSGVO<\/li>\n <li>Onboarding 120 Anwender<\/li>\n <\/ul>\n <div class=\"rfp-note\">Kontakt: M. Brenner \u00b7 Einkauf: F. M\u00fcller \u00b7 IT: K. Stein<\/div>\n <\/div>`;\n}\n\n\/\/ \u2500\u2500 RENDER HELPERS \u2500\u2500\nfunction renderPhases() {\n document.getElementById('phaseList').innerHTML = PHASES.map((p,i) => {\n const c = i < S.phase ? 'done' : i === S.phase ? 'active' : 'pending';\n return `<div class=\"phase-item ${c}\"><div class=\"phase-dot\"><\/div><span>${p}<\/span><\/div>`;\n }).join('');\n}\n\nfunction renderLinsen() {\n const defs = [\n {k:'i',lbl:'Interessen',sub:'statt Positionen'},\n {k:'o',lbl:'Optionen',sub:'beiderseitig'},\n {k:'k',lbl:'Kriterien',sub:'objektiv & fair'},\n {k:'b',lbl:'Beziehung',sub:'& Kommunikation'},\n {k:'ba',lbl:'BATNA',sub:'beste Alternative'}\n ];\n document.getElementById('linsenList').innerHTML = defs.map(d => {\n const v = Math.max(0, Math.min(5, S.linsen[d.k]));\n const cls = v >= 4 ? 'hi' : v >= 2 ? 'mid' : 'lo';\n const bars = Array.from({length:5},(_,i) => `<div class=\"linse-bar ${i<v?cls:''}\"><\/div>`).join('');\n return `<div class=\"linse-row\"><div class=\"linse-label\"><strong>${d.lbl}<\/strong><small>${d.sub}<\/small><\/div><div class=\"linse-bars\">${bars}<\/div><div class=\"linse-status\">${v>=4?'\u2705':v>=2?'\ud83d\udd36':'\ud83d\udd34'}<\/div><\/div>`;\n }).join('');\n}\n\nfunction renderSH() {\n const lbls = {neutral:'Neutral',active:'Erkannt',good:'Positiv',risk:'\u26a0\ufe0f Risiko'};\n const cls = {neutral:'st-neutral',active:'st-active',good:'st-good',risk:'st-risk'};\n const visible = S.sh.filter(s => s.st !== 'hidden');\n const hidden = S.sh.filter(s => s.st === 'hidden');\n document.getElementById('shList').innerHTML =\n visible.map(s =>\n `<div class=\"s-mini\"><div class=\"s-mini-avatar\">${s.ini}<\/div><div class=\"s-mini-info\"><div class=\"s-mini-name\">${s.name}<\/div><div class=\"s-mini-role\">${s.role}<\/div><\/div><div class=\"s-mini-status ${cls[s.st]}\">${lbls[s.st]}<\/div><\/div>`\n ).join('') +\n (hidden.length > 0\n ? `<div style=\"font-size:10px;color:var(--text-light);text-align:center;padding:5px;font-style:italic;\">+ ${hidden.length} unbekannte(r) Stakeholder<\/div>`\n : '');\n}\n\nfunction renderScore() {\n const pct = S.max > 0 ? Math.round((S.score\/S.max)*100) : 0;\n document.getElementById('scoreNum').textContent = pct + '%';\n document.getElementById('scoreBar').style.width = pct + '%';\n const pb = document.getElementById('progBar');\n if (pb) pb.style.width = ((S.step \/ STEPS.length) * 100) + '%';\n}\n\nfunction updateProg() {\n const si = document.getElementById('stepInfo');\n if (si) si.textContent = S.step > 0 ? `Schritt ${S.step} \/ ${STEPS.length}` : 'Demo';\n}\n\nfunction updateMilestone(idx) {\n const m = MILESTONES[idx];\n if (!m) return;\n document.getElementById('milestoneIcon').textContent = m.icon;\n document.getElementById('milestoneText').textContent = m.text;\n document.getElementById('milestoneSub').textContent = m.sub;\n}\n\nfunction renderProcessPanel(idx) {\n const el = document.getElementById('milestoneStepper');\n if (!el) return;\n el.innerHTML = MILESTONES.map((m, i) => {\n const state = i < idx ? 'done' : i === idx ? 'current' : 'future';\n const dot = state === 'done' ? '\u2713' : String(i + 1);\n const here = state === 'current' ? '<span class=\"ms-here\">\u25ba Hier<\/span>' : '';\n return `<div class=\"ms-item ${state}\">\n <div class=\"ms-dot-wrap\"><div class=\"ms-dot ${state}\">${dot}<\/div><\/div>\n <div class=\"ms-body\">\n <div class=\"ms-label ${state}\">${m.text}${here}<\/div>\n ${state === 'current' ? `<div class=\"ms-sub\">${m.sub}<\/div>` : ''}\n <\/div>\n <\/div>`;\n }).join('');\n setTimeout(() => {\n const cur = el.querySelector('.ms-item.current');\n if (cur) cur.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }, 100);\n}\n\nfunction addFinding(icon, text) {\n const wrap = document.getElementById('findingsWrap');\n const list = document.getElementById('findingsList');\n if (!wrap || !list) return;\n wrap.style.display = 'block';\n const empty = list.querySelector('.pp-empty');\n if (empty) empty.remove();\n const item = document.createElement('div');\n item.className = 'finding-item fade-in';\n item.innerHTML = `<span>${icon}<\/span><span>${text}<\/span>`;\n list.appendChild(item);\n const pi = document.getElementById('processInner');\n if (pi) pi.scrollTop = pi.scrollHeight;\n}\n\nfunction showHarvardMoment(ch, stepLabel) {\n if (!ch.pi) return;\n const verdict = ch.q === 'best' ? '\u2705 Interesse erkannt.'\n : ch.q === 'good' ? '\u2192 Teilweise \u2013 tiefer m\u00f6glich.'\n : '\u274c Position bearbeitet, nicht Interesse.';\n const list = document.getElementById('hmLogList');\n if (!list) return;\n const empty = list.querySelector('.pp-empty');\n if (empty) empty.remove();\n const item = document.createElement('div');\n item.className = 'hm-log-item fade-in';\n item.innerHTML = `\n <div class=\"hm-log-step\">${stepLabel || ''}<\/div>\n <div class=\"hm-log-row\"><span class=\"hm-log-label pos\">Position:<\/span><span>${ch.pi.pos}<\/span><\/div>\n <div class=\"hm-log-row\"><span class=\"hm-log-label int\">Interesse:<\/span><span>${ch.pi.int}<\/span><\/div>\n <div class=\"hm-log-verdict\">${verdict}<\/div>`;\n list.appendChild(item);\n list.scrollTop = list.scrollHeight;\n const pi = document.getElementById('processInner');\n if (pi) pi.scrollTop = pi.scrollHeight;\n}\n\nfunction addMsg(cid, role, av, html) {\n const c = document.getElementById(cid);\n if (!c) return;\n const d = document.createElement('div');\n if (role === 'rfp' || role === 'harvard') {\n d.className = 'fade-in'; d.innerHTML = html;\n } else {\n d.className = `message ${role} fade-in`;\n d.innerHTML = `<div class=\"msg-avatar\">${av}<\/div><div class=\"msg-bubble\">${html}<\/div>`;\n }\n c.appendChild(d);\n c.scrollTop = c.scrollHeight;\n}\n\nfunction showTyping(cid) {\n const c = document.getElementById(cid);\n if (!c) return;\n const d = document.createElement('div');\n d.className = 'message assistant fade-in'; d.id = 'typ_'+cid;\n d.innerHTML = `<div class=\"msg-avatar\">\u23f3<\/div><div class=\"msg-bubble\"><div class=\"typing\"><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><\/div><\/div>`;\n c.appendChild(d); c.scrollTop = c.scrollHeight;\n}\nfunction killTyping(cid) { const e = document.getElementById('typ_'+cid); if(e) e.remove(); }\n\nfunction scrollAll() {\n ['compMsg','g1Msg'].forEach(id => {\n const el = document.getElementById(id);\n if (el) el.scrollTop = el.scrollHeight;\n });\n const pi = document.getElementById('processInner');\n if (pi) {\n const cur = pi.querySelector('.ms-item.current');\n if (cur) cur.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n else pi.scrollTop = pi.scrollHeight;\n }\n}\n\nfunction showToast(msg) {\n const t = document.getElementById('g1ToastMsg');\n t.textContent = msg; t.style.opacity = '1';\n setTimeout(() => { t.style.opacity = '0'; }, 2500);\n}\n\n\/\/ \u2500\u2500 HARVARD TOGGLE \u2500\u2500\nfunction toggleHarvard() {\n const col = document.getElementById('harvardCol');\n const btn = document.getElementById('btnHarvard');\n const isOpen = col.classList.toggle('show');\n btn.classList.toggle('active', isOpen);\n btn.textContent = isOpen ? '\ud83d\udcca Harvard \u2715' : '\ud83d\udcca Harvard-Analyse';\n}\n\n\/\/ \u2500\u2500 PRE-CHECK \u2500\u2500\n\/\/ Shows the Einsch\u00e4tzung panel (red frame) and hides choices (green frame) until done\nfunction showPreCheck(idx) {\n const pc = STEPS[idx].pc;\n const g1bot = document.getElementById('g1Bottom');\n const compBot = document.getElementById('compBottom');\n const area = document.getElementById('precheckArea');\n\n if (!pc) {\n \/\/ No precheck \u2192 hide red panel, show green choices immediately\n g1bot.style.display = 'none';\n area.classList.remove('show');\n area.innerHTML = '';\n unlockMainChoices();\n compBot.style.display = 'block';\n return;\n }\n\n \/\/ Has precheck \u2192 show red panel first, hide green choices\n compBot.style.display = 'none';\n\n area.innerHTML = `\n <div class=\"precheck-q\">${pc.q}<\/div>\n <div class=\"precheck-opts\">${pc.opts.map(o =>\n `<button class=\"precheck-opt\" onclick=\"answerPreCheck('${o.id}',${idx})\" id=\"pc_${o.id}\">${o.txt}<\/button>`\n ).join('')}<\/div>`;\n area.classList.add('show');\n g1bot.style.display = 'block';\n}\n\nfunction answerPreCheck(optId, idx) {\n const pc = STEPS[idx].pc;\n const opt = pc.opts.find(o => o.id === optId);\n if (!opt) return;\n\n pc.opts.forEach(o => {\n const btn = document.getElementById('pc_'+o.id);\n if (!btn) return;\n btn.disabled = true;\n btn.classList.add(o.id === optId ? 'pc-'+opt.level : 'pc-miss');\n });\n\n const area = document.getElementById('precheckArea');\n const fb = document.createElement('div');\n fb.className = 'precheck-fb';\n fb.innerHTML = pc.fb;\n area.appendChild(fb);\n\n \/\/ Special cases\n if (idx === 0 && opt.lauer) {\n setTimeout(() => {\n S.sh[2].st = 'active';\n renderSH();\n addFinding('\u26a0\ufe0f', 'A. Lauer (Betriebsrat) fehlt im RFP. Bei 120 Anwendern immer mitbestimmungsrelevant.');\n addMsg('compMsg','assistant','CO','\ud83d\udca1 <strong>Empfehlung:<\/strong> Betriebsrat proaktiv einbinden \u2013 noch vor dem ersten Touchpoint. Das positioniert euch als strategischen Partner der auch intern denkt.');\n addMsg('g1Msg','system','G1','\u26a0\ufe0f <strong>Gut erkannt!<\/strong> Anna Lauer fehlt im RFP bewusst oder unbewusst. Sie kann den Deal in der Endphase blockieren \u2013 oder aktiv f\u00f6rdern.');\n }, 400);\n }\n if (idx === 6 && opt.weber) {\n setTimeout(() => {\n S.sh[4].st = 'active';\n renderSH();\n addFinding('\ud83c\udccf', 'T. Weber (CFO) identifiziert \u2013 unsichtbarer Entscheider hinter M\u00fcller.');\n addMsg('compMsg','assistant','CO','\ud83c\udccf <strong>Joker erkannt!<\/strong> Thomas Weber (CFO) ist der unsichtbare Entscheider hinter Frank M\u00fcller. Du hast ihn identifiziert \u2013 kein Wettbewerber denkt so.');\n }, 400);\n }\n\n \/\/ After delay: hide red Einsch\u00e4tzung panel, reveal green choices panel\n setTimeout(() => {\n const g1bot = document.getElementById('g1Bottom');\n g1bot.style.display = 'none';\n area.classList.remove('show');\n unlockMainChoices();\n \/\/ Show the green choices panel with animation\n const compBot = document.getElementById('compBottom');\n compBot.style.display = 'block';\n compBot.style.animation = 'fadeUp .35s ease';\n scrollAll();\n }, 2400);\n}\n\nfunction unlockMainChoices() {\n document.querySelectorAll('.choice-btn.locked').forEach(b => b.classList.remove('locked'));\n}\n\n\/\/ \u2500\u2500 CHOICES \u2500\u2500\nfunction renderChoices(step, idx) {\n document.getElementById('choiceLabel').textContent = step.ql;\n document.getElementById('choiceButtons').innerHTML = step.choices.map(c => {\n const joker = c.joker ? '<span class=\"joker-badge\">\ud83c\udccf JOKER<\/span>' : '';\n return `<button class=\"choice-btn locked\" onclick=\"pick('${c.id}',${idx})\" id=\"cb_${c.id}\">\n <div class=\"choice-btn-label\">${c.lb}<\/div><span style=\"flex:1\">${c.txt}<\/span>${joker}\n <\/button>`;\n }).join('');\n document.getElementById('btnContinue').style.display = 'none';\n}\n\nfunction pick(cid, idx) {\n const step = STEPS[idx];\n const ch = step.choices.find(c => c.id === cid);\n if (!ch) return;\n\n step.choices.forEach(c => {\n const b = document.getElementById('cb_'+c.id);\n if (b) b.classList.add('disabled');\n });\n const sel = document.getElementById('cb_'+cid);\n if (sel) {\n sel.classList.remove('disabled');\n sel.classList.add(ch.q==='best'?'selected-best': ch.q==='good'?'selected-good':'selected-wrong');\n }\n\n setTimeout(() => {\n addMsg('compMsg','user','JU',ch.txt);\n addMsg('g1Msg','user','JU',ch.txt);\n }, 200);\n setTimeout(() => {\n showTyping('compMsg');\n setTimeout(() => { killTyping('compMsg'); addMsg('compMsg','assistant','CO',ch.cr); showHarvardMoment(ch, STEP_LABELS[idx]); }, 900);\n }, 500);\n setTimeout(() => {\n showTyping('g1Msg');\n setTimeout(() => { killTyping('g1Msg'); addMsg('g1Msg','assistant','G1',ch.gr); }, 900);\n }, 700);\n\n S.score += ch.sc;\n S.max += 2;\n S.stepScores.push(ch.sc);\n S.stepHistory.push({ sc: ch.sc, ld: ch.ld || {}, sd: ch.sd || {} });\n\n if (ch.sd) Object.entries(ch.sd).forEach(([k,v]) => { if (S.sh[+k]) S.sh[+k].st = v; });\n if (ch.ld) Object.entries(ch.ld).forEach(([k,v]) => { S.linsen[k] = Math.min(5, Math.max(0,(S.linsen[k]||0)+v)); });\n\n setTimeout(() => { renderLinsen(); renderSH(); renderScore(); }, 1200);\n setTimeout(() => {\n const btn = document.getElementById('btnContinue');\n btn.textContent = idx < STEPS.length-1 ? 'N\u00e4chster Schritt \u2192' : '\ud83d\udcca Reifegrad anzeigen';\n btn.style.display = 'block';\n btn.onclick = () => idx < STEPS.length-1 ? loadStep(idx+1) : showResult();\n const btnBack = document.getElementById('btnBack');\n if (btnBack) btnBack.style.display = idx > 0 ? 'block' : 'none';\n scrollAll();\n }, 1800);\n}\n\n\/\/ \u2500\u2500 LOAD STEP \u2500\u2500\nfunction loadStep(idx) {\n S.step = idx + 1;\n S.currentIdx = idx;\n S.phase = STEPS[idx].phase;\n\n renderProcessPanel(idx);\n updateProg();\n renderPhases();\n updateMilestone(idx);\n\n \/\/ Reset bottom areas\n const g1bot = document.getElementById('g1Bottom');\n g1bot.style.display = 'none';\n const pcArea = document.getElementById('precheckArea');\n pcArea.innerHTML = '';\n pcArea.classList.remove('show');\n\n \/\/ Reset compBottom - hide until precheck done (or show immediately if no precheck)\n const compBot = document.getElementById('compBottom');\n compBot.style.display = 'none';\n\n document.getElementById('btnContinue').style.display = 'none';\n const btnBack = document.getElementById('btnBack');\n if (btnBack) btnBack.style.display = 'none';\n\n \/\/ Load COMP messages\n let delay = 0;\n STEPS[idx].comp.forEach(m => {\n setTimeout(() => {\n if (m.r === 'rfp') addMsg('compMsg','rfp','',rfpHtml());\n else addMsg('compMsg', m.r, m.av, m.t);\n }, delay);\n delay += 420;\n });\n\n \/\/ Load G1 messages\n STEPS[idx].g1.forEach((m,i) => {\n setTimeout(() => addMsg('g1Msg', m.r, m.av, m.t), i * 360);\n });\n\n \/\/ Render locked choices + show precheck (precheck controls visibility of compBottom)\n renderChoices(STEPS[idx], idx);\n setTimeout(() => showPreCheck(idx), 400);\n setTimeout(() => scrollAll(), delay + 200);\n}\n\n\/\/ \u2500\u2500 START \u2500\u2500\nfunction startSim() {\n document.getElementById('introScreen').style.display = 'none';\n document.getElementById('compCol').classList.add('show');\n document.getElementById('g1Col').classList.add('show');\n document.getElementById('processCol').classList.add('show');\n document.getElementById('colDivider').classList.add('show');\n document.getElementById('milestoneBanner').classList.add('show');\n document.getElementById('btnHarvard').style.display = 'block';\n renderPhases(); renderLinsen(); renderSH(); renderScore(); updateProg();\n loadStep(0);\n}\n\n\/\/ \u2500\u2500 BACK \u2500\u2500\nfunction goBack() {\n if (S.currentIdx === 0 || S.stepHistory.length === 0) return;\n const last = S.stepHistory.pop();\n S.stepScores.pop();\n S.score -= last.sc;\n S.max -= 2;\n Object.entries(last.ld).forEach(([k,v]) => {\n S.linsen[k] = Math.min(5, Math.max(0,(S.linsen[k]||0) - v));\n });\n \/\/ Clear messages\n document.getElementById('compMsg').innerHTML = '';\n document.getElementById('g1Msg').innerHTML = '';\n loadStep(S.currentIdx - 1);\n}\n\n\/\/ \u2500\u2500 REIFEGRAD \/ RESULT \u2500\u2500\nfunction getRgLevel(pct) {\n if (pct >= 76) return {stufe:4, name:'Harvard-konform', color:'#16a34a', scale:3};\n if (pct >= 51) return {stufe:3, name:'Interessen-basiert', color:'#2E5CA8', scale:2};\n if (pct >= 26) return {stufe:2, name:'Ergebnis-orientiert', color:'#d97706', scale:1};\n return {stufe:1, name:'Positions-Denken', color:'#dc2626', scale:0};\n}\n\nfunction getLinseAssessment(k, v) {\n const t = {\n i:{ lo:'Du hast Positionen bearbeitet, nicht Interessen. Features statt Ergebnisse dominierten dein Denken.',\n mid:'Teilweise Interessen erkannt \u2013 aber nicht konsequent als Gespr\u00e4chsrahmen genutzt.',\n hi:'Interessen konsequent identifiziert und adressiert. Das ist der Kern des Harvard-Ansatzes.' },\n o:{ lo:'Kaum beiderseitig vorteilhafte Optionen entwickelt. Die Verhandlung blieb eindimensional.',\n mid:'Ans\u00e4tze zu kreativen L\u00f6sungen vorhanden \u2013 aber noch nicht systematisch.',\n hi:'Mehrere Optionen entwickelt die beide Seiten besser stellen.' },\n k:{ lo:'Keine objektiven Kriterien eingesetzt. Entscheidungen blieben subjektiv und preisgetrieben.',\n mid:'Kriterien ansatzweise genutzt \u2013 aber nicht gemeinsam mit dem Kunden entwickelt.',\n hi:'Objektive Kriterien eingesetzt und gemeinsam entwickelt. Verhandlung auf sachlicher Basis.' },\n b:{ lo:'Beziehungsarbeit vernachl\u00e4ssigt. Stakeholder blieben abstrakte Rollen, keine Menschen.',\n mid:'Beziehung zu Brenner aufgebaut \u2013 aber nicht alle Stakeholder wirklich erreicht.',\n hi:'Echte Beziehungen aufgebaut. Alle Stakeholder als Menschen behandelt und eingebunden.' },\n ba:{ lo:'BATNA nicht aktiviert. Du hast verhandelt ohne deine Alternative zu kennen \u2013 und ohne Webers zu verstehen.',\n mid:'BATNA ansatzweise eingesetzt \u2013 Preisdruck aber nicht vollst\u00e4ndig in Wert transformiert.',\n hi:'BATNA souver\u00e4n genutzt. Webers echtes Interesse erkannt und Druck in Argumentation verwandelt.' }\n };\n const cat = v >= 4 ? 'hi' : v >= 2 ? 'mid' : 'lo';\n return t[k][cat];\n}\n\nfunction buildRadarSVG() {\n const keys = ['i','o','k','b','ba'];\n const vals = keys.map(k => Math.min(5, S.linsen[k]) \/ 5);\n const labels= ['Interessen','Optionen','Kriterien','Beziehung','BATNA'];\n const cx = 120, cy = 110, R = 62, LR = 84, n = 5;\n const ang = i => (i * 2 * Math.PI \/ n) - Math.PI \/ 2;\n let s = '<svg viewBox=\"0 0 240 215\" style=\"width:200px;height:178px\">';\n [.25,.5,.75,1].forEach(p => {\n const pts = Array.from({length:n},(_,i)=>`${(cx+R*p*Math.cos(ang(i))).toFixed(1)},${(cy+R*p*Math.sin(ang(i))).toFixed(1)}`).join(' ');\n s += `<polygon points=\"${pts}\" fill=\"${p===1?'none':'rgba(46,92,168,.04)'}\" stroke=\"#d6e0f0\" stroke-width=\"${p===1?1.5:.7}\" stroke-dasharray=\"${p<1?'2,3':''}\"\/>`;\n });\n for(let i=0;i<n;i++) s+=`<line x1=\"${cx}\" y1=\"${cy}\" x2=\"${(cx+R*Math.cos(ang(i))).toFixed(1)}\" y2=\"${(cy+R*Math.sin(ang(i))).toFixed(1)}\" stroke=\"#d6e0f0\" stroke-width=\"1\"\/>`;\n const dp = Array.from({length:n},(_,i)=>`${(cx+R*vals[i]*Math.cos(ang(i))).toFixed(1)},${(cy+R*vals[i]*Math.sin(ang(i))).toFixed(1)}`).join(' ');\n s += `<polygon points=\"${dp}\" fill=\"rgba(46,92,168,.2)\" stroke=\"#2E5CA8\" stroke-width=\"2.5\" stroke-linejoin=\"round\"\/>`;\n for(let i=0;i<n;i++) s+=`<circle cx=\"${(cx+R*vals[i]*Math.cos(ang(i))).toFixed(1)}\" cy=\"${(cy+R*vals[i]*Math.sin(ang(i))).toFixed(1)}\" r=\"4\" fill=\"#2E5CA8\"\/>`;\n for(let i=0;i<n;i++){\n const lx=(cx+LR*Math.cos(ang(i))).toFixed(1), ly=(cy+LR*Math.sin(ang(i))+4).toFixed(1);\n const a=Math.cos(ang(i))>0.2?'start':Math.cos(ang(i))<-0.2?'end':'middle';\n s+=`<text x=\"${lx}\" y=\"${ly}\" text-anchor=\"${a}\" font-size=\"10\" fill=\"#1a2332\" font-family=\"-apple-system,sans-serif\" font-weight=\"600\">${labels[i]}<\/text>`;\n }\n s+='<\/svg>';\n return s;\n}\n\nfunction showResult() {\n document.getElementById('compCol').classList.remove('show');\n document.getElementById('g1Col').classList.remove('show');\n document.getElementById('processCol').classList.remove('show');\n document.getElementById('harvardCol').classList.remove('show');\n document.getElementById('colDivider').classList.remove('show');\n document.getElementById('milestoneBanner').classList.remove('show');\n document.getElementById('btnHarvard').style.display = 'none';\n\n const pct = S.max > 0 ? Math.round((S.score\/S.max)*100) : 0;\n const lvl = getRgLevel(pct);\n const scaleLabels = ['Positions-Denken','Ergebnis-orientiert','Interessen-basiert','Harvard-konform'];\n const dimDefs = [{k:'i',lbl:'Interessen'},{k:'o',lbl:'Optionen'},{k:'k',lbl:'Kriterien'},{k:'b',lbl:'Beziehung'},{k:'ba',lbl:'BATNA'}];\n\n const stepsHtml = STEP_LABELS.map((lbl, i) => {\n const sc = S.stepScores[i] || 0;\n const p2 = sc >= 2 ? 100 : sc >= 1 ? 50 : 8;\n const col = sc >= 2 ? '#22c55e' : sc >= 1 ? '#f59e0b' : '#ef4444';\n const tag = sc >= 2 ? 'Harvard' : sc >= 1 ? 'Ergebnis' : 'Position';\n return `<div class=\"rg-step-row\">\n <div class=\"rg-step-meta\"><div class=\"rg-step-name\">${lbl}<\/div><div class=\"rg-step-lbl\" style=\"color:${col}\">${tag}<\/div><\/div>\n <div class=\"rg-step-bar-bg\"><div class=\"rg-step-bar-fill\" style=\"width:${p2}%;background:${col}\"><\/div><\/div>\n <\/div>`;\n }).join('');\n\n const assessHtml = dimDefs.map(d => {\n const v = Math.min(5, S.linsen[d.k]);\n const ico = v >= 4 ? '\u2705' : v >= 2 ? '\ud83d\udd36' : '\ud83d\udd34';\n return `<div class=\"rg-assess-row\">\n <div class=\"rg-assess-icon\">${ico}<\/div>\n <div class=\"rg-assess-right\"><div class=\"rg-assess-dim\">${d.lbl}<\/div><div class=\"rg-assess-text\">${getLinseAssessment(d.k, v)}<\/div><\/div>\n <\/div>`;\n }).join('');\n\n const scaleHtml = scaleLabels.map((s,i) =>\n `<div class=\"rg-scale-item${i===lvl.scale?' current':''}\" style=\"${i===lvl.scale?'background:'+lvl.color:''}\">${s}<\/div>`\n ).join('');\n\n const rs = document.getElementById('resultScreen');\n rs.classList.add('show');\n rs.innerHTML = `<div class=\"rg-wrap fade-in\">\n <div class=\"rg-badge\" style=\"background:${lvl.color}\">\n <div class=\"rg-badge-stufe\">Harvard-Reifegrad \u00b7 Stufe ${lvl.stufe} von 4<\/div>\n <div class=\"rg-badge-name\">${lvl.name}<\/div>\n <div class=\"rg-badge-pct\">${pct}% Harvard-Score \u00b7 ${S.score} von ${S.max} Punkten<\/div>\n <\/div>\n <div class=\"rg-scale\">${scaleHtml}<\/div>\n <div class=\"rg-grid\">\n <div class=\"rg-card\"><div class=\"rg-card-title\">Harvard-Linsen<\/div><div class=\"rg-radar-center\">${buildRadarSVG()}<\/div><\/div>\n <div class=\"rg-card\"><div class=\"rg-card-title\">Pro Meilenstein<\/div><div class=\"rg-step-list\">${stepsHtml}<\/div><\/div>\n <\/div>\n <div class=\"rg-card\"><div class=\"rg-card-title\">Kritische Bewertung \u2013 Harvard-Dimensionen<\/div><div class=\"rg-assess-list\">${assessHtml}<\/div><\/div>\n <button class=\"btn-restart\" onclick=\"restart()\">\u21ba Nochmal spielen<\/button>\n <\/div>`;\n\n document.getElementById('stepInfo').textContent = 'Reifegrad-Analyse \u2713';\n}\n\n\/\/ \u2500\u2500 RESTART \u2500\u2500\nfunction restart() {\n S = {\n step:0, score:0, max:0, phase:0, currentIdx:0,\n stepScores:[], stepHistory:[],\n linsen:{i:2, o:1, k:1, b:2, ba:1},\n sh:[\n {ini:'MB', name:'M. Brenner', role:'VP Sales', st:'neutral'},\n {ini:'KS', name:'K. Stein', role:'IT-Leiter', st:'neutral'},\n {ini:'AL', name:'A. Lauer', role:'Betriebsrat', st:'hidden'},\n {ini:'FM', name:'F. M\u00fcller', role:'Einkauf', st:'neutral'},\n {ini:'TW', name:'T. Weber', role:'CFO', st:'hidden'},\n ],\n };\n document.getElementById('compMsg').innerHTML = '';\n document.getElementById('g1Msg').innerHTML = '';\n document.getElementById('hmLogList').innerHTML = '<div class=\"pp-empty\">Erscheinen nach jeder Entscheidung<\/div>';\n document.getElementById('findingsList').innerHTML = '';\n document.getElementById('findingsWrap').style.display = 'none';\n document.getElementById('resultScreen').classList.remove('show');\n document.getElementById('resultScreen').innerHTML = '';\n document.getElementById('compCol').classList.add('show');\n document.getElementById('g1Col').classList.add('show');\n document.getElementById('processCol').classList.add('show');\n document.getElementById('colDivider').classList.add('show');\n document.getElementById('milestoneBanner').classList.add('show');\n document.getElementById('btnHarvard').style.display = 'block';\n document.getElementById('btnHarvard').textContent = '\ud83d\udcca Harvard-Analyse';\n document.getElementById('btnHarvard').classList.remove('active');\n renderPhases(); renderLinsen(); renderSH(); renderScore(); updateProg();\n loadStep(0);\n}\n\n\/\/ \u2500\u2500 RFP MODAL \u2500\u2500\nfunction openRFP() { document.getElementById('rfpOverlay').classList.add('open'); }\nfunction closeRFPBtn() { document.getElementById('rfpOverlay').classList.remove('open'); }\nfunction closeRFP(e) { if(e.target===document.getElementById('rfpOverlay')) closeRFPBtn(); }\nfunction printRFP() {\n const pa = document.getElementById('printArea');\n pa.innerHTML = document.querySelector('.rfp-modal-body').innerHTML;\n pa.style.display = 'block'; window.print();\n setTimeout(() => { pa.style.display = 'none'; pa.innerHTML = ''; }, 1000);\n}\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce080b1 e-con-full e-flex e-con e-child\" data-id=\"ce080b1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>CERTUM Deal Simulator CERTUM \/ Deal Simulator TRAINING Demo \ud83d\udccb RFP \ud83d\udcca Harvard-Analyse \ud83d\udccc \ud83d\udccb CERTUM AG \u2013 Anfrage zur Angebotsabgabe \u2715 Vertraulich \u00b7 Eingang: heute, 09:14 Uhr \u00b7 CRM-System Evaluierung Auftragsvolumen\u20ac 340.000 \u2013 420.000 Angebotsfristin 21 Tagen Wettbewerber6 eingeladen ProjektstartQ3 dieses Jahr Projektlaufzeit18 Monate Anwender120 Personen Meilensteine laut RFP 1 Bieter-Antwort: RFP Go\/No-Go 2 […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4560","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/pages\/4560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/comments?post=4560"}],"version-history":[{"count":41,"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/pages\/4560\/revisions"}],"predecessor-version":[{"id":5086,"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/pages\/4560\/revisions\/5086"}],"wp:attachment":[{"href":"https:\/\/nexqube.com\/en\/wp-json\/wp\/v2\/media?parent=4560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}