wiki/strategy/20260224_Roadmap/roadmap_presentation.html

1401 lines
55 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PowerOn Roadmap 2026 - 2028</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=DM+Sans:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg: white;
--surface: #1a1a20;
--border: black;
--text: #000;
--muted: #8b8b9a;
--accent: #f53400;
--accent-dim: #3d5a8a;
--success: #4ade80;
--year-2026: #6366f1;
--year-2027: #22c55e;
--year-2028: #f59e0b;
}
html, body {
height: 100%;
font-family: 'Helvetica', sans-serif;
background: var(--bg);
color: var(--text);
overflow: hidden;
}
.presentation {
width: 100vw;
height: 100vh;
position: relative;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}
.slide.active {
opacity: 1;
visibility: visible;
}
/* Title slide / Roadmap */
.slide-roadmap {
justify-content: flex-start;
padding-top: 2rem;
}
/* Einheitliche Titeldarstellung für alle Slides */
.slide-title {
font-size: 2.25rem;
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.2;
color: var(--text);
display: flex;
align-items: center;
gap: 0.75rem;
}
.slide-title::before {
content: "";
display: inline-block;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
background: url("poweron-logo2.png") center/contain no-repeat;
}
.slide-roadmap .slide-title {
margin-top: 2rem;
margin-bottom: 5rem;
align-self: center;
text-align: center;
justify-content: center;
gap: 1.5rem;
}
.slide-roadmap .slide-title::before,
.slide-year .slide-title::before {
width: 5rem;
height: 5rem;
}
.slide-year .slide-title {
margin-top: 2rem;
margin-bottom: 2.5rem;
align-self: center;
text-align: center;
justify-content: center;
gap: 1.5rem;
}
.content-slide .slide-title {
margin-top: 0;
margin-bottom: 0.75rem;
}
.slide-subtitle {
font-size: 1rem;
color: var(--muted);
margin-bottom: 2.5rem;
}
.roadmap-container {
display: grid;
grid-template-columns: 280px repeat(12, minmax(52px, 1fr));
max-width: 1400px;
width: 100%;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
border-top: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: var(--bg);
}
.roadmap-phase-spacer {
border-right: 1px solid var(--border);
}
/* Year headers row */
.roadmap-year-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-bottom: 1px solid var(--border);
}
.roadmap-year-cell {
padding: 0.5rem 1rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--accent);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid var(--border);
}
.roadmap-year-cell.span-4 {
grid-column: span 4;
cursor: pointer;
transition: background 0.2s ease;
}
.roadmap-year-cell:last-child { border-right: none; }
.roadmap-phase-divider-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-bottom: 1px solid var(--border);
}
.roadmap-phase-title-cell {
padding: 0.6rem 1rem;
font-size: 1rem;
font-weight: 700;
color: var(--accent);
display: flex;
align-items: center;
border-right: 1px solid var(--border);
}
.roadmap-phase-title-cell.span-4 {
grid-column: span 4;
text-align: center;
justify-content: center;
}
.roadmap-phase-title-cell:last-child,
.roadmap-phase-title-cell.span-4:last-child { border-right: none; }
/* Quarter headers row */
.roadmap-quarter-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-bottom: 1px solid var(--border);
}
.roadmap-quarter-row > * {
border-right: 1px solid var(--border);
padding: 0.6rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.roadmap-quarter-row > *:last-child { border-right: none; }
.roadmap-quarter-header {
font-size: 0.85rem;
font-weight: 700;
color: var(--muted);
text-align: center;
justify-content: center;
}
/* KPI row - subgrid for alignment */
.roadmap-kpi-row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: subgrid;
border-bottom: 1px solid var(--border);
}
.roadmap-kpi-row > * {
border-right: 1px solid var(--border);
padding: 0.75rem 0.9rem;
min-height: 2.75rem;
display: flex;
align-items: center;
}
.roadmap-kpi-row > *:last-child { border-right: none; }
.roadmap-kpi-label {
font-size: 1rem;
font-weight: 500;
color: var(--text);
padding-left: 1.25rem !important;
}
/* Quarter cells - empty or with bar */
.roadmap-slot {
position: relative;
display: flex;
gap: 0.25rem;
align-items: center;
justify-content: center;
min-height: 2.5rem;
padding: 0.5rem 0.4rem !important;
}
.roadmap-slot.has-bar {
flex-direction: column;
gap: 0.25rem;
min-height: 3rem;
cursor: default;
}
.slot-bar {
width: 100%;
height: 10px;
background: rgba(245, 52, 0, 0.4);
border-radius: 2px;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.roadmap-slot.has-bar:hover .slot-bar {
background: var(--accent);
box-shadow: 0 0 12px rgba(245, 52, 0, 0.3);
}
.slot-target {
font-size: 0.8rem;
font-weight: 500;
color: var(--text);
text-align: center;
line-height: 1.2;
}
/* Tooltip for Zielwert (optional, for slots without slot-target) */
.roadmap-slot .slot-tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
padding: 0.5rem 0.75rem;
background: #fff;
border: 1px solid var(--border);
color: var(--text);
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
white-space: normal;
max-width: 220px;
text-align: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 20;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.roadmap-slot .slot-target + .slot-tooltip,
.roadmap-slot:has(.slot-target) .slot-tooltip {
display: none;
}
.roadmap-slot:hover .slot-tooltip {
opacity: 1;
}
/* Content slides (right from main roadmap) */
.content-slide {
text-align: left;
max-width: 900px;
padding: 4rem;
}
.content-slide h2.slide-title {
margin-bottom: 2rem;
}
.content-slide .content-list {
list-style: none;
font-size: 1.1rem;
line-height: 1.8;
}
.content-slide .content-list li {
margin-bottom: 1rem;
padding-left: 1.5rem;
position: relative;
}
.content-slide .content-list li::before {
content: "•";
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
}
.content-slide.content-scroll {
overflow-y: auto;
overflow-x: hidden;
align-items: flex-start;
padding-top: 2rem;
-webkit-overflow-scrolling: touch;
}
.massnahmenplan-slide.content-scroll {
padding-top: 3rem;
align-items: center;
justify-content: flex-start;
}
.content-slide .content-subtitle {
font-size: 0.95rem;
color: var(--muted);
margin-bottom: 1.5rem;
}
.content-slide .content-goals {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--text);
}
.content-slide .content-month {
font-size: 1rem;
font-weight: 700;
color: var(--accent);
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
.content-slide .content-output {
font-size: 0.9rem;
background: rgba(74, 222, 128, 0.08);
border-left: 3px solid var(--success);
padding: 0.75rem 1rem;
margin-top: 1rem;
border-radius: 0 4px 4px 0;
}
/* Maßnahmenplan slide: centered, clean, grid layout */
.massnahmenplan-slide {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
max-width: 1400px;
margin: 0 auto;
padding: 5rem 4rem 6rem;
text-align: center;
}
.massnahmenplan-slide .content-subtitle,
.massnahmenplan-goals-title,
.massnahmenplan-accordion summary {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.massnahmenplan-slide .slide-title {
margin-top: 2rem;
margin-bottom: 0.75rem;
margin-left: 4rem;
text-align: left;
align-self: flex-start;
width: 100%;
}
.massnahmenplan-slide .content-subtitle {
font-weight: 400;
color: var(--muted);
margin-bottom: 4rem;
text-align: left;
align-self: flex-start;
margin-left: 4rem;
}
.massnahmenplan-grid {
display: grid;
grid-template-columns: 400px minmax(0, 1fr);
gap: 5rem;
align-items: start;
width: 100%;
max-width: 1300px;
}
.massnahmenplan-goals {
position: sticky;
top: 2rem;
background: transparent;
padding: 2rem 2rem;
text-align: left;
margin-left: 2rem;
}
.massnahmenplan-goals-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
margin-bottom: 2rem;
text-transform: none;
letter-spacing: -0.02em;
}
.massnahmenplan-goals .content-list {
font-size: 1.15rem;
line-height: 1.9;
margin: 0;
font-weight: 400;
}
.massnahmenplan-goals .content-list li {
margin-bottom: 1.5rem;
padding-left: 0;
letter-spacing: -0.01em;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.massnahmenplan-goals .content-list li:has(.feature-status) {
display: grid;
grid-template-columns: 1.5rem 1fr auto;
align-items: baseline;
}
.massnahmenplan-goals .content-list li::before {
content: "•";
position: static;
color: var(--accent);
font-size: 1.1em;
flex-shrink: 0;
line-height: 1.9;
align-self: center;
}
.massnahmenplan-goals .content-list li:has(.feature-status)::before {
grid-column: 1;
}
.massnahmenplan-goals .content-list .feature-name {
grid-column: 2;
min-width: 0;
}
.massnahmenplan-goals .content-list .feature-status {
grid-column: 3;
font-weight: 500;
color: var(--muted);
white-space: nowrap;
}
.massnahmenplan-lead {
font-size: 1.15rem;
line-height: 1.8;
font-weight: 400;
color: var(--text);
margin: 0;
}
.massnahmenplan-accordion {
display: flex;
flex-direction: column;
gap: 0;
text-align: left;
}
.massnahmenplan-accordion details {
border-radius: 0;
overflow: hidden;
background: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
transition: border-color 0.3s ease;
}
.massnahmenplan-accordion details:hover {
border-color: rgba(0, 0, 0, 0.15);
}
.massnahmenplan-accordion details[open] {
border-color: rgba(245, 52, 0, 0.3);
}
.massnahmenplan-accordion summary {
padding: 2rem 0;
font-size: 1.5rem;
font-weight: 600;
color: var(--text);
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
letter-spacing: -0.02em;
transition: color 0.3s ease;
text-align: left;
width: 100%;
box-sizing: border-box;
}
.massnahmenplan-accordion details[open] summary {
color: var(--accent);
}
.massnahmenplan-accordion summary::-webkit-details-marker,
.massnahmenplan-accordion summary::marker {
display: none;
}
.massnahmenplan-accordion summary::after {
content: "";
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238b8b9a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
opacity: 0.8;
transform: rotate(-90deg);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
flex-shrink: 0;
}
.massnahmenplan-accordion details[open] summary::after {
transform: rotate(0deg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23f53400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.massnahmenplan-accordion .accordion-content {
padding: 0 0 1.5rem 0;
animation: accordion-open 0.4s ease forwards;
text-align: left;
width: 100%;
display: block;
}
@keyframes accordion-open {
from { opacity: 0; }
to { opacity: 1; }
}
.massnahmenplan-accordion .accordion-content .content-list {
font-size: 1.1rem;
line-height: 1.9;
margin: 0;
margin-left: 0;
padding-left: 0;
font-weight: 400;
color: var(--text);
text-align: left;
list-style: none;
}
.massnahmenplan-accordion .accordion-content .content-list li {
margin-bottom: 1.25rem;
padding-left: 0;
letter-spacing: -0.01em;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.massnahmenplan-accordion .accordion-content .content-list li::before {
content: "•";
position: static;
color: var(--accent);
font-size: 1.1em;
flex-shrink: 0;
line-height: 1;
align-self: flex-start;
margin-top: 0.4em;
}
@media (max-width: 1024px) {
.massnahmenplan-slide { padding: 4rem 2rem 5rem; }
.massnahmenplan-grid { grid-template-columns: 1fr; gap: 4rem; }
}
/* Navigation */
.nav-hint {
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.8rem;
color: var(--muted);
display: flex;
gap: 2rem;
z-index: 100;
}
.slide-counter {
position: fixed;
top: 1.5rem;
right: 1.5rem;
font-size: 0.85rem;
color: var(--muted);
font-family: 'IBM Plex Mono', monospace;
z-index: 100;
}
/* Year slides - single year roadmap */
.roadmap-year-container {
display: grid;
grid-template-columns: 280px repeat(4, minmax(80px, 1fr));
max-width: 900px;
width: 100%;
border-left: 1px solid var(--border);
border-right: 1px solid var(--border);
border-top: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: var(--bg);
}
.roadmap-year-container .roadmap-year-row,
.roadmap-year-container .roadmap-quarter-row,
.roadmap-year-container .roadmap-phase-divider-row,
.roadmap-year-container .roadmap-kpi-row {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
border-bottom: 1px solid var(--border);
}
.roadmap-year-container .roadmap-phase-divider-row {
border-bottom: 1px solid var(--border);
}
.roadmap-year-container .roadmap-year-cell.span-4 {
grid-column: span 4;
cursor: default;
}
.roadmap-year-container .roadmap-phase-title-cell.span-4 {
grid-column: span 4;
}
.roadmap-year-container .roadmap-slot.span-2,
.roadmap-container .roadmap-slot.span-2 {
grid-column: span 2;
}
.roadmap-year-container .roadmap-slot.span-3,
.roadmap-container .roadmap-slot.span-3 {
grid-column: span 3;
}
</style>
</head>
<body>
<div class="presentation">
<!-- Slide 1: Roadmap -->
<section class="slide slide-roadmap active" data-slide="0" data-slide-type="main">
<h1 class="slide-title">PowerOn Roadmap 2026 - 2028</h1>
<div class="roadmap-container">
<!-- Year headers -->
<div class="roadmap-year-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-year-cell span-4" data-year-slide="4">2026</div>
<div class="roadmap-year-cell span-4" data-year-slide="5">2027</div>
<div class="roadmap-year-cell span-4" data-year-slide="6">2028</div>
</div>
<!-- Quarter headers -->
<div class="roadmap-quarter-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-quarter-header">Q1</div>
<div class="roadmap-quarter-header">Q2</div>
<div class="roadmap-quarter-header">Q3</div>
<div class="roadmap-quarter-header">Q4</div>
<div class="roadmap-quarter-header">Q1</div>
<div class="roadmap-quarter-header">Q2</div>
<div class="roadmap-quarter-header">Q3</div>
<div class="roadmap-quarter-header">Q4</div>
<div class="roadmap-quarter-header">Q1</div>
<div class="roadmap-quarter-header">Q2</div>
<div class="roadmap-quarter-header">Q3</div>
<div class="roadmap-quarter-header">Q4</div>
</div>
<!-- Phase headline: above 2026 KPIs -->
<div class="roadmap-phase-divider-row">
<div class="roadmap-phase-title-cell"></div>
<div class="roadmap-phase-title-cell span-4">Stabilisierung & Market Entry</div>
<div class="roadmap-phase-title-cell span-4"></div>
<div class="roadmap-phase-title-cell span-4"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattform-Stabilität aufgebaut</div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-tooltip">Erste produktive Deployments</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Erste zahlende Nutzung</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">Wiederkehrender Umsatz gestartet</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Reproduzierbare Implementierung</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-tooltip">Standard-Onboarding etabliert</span></div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Product-Market-Fit erreicht</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">1015 aktive Kunden</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<!-- Phase headline: above 2027 KPIs -->
<div class="roadmap-phase-divider-row">
<div class="roadmap-phase-title-cell"></div>
<div class="roadmap-phase-title-cell span-4"></div>
<div class="roadmap-phase-title-cell span-4">Skalierung & Standardisierung</div>
<div class="roadmap-phase-title-cell span-4"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattform standardisiert</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">Wiederverwendbare Module</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Skalierbares Onboarding</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-tooltip">Implementierungszeit sinkt</span></div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Nutzungsausbau</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-3"><span class="slot-bar"></span><span class="slot-tooltip">Mehr Prozesse pro Kunde</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Marktdurchdringung</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">2530 Kunden</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<!-- Phase headline: above 2028 KPIs -->
<div class="roadmap-phase-divider-row">
<div class="roadmap-phase-title-cell"></div>
<div class="roadmap-phase-title-cell span-4"></div>
<div class="roadmap-phase-title-cell span-4"></div>
<div class="roadmap-phase-title-cell span-4">Plattformreife & Infrastrukturstatus</div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattform im Tagesbetrieb</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">Hohe Kundenbindung</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Nutzungstiefe steigt</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">Abteilungsübergreifende Nutzung</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Expansion statt Akquisition</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">Wachstum aus Bestandskunden</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Operative KI-Infrastruktur</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-tooltip">5070 Kunden</span></div>
</div>
</div>
</section>
<!-- Content slides (right from main roadmap) -->
<section class="slide content-slide content-scroll massnahmenplan-slide" data-slide="1">
<h2 class="slide-title">Maßnahmenplan MärzMai 2026</h2>
<p class="content-subtitle">Q1/Q2 Übergang Stabilisierung &amp; Market Entry</p>
<div class="massnahmenplan-grid">
<aside class="massnahmenplan-goals">
<p class="massnahmenplan-goals-title">Ziel bis Ende Mai</p>
<ul class="content-list">
<li>Standard-Onboarding V1 steht</li>
<li>1 produktives Onboarding live</li>
<li>Paid Usage gestartet (erster zahlender Nutzer/Kunden)</li>
<li>Security &amp; Compliance als Default im Betrieb</li>
</ul>
</aside>
<div class="massnahmenplan-accordion">
<details open>
<summary>März 2026 Foundations + Pilot zu Produktivität</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Mandanten-/User-Setup getestet und stabilisiert, vollständige Auditierbarkeit sichergestellt</li>
<li>Security-Baseline aktivieren: Masking/Neutralisierung als Standard ausrollen</li>
<li>Release-Kriterien + Stabilisierung der kritischen Pfade (UAM, Neutralization, Trustee/Extraktion, Automation)</li>
<li>Pricing/Package V1 vollständig in Plattform integrieren + Billing/Terms vorbereiten</li>
</ul>
</div>
</details>
<details>
<summary>April 2026 Reproduzierbarkeit</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Produktivsetzung Kunde A inkl. Abnahme</li>
<li>Paid Usage ausrollen (Pricing/Package v1, Billing-Prozess, Vertrag/Terms light)</li>
<li>Workflow Engine hardening: Fehlerbehandlung, Retries, Idempotenz, Kontextgrenzen, Queue/Jobs (nur die wichtigsten 20%)</li>
<li>Kosten-/Usage-Metering testen</li>
</ul>
</div>
</details>
<details>
<summary>Mai 2026 Paid Usage + Skalierbarer Betrieb</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Support &amp; Betrieb V1: Monitoring-Dashboards, Alerting, Incident-Routinen, Release-Kadenz</li>
<li>Security &amp; Compliance ausbauen: Policy-Sets pro Workflow, Auditierbarkeit (wer/wann/was), Fallback-Strategie (lokales LLM wo nötig)</li>
</ul>
</div>
</details>
</div>
</div>
</section>
<section class="slide content-slide content-scroll massnahmenplan-slide" data-slide="2">
<h2 class="slide-title">USP Unique Selling Proposition von PowerOn am Markt</h2>
<p class="content-subtitle">Was hebt uns ab von den anderen?</p>
<div class="massnahmenplan-grid">
<aside class="massnahmenplan-goals">
<p class="massnahmenplan-goals-title">Kernaussage</p>
<p class="massnahmenplan-lead">
PowerOn operationalisiert KI in bestehenden KMU-Systemlandschaften sicher, kontrolliert und dauerhaft, ohne ERP/BuHa zu ersetzen.
</p>
</aside>
<div class="massnahmenplan-accordion">
<details open>
<summary>1) Integrations- &amp; Betriebsschicht statt KI-Tool</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Fokus auf die Wertschöpfungsebene, die heute fehlt: KI in reale Systeme, Datenflüsse und Workflows einbetten</li>
<li>Nicht „noch ein Chatbot“, sondern Orchestrierung + Workflow-Engine + Integrationsmodule für produktive Prozesse</li>
</ul>
</div>
</details>
<details>
<summary>2) Security &amp; Compliance by Design (Schweizer KMU-tauglich)</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Datensouveränität &amp; Auditierbarkeit als Standard, nicht als Add-on</li>
<li>Vorgelagerte Datenkontrolle (Neutralisierung/Masking, Datenreduktion) vor Modellnutzung</li>
<li>Lokales Schweizer LLM als datensouveräner Modus/Fallback + kontrollierte Nutzung externer Modelle je Risikoprofil</li>
</ul>
</div>
</details>
<details>
<summary>3) Integration statt Replacement</summary>
<div class="accordion-content">
<ul class="content-list">
<li>PowerOn ersetzt keine Kernsysteme (ERP, Buchhaltung, Branchensoftware)</li>
<li>Mehrwert entsteht durch Automatisierung innerhalb der bestehenden Systemlandschaft, mit minimalen Eingriffen</li>
</ul>
</div>
</details>
<details>
<summary>4) Anbieter- &amp; Modellflexibilität statt Abhängigkeit</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Orchestrierung über mehrere Modellanbieter (AI Center) reduziert Vendor Lock-in</li>
<li>Kontrolle über Datenflüsse, Kosten, Zugriff und Modellwahl bleibt beim Kunden</li>
</ul>
</div>
</details>
<details>
<summary>5) Plattformstrategie: wiederholbar ausrollbar → skalierbar</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Ziel ist nicht Projektberatung, sondern reproduzierbare Deployments, standardisierte Module, klarer Onboardingpfad</li>
<li>Progression: stabiler Einstiegspfad → wiederholbarer Nutzen → skalierbares Wachstum → Infrastrukturstatus</li>
</ul>
</div>
</details>
</div>
</div>
</section>
<section class="slide content-slide content-scroll massnahmenplan-slide" data-slide="3">
<h2 class="slide-title">Einordnung der Features (bereits vorhanden oder in Arbeit)</h2>
<p class="content-subtitle">PowerOn-Plattform Features, Setup &amp; Roadmap</p>
<div class="massnahmenplan-grid">
<aside class="massnahmenplan-goals">
<p class="massnahmenplan-goals-title">Strategische Features</p>
<ul class="content-list">
<li><span class="feature-name"><strong>Chatbot / Playground</strong></span><span class="feature-status">Live</span></li>
<li><span class="feature-name"><strong>Privates LLM</strong></span><span class="feature-status">Live</span></li>
<li><span class="feature-name"><strong>BuHa-Integration (Trustee)</strong></span><span class="feature-status">Live</span></li>
<li><span class="feature-name"><strong>TeamsChatbot</strong></span><span class="feature-status">Live</span></li>
<li><span class="feature-name"><strong>Dokumentbearbeitung mit KI</strong></span><span class="feature-status">In Arbeit</span></li>
</ul>
</aside>
<div class="massnahmenplan-accordion">
<details open>
<summary>Chatbot / Chatplayground</summary>
<div class="accordion-content">
<ul class="content-list">
<li><strong>Chatbot:</strong> KI-gestützter Chat mit Workflows, Tools, Memory; RBAC pro Feature-Instanz; Streaming, Multi-Round</li>
<li><strong>Chatplayground:</strong> Sichere Testumgebung für KI-Chat; isolierte Umgebung pro Mandant; Wrapper um interfaceDbChat</li>
</ul>
</div>
</details>
<details>
<summary>Privates LLM</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Ollama-basierter Connector (privatellm); lokal/on-premise; kein Datenabfluss</li>
<li>Für höchste Datenschutzanforderungen; Fallback-Strategie für sensibles Material</li>
</ul>
</div>
</details>
<details>
<summary>Trustee / BuHa-Integration</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Treuhand/Buchhaltung: Organisationen, Verträge, Dokumente, Positionen, Buchungssynchronisation</li>
<li>Accounting-Connectors: Bexio, Abacus, RMA; Sync zu Buchhaltungssystemen</li>
<li>Feature-eigene Rollen (admin, operate, userreport); RBAC + feature-spezifische Zugriffslogik</li>
</ul>
</div>
</details>
<details>
<summary>TeamsChatbot</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Microsoft Teams Bot mit authentifiziertem Nutzer; voll protokolliert</li>
<li>Sessions, Transcripts, Bot-Antworten; System-Bots (mandantenbezogen); Browser-Connector für Interaktionen</li>
</ul>
</div>
</details>
<details>
<summary>Dokumentbearbeitung mit KI (Neutralization)</summary>
<div class="accordion-content">
<ul class="content-list">
<li>Maskierung/Pseudonymisierung sensibler Daten (PII) vor KI-Verarbeitung</li>
<li>PDF in-place (PyMuPDF), Platzhalter, konfigurierbare Muster; Neutralize Playground</li>
<li>Referenzprozess ERP/Dokument-Extraktion mit strukturiertem Output (in Arbeit)</li>
</ul>
</div>
</details>
</div>
</div>
</section>
<!-- Year slides (parallel track: Down from main) -->
<section class="slide slide-roadmap slide-year" data-slide="4" data-slide-type="year" data-year="2026">
<h1 class="slide-title">PowerOn Roadmap 2026</h1>
<div class="roadmap-year-container">
<div class="roadmap-year-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-year-cell span-4">2026</div>
</div>
<div class="roadmap-quarter-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-quarter-header">Q1</div>
<div class="roadmap-quarter-header">Q2</div>
<div class="roadmap-quarter-header">Q3</div>
<div class="roadmap-quarter-header">Q4</div>
</div>
<div class="roadmap-phase-divider-row">
<div class="roadmap-phase-title-cell"></div>
<div class="roadmap-phase-title-cell span-4">Stabilisierung &amp; zahlende Nutzung</div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Produktive Kundeninstallationen gestartet</div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 1 KMU</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Core-Plattformmodule stabil integriert</div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-target">≥ 80 % Features konsolidiert</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Erste zahlende Plattformnutzer</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 10 Nutzer</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Durchschnittliche Integrationszeit pro Kunde</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">&lt; 6 Wochen</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Security &amp; Compliance Features ausgebaut</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-target">Neutralisierer und schweizer LLM verlässlich nutzbar</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Wiederholbarer Onboarding-Prozess</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-target">1 Standard-Onboarding</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Features im Live-Betrieb</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">alle implementierten Features produktiv und stabil</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattform-Uptime</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 99 %</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Produktive KMU-Kunden gesamt</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">5-10 Kunden</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Anteil aktive Nutzung vs. Pilot</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 60 % aktiv</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">First Value Time (Kunde bis Nutzen)</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">&lt; 30 Tage</span></div>
</div>
</div>
</section>
<section class="slide slide-roadmap slide-year" data-slide="5" data-slide-type="year" data-year="2027">
<h1 class="slide-title">PowerOn Roadmap 2027</h1>
<div class="roadmap-year-container">
<div class="roadmap-year-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-year-cell span-4">2027</div>
</div>
<div class="roadmap-quarter-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-quarter-header">Q1</div>
<div class="roadmap-quarter-header">Q2</div>
<div class="roadmap-quarter-header">Q3</div>
<div class="roadmap-quarter-header">Q4</div>
</div>
<div class="roadmap-phase-divider-row">
<div class="roadmap-phase-title-cell"></div>
<div class="roadmap-phase-title-cell span-4">Skalierung & Standardisierung</div>
</div>
<!-- Q1 2027 -->
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Erweiterungen bei Bestandskunden</div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 30 % Kunden</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Featureerweiterung</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-3"><span class="slot-bar"></span><span class="slot-target">10 stabile Features</span></div>
</div>
<!-- Q2 2027 -->
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Neue produktive Kunden</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 10 gesamt</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Implementierungszeit pro Kunde</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">&lt; 4 Wochen</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Wiederverwendbare Integrationsmuster</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-target">≥ 80 % Projekte</span></div>
<div class="roadmap-slot"></div>
</div>
<!-- Q3 2027 -->
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattformnutzung pro Kunde (aktive Nutzer)</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 10 je Kunde</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Standardisierte Security Deployments</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">100 %</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Release- &amp; Rollout-Prozess etabliert</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">1 stabiler Zyklus</span></div>
<div class="roadmap-slot"></div>
</div>
<!-- Q4 2027 -->
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Produktive Unternehmenskunden</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-target">2530</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Umsatzanteil aus Bestandskunden</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 70 %</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Onboarding-Aufwand pro Kunde reduziert</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">40 % ggü. 2026</span></div>
</div>
</div>
</section>
<section class="slide slide-roadmap slide-year" data-slide="6" data-slide-type="year" data-year="2028">
<h1 class="slide-title">PowerOn Roadmap 2028</h1>
<div class="roadmap-year-container">
<div class="roadmap-year-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-year-cell span-4">2028</div>
</div>
<div class="roadmap-quarter-row">
<div class="roadmap-phase-spacer"></div>
<div class="roadmap-quarter-header">Q1</div>
<div class="roadmap-quarter-header">Q2</div>
<div class="roadmap-quarter-header">Q3</div>
<div class="roadmap-quarter-header">Q4</div>
</div>
<div class="roadmap-phase-divider-row">
<div class="roadmap-phase-title-cell"></div>
<div class="roadmap-phase-title-cell span-4">Plattformreife & Infrastrukturstatus</div>
</div>
<!-- Q1 2028 -->
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattform als Betriebsinfrastruktur genutzt</div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 60 % Kunden</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Kunden-Retention</div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 90 %</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<!-- Q2 2028 -->
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Nutzungstiefe (Prozessabdeckung)</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 2 Abteilungen/Kunde</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Erweiterungen bestehender Installationen</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 40 % Kunden</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Betriebskosten pro Kunde</div>
<div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">20 %</span></div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Standardisierte Erweiterungsrollouts</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 80 % automatisiert</span></div>
<div class="roadmap-slot"></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Anteil Umsatz Expansion vs Neukunden</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 70 % Expansion</span></div>
<div class="roadmap-slot"></div>
</div>
<!-- Q4 2028 -->
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Produktive Unternehmenskunden</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">5070</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattform als Selbstläufer (Self-Service)</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-target">Kunden registrieren, verwalten und managen sich selbst</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Support-Aufwand reduziert</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar span-2"><span class="slot-bar"></span><span class="slot-target">Supportbedarf -50 %</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Plattform-Nutzung als Dauerbetrieb</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">≥ 95 % Kunden</span></div>
</div>
<div class="roadmap-kpi-row">
<div class="roadmap-kpi-label">Churn Rate</div>
<div class="roadmap-slot"></div><div class="roadmap-slot"></div><div class="roadmap-slot"></div>
<div class="roadmap-slot has-bar"><span class="slot-bar"></span><span class="slot-target">&lt; 5 %</span></div>
</div>
</div>
</section>
</div>
<div class="nav-hint">
<span>← → ↓ ↑ Pfeiltasten</span>
<span>→ = Maßnahmenplan, USP, Features · ↓ = Jahres-Slides · Klick auf Jahr für Details</span>
</div>
<div class="slide-counter">
<span id="current">1</span> / <span id="total">7</span>
</div>
<script>
const slides = document.querySelectorAll('.slide');
const totalSlides = slides.length;
const MAIN_SLIDE = 0;
const FIRST_CONTENT = 1;
const LAST_CONTENT = 3;
const FIRST_YEAR = 4;
const LAST_YEAR = 6;
function showSlide(index) {
if (index < 0) index = 0;
if (index >= totalSlides) index = totalSlides - 1;
slides.forEach((s, i) => s.classList.toggle('active', i === index));
document.getElementById('current').textContent = index + 1;
}
let currentIndex = 0;
showSlide(0);
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') {
e.preventDefault();
if (currentIndex === MAIN_SLIDE) {
currentIndex = FIRST_CONTENT;
} else if (currentIndex >= FIRST_CONTENT && currentIndex < LAST_CONTENT) {
currentIndex++;
} else if (currentIndex === LAST_CONTENT) {
currentIndex = MAIN_SLIDE;
} else if (currentIndex >= FIRST_YEAR && currentIndex < LAST_YEAR) {
currentIndex++;
}
showSlide(currentIndex);
} else if (e.key === 'ArrowLeft') {
e.preventDefault();
if (currentIndex === FIRST_CONTENT) {
currentIndex = MAIN_SLIDE;
} else if (currentIndex > FIRST_CONTENT && currentIndex <= LAST_CONTENT) {
currentIndex--;
} else if (currentIndex > FIRST_YEAR && currentIndex <= LAST_YEAR) {
currentIndex--;
}
showSlide(currentIndex);
} else if (e.key === 'ArrowDown') {
e.preventDefault();
if (currentIndex === MAIN_SLIDE) {
currentIndex = FIRST_YEAR;
} else if (currentIndex >= FIRST_YEAR && currentIndex < LAST_YEAR) {
currentIndex++;
}
showSlide(currentIndex);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
if (currentIndex >= FIRST_YEAR && currentIndex <= LAST_YEAR) {
currentIndex = MAIN_SLIDE;
} else if (currentIndex >= FIRST_CONTENT && currentIndex <= LAST_CONTENT) {
currentIndex = MAIN_SLIDE;
}
showSlide(currentIndex);
} else if (e.key === ' ') {
e.preventDefault();
if (currentIndex === MAIN_SLIDE) {
currentIndex = FIRST_CONTENT;
} else if (currentIndex >= FIRST_CONTENT && currentIndex < LAST_CONTENT) {
currentIndex++;
} else if (currentIndex === LAST_CONTENT) {
currentIndex = MAIN_SLIDE;
} else if (currentIndex >= FIRST_YEAR && currentIndex < LAST_YEAR) {
currentIndex++;
} else if (currentIndex === LAST_YEAR) {
currentIndex = MAIN_SLIDE;
}
showSlide(currentIndex);
} else if (e.key === 'Home') {
currentIndex = 0;
showSlide(currentIndex);
} else if (e.key === 'End') {
currentIndex = totalSlides - 1;
showSlide(currentIndex);
}
});
document.querySelectorAll('.roadmap-year-cell[data-year-slide]').forEach(cell => {
cell.addEventListener('click', () => {
const to = parseInt(cell.dataset.yearSlide, 10);
if (!isNaN(to)) {
currentIndex = to;
showSlide(currentIndex);
}
});
});
</script>
</body>
</html>