Wel­che Managed Services pas­sen zu Ih­rer Um­ge­bung?

(function () { ‚use strict‘; if (!window.customElements || customElements.get(‚cxms-konfigurator‘)) return; function lt(a, b) { return a !== b ? Math.min(a, b) === a : false; } function has(arr, v) { return arr.indexOf(v) !== -1; } var LINKS = { w: ‚/managed-workplace-user-services/‘, n: ‚/managed-network-connectivity-communication/‘, m: ‚/managed-modern-workplace-it-betrieb/managed-microsoft-365-mail-collaboration/‘, soc: ‚/managed-soc-threat-detection-vulnerability-management/‘, pro: ‚/managed-protection-identity-security-governance/‘, bak: ‚/managed-backup-recovery-resilience/‘, inf: ‚/managed-cloud-infrastruktur-services/‘, app: ‚/managed-business-applications-ai/‘ }; var P = { w: { n: ‚Managed Workplace \x26 User Services‘, area: ‚mw‘, d: ‚Digitale Arbeitsplätze, Endgeräte und Benutzerunterstützung als klar abgegrenzter Managed Service.‘ }, n: { n: ‚Managed Network, Connectivity \x26 Communication‘, area: ‚mw‘, d: ‚Netzwerk, WLAN, Internetanbindung, Telefonie und Kommunikationsdienste betreiben und koordinieren.‘ }, m: { n: ‚Managed Microsoft 365, Mail \x26 Collaboration‘, area: ‚mw‘, d: ‚Microsoft 365, Exchange, Mail- und Collaboration-Services mit klaren administrativen Zuständigkeiten.‘ }, soc: { n: ‚Managed SOC, Threat Detection \x26 Vulnerability Management‘, area: ’sec‘, d: ‚Sicherheitsereignisse, externe Hinweise und Schwachstellen kontinuierlich bewerten und eskalieren.‘ }, pro: { n: ‚Managed Protection, Identity \x26 Security Governance‘, area: ’sec‘, d: ‚Endpoint-, Netzwerk-, E-Mail- und Identitätsschutz sowie organisatorische Security-Aufgaben.‘ }, bak: { n: ‚Managed Backup, Recovery \x26 Resilience‘, area: ’sec‘, d: ‚Datensicherung, Kontrolle, Replikation und definierte Wiederherstellungsanforderungen.‘ }, inf: { n: ‚Managed Cloud \x26 Infrastructure Services‘, area: ‚cloud‘, d: ‚Cloud, Virtualisierung, Server, Verzeichnisdienste, Storage, Datenbanken, Monitoring und Hosting.‘ }, app: { n: ‚Managed Business Applications \x26 AI‘, area: ‚ai‘, d: ‚Geschäftsanwendungen, DATEV, Wissenszugriff, RAG, lokale KI und KI-Steuerung.‘ } }; var IFACE = { w: [‚m‘, ‚pro‘, ’n‘], n: [‚pro‘, ‚inf‘, ‚w‘], m: [‚pro‘, ‚bak‘, ‚app‘], soc: [‚pro‘, ‚bak‘], pro: [’soc‘], bak: [‚inf‘], inf: [‚bak‘, ’n‘, ‚app‘], app: [‚inf‘, ‚m‘] }; var AREAS = [ { k: ‚mw‘, t: ‚Modern Workplace \x26 IT-Betrieb‘, e: ‚Arbeitsplätze, Support und Standort-IT‘ }, { k: ’sec‘, t: ‚Managed Security Services‘, e: ‚Schutz, Überwachung und Resilienz‘ }, { k: ‚cloud‘, t: ‚Cloud, Datacenter \x26 Infrastructure‘, e: ‚Cloud, Rechenzentrum und zentrale IT-Plattformen‘ }, { k: ‚ai‘, t: ‚Business Applications \x26 AI‘, e: ‚Anwendungen, Wissen und KI‘ } ]; var CATALOG = { mw: [ { t: ‚Arbeitsplätze und Support‘, i: [ [‚Managed Workplace‘, ‚w‘], [‚User Helpdesk‘, ‚w‘], [‚Advanced Servicebereitschaft Helpdesk‘, ‚w‘], [‚Managed Endpoint‘, ‚w‘], [‚Managed Client‘, ‚w‘], [‚Patchmanagement‘, ‚w‘], [‚IGEL as a Service‘, ‚w‘], [‚Managed Virtual Desktop‘, ‚w‘], [‚Managed Microsoft Remote Desktop Services (RDS)‘, ‚w‘] ] }, { t: ‚Microsoft 365, Mail und Collaboration‘, i: [ [‚Managed M365 Tenant‘, ‚m‘], [‚Managed Microsoft 365 Applications‘, ‚m‘], [‚Managed Mail \x26 Messaging Services‘, ‚m‘], [‚Mailbox Service‘, ‚m‘], [‚Managed Mail Services‘, ‚m‘], [‚Hosted Mail-Archiv‘, ‚m‘], [‚Fax2Mail‘, ’n‘], [‚Mail2Fax‘, ’n‘], [‚Mail2SMS‘, ’n‘], [‚SpeedFax‘, ’n‘], [‚SMS Gateway Service‘, ’n‘], [‚Managed Microsoft Exchange Server‘, ‚m‘], [‚Managed Nextcloud Collaboration‘, ‚m‘], [‚Hosted Nextcloud Collaboration‘, ‚m‘], [‚Hosted Nextcloud Enterprise‘, ‚m‘] ] }, { t: ‚Kommunikation‘, i: [ [‚Managed Unified Communication‘, ’n‘], [‚Hosted 3CX‘, ’n‘], [‚Hosted SBC‘, ’n‘], [‚Managed Telefonie‘, ’n‘] ] }, { t: ‚Netzwerk und Standortinfrastruktur‘, i: [ [‚Managed Network Services‘, ’n‘], [‚Managed Networking‘, ’n‘], [‚Network as a Service‘, ’n‘], [‚Managed Switching‘, ’n‘], [‚Managed Access Switch‘, ’n‘], [‚Managed Core Switch‘, ’n‘], [‚Switch Patch Service für HPE Aruba LAN-Switche‘, ’n‘], [‚Managed WLAN‘, ’n‘], [‚Managed LAN/WLAN‘, ’n‘], [‚Managed WLAN Access Point‘, ’n‘], [‚Managed WLAN Controller‘, ’n‘], [‚WLAN Patch Service Advanced‘, ’n‘], [‚Managed Internet Access‘, ’n‘], [‚Internetaccess / Business Access‘, ’n‘] ] } ], sec: [ { t: ‚E-Mail, Endgeräte und Netzwerk‘, i: [ [‚Managed E-Mail Security‘, ‚pro‘], [‚Managed Secure Mail‘, ‚pro‘], [‚Advanced Threat Protection‘, ‚pro‘], [‚Exchange Security Service‘, ‚m‘], [‚Managed Endpoint Security‘, ‚pro‘], [‚Managed Antivirus‘, ‚pro‘], [‚Managed Service FortiClient‘, ‚pro‘], [‚Managed Endpoint Detection \x26 Response (EDR/XDR/MDR)‘, ‚pro‘], [‚Managed Firewall‘, ‚pro‘], [‚Managed Network Security‘, ‚pro‘], [‚Managed M365 Security‘, ‚pro‘] ] }, { t: ‚Security Operations und Angriffserkennung‘, i: [ [‚Managed SOC \x26 Threat Detection‘, ’soc‘], [‚Managed Service SOC‘, ’soc‘], [‚SOC XDR Client / Server‘, ’soc‘], [‚Managed SIEM Systempflege‘, ’soc‘], [‚SOC für Quest Active Administrator‘, ’soc‘], [‚Managed Darknet-Monitoring‘, ’soc‘], [‚Managed Analyzer‘, ’soc‘] ] }, { t: ‚Identitäten und Zertifikate‘, i: [ [‚Managed Identity Security‘, ‚pro‘], [‚Managed Fortinet FortiAuthenticator‘, ‚pro‘], [‚Managed Service Multifaktor-Authentifizierung‘, ‚pro‘], [‚Hosted Token OTP/MFA Service‘, ‚pro‘], [‚Managed Microsoft PKI Server‘, ‚pro‘] ] }, { t: ‚Schwachstellen und Sicherheitslage‘, i: [ [‚Managed Schwachstellenscan‘, ’soc‘], [‚Managed CVE-Systempflege‘, ’soc‘] ] }, { t: ‚Backup, Recovery und Resilienz‘, i: [ [‚Managed Backup‘, ‚bak‘], [‚M365 Backup‘, ‚bak‘], [‚Managed Backupkontrolle‘, ‚bak‘], [‚Managed Backup Devices, zum Beispiel NAS‘, ‚bak‘], [‚TERRA CLOUD Backup Standard Erweiterung‘, ‚bak‘], [‚Backup-Replikation‘, ‚bak‘], [‚Tape as a Service‘, ‚bak‘] ] }, { t: ‚Awareness und Governance‘, i: [ [‚Managed Awareness KnowBe4‘, ‚pro‘], [‚ISB as a Service‘, ‚pro‘], [‚DSBEX500‘, ‚pro‘] ] } ], cloud: [ { t: ‚Managed Cloud Services‘, i: [ [‚Managed Infrastructure as a Service‘, ‚inf‘], [‚Managed Private Cloud‘, ‚inf‘], [‚Webhosting‘, ‚inf‘], [‚Managed Citrix Services‘, ‚inf‘], [‚Managed Citrix Cloud Service Provider‘, ‚inf‘], [‚Security Service Citrix NetScaler‘, ‚inf‘], [‚Individueller NetScaler Service‘, ‚inf‘], [‚Citrix XenServer Patch/Update‘, ‚inf‘], [‚Managed Virtualization Platform‘, ‚inf‘], [‚Managed Microsoft Hyper-V Host‘, ‚inf‘], [‚Managed VMware ESX Host‘, ‚inf‘], [‚Managed VMware vCenter‘, ‚inf‘] ] }, { t: ‚Managed Infrastruktur Services‘, i: [ [‚Managed Server‘, ‚inf‘], [‚Managed Hardware Server‘, ‚inf‘], [‚Managed Microsoft Windows Server‘, ‚inf‘], [‚Serverwartung‘, ‚inf‘], [‚Managed Linux Server‘, ‚inf‘], [‚Managed Active Directory‘, ‚inf‘], [‚Managed Active Directory Server‘, ‚inf‘], [‚Managed Domain Controller‘, ‚inf‘], [‚Managed Microsoft ADFS Server‘, ‚inf‘], [‚Managed Quest Active Administrator Server‘, ‚inf‘], [‚Managed Storage‘, ‚inf‘], [‚Managed Hardware Storage‘, ‚inf‘], [‚Managed Database‘, ‚inf‘], [‚Managed Monitoring‘, ‚inf‘], [‚Managed PRTG Server‘, ‚inf‘], [‚MSA Patch Service‘, ‚inf‘] ] } ], ai: [ { t: ‚Business Applications‘, i: [ [‚Managed Application Management‘, ‚app‘], [‚Managed Service DATEV‘, ‚app‘] ] }, { t: ‚Daten, Wissen und KI‘, i: [ [‚Managed RAG‘, ‚app‘], [‚AI Knowledge Assistant‘, ‚app‘], [‚IF-Tech Local AI‘, ‚app‘], [‚KI Manager as a Service‘, ‚app‘] ] } ] }; var REQS = [ [‚Besondere Anforderungen an Datensouveränität, Datenhaltung und administrative Zugriffe‘, ‚inf‘], [‚Migration bestehender Systeme oder Dienstleisterwechsel‘, ‚inf‘], [‚Portabilität, Übergabe und kontrollierten Servicewechsel berücksichtigen‘, ‚inf‘], [‚Hohe Verfügbarkeit und definierte Wiederherstellbarkeit‘, ‚bak‘], [‚Regulatorische oder dokumentationsbezogene Anforderungen‘, ‚pro‘] ]; var F = ‚“IBM Plex Sans“,-apple-system,BlinkMacSystemFont,“Segoe UI“,sans-serif‘; var CSS = [ ‚:host{all:initial;display:block;font-size:16px;–cx-blue:#0581C5;–cx-head:#084D7A;–cx-link:#095586;–cx-body:#3C4756;–cx-mute:#5C6676;–cx-soft:#F6F9FB;–cx-input:#EEF5FC;–cx-line:rgba(8,77,122,.16);–cx-acc:#FFCB47;font-family:‘ + F + ‚;-webkit-font-smoothing:antialiased}‘, ‚*,*::before,*::after{box-sizing:border-box}‘, ‚button{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}‘, ‚.k{background:#fff;border:1px solid rgba(8,77,122,.12);border-radius:20px;padding:48px;color:var(–cx-body);display:flex;flex-direction:column;gap:32px;text-align:left}‘, ‚.steps{display:grid;grid-template-columns:repeat(var(–n,4),minmax(0,1fr));gap:12px}‘, ‚.step{border:none;background:none;padding:0;margin:0;text-align:left;cursor:default;display:block}‘, ‚.step.can{cursor:pointer}‘, ‚.step span{display:block;height:4px;border-radius:999px;background:rgba(8,77,122,.14);margin-bottom:10px}‘, ‚.step.now span{background:var(–cx-acc)}.step.done span{background:var(–cx-blue)}‘, ‚.step b{display:block;font:500 13px/18px ‚ + F + ‚;text-transform:uppercase;letter-spacing:.08em;color:#8995A3;overflow-wrap:anywhere;hyphens:auto}‘, ‚.step.now b,.step.done b{color:#091324}‘, ‚.step:focus-visible{outline:2px solid var(–cx-blue);outline-offset:4px;border-radius:4px}‘, ‚.eyebrow{display:inline-block;font:500 14px/20px ‚ + F + ‚;text-transform:uppercase;letter-spacing:.1em;color:var(–cx-link);margin-bottom:10px}‘, ‚h3{font:500 30px/40px ‚ + F + ‚;color:var(–cx-head);margin:0}h3:focus{outline:none}‘, ‚.hint{font:400 16px/26px ‚ + F + ‚;color:var(–cx-mute);margin:10px 0 0}‘, ‚.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin-top:28px}‘, ‚.grid.multi{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px}‘, ‚.grid.one{grid-template-columns:1fr;gap:12px}‘, ‚.sec{margin-top:34px}.sec .grid{margin-top:14px}‘, ‚.label{display:inline-block;font:500 14px/20px ‚ + F + ‚;text-transform:uppercase;letter-spacing:.1em;color:var(–cx-link)}‘, ‚.label.dark{color:#091324;margin-bottom:4px}‘, ‚.opt{text-align:left;display:flex;gap:14px;align-items:flex-start;padding:20px 22px;border-radius:12px;cursor:pointer;background:#fff;border:1px solid var(–cx-line);transition:background .12s cubic-bezier(.2,.7,.2,1),border-color .12s cubic-bezier(.2,.7,.2,1)}‘, ‚.opt:hover{background:var(–cx-soft)}‘, ‚.opt.on{background:var(–cx-input);border-color:var(–cx-blue)}‘, ‚.opt:focus-visible{outline:2px solid var(–cx-blue);outline-offset:2px}‘, ‚.opt.multi{align-items:center;padding:16px 20px}‘, ‚.opt.multi.sub{align-items:flex-start;padding:20px 22px}‘, ‚.mark{flex:0 0 auto;width:20px;height:20px;border-radius:4px;border:2px solid rgba(8,77,122,.28);background:#fff;display:inline-flex;align-items:center;justify-content:center;font:500 13px/13px ‚ + F + ‚;color:#fff}‘, ‚.opt.multi.sub .mark{margin-top:3px}‘, ‚.opt.on .mark{border-color:var(–cx-blue);background:var(–cx-blue)}‘, ‚.opt strong{display:block;font:400 16px/24px ‚ + F + ‚;color:#091324}‘, ‚.opt.sub strong{font:500 17px/25px ‚ + F + ‚;color:var(–cx-head)}‘, ‚.opt em{display:block;font:400 15px/23px ‚ + F + ‚;font-style:normal;color:var(–cx-body);margin-top:4px}‘, ‚.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding-top:20px;border-top:1px solid rgba(8,77,122,.10);flex-wrap:wrap}‘, ‚.back{font:500 16px/24px ‚ + F + ‚;color:var(–cx-link);background:none;border:none;cursor:pointer;padding:0}‘, ‚.back:hover{text-decoration:underline;text-underline-offset:4px}‘, ‚.back:focus-visible{outline:2px solid var(–cx-blue);outline-offset:3px}‘, ‚.back[hidden]{visibility:hidden;display:block}‘, ‚.btn{font:500 16px/24px ‚ + F + ‚;border:none;border-radius:8px;padding:12px 24px;cursor:pointer;background:var(–cx-blue);color:#fff;transition:background .12s cubic-bezier(.2,.7,.2,1);display:inline-block;text-decoration:none}‘, ‚.btn:hover{background:#046BA4}‘, ‚.btn:disabled{background:#A6C8DE;cursor:default}‘, ‚.btn:focus-visible{outline:2px solid #084D7A;outline-offset:3px}‘, ‚.btn.ghost{background:#fff;color:var(–cx-blue);border:1px solid var(–cx-blue);padding:11px 23px}‘, ‚.btn.ghost:hover{background:#E1EFF8}‘, ‚.result{background:var(–cx-input);border-radius:20px;padding:36px 34px}‘, ‚.result h3{font:500 32px/42px ‚ + F + ‚;margin:14px 0 16px}‘, ‚.result p{font:400 17px/28px ‚ + F + ‚;margin:0}‘, ‚.adds{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px;margin-top:16px}‘, ‚.adds.one{grid-template-columns:1fr}‘, ‚.add{border:1px solid rgba(8,77,122,.14);border-radius:12px;padding:22px 24px;display:flex;flex-direction:column;align-items:flex-start}‘, ‚.add.top{background:var(–cx-input);border-color:var(–cx-blue)}‘, ‚.add i{display:block;width:48px;height:4px;background:var(–cx-acc);margin-bottom:14px}‘, ‚.add strong{display:block;font:500 19px/27px ‚ + F + ‚;color:var(–cx-head)}‘, ‚.add \x3e span{display:block;font:400 15px/23px ‚ + F + ‚;margin-top:6px}‘, ‚.why{align-self:stretch;margin-top:14px;padding-top:14px;border-top:1px solid rgba(8,77,122,.12);font:400 15px/24px ‚ + F + ‚;color:var(–cx-mute)}‘, ‚.why b{font-weight:500;color:var(–cx-head)}‘, ‚.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}‘, ‚.chip{padding:4px 12px;border-radius:999px;background:#fff;color:var(–cx-head);font:400 13px/20px ‚ + F + ‚;border:1px solid var(–cx-line)}‘, ‚.add .go{margin-top:auto}.add .why + .go{margin-top:18px}‘, ‚.note{border-top:1px solid rgba(8,77,122,.10);padding-top:20px;margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}‘, ‚@media (max-width:781px){‚, ‚.k{padding:28px 22px;gap:24px}‘, ‚h3{font:500 24px/32px ‚ + F + ‚}‘, ‚.steps{grid-template-columns:repeat(3,minmax(0,1fr))}‘, ‚.result{padding:28px 22px}.result h3{font:500 26px/34px ‚ + F + ‚}‘, ‚.nav{flex-direction:column-reverse;align-items:stretch}.nav .btn{width:100%;text-align:center}‘, ‚}‘ ].join(“); function esc(t) { return String(t).replace(/\x26/g, ‚\x26amp;‘).replace(/\x3c/g, ‚\x26lt;‘).replace(/\x3e/g, ‚\x26gt;‘).replace(/“/g, ‚\x26quot;‘); } function each(area, fn) { CATALOG[area].forEach(function (g) { g.i.forEach(fn); }); } function key(it) { return it[1] + ‚|‘ + it[0]; } class CxmsKonfigurator extends HTMLElement { } var K = CxmsKonfigurator.prototype; K.blank = function () { return { step: 0, areas: [], svc: {}, reqs: [] }; }; K.connectedCallback = function () { if (this._up) return; this._up = true; this.attachShadow({ mode: ‚open‘ }); this.st = this.blank(); var s = document.createElement(’style‘); s.textContent = CSS; this.shadowRoot.appendChild(s); this.root = document.createElement(‚div‘); this.root.className = ‚k‘; this.shadowRoot.appendChild(this.root); this.bind(); this.render(); }; K.steps = function () { var a = this.st.areas, l = [{ id: ‚areas‘, t: ‚Bereiche‘ }]; if (has(a, ‚mw‘)) l.push({ id: ‚mw‘, t: ‚Workplace‘ }); if (has(a, ’sec‘)) l.push({ id: ’sec‘, t: ‚Security‘ }); if (has(a, ‚cloud‘)) l.push({ id: ‚cloud‘, t: ‚Cloud‘ }); if (has(a, ‚ai‘)) l.push({ id: ‚ai‘, t: ‚Apps \x26 AI‘ }); l.push({ id: ‚reqs‘, t: ‚Anforderungen‘ }); l.push({ id: ‚result‘, t: ‚Ergebnis‘ }); return l; }; K.rank = function () { var s = this.st, sc = {}, why = {}, k; for (k in P) { sc[k] = 0; why[k] = { svc: [], iface: [], req: [], area: false }; } var picked = Object.keys(s.svc).filter(function (x) { var pk = x.split(‚|‘)[0]; if (!s.svc[x] || !P[pk]) return false; return has(s.areas, P[pk].area); }); picked.forEach(function (x) { var pk = x.split(‚|‘)[0]; sc[pk] += 3; why[pk].svc.push(x.split(‚|‘).slice(1).join(‚|‘)); }); s.areas.forEach(function (ak) { var any = false; for (k in P) if (P[k].area === ak) { if (why[k].svc.length) any = true; } if (!any) for (k in P) if (P[k].area === ak) { sc[k] += 2; why[k].area = true; } }); Object.keys(P).filter(function (x) { return why[x].svc.length !== 0; }).forEach(function (from) { (IFACE[from] || []).forEach(function (to) { if (why[to].svc.length) return; sc[to] += 1; if (!has(why[to].iface, P[from].n)) why[to].iface.push(P[from].n); }); }); s.reqs.forEach(function (label) { REQS.forEach(function (r) { if (r[0] === label) { sc[r[1]] += 1; if (!has(why[r[1]].req, label)) why[r[1]].req.push(label); } }); }); var out = []; for (k in P) if (sc[k] !== 0) out.push({ k: k, score: sc[k], why: why[k] }); out.sort(function (a, b) { return b.score – a.score || b.why.svc.length – a.why.svc.length; }); return { list: out, picked: picked.length }; }; K.summary = function (ev) { var s = this.st, a = s.areas.length, t = []; var bereiche = a + (a === 1 ? ‚ Themenbereich‘ : ‚ Themenbereichen‘); if (ev.picked !== 0) t.push(‚Sie haben ‚ + ev.picked + (ev.picked === 1 ? ‚ Service‘ : ‚ Services‘) + ‚ aus ‚ + bereiche + ‚ markiert.‘); else t.push(‚Sie haben ‚ + (a === 1 ? ‚1 Themenbereich‘ : a + ‚ Themenbereiche‘) + ‚ ausgewählt, aber noch keine einzelnen Services markiert.‘); var n = ev.list.length; if (n) t.push(n === 1 ? ‚Diese Leistungsseite passt zu Ihrer Auswahl.‘ : ‚Diese ‚ + n + ‚ Leistungsseiten passen zu Ihrer Auswahl, sortiert nach Relevanz.‘); return t.join(‚ ‚); }; K.opt = function (group, value, title, on, sub) { return ‚\x3cbutton type=“button“ class=“opt multi‘ + (sub ? ‚ sub‘ : “) + (on ? ‚ on‘ : “) + ‚“ data-g=“‚ + esc(group) + ‚“ data-v=“‚ + esc(value) + ‚“ aria-pressed=“‚ + (on ? ‚true‘ : ‚false‘) + ‚“\x3e‘ + ‚\x3cspan class=“mark“ aria-hidden=“true“\x3e‘ + (on ? ‚\u2713‘ : “) + ‚\x3c/span\x3e‘ + ‚\x3cspan\x3e\x3cstrong\x3e‘ + esc(title) + ‚\x3c/strong\x3e‘ + (sub ? ‚\x3cem\x3e‘ + esc(sub) + ‚\x3c/em\x3e‘ : “) + ‚\x3c/span\x3e\x3c/button\x3e‘; }; K.stepsHtml = function () { var s = this.st, steps = this.steps(); return steps.map(function (st, i) { var cls = lt(i, s.step) ? ‚done‘ : (i === s.step ? ’now‘ : “), can = lt(i, s.step); return ‚\x3cbutton type=“button“ class=“step ‚ + cls + (can ? ‚ can‘ : “) + ‚“‚ + (can ? ‚ data-goto=“‚ + i + ‚“‚ : ‚ disabled‘) + (i === s.step ? ‚ aria-current=“step“‚ : “) + ‚\x3e\x3cspan\x3e\x3c/span\x3e\x3cb\x3e‘ + esc(st.t) + ‚\x3c/b\x3e\x3c/button\x3e‘; }).join(“); }; K.render = function () { var steps = this.steps(), cur = steps[this.st.step]; this.root.innerHTML = ‚\x3cnav class=“steps“ aria-label=“Fortschritt“ style=“–n:‘ + steps.length + ‚“\x3e‘ + this.stepsHtml() + ‚\x3c/nav\x3e‘ + ‚\x3cdiv\x3e‘ + (cur.id === ‚result‘ ? this.renderResult() : this.renderStep(cur, this.st.step, steps.length)) + ‚\x3c/div\x3e‘; }; K.nextLabel = function () { var s = this.st, steps = this.steps(); if (steps[s.step].id === ‚areas‘) { if (!s.areas.length) return ‚Bereich auswählen‘; } return s.step === steps.length – 2 ? ‚Ergebnis anzeigen \u2192‘ : ‚Weiter \u2192‘; }; K.renderStep = function (cur, idx) { var self = this, s = this.st, body = “, head, canNext = true; if (cur.id === ‚areas‘) { head = [‚Welche Themenbereiche sind für Sie relevant?‘, ‚Mehrfachauswahl möglich. Nur die ausgewählten Bereiche werden anschließend im Detail abgefragt.‘]; body = ‚\x3cdiv class=“grid“\x3e‘ + AREAS.map(function (a) { return self.opt(‚areas‘, a.k, a.t, has(s.areas, a.k), a.e); }).join(“) + ‚\x3c/div\x3e‘; canNext = s.areas.length !== 0; } else if (CATALOG[cur.id]) { var area = AREAS.filter(function (a) { return a.k === cur.id; })[0], every = true; each(cur.id, function (it) { if (!s.svc[key(it)]) every = false; }); head = [area.t, ‚Mehrfachauswahl möglich. Markieren Sie die Services, die Sie interessieren. Ohne Markierung werden alle Leistungsseiten dieses Bereichs berücksichtigt.‘]; body = ‚\x3cdiv class=“grid one“\x3e‘ + this.opt(‚all-‚ + cur.id, cur.id, ‚Alle Services aus ‚ + area.t + ‚ auswählen‘, every) + ‚\x3c/div\x3e‘; CATALOG[cur.id].forEach(function (g) { body += ‚\x3cdiv class=“sec“\x3e\x3cspan class=“label dark“\x3e‘ + esc(g.t) + ‚\x3c/span\x3e\x3cdiv class=“grid multi“\x3e‘ + g.i.map(function (it) { return self.opt(’svc‘, key(it), it[0], !!s.svc[key(it)]); }).join(“) + ‚\x3c/div\x3e\x3c/div\x3e‘; }); } else { head = [‚Gibt es besondere Anforderungen?‘, ‚Optional, Mehrfachauswahl möglich. Diese Angaben ergänzen das Ergebnis um weitere passende Leistungsseiten.‘]; body = ‚\x3cdiv class=“grid one“\x3e‘ + REQS.map(function (r) { return self.opt(‚reqs‘, r[0], r[0], has(s.reqs, r[0])); }).join(“) + ‚\x3c/div\x3e‘; } return ‚\x3cspan class=“eyebrow“\x3eSchritt ‚ + (idx + 1) + ‚\x3c/span\x3e\x3ch3\x3e‘ + esc(head[0]) + ‚\x3c/h3\x3e‘ + ‚\x3cp class=“hint“\x3e‘ + esc(head[1]) + ‚\x3c/p\x3e‘ + body + ‚\x3cdiv class=“nav“\x3e\x3cbutton type=“button“ class=“back“ data-act=“back“‚ + (idx === 0 ? ‚ hidden‘ : “) + ‚\x3e\u2190 Zurück\x3c/button\x3e‘ + ‚\x3cbutton type=“button“ class=“btn“ data-act=“next“‚ + (canNext ? “ : ‚ disabled‘) + ‚\x3e‘ + this.nextLabel() + ‚\x3c/button\x3e\x3c/div\x3e‘; }; K.renderResult = function () { var ev = this.rank(), h = “; h += ‚\x3cdiv class=“result“\x3e\x3cspan class=“label“\x3eIhr Ergebnis\x3c/span\x3e‘ + ‚\x3ch3\x3ePassende Managed Services\x3c/h3\x3e\x3cp\x3e‘ + esc(this.summary(ev)) + ‚\x3c/p\x3e\x3c/div\x3e‘; var tiers = [ { min: 3, t: ‚Besonders relevant‘, top: true }, { min: 2, t: ‚Ebenfalls passend‘, top: false }, { min: 1, t: ‚Ergänzend interessant‘, top: false } ]; var used = {}; tiers.forEach(function (tier) { var rows = ev.list.filter(function (r) { return used[r.k] ? false : !lt(r.score, tier.min); }); if (!rows.length) return; h += ‚\x3cdiv class=“sec“\x3e\x3cspan class=“label dark“\x3e‘ + esc(tier.t) + ‚\x3c/span\x3e\x3cdiv class=“adds‘ + (tier.top ? (rows.length === 1 ? ‚ one‘ : “) : “) + ‚“\x3e‘; rows.forEach(function (r) { used[r.k] = true; var p = P[r.k], w = r.why, reason = []; if (w.svc.length) reason.push(‚\x3cb\x3eIhre Auswahl:\x3c/b\x3e\x3cspan class=“chips“\x3e‘ + w.svc.slice(0, 5).map(function (x) { return ‚\x3cspan class=“chip“\x3e‘ + esc(x) + ‚\x3c/span\x3e‘; }).join(“) + (lt(5, w.svc.length) ? ‚\x3cspan class=“chip“\x3e+ ‚ + (w.svc.length – 5) + ‚ weitere\x3c/span\x3e‘ : “) + ‚\x3c/span\x3e‘); if (w.area ? !w.svc.length : false) reason.push(‚\x3cb\x3eThemenbereich ausgewählt.\x3c/b\x3e‘); if (w.iface.length) reason.push(‚\x3cb\x3eSchnittstelle zu:\x3c/b\x3e ‚ + esc(w.iface.join(‚, ‚)) + ‚.‘); if (w.req.length) reason.push(‚\x3cb\x3eIhre Anforderung:\x3c/b\x3e ‚ + esc(w.req.join(‚; ‚)) + ‚.‘); h += ‚\x3cdiv class=“add‘ + (tier.top ? ‚ top‘ : “) + ‚“\x3e\x3ci\x3e\x3c/i\x3e\x3cstrong\x3e‘ + esc(p.n) + ‚\x3c/strong\x3e‘ + ‚\x3cspan\x3e‘ + esc(p.d) + ‚\x3c/span\x3e‘ + (reason.length ? ‚\x3cdiv class=“why“\x3e‘ + reason.join(‚\x3cbr\x3e‘) + ‚\x3c/div\x3e‘ : “) + ‚\x3ca class=“btn‘ + (tier.top ? “ : ‚ ghost‘) + ‚ go“ href=“‚ + esc(LINKS[r.k]) + ‚“\x3eZur Leistungsseite \u2192\x3c/a\x3e\x3c/div\x3e‘; }); h += ‚\x3c/div\x3e\x3c/div\x3e‘; }); h += ‚\x3cdiv class=“note“\x3e\x3cbutton type=“button“ class=“back“ data-act=“back“\x3e\u2190 Auswahl ändern\x3c/button\x3e‘ + ‚\x3cbutton type=“button“ class=“back“ data-act=“restart“\x3eNeu starten\x3c/button\x3e\x3c/div\x3e‘; return h; }; K.bind = function () { var self = this; this.root.addEventListener(‚click‘, function (e) { var s = self.st, t = e.target.closest ? e.target : e.target.parentElement; var opt = t.closest(‚.opt‘); if (opt) { var g = opt.getAttribute(‚data-g‘), v = opt.getAttribute(‚data-v‘); if (g === ’svc‘) { s.svc[v] = !s.svc[v]; self.paint(opt, s.svc[v]); self.syncAll(); } else if (g.indexOf(‚all-‚) === 0) { var area = g.slice(4), every = true; each(area, function (it) { if (!s.svc[key(it)]) every = false; }); each(area, function (it) { s.svc[key(it)] = !every; }); self.paint(opt, !every); Array.prototype.forEach.call(self.root.querySelectorAll(‚[data-g=“svc“]‘), function (b) { self.paint(b, !!s.svc[b.getAttribute(‚data-v‘)]); }); } else { var arr = s[g], i = arr.indexOf(v); if (i !== -1) arr.splice(i, 1); else arr.push(v); self.paint(opt, has(arr, v)); if (g === ‚areas‘) { var el = self.root.querySelector(‚.steps‘); el.style.setProperty(‚–n‘, self.steps().length); el.innerHTML = self.stepsHtml(); } } var nb = self.root.querySelector(‚[data-act=“next“]‘); if (nb) { nb.disabled = self.steps()[s.step].id === ‚areas‘ ? !s.areas.length : false; nb.textContent = self.nextLabel(); } return; } var b = t.closest(‚button‘); if (!b) return; if (b.hasAttribute(‚data-goto‘)) { self.go(parseInt(b.getAttribute(‚data-goto‘), 10)); return; } var act = b.getAttribute(‚data-act‘); if (act === ’next‘) self.go(s.step + 1); else if (act === ‚back‘) self.go(s.step – 1); else if (act === ‚restart‘) { self.st = self.blank(); self.render(); self.top(); } }); }; K.paint = function (btn, on) { btn.classList.toggle(‚on‘, !!on); btn.setAttribute(‚aria-pressed‘, on ? ‚true‘ : ‚false‘); var m = btn.querySelector(‚.mark‘); if (m) m.textContent = on ? ‚\u2713‘ : “; }; K.syncAll = function () { var s = this.st, all = this.root.querySelector(‚[data-g^=“all-„]‘), every = true; if (!all) return; each(all.getAttribute(‚data-g‘).slice(4), function (it) { if (!s.svc[key(it)]) every = false; }); this.paint(all, every); }; K.go = function (i) { if (lt(i, 0) || !lt(i, this.steps().length)) return; this.st.step = i; this.render(); this.top(); var h = this.root.querySelector(‚h3‘); if (h) { h.setAttribute(‚tabindex‘, ‚-1‘); try { h.focus({ preventScroll: true }); } catch (e) { } } }; K.top = function () { try { var t = this.getBoundingClientRect().top; if (lt(t, 0)) window.scrollTo(0, window.pageYOffset + t – 24); } catch (e) { } }; customElements.define(‚cxms-konfigurator‘, CxmsKonfigurator); if (!document.querySelector(‚cxms-konfigurator‘)) { var cs = document.currentScript; if (cs) cs.parentNode.insertBefore(document.createElement(‚cxms-konfigurator‘), cs); } })();