1284 lines
No EOL
45 KiB
HTML
1284 lines
No EOL
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MyKoelliker - AI-Enhanced Automation Strategy</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
background: #f8f9fa;
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
padding: 40px;
|
|
text-align: center;
|
|
color: #1e3a8a;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 10px;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.header p {
|
|
font-size: 1.2em;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
background: #f8f9fa;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 20px 30px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 1em;
|
|
font-weight: 500;
|
|
color: #6b7280;
|
|
transition: all 0.3s ease;
|
|
white-space: nowrap;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
background: rgba(30, 58, 138, 0.1);
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: #1e3a8a;
|
|
background: white;
|
|
}
|
|
|
|
.tab-button.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: #1e3a8a;
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
padding: 40px;
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
.tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
h2 {
|
|
color: #1e3a8a;
|
|
margin-bottom: 20px;
|
|
font-size: 1.8em;
|
|
border-left: 4px solid #1e3a8a;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
h3 {
|
|
color: #333;
|
|
margin: 25px 0 15px 0;
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
.info-card {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
border-left: 4px solid #1e3a8a;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.service-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 25px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.service-card {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
border-top: 3px solid #1e3a8a;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.journey-step {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 15px 0;
|
|
padding: 15px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.journey-step:hover {
|
|
background: #e9ecef;
|
|
}
|
|
|
|
.step-number {
|
|
background: #1e3a8a;
|
|
color: white;
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
margin-right: 15px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ai-use-case {
|
|
background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin: 20px 0;
|
|
border: 2px solid #e0e0e0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.ai-use-case:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.2);
|
|
border-color: #1e3a8a;
|
|
}
|
|
|
|
.metrics {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.metric {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
color: #1e3a8a;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.metric-label {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.timeline {
|
|
position: relative;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: #1e3a8a;
|
|
}
|
|
|
|
.timeline-item {
|
|
margin: 30px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.timeline-item:nth-child(even) {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.timeline-content {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
flex: 1;
|
|
margin: 0 20px;
|
|
}
|
|
|
|
.timeline-dot {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #1e3a8a;
|
|
border-radius: 50%;
|
|
border: 4px solid white;
|
|
box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.3);
|
|
}
|
|
|
|
.highlight-box {
|
|
background: #fbbf24;
|
|
color: #1e3a8a;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin: 20px 0;
|
|
font-weight: 500;
|
|
box-shadow: 0 5px 15px rgba(251, 191, 36, 0.3);
|
|
}
|
|
|
|
.company-info {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.company-detail {
|
|
padding: 20px;
|
|
background: #f8f9fa;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.company-detail h4 {
|
|
color: #1e3a8a;
|
|
margin-bottom: 15px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.customer-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.customer-tag {
|
|
background: #1e3a8a;
|
|
color: white;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.tech-stack {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
gap: 15px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.tech-item {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
border: 2px solid #e0e0e0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tech-item:hover {
|
|
border-color: #1e3a8a;
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 5px 15px rgba(30, 58, 138, 0.2);
|
|
}
|
|
|
|
ul {
|
|
margin-left: 20px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
li {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header h1 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.tabs {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 15px 20px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.company-info {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.timeline::before {
|
|
left: 30px;
|
|
}
|
|
|
|
.timeline-item,
|
|
.timeline-item:nth-child(even) {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeIn 0.5s ease;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.rating-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.rating-item {
|
|
background: white;
|
|
border-radius: 10px;
|
|
padding: 25px;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
border-left: 4px solid #1e3a8a;
|
|
}
|
|
|
|
.rating-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
}
|
|
|
|
.rating-header h3 {
|
|
color: #1e3a8a;
|
|
margin: 0;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.rating-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.rating-btn {
|
|
padding: 8px 16px;
|
|
border: 2px solid #e5e7eb;
|
|
background: white;
|
|
color: #6b7280;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.rating-btn:hover {
|
|
border-color: #1e3a8a;
|
|
color: #1e3a8a;
|
|
}
|
|
|
|
.rating-btn.selected {
|
|
background: #1e3a8a;
|
|
color: white;
|
|
border-color: #1e3a8a;
|
|
}
|
|
|
|
.rating-btn[data-status="full"].selected {
|
|
background: #10b981;
|
|
border-color: #10b981;
|
|
}
|
|
|
|
.rating-btn[data-status="partial"].selected {
|
|
background: #f59e0b;
|
|
border-color: #f59e0b;
|
|
}
|
|
|
|
.rating-btn[data-status="none"].selected {
|
|
background: #ef4444;
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.roadmap-compact {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.roadmap-phase {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
border-left: 4px solid #1e3a8a;
|
|
}
|
|
|
|
.phase-number {
|
|
background: #1e3a8a;
|
|
color: white;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.phase-content h4 {
|
|
color: #1e3a8a;
|
|
margin: 0 0 8px 0;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.phase-content p {
|
|
margin: 0;
|
|
color: #6b7280;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.metrics-compact {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 20px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.metric-compact {
|
|
text-align: center;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.metric-compact .metric-value {
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
color: #1e3a8a;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.metric-compact .metric-label {
|
|
color: #6b7280;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.roadmap-timeline {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.roadmap-milestone {
|
|
background: white;
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
|
|
border-left: 6px solid #1e3a8a;
|
|
position: relative;
|
|
}
|
|
|
|
.milestone-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
margin-bottom: 25px;
|
|
padding-bottom: 15px;
|
|
border-bottom: 2px solid #f3f4f6;
|
|
}
|
|
|
|
.milestone-year {
|
|
background: #1e3a8a;
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border-radius: 25px;
|
|
font-weight: bold;
|
|
font-size: 1.1em;
|
|
min-width: 80px;
|
|
text-align: center;
|
|
}
|
|
|
|
.milestone-title {
|
|
color: #1e3a8a;
|
|
font-size: 1.4em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.milestone-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.milestone-goals h4,
|
|
.milestone-deliverables h4 {
|
|
color: #1e3a8a;
|
|
margin-bottom: 15px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.milestone-goals ul,
|
|
.milestone-deliverables ul {
|
|
margin: 0;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.milestone-goals li,
|
|
.milestone-deliverables li {
|
|
margin: 8px 0;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.vision-card {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
|
padding: 30px;
|
|
border-radius: 15px;
|
|
margin: 40px 0;
|
|
border-left: 6px solid #fbbf24;
|
|
text-align: center;
|
|
}
|
|
|
|
.vision-card h3 {
|
|
color: #1e3a8a;
|
|
margin-bottom: 20px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.vision-card p {
|
|
font-size: 1.2em;
|
|
color: #374151;
|
|
font-style: italic;
|
|
margin: 0;
|
|
}
|
|
|
|
.success-factors {
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.success-factors h3 {
|
|
color: #1e3a8a;
|
|
margin-bottom: 25px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.factor-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.factor-item {
|
|
background: white;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
border-top: 3px solid #1e3a8a;
|
|
}
|
|
|
|
.factor-item h4 {
|
|
color: #1e3a8a;
|
|
margin-bottom: 10px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.factor-item p {
|
|
color: #6b7280;
|
|
margin: 0;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.milestone-content {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.milestone-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 15px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>MyKoelliker AI Strategy Report</h1>
|
|
<p>Digitale Transformation durch AI-Enhanced Automation</p>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<button class="tab-button active" onclick="showTab('profile')">Firmenprofil</button>
|
|
<button class="tab-button" onclick="showTab('summary')">Zusammenfassung</button>
|
|
<button class="tab-button" onclick="showTab('services')">Services & Customer Journeys</button>
|
|
<button class="tab-button" onclick="showTab('ai-ideas')">Ideenbox - AI Use Cases</button>
|
|
<button class="tab-button" onclick="showTab('start')">Start</button>
|
|
<button class="tab-button" onclick="showTab('outlook')">Ausblick</button>
|
|
</div>
|
|
|
|
<!-- Firmenprofil Tab -->
|
|
<div id="profile" class="tab-content active">
|
|
<h2>Firmenprofil</h2>
|
|
|
|
<div class="info-card">
|
|
<h3>Über Koelliker Büroautomation AG</h3>
|
|
<p><strong>Gründung:</strong> 1945</p>
|
|
<p><strong>Rechtsform:</strong> Aktiengesellschaft (AG)</p>
|
|
<p><strong>Hauptsitz:</strong> Hertistrasse 31, 8304 Wallisellen, Schweiz</p>
|
|
<p><strong>Weitere Standorte:</strong> Crissier VD, Bioggio (Tessin)</p>
|
|
<p><strong>UID:</strong> CHE-105.952.569</p>
|
|
</div>
|
|
|
|
<div class="company-info">
|
|
<div class="company-detail">
|
|
<h4>Geschäftsführung & Eigentümer</h4>
|
|
<p>Die Firma ist als unabhängiges Schweizer KMU in Privatbesitz. Genaue Eigentumsverhältnisse und Führungsstrukturen sind nicht öffentlich verfügbar.</p>
|
|
</div>
|
|
|
|
<div class="company-detail">
|
|
<h4>Hauptkunden & Branchen</h4>
|
|
<div class="customer-list">
|
|
<span class="customer-tag">Finanzindustrie</span>
|
|
<span class="customer-tag">Banken</span>
|
|
<span class="customer-tag">Versicherungen</span>
|
|
<span class="customer-tag">Öffentl. Verwaltungen</span>
|
|
<span class="customer-tag">Transportunternehmen</span>
|
|
<span class="customer-tag">Energieversorger</span>
|
|
<span class="customer-tag">Gesundheitswesen</span>
|
|
<span class="customer-tag">Handelsfirmen</span>
|
|
<span class="customer-tag">Produzenten</span>
|
|
<span class="customer-tag">Inkassofirmen</span>
|
|
<span class="customer-tag">Pensionskassen</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<h3>Zertifizierungen & Standards</h3>
|
|
<div class="tech-stack">
|
|
<div class="tech-item">ISO 27001<br><small>Datenschutz</small></div>
|
|
<div class="tech-item">ISO 9001<br><small>Qualitätsmanagement</small></div>
|
|
<div class="tech-item">ISO 14001<br><small>Umweltmanagement</small></div>
|
|
<div class="tech-item">ISAE 3402<br><small>Service Organization</small></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-box">
|
|
<strong>🎯 Mission:</strong> "Wir helfen Schweizer KMU, ihr Papermanagement einfach, effizient und digitalisiert zu betreiben."
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zusammenfassung Tab -->
|
|
<div id="summary" class="tab-content">
|
|
<h2>Executive Summary</h2>
|
|
|
|
<div class="info-card">
|
|
<h3>Kerngeschäft</h3>
|
|
<p>MyKoelliker ist ein führender Schweizer Anbieter für die digitale Transformation von Dokumentenprozessen. Das Unternehmen bietet eine einzigartige Kombination aus Cloud-basierten SaaS-Lösungen und physischen Services, die es KMU und Grossunternehmen ermöglicht, ihre Dokumentenworkflows vollständig zu digitalisieren.</p>
|
|
</div>
|
|
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<div class="metric-value">75+</div>
|
|
<div class="metric-label">Jahre Erfahrung</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-value">4</div>
|
|
<div class="metric-label">Hauptservices</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-value">10+</div>
|
|
<div class="metric-label">Zielbranchen</div>
|
|
</div>
|
|
<div class="metric">
|
|
<div class="metric-value">100%</div>
|
|
<div class="metric-label">Cloud-basiert</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-card">
|
|
<h3>Strategische Positionierung</h3>
|
|
<ul>
|
|
<li><strong>Hybrid-Modell:</strong> Einzigartige Kombination aus digitalen Services und physischer Dokumentenverarbeitung</li>
|
|
<li><strong>Swiss Made:</strong> Lokale Produktion in Wallisellen und Bioggio mit höchsten Datenschutzstandards</li>
|
|
<li><strong>End-to-End Lösung:</strong> Komplette Abdeckung des Dokumenten-Lifecycle von Eingang bis Archivierung</li>
|
|
<li><strong>KI-Integration:</strong> Bereits heute Einsatz von KI für Dokumentenklassifizierung und OCR</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="ai-use-case">
|
|
<h3>AI-Transformation Potenzial</h3>
|
|
<p><strong>Vision:</strong> Entwicklung zur führenden AI-gestützten Dokumentenmanagement-Plattform der Schweiz</p>
|
|
<br>
|
|
<p><strong>Potenzielle Benefits durch AI-Integration:</strong></p>
|
|
<ul>
|
|
<li>Signifikante Reduktion manueller Tätigkeiten</li>
|
|
<li>Kostensenkung in Dokumentenprozessen</li>
|
|
<li>Verbesserte Fehlerrate bei automatisierten Prozessen</li>
|
|
<li>Neue Premium-Services möglich</li>
|
|
<li>Skalierung ohne linearen Personalaufbau</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="highlight-box">
|
|
<strong>Quick Win Empfehlung:</strong> Start mit AI-gestützter Rechnungsverarbeitung als Proof of Concept
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Services Tab -->
|
|
<div id="services" class="tab-content">
|
|
<h2>Services & Customer Journeys</h2>
|
|
|
|
<div class="service-grid">
|
|
<!-- SmartLetter -->
|
|
<div class="service-card">
|
|
<h3>SmartLetter - Digitaler Postausgang</h3>
|
|
<p>Cloud-basierte Plattform für digitalen Briefversand</p>
|
|
<h4 style="margin-top: 20px; color: #1e3a8a;">Customer Journey:</h4>
|
|
<div class="journey-step">
|
|
<span class="step-number">1</span>
|
|
<div>
|
|
<strong>Registrierung</strong><br>
|
|
Online-Anmeldung auf mykoelliker.pringio.com
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">2</span>
|
|
<div>
|
|
<strong>Upload</strong><br>
|
|
Dokumente als PDF hochladen (Web/API)
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">3</span>
|
|
<div>
|
|
<strong>Verarbeitung</strong><br>
|
|
Automatische Prüfung und Aufbereitung
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">4</span>
|
|
<div>
|
|
<strong>Produktion</strong><br>
|
|
Druck, Kuvertierung, Frankierung
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">5</span>
|
|
<div>
|
|
<strong>Versand</strong><br>
|
|
Physisch via Post oder digital via eBill
|
|
</div>
|
|
</div>
|
|
<h4 style="margin-top: 20px; color: #1e3a8a;">Benötigte Daten:</h4>
|
|
<ul>
|
|
<li>Absenderinformationen</li>
|
|
<li>Empfängeradressen</li>
|
|
<li>PDF-Dokumente</li>
|
|
<li>Versandoptionen</li>
|
|
<li>Kostenstellen</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- SmartScan -->
|
|
<div class="service-card">
|
|
<h3>SmartScan/SmartMailbox</h3>
|
|
<p>Scanning-Service für eingehende Briefpost mit KI-Unterstützung</p>
|
|
<h4 style="margin-top: 20px; color: #1e3a8a;">Customer Journey:</h4>
|
|
<div class="journey-step">
|
|
<span class="step-number">1</span>
|
|
<div>
|
|
<strong>Postumleitung</strong><br>
|
|
Einrichtung Weiterleitung an Scan-Center
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">2</span>
|
|
<div>
|
|
<strong>Öffnung</strong><br>
|
|
Maschinelle Brieföffnung
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">3</span>
|
|
<div>
|
|
<strong>Digitalisierung</strong><br>
|
|
Hochauflösendes Scannen mit OCR
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">4</span>
|
|
<div>
|
|
<strong>KI-Aufbereitung</strong><br>
|
|
Automatische Klassifizierung & Datenerkennung
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">5</span>
|
|
<div>
|
|
<strong>Distribution</strong><br>
|
|
Digitale Zustellung im ePost/SmartArchive
|
|
</div>
|
|
</div>
|
|
<h4 style="margin-top: 20px; color: #1e3a8a;">Benötigte Daten:</h4>
|
|
<ul>
|
|
<li>Postadresse für Umleitung</li>
|
|
<li>Benutzerkonten</li>
|
|
<li>Verteilungsregeln</li>
|
|
<li>Archivierungsrichtlinien</li>
|
|
<li>API-Endpoints</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- SmartArchive -->
|
|
<div class="service-card">
|
|
<h3>SmartArchive - DMS</h3>
|
|
<p>Professionelles digitales Archiv mit KI-gestützter Suche</p>
|
|
<h4 style="margin-top: 20px; color: #1e3a8a;">Customer Journey:</h4>
|
|
<div class="journey-step">
|
|
<span class="step-number">1</span>
|
|
<div>
|
|
<strong>Onboarding</strong><br>
|
|
System-Setup und Rechtevergabe
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">2</span>
|
|
<div>
|
|
<strong>Import</strong><br>
|
|
Multi-Channel Dokumentenimport
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">3</span>
|
|
<div>
|
|
<strong>Indexierung</strong><br>
|
|
Automatische Volltextindexierung mit KI
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">4</span>
|
|
<div>
|
|
<strong>Verwaltung</strong><br>
|
|
Tag-System, Notizen, Metadaten
|
|
</div>
|
|
</div>
|
|
<div class="journey-step">
|
|
<span class="step-number">5</span>
|
|
<div>
|
|
<strong>Compliance</strong><br>
|
|
10-jährige revisionssichere Archivierung
|
|
</div>
|
|
</div>
|
|
<h4 style="margin-top: 20px; color: #1e3a8a;">Benötigte Daten:</h4>
|
|
<ul>
|
|
<li>Dokumentenbestände</li>
|
|
<li>Organisationsstruktur</li>
|
|
<li>Metadaten-Schema</li>
|
|
<li>Compliance-Anforderungen</li>
|
|
<li>Such-Definitionen</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Ideas Tab -->
|
|
<div id="ai-ideas" class="tab-content">
|
|
<h2>Ideenbox - AI Use Cases Bewertung</h2>
|
|
<p style="margin-bottom: 30px; color: #6b7280;">Bitte bewerten Sie, welche dieser AI-Ideen Sie bereits umgesetzt haben oder teilweise implementiert haben.</p>
|
|
|
|
<div class="rating-list">
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>Intelligente Dokumentenklassifizierung</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Automatische Sortierung und Kategorisierung eingehender Dokumente mit Computer Vision und NLP</p>
|
|
</div>
|
|
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>Predictive Mail Volume Forecasting</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Vorhersage von Postvolumen für optimale Kapazitätsplanung und Personalplanung</p>
|
|
</div>
|
|
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>Intelligent Data Extraction</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Automatische Datenextraktion aus verschiedenen Dokumentenformaten mit LLMs</p>
|
|
</div>
|
|
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>Smart Quality Assurance</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Automatische Erkennung von Fehlern, Dubletten und Anomalien in Adressdaten</p>
|
|
</div>
|
|
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>Conversational Document Assistant</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Chatbot für Dokumentensuche und -verwaltung mit natürlicher Sprache</p>
|
|
</div>
|
|
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>Automatische Rechnungsverarbeitung</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Vollautomatische Verarbeitung von Eingangsrechnungen vom Scan bis zur Archivierung</p>
|
|
</div>
|
|
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>OCR mit Handschrift-Erkennung</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Erweiterte OCR-Funktionen für handschriftliche Notizen und Formulare</p>
|
|
</div>
|
|
|
|
<div class="rating-item">
|
|
<div class="rating-header">
|
|
<h3>Compliance Monitoring</h3>
|
|
<div class="rating-buttons">
|
|
<button class="rating-btn" data-status="none">Nicht vorhanden</button>
|
|
<button class="rating-btn" data-status="partial">Teilweise</button>
|
|
<button class="rating-btn" data-status="full">Haben wir schon</button>
|
|
</div>
|
|
</div>
|
|
<p>Automatische Überwachung von Compliance-Anforderungen und Aufbewahrungsfristen</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-box">
|
|
<strong>Nächste Schritte:</strong> Basierend auf Ihrer Bewertung können wir gezielt die fehlenden AI-Features entwickeln und bestehende Lösungen optimieren.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start Tab -->
|
|
<div id="start" class="tab-content">
|
|
<h2>Quick-Win Projekt: AI-gestützte Rechnungsverarbeitung</h2>
|
|
|
|
<div class="info-card">
|
|
<h3>Projektziel</h3>
|
|
<p>Vollautomatische Verarbeitung von Eingangsrechnungen vom Posteingang bis zur Archivierung mit minimaler manueller Intervention.</p>
|
|
</div>
|
|
|
|
<div class="roadmap-compact">
|
|
<div class="roadmap-phase">
|
|
<div class="phase-number">1</div>
|
|
<div class="phase-content">
|
|
<h4>Analyse (2 Wochen)</h4>
|
|
<p>Ist-Prozess dokumentieren, Datenqualität evaluieren, KPI-Baseline erstellen</p>
|
|
</div>
|
|
</div>
|
|
<div class="roadmap-phase">
|
|
<div class="phase-number">2</div>
|
|
<div class="phase-content">
|
|
<h4>Entwicklung (4 Wochen)</h4>
|
|
<p>Model-Training, API-Entwicklung, Integration in SmartScan</p>
|
|
</div>
|
|
</div>
|
|
<div class="roadmap-phase">
|
|
<div class="phase-number">3</div>
|
|
<div class="phase-content">
|
|
<h4>Testing (2 Wochen)</h4>
|
|
<p>Unit-Tests, Performance-Tests, User Acceptance Testing</p>
|
|
</div>
|
|
</div>
|
|
<div class="roadmap-phase">
|
|
<div class="phase-number">4</div>
|
|
<div class="phase-content">
|
|
<h4>Rollout (4 Wochen)</h4>
|
|
<p>Pilot mit Kunden, Monitoring, Schulung, Go-Live</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metrics-compact">
|
|
<div class="metric-compact">
|
|
<div class="metric-value">12 Wochen</div>
|
|
<div class="metric-label">Projektdauer</div>
|
|
</div>
|
|
<div class="metric-compact">
|
|
<div class="metric-value">Hoch</div>
|
|
<div class="metric-label">Genauigkeit</div>
|
|
</div>
|
|
<div class="metric-compact">
|
|
<div class="metric-value">Deutlich</div>
|
|
<div class="metric-label">Zeitersparnis</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-box">
|
|
<strong>Nächste Schritte:</strong> Projektstart nach Bewertung der Ideenbox und Auswahl der Prioritäten.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ausblick Tab -->
|
|
<div id="outlook" class="tab-content">
|
|
<h2>AI-Transformation Roadmap</h2>
|
|
|
|
<div class="roadmap-timeline">
|
|
<div class="roadmap-milestone">
|
|
<div class="milestone-header">
|
|
<div class="milestone-year">2025</div>
|
|
<div class="milestone-title">Foundation Phase</div>
|
|
</div>
|
|
<div class="milestone-content">
|
|
<div class="milestone-goals">
|
|
<h4>Hauptziele</h4>
|
|
<ul>
|
|
<li>Intelligente Dokumentenklassifizierung</li>
|
|
<li>Basis-Datenextraktion</li>
|
|
<li>Quality Assurance Automation</li>
|
|
</ul>
|
|
</div>
|
|
<div class="milestone-deliverables">
|
|
<h4>Deliverables</h4>
|
|
<ul>
|
|
<li>AI-Module in SmartScan</li>
|
|
<li>Erste automatisierte Workflows</li>
|
|
<li>Pilot-Kunden erfolgreich</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="roadmap-milestone">
|
|
<div class="milestone-header">
|
|
<div class="milestone-year">2026</div>
|
|
<div class="milestone-title">Advanced Intelligence</div>
|
|
</div>
|
|
<div class="milestone-content">
|
|
<div class="milestone-goals">
|
|
<h4>Hauptziele</h4>
|
|
<ul>
|
|
<li>Predictive Analytics</li>
|
|
<li>Multi-modal AI</li>
|
|
<li>Self-learning Workflows</li>
|
|
</ul>
|
|
</div>
|
|
<div class="milestone-deliverables">
|
|
<h4>Deliverables</h4>
|
|
<ul>
|
|
<li>AI-Marketplace für Kunden</li>
|
|
<li>Erweiterte OCR-Funktionen</li>
|
|
<li>Compliance Monitoring</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="roadmap-milestone">
|
|
<div class="milestone-header">
|
|
<div class="milestone-year">2027</div>
|
|
<div class="milestone-title">Cognitive Automation</div>
|
|
</div>
|
|
<div class="milestone-content">
|
|
<div class="milestone-goals">
|
|
<h4>Hauptziele</h4>
|
|
<ul>
|
|
<li>Vollständig autonome Prozesse</li>
|
|
<li>AI-gestützte Compliance</li>
|
|
<li>Proaktive Optimierung</li>
|
|
</ul>
|
|
</div>
|
|
<div class="milestone-deliverables">
|
|
<h4>Deliverables</h4>
|
|
<ul>
|
|
<li>Marktführerschaft AI-DMS</li>
|
|
<li>DACH-Region Expansion</li>
|
|
<li>Premium AI-Services</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="vision-card">
|
|
<h3>Vision 2027</h3>
|
|
<p>"MyKoelliker wird zur führenden AI-gestützten Dokumentenmanagement-Plattform der Schweiz mit vollständig autonomen, selbstoptimierenden Prozessen."</p>
|
|
</div>
|
|
|
|
<div class="success-factors">
|
|
<h3>Kritische Erfolgsfaktoren</h3>
|
|
<div class="factor-grid">
|
|
<div class="factor-item">
|
|
<h4>Talent Acquisition</h4>
|
|
<p>Aufbau eines AI/ML-Teams</p>
|
|
</div>
|
|
<div class="factor-item">
|
|
<h4>Technologie-Partnerschaften</h4>
|
|
<p>Kooperationen mit Tech-Giants</p>
|
|
</div>
|
|
<div class="factor-item">
|
|
<h4>Datenqualität</h4>
|
|
<p>DSGVO-konformer Daten-Lake</p>
|
|
</div>
|
|
<div class="factor-item">
|
|
<h4>Change Management</h4>
|
|
<p>Kulturwandel zu datengetriebenem Unternehmen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="highlight-box">
|
|
<strong>Fazit:</strong> Die AI-Transformation von MyKoelliker erfordert strategische Investitionen und den richtigen Fokus, um zum führenden Anbieter für intelligentes Dokumentenmanagement in der Schweiz zu werden.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function showTab(tabName) {
|
|
// Hide all tabs
|
|
const tabs = document.querySelectorAll('.tab-content');
|
|
tabs.forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
|
|
// Remove active class from all buttons
|
|
const buttons = document.querySelectorAll('.tab-button');
|
|
buttons.forEach(button => {
|
|
button.classList.remove('active');
|
|
});
|
|
|
|
// Show selected tab
|
|
document.getElementById(tabName).classList.add('active');
|
|
|
|
// Add active class to clicked button
|
|
event.target.classList.add('active');
|
|
|
|
// Scroll to top
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
// Add animation on scroll
|
|
const observerOptions = {
|
|
threshold: 0.1
|
|
};
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('fade-in');
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
// Observe all cards and info boxes
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const elements = document.querySelectorAll('.service-card, .info-card, .ai-use-case, .metric');
|
|
elements.forEach(el => observer.observe(el));
|
|
|
|
// Rating button functionality
|
|
const ratingButtons = document.querySelectorAll('.rating-btn');
|
|
ratingButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
// Remove selected class from all buttons in the same rating item
|
|
const ratingItem = this.closest('.rating-item');
|
|
const allButtons = ratingItem.querySelectorAll('.rating-btn');
|
|
allButtons.forEach(btn => btn.classList.remove('selected'));
|
|
|
|
// Add selected class to clicked button
|
|
this.classList.add('selected');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |