882 lines
33 KiB
HTML
882 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Onboarding Prozess – Cereda Systems</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg: #0f1117;
|
||
--surface: #1a1d27;
|
||
--surface2: #22263a;
|
||
--border: #2e3348;
|
||
--hr-color: #3b82f6;
|
||
--hr-bg: #1e2d4a;
|
||
--it-color: #10b981;
|
||
--it-bg: #0d2e22;
|
||
--vg-color: #f59e0b;
|
||
--vg-bg: #2d2010;
|
||
--bk-color: #a78bfa;
|
||
--bk-bg: #1e1833;
|
||
--done-color: #34d399;
|
||
--text: #e2e8f0;
|
||
--text-muted: #64748b;
|
||
--text-dim: #94a3b8;
|
||
--accent: #3b82f6;
|
||
--radius: 8px;
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
body {
|
||
font-family: 'DM Sans', sans-serif;
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
min-height: 100vh;
|
||
padding: 0;
|
||
}
|
||
|
||
/* HEADER */
|
||
.header {
|
||
background: linear-gradient(135deg, #0f1117 0%, #1a1d27 50%, #0f1117 100%);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 32px 40px 28px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.header-inner {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.header-badge {
|
||
background: var(--accent);
|
||
color: white;
|
||
font-family: 'DM Mono', monospace;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.08em;
|
||
padding: 4px 10px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.header h1 {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
color: #f1f5f9;
|
||
}
|
||
|
||
.header p {
|
||
font-size: 13px;
|
||
color: var(--text-muted);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.header-meta {
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
padding: 5px 10px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.legend-dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* MAIN */
|
||
.main {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
padding: 32px 40px 60px;
|
||
}
|
||
|
||
/* PHASE HEADER */
|
||
.phase-header {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr 1fr 1fr 1fr;
|
||
gap: 1px;
|
||
background: var(--border);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius) var(--radius) 0 0;
|
||
overflow: hidden;
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.phase-header:first-child { margin-top: 0; }
|
||
|
||
.col-label {
|
||
padding: 14px 16px;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.col-label.timeline { background: var(--surface); color: var(--text-muted); }
|
||
.col-label.hr { background: var(--hr-bg); color: var(--hr-color); border-left: 3px solid var(--hr-color); }
|
||
.col-label.it { background: var(--it-bg); color: var(--it-color); border-left: 3px solid var(--it-color); }
|
||
.col-label.vg { background: var(--vg-bg); color: var(--vg-color); border-left: 3px solid var(--vg-color); }
|
||
.col-label.bk { background: var(--bk-bg); color: var(--bk-color); border-left: 3px solid var(--bk-color); }
|
||
|
||
/* SWIMLANE */
|
||
.swimlane-wrapper {
|
||
border: 1px solid var(--border);
|
||
border-top: none;
|
||
border-radius: 0 0 var(--radius) var(--radius);
|
||
overflow: hidden;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.swimlane-row {
|
||
display: grid;
|
||
grid-template-columns: 220px 1fr 1fr 1fr 1fr;
|
||
gap: 1px;
|
||
background: var(--border);
|
||
min-height: 120px;
|
||
}
|
||
|
||
.swimlane-row:last-child > * { }
|
||
|
||
.swimlane-cell {
|
||
background: var(--surface);
|
||
padding: 14px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.swimlane-cell.timeline-cell {
|
||
background: var(--bg);
|
||
justify-content: center;
|
||
}
|
||
|
||
.timeline-label {
|
||
font-family: 'DM Mono', monospace;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: var(--text-dim);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.timeline-day {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: #f1f5f9;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.swimlane-cell.hr-cell { background: color-mix(in srgb, var(--hr-bg) 60%, var(--surface)); border-left: 2px solid var(--hr-color); }
|
||
.swimlane-cell.it-cell { background: color-mix(in srgb, var(--it-bg) 60%, var(--surface)); border-left: 2px solid var(--it-color); }
|
||
.swimlane-cell.vg-cell { background: color-mix(in srgb, var(--vg-bg) 60%, var(--surface)); border-left: 2px solid var(--vg-color); }
|
||
.swimlane-cell.bk-cell { background: color-mix(in srgb, var(--bk-bg) 60%, var(--surface)); border-left: 2px solid var(--bk-color); }
|
||
|
||
/* TASK CARDS */
|
||
.task {
|
||
background: var(--surface2);
|
||
border-radius: 6px;
|
||
padding: 8px 10px;
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
color: var(--text-dim);
|
||
border: 1px solid var(--border);
|
||
cursor: pointer;
|
||
transition: all 0.15s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.task:hover {
|
||
border-color: currentColor;
|
||
color: var(--text);
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.task.hr-task { border-left: 3px solid var(--hr-color); }
|
||
.task.it-task { border-left: 3px solid var(--it-color); }
|
||
.task.vg-task { border-left: 3px solid var(--vg-color); }
|
||
.task.bk-task { border-left: 3px solid var(--bk-color); }
|
||
|
||
.task.critical {
|
||
border-top: 2px solid #ef4444;
|
||
}
|
||
|
||
.task-title {
|
||
font-weight: 600;
|
||
font-size: 12px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.task-title.hr { color: var(--hr-color); }
|
||
.task-title.it { color: var(--it-color); }
|
||
.task-title.vg { color: var(--vg-color); }
|
||
.task-title.bk { color: var(--bk-color); }
|
||
|
||
.task-body { color: var(--text-dim); font-size: 11.5px; }
|
||
|
||
.task-tag {
|
||
display: inline-block;
|
||
margin-top: 5px;
|
||
font-size: 10px;
|
||
font-family: 'DM Mono', monospace;
|
||
font-weight: 500;
|
||
padding: 2px 6px;
|
||
border-radius: 3px;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.task-tag.critical { background: rgba(239,68,68,0.15); color: #ef4444; }
|
||
.task-tag.important { background: rgba(245,158,11,0.15); color: #f59e0b; }
|
||
.task-tag.normal { background: rgba(100,116,139,0.12); color: var(--text-muted); }
|
||
|
||
.empty-cell {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--border);
|
||
font-size: 20px;
|
||
}
|
||
|
||
/* STATUS INDICATOR */
|
||
.status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 12px 20px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
margin-bottom: 12px;
|
||
font-size: 13px;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.status-icon { font-size: 16px; }
|
||
.status-text { font-weight: 500; color: var(--text); }
|
||
.status-arrow {
|
||
color: var(--border);
|
||
font-size: 16px;
|
||
}
|
||
|
||
.trigger-badge {
|
||
background: #ef4444;
|
||
color: white;
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
letter-spacing: 0.05em;
|
||
font-family: 'DM Mono', monospace;
|
||
animation: pulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.6; }
|
||
}
|
||
|
||
/* SECTION HEADING */
|
||
.section-title {
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.section-title::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
/* COMPLETION CHECKLIST */
|
||
.checklist-section {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
overflow: hidden;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.checklist-header {
|
||
padding: 16px 20px;
|
||
background: linear-gradient(90deg, #1a2744, var(--surface));
|
||
border-bottom: 1px solid var(--border);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.checklist-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
.checklist-col {
|
||
background: var(--surface);
|
||
padding: 16px;
|
||
}
|
||
|
||
.checklist-col-header {
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
.checklist-col-header.hr { color: var(--hr-color); }
|
||
.checklist-col-header.it { color: var(--it-color); }
|
||
.checklist-col-header.vg { color: var(--vg-color); }
|
||
.checklist-col-header.bk { color: var(--bk-color); }
|
||
|
||
.check-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
padding: 6px 0;
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
border-bottom: 1px solid rgba(255,255,255,0.04);
|
||
cursor: pointer;
|
||
transition: color 0.1s;
|
||
}
|
||
|
||
.check-item:last-child { border-bottom: none; }
|
||
.check-item:hover { color: var(--text); }
|
||
|
||
.check-box {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 1.5px solid var(--border);
|
||
border-radius: 3px;
|
||
flex-shrink: 0;
|
||
margin-top: 1px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.15s;
|
||
font-size: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.check-item.checked .check-box {
|
||
background: var(--done-color);
|
||
border-color: var(--done-color);
|
||
color: #0f1117;
|
||
}
|
||
|
||
.check-item.checked .check-label {
|
||
text-decoration: line-through;
|
||
color: var(--text-muted);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.progress-bar-wrap {
|
||
height: 3px;
|
||
background: var(--border);
|
||
border-radius: 2px;
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar-fill {
|
||
height: 100%;
|
||
border-radius: 2px;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
.hr .progress-bar-fill { background: var(--hr-color); }
|
||
.it .progress-bar-fill { background: var(--it-color); }
|
||
.vg .progress-bar-fill { background: var(--vg-color); }
|
||
.bk .progress-bar-fill { background: var(--bk-color); }
|
||
|
||
.progress-label {
|
||
font-family: 'DM Mono', monospace;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* FOOTER */
|
||
.doc-footer {
|
||
text-align: center;
|
||
padding: 24px;
|
||
color: var(--text-muted);
|
||
font-size: 12px;
|
||
border-top: 1px solid var(--border);
|
||
margin-top: 20px;
|
||
}
|
||
|
||
@media print {
|
||
body { background: white; color: #111; }
|
||
.header { position: static; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="header">
|
||
<div class="header-inner">
|
||
<span class="header-badge">CEREDA SYSTEMS</span>
|
||
<div>
|
||
<h1>Mitarbeiter Onboarding – Prozessablauf</h1>
|
||
<p>Von Vertragsunterzeichnung bis zum ersten Arbeitstag · Alle Abteilungen</p>
|
||
</div>
|
||
<div class="header-meta">
|
||
<div class="legend-item"><div class="legend-dot" style="background:var(--hr-color)"></div>HR / Personal</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:var(--it-color)"></div>IT</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:var(--vg-color)"></div>Vorgesetzter</div>
|
||
<div class="legend-item"><div class="legend-dot" style="background:var(--bk-color)"></div>Buchhaltung / Lohn</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main">
|
||
|
||
<!-- TRIGGER -->
|
||
<div class="status-row">
|
||
<span class="status-icon">📄</span>
|
||
<span class="trigger-badge">TRIGGER</span>
|
||
<span class="status-text">Arbeitsvertrag unterzeichnet</span>
|
||
<span class="status-arrow">→</span>
|
||
<span>Onboarding-Prozess wird gestartet · Alle Abteilungen werden parallel angestoßen</span>
|
||
<span class="status-arrow" style="margin-left:auto">Ziel: Tag 1 = ✅ alles bereit</span>
|
||
</div>
|
||
|
||
<!-- ========== PHASE 1: SOFORT ========== -->
|
||
<p class="section-title">Phase 1 — Sofort nach Vertragsunterzeichnung</p>
|
||
|
||
<div class="phase-header">
|
||
<div class="col-label timeline">⏱ Zeitpunkt</div>
|
||
<div class="col-label hr">🧑💼 HR / Personal</div>
|
||
<div class="col-label it">💻 IT</div>
|
||
<div class="col-label vg">👔 Vorgesetzter</div>
|
||
<div class="col-label bk">💶 Buchhaltung / Lohn</div>
|
||
</div>
|
||
<div class="swimlane-wrapper">
|
||
<div class="swimlane-row">
|
||
<div class="swimlane-cell timeline-cell">
|
||
<div class="timeline-day">Tag 0</div>
|
||
<div class="timeline-label">Vertrag<br>unterzeichnet</div>
|
||
</div>
|
||
<div class="swimlane-cell hr-cell">
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Personalakte anlegen</div>
|
||
<div class="task-body">Digitale Akte erstellen · Vertragskopie ablegen · Eintrittsdatum eintragen</div>
|
||
<span class="task-tag critical">🔴 Sofort</span>
|
||
</div>
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Abteilungen informieren</div>
|
||
<div class="task-body">IT, Vorgesetzten & Buchhaltung per E-Mail/Ticket anstoßen mit: Name, Position, Startdatum, Abteilung</div>
|
||
<span class="task-tag critical">🔴 Sofort</span>
|
||
</div>
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Berufsgenossenschaft anmelden</div>
|
||
<div class="task-body">BG-Anmeldung vorbereiten</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell it-cell">
|
||
<div class="task it-task">
|
||
<div class="task-title it">IT-Onboarding-Ticket anlegen</div>
|
||
<div class="task-body">Ticket im Helpdesk erstellen mit allen Infos. Startet alle IT-Aufgaben.</div>
|
||
<span class="task-tag critical">🔴 Sofort</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">Hardware prüfen & bestellen</div>
|
||
<div class="task-body">Verfügbaren Laptop/PC prüfen · ggf. Neubestellung auslösen (Lieferzeit beachten!)</div>
|
||
<span class="task-tag critical">🔴 Sofort</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell vg-cell">
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Buddy / Paten benennen</div>
|
||
<div class="task-body">Einen erfahrenen Kollegen als Begleitung für die ersten Wochen auswählen & informieren</div>
|
||
<span class="task-tag critical">🔴 Sofort</span>
|
||
</div>
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Einarbeitungsplan erstellen</div>
|
||
<div class="task-body">30-Tage-Plan ausarbeiten: Aufgaben, Ziele, erste Projekte, Schulungsbedarf</div>
|
||
<span class="task-tag important">⚡ Diese Woche</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell bk-cell">
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Mitarbeiter in DATEV anlegen</div>
|
||
<div class="task-body">Stammdaten anlegen · Eintrittsdatum · Kostenstelle · Abteilung</div>
|
||
<span class="task-tag critical">🔴 Sofort</span>
|
||
</div>
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Bankdaten & Steuer anfordern</div>
|
||
<div class="task-body">IBAN-Formular an MA senden · Steuerklasse erfragen · SV-Nummer anfordern</div>
|
||
<span class="task-tag important">⚡ Diese Woche</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== PHASE 2: 2 WOCHEN VOR START ========== -->
|
||
<p class="section-title">Phase 2 — 2 Wochen vor Arbeitsbeginn</p>
|
||
|
||
<div class="phase-header">
|
||
<div class="col-label timeline">⏱ Zeitpunkt</div>
|
||
<div class="col-label hr">🧑💼 HR / Personal</div>
|
||
<div class="col-label it">💻 IT</div>
|
||
<div class="col-label vg">👔 Vorgesetzter</div>
|
||
<div class="col-label bk">💶 Buchhaltung / Lohn</div>
|
||
</div>
|
||
<div class="swimlane-wrapper">
|
||
<div class="swimlane-row">
|
||
<div class="swimlane-cell timeline-cell">
|
||
<div class="timeline-day">−14</div>
|
||
<div class="timeline-label">2 Wochen<br>vor Start</div>
|
||
</div>
|
||
<div class="swimlane-cell hr-cell">
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Willkommens-E-Mail senden</div>
|
||
<div class="task-body">Startzeit, Ansprechpartner, Parkplatz, Dresscode, was mitbringen (Ausweis!)</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Formulare vorbereiten</div>
|
||
<div class="task-body">Datenschutzerklärung · IT-Nutzungsordnung · Betriebsordnung · Schweigepflicht</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Mitarbeiterausweis beantragen</div>
|
||
<div class="task-body">Foto anfordern oder Fototermin Tag 1 planen</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell it-cell">
|
||
<div class="task it-task">
|
||
<div class="task-title it">AD-Account erstellen</div>
|
||
<div class="task-body">Benutzername nach Konvention · Temporäres Passwort · Gruppe / Abteilung zuordnen</div>
|
||
<span class="task-tag critical">🔴 Kritisch</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">E-Mail-Adresse einrichten</div>
|
||
<div class="task-body">Postfach anlegen · Signatur vorkonfigurieren · In Verteiler aufnehmen</div>
|
||
<span class="task-tag critical">🔴 Kritisch</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">Hardware aufsetzen</div>
|
||
<div class="task-body">OS-Image · Windows Updates · Antivirus · Endpoint-Agent · Gerät im Asset-Management erfassen</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell vg-cell">
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Team informieren</div>
|
||
<div class="task-body">Teammitglieder über neuen Kollegen informieren · Buddy briefen · Mittagessen Tag 1 planen</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Arbeitsplatz vorbereiten</div>
|
||
<div class="task-body">Schreibtisch · Stuhl · Namensschild · Willkommensmappe am Platz bereitstellen</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell bk-cell">
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Lohnkonto einrichten</div>
|
||
<div class="task-body">Gehaltsgruppe · Steuerklasse · Krankenkasse · Urlaubsanspruch in System hinterlegen</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Sozialversicherung anmelden</div>
|
||
<div class="task-body">SV-Anmeldung bei Krankenkasse einreichen</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== PHASE 3: 1 WOCHE VOR START ========== -->
|
||
<p class="section-title">Phase 3 — 1 Woche vor Arbeitsbeginn</p>
|
||
|
||
<div class="phase-header">
|
||
<div class="col-label timeline">⏱ Zeitpunkt</div>
|
||
<div class="col-label hr">🧑💼 HR / Personal</div>
|
||
<div class="col-label it">💻 IT</div>
|
||
<div class="col-label vg">👔 Vorgesetzter</div>
|
||
<div class="col-label bk">💶 Buchhaltung / Lohn</div>
|
||
</div>
|
||
<div class="swimlane-wrapper">
|
||
<div class="swimlane-row">
|
||
<div class="swimlane-cell timeline-cell">
|
||
<div class="timeline-day">−7</div>
|
||
<div class="timeline-label">1 Woche<br>vor Start</div>
|
||
</div>
|
||
<div class="swimlane-cell hr-cell">
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Vollständigkeits-Check</div>
|
||
<div class="task-body">Alle Dokumente vollständig? IBAN erhalten? SV-Nummer? Pflichtunterweisungen geplant?</div>
|
||
<span class="task-tag critical">🔴 Pflicht</span>
|
||
</div>
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Pflichtunterweisungen planen</div>
|
||
<div class="task-body">Termine für Arbeitssicherheit · Brandschutz · Datenschutz in KW 1 einplanen</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell it-cell">
|
||
<div class="task it-task">
|
||
<div class="task-title it">Kompletttest aller Systeme</div>
|
||
<div class="task-body">Login testen · E-Mail senden/empfangen · VPN verbinden · Netzlaufwerke prüfen · Teams testen</div>
|
||
<span class="task-tag critical">🔴 Pflicht</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">Software installieren</div>
|
||
<div class="task-body">Office 365 · VPN-Client · Passwortmanager · Teams · ERP/CRM · abteilungsspezifische Tools</div>
|
||
<span class="task-tag critical">🔴 Pflicht</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">Telefon / Durchwahl einrichten</div>
|
||
<div class="task-body">IP-Telefon oder Softphone · Durchwahl zuweisen · Mailbox-Ansage konfigurieren</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">IT-Begrüßungsmappe drucken</div>
|
||
<div class="task-body">Quick-Start-Guide: Login, Helpdesk-Kontakt, WLAN, Drucker, wichtige URLs</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell vg-cell">
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Erste Aufgaben vorbereiten</div>
|
||
<div class="task-body">2–3 konkrete, überschaubare Aufgaben für Tag 1 und Woche 1 definieren</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Check-in-Termine planen</div>
|
||
<div class="task-body">Tägliche 15-Min-Calls Woche 1 · Wöchentliche 30-Min-Gespräche Monat 1 im Kalender blocken</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell bk-cell">
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Gehaltsabrechnung vorbereiten</div>
|
||
<div class="task-body">Erstes Gehalt anteilig berechnen (falls Monatsmitte) · Auszahlungstermin prüfen</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Reisekostenformulare bereitstellen</div>
|
||
<div class="task-body">Spesenabrechnungsformulare und -richtlinien übergeben</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== PHASE 4: TAG 1 ========== -->
|
||
<p class="section-title">Phase 4 — Der erste Arbeitstag</p>
|
||
|
||
<div class="phase-header">
|
||
<div class="col-label timeline">⏱ Zeitpunkt</div>
|
||
<div class="col-label hr">🧑💼 HR / Personal</div>
|
||
<div class="col-label it">💻 IT</div>
|
||
<div class="col-label vg">👔 Vorgesetzter</div>
|
||
<div class="col-label bk">💶 Buchhaltung / Lohn</div>
|
||
</div>
|
||
<div class="swimlane-wrapper">
|
||
<div class="swimlane-row">
|
||
<div class="swimlane-cell timeline-cell">
|
||
<div class="timeline-day">Tag 1</div>
|
||
<div class="timeline-label">Erster<br>Arbeitstag</div>
|
||
</div>
|
||
<div class="swimlane-cell hr-cell">
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Empfang & Begrüßung</div>
|
||
<div class="task-body">MA am Empfang abholen · Rundgang · Schlüssel/Badge übergeben · Parkausweis</div>
|
||
<span class="task-tag critical">🔴 08:00 Uhr</span>
|
||
</div>
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Alle Formulare unterzeichnen</div>
|
||
<div class="task-body">Betriebsordnung · Datenschutz · IT-Nutzungsordnung · Schweigepflicht · Bestätigungen</div>
|
||
<span class="task-tag critical">🔴 Pflicht</span>
|
||
</div>
|
||
<div class="task hr-task">
|
||
<div class="task-title hr">Willkommensmappe übergeben</div>
|
||
<div class="task-body">Unternehmensinfos · Organigramm · Notfallnummern · Kantinen-/Pauseninfos</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell it-cell">
|
||
<div class="task it-task">
|
||
<div class="task-title it">Hardware-Übergabe</div>
|
||
<div class="task-body">Laptop + Zubehör übergeben · Übergabeprotokoll (Seriennummern) unterzeichnen lassen</div>
|
||
<span class="task-tag critical">🔴 Pflicht</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">Erster Login begleiten</div>
|
||
<div class="task-body">Passwort ändern · MFA einrichten · E-Mail testen · VPN testen · Teams einloggen</div>
|
||
<span class="task-tag critical">🔴 Pflicht</span>
|
||
</div>
|
||
<div class="task it-task">
|
||
<div class="task-title it">IT-Begrüßungsmappe übergeben</div>
|
||
<div class="task-body">Helpdesk-Kontakt · Passwortregeln · wichtige URLs · Verhaltensregeln bei IT-Vorfällen</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell vg-cell">
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Persönliche Begrüßung</div>
|
||
<div class="task-body">Nicht delegieren! Vorgesetzter begrüßt persönlich · Teamvorstellung · Buddy vorstellen</div>
|
||
<span class="task-tag critical">🔴 Pflicht</span>
|
||
</div>
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Einarbeitungsplan besprechen</div>
|
||
<div class="task-body">Ziele Probezeit · erste Aufgaben · Erwartungen klar kommunizieren · Fragen beantworten</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task vg-task">
|
||
<div class="task-title vg">Gemeinsames Mittagessen</div>
|
||
<div class="task-body">Mit dem Team essen gehen – sozialer Anschluss ist entscheidend!</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
<div class="swimlane-cell bk-cell">
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Bankverbindung bestätigen</div>
|
||
<div class="task-body">IBAN im System prüfen · Erste Gehaltsabrechnung korrekt hinterlegt?</div>
|
||
<span class="task-tag important">⚡ Wichtig</span>
|
||
</div>
|
||
<div class="task bk-task">
|
||
<div class="task-title bk">Zeiterfassung erklären</div>
|
||
<div class="task-body">System vorstellen · ersten Einstempeln begleiten · Urlaubsantragsprozess erklären</div>
|
||
<span class="task-tag normal">Standard</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ========== COMPLETION CHECKLIST ========== -->
|
||
<p class="section-title">Abnahme-Checkliste — Alles bereit vor Tag 1?</p>
|
||
|
||
<div class="checklist-section">
|
||
<div class="checklist-header">
|
||
✅ <span>Alles auf Grün bevor der Mitarbeiter anfängt</span>
|
||
<span style="margin-left:auto;font-size:12px;font-weight:400;color:var(--text-muted)">Klicken zum Abhaken</span>
|
||
</div>
|
||
<div class="checklist-grid">
|
||
<div class="checklist-col">
|
||
<div class="checklist-col-header hr">HR / Personal</div>
|
||
<div class="progress-bar-wrap"><div class="progress-bar-fill" id="prog-hr" style="width:0%"></div></div>
|
||
<div class="progress-label" id="label-hr">0 / 6 erledigt</div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Personalakte vollständig angelegt</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Alle Abteilungen informiert</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Willkommens-E-Mail gesendet</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Alle Formulare vorbereitet</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Badge / Ausweis bestellt</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Pflichtunterweisungen geplant</span></div>
|
||
</div>
|
||
<div class="checklist-col">
|
||
<div class="checklist-col-header it">IT</div>
|
||
<div class="progress-bar-wrap"><div class="progress-bar-fill" id="prog-it" style="width:0%"></div></div>
|
||
<div class="progress-label" id="label-it">0 / 8 erledigt</div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">AD-Account angelegt & getestet</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">E-Mail-Adresse aktiv</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Hardware aufgesetzt & getestet</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Alle Software installiert</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">VPN & Netzwerkzugänge OK</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Telefon / Teams eingerichtet</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Berechtigungen vergeben</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">IT-Begrüßungsmappe bereit</span></div>
|
||
</div>
|
||
<div class="checklist-col">
|
||
<div class="checklist-col-header vg">Vorgesetzter</div>
|
||
<div class="progress-bar-wrap"><div class="progress-bar-fill" id="prog-vg" style="width:0%"></div></div>
|
||
<div class="progress-label" id="label-vg">0 / 5 erledigt</div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Buddy / Pate benannt & gebrieft</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">30-Tage-Einarbeitungsplan fertig</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Erste Aufgaben für Woche 1 definiert</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Check-in-Termine im Kalender</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Team über neuen MA informiert</span></div>
|
||
</div>
|
||
<div class="checklist-col">
|
||
<div class="checklist-col-header bk">Buchhaltung / Lohn</div>
|
||
<div class="progress-bar-wrap"><div class="progress-bar-fill" id="prog-bk" style="width:0%"></div></div>
|
||
<div class="progress-label" id="label-bk">0 / 5 erledigt</div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Mitarbeiter in DATEV angelegt</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">IBAN & Steuerklasse hinterlegt</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">SV-Anmeldung eingereicht</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">Erstes Gehalt berechnet</span></div>
|
||
<div class="check-item" onclick="toggle(this)"><div class="check-box">✓</div><span class="check-label">BG-Anmeldung vollständig</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="doc-footer">
|
||
Cereda Systems · Onboarding Prozess · Vertraulich – nur für internen Gebrauch
|
||
</div>
|
||
|
||
<script>
|
||
const colMap = {
|
||
0: { id: 'hr', total: 6 },
|
||
1: { id: 'it', total: 8 },
|
||
2: { id: 'vg', total: 5 },
|
||
3: { id: 'bk', total: 5 },
|
||
};
|
||
|
||
function toggle(el) {
|
||
el.classList.toggle('checked');
|
||
updateProgress();
|
||
}
|
||
|
||
function updateProgress() {
|
||
const cols = document.querySelectorAll('.checklist-col');
|
||
cols.forEach((col, i) => {
|
||
const map = colMap[i];
|
||
if (!map) return;
|
||
const items = col.querySelectorAll('.check-item');
|
||
const checked = col.querySelectorAll('.check-item.checked').length;
|
||
const pct = Math.round((checked / map.total) * 100);
|
||
const bar = document.getElementById('prog-' + map.id);
|
||
const label = document.getElementById('label-' + map.id);
|
||
if (bar) bar.style.width = pct + '%';
|
||
if (label) label.textContent = `${checked} / ${map.total} erledigt`;
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|