diff --git a/Dienstplan_Portable.html b/Dienstplan_Portable.html
index 0eadb34..77418ed 100644
--- a/Dienstplan_Portable.html
+++ b/Dienstplan_Portable.html
@@ -3,551 +3,350 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dienstplan NRW - Bonus-Berechnung</title>
+    <title>Dienstplan NRW - Kalender Edition</title>
     <style>
+        :root {
+            --primary: #4472C4;
+            --primary-dark: #2952A3;
+            --bg-color: #f4f7f6;
+            --card-bg: #ffffff;
+            --text-color: #333;
+            --we-color: #d4edda;
+            --we-text: #155724;
+            --holiday-color: #fff3cd;
+            --holiday-text: #856404;
+        }
+
         * {
-            margin: 0;
-            padding: 0;
             box-sizing: border-box;
         }
 
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            margin: 0;
             padding: 20px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
 
         .container {
             max-width: 900px;
-            margin: 0 auto;
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            width: 100%;
+            background: var(--card-bg);
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
             overflow: hidden;
+            margin-bottom: 20px;
         }
 
         header {
-            background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
+            background-color: var(--primary);
             color: white;
-            padding: 25px 30px;
+            padding: 20px;
             text-align: center;
         }
 
-        header h1 {
-            font-size: 1.8em;
-            margin-bottom: 5px;
-        }
+        h1, h2, h3 { margin: 0; }
+        h1 { font-size: 1.5rem; margin-bottom: 5px; }
 
-        header p {
-            opacity: 0.8;
-            font-size: 0.95em;
-        }
-
-        .steps-indicator {
-            display: flex;
-            justify-content: center;
-            padding: 25px 20px;
-            background: #f7fafc;
-            border-bottom: 1px solid #e2e8f0;
-        }
-
-        .step-item {
+        .controls {
+            padding: 20px;
+            border-bottom: 1px solid #eee;
             display: flex;
+            justify-content: space-between;
             align-items: center;
-            margin: 0 10px;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-
-        .step-number {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            background: #cbd5e0;
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-weight: bold;
-            margin-right: 10px;
-            transition: all 0.3s;
-        }
-
-        .step-item.active .step-number {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            transform: scale(1.1);
-        }
-
-        .step-item.completed .step-number {
-            background: #48bb78;
-        }
-
-        .step-label {
-            font-size: 0.9em;
-            color: #718096;
-            font-weight: 500;
-        }
-
-        .step-item.active .step-label {
-            color: #2d3748;
-            font-weight: 600;
-        }
-
-        .step-connector {
-            width: 40px;
-            height: 2px;
-            background: #cbd5e0;
-            margin: 0 5px;
-        }
-
-        .content {
-            padding: 30px;
-            min-height: 400px;
-        }
-
-        .step-content {
-            display: none;
-        }
-
-        .step-content.active {
-            display: block;
-            animation: fadeIn 0.3s ease;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 600;
-            color: #2d3748;
-        }
-
-        input, select {
-            width: 100%;
-            padding: 12px 15px;
-            border: 2px solid #e2e8f0;
-            border-radius: 10px;
-            font-size: 1em;
-            transition: all 0.3s;
-        }
-
-        input:focus, select:focus {
-            outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
-        }
-
-        .btn {
-            padding: 12px 30px;
-            border: none;
-            border-radius: 10px;
-            font-size: 1em;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            margin: 5px;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-        }
-
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
-        }
-
-        .btn-secondary {
-            background: #e2e8f0;
-            color: #4a5568;
-        }
-
-        .btn-secondary:hover {
-            background: #cbd5e0;
-        }
-
-        .btn-success {
-            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
-            color: white;
-        }
-
-        .btn-danger {
-            background: #fc8181;
-            color: white;
-            padding: 8px 15px;
-            font-size: 0.85em;
-        }
-
-        .btn-danger:hover {
-            background: #f56565;
-        }
-
-        .employee-list {
-            display: flex;
             flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .employee-tag {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            padding: 10px 15px;
-            border-radius: 25px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-weight: 500;
-        }
-
-        .employee-tag .remove {
-            background: rgba(255,255,255,0.3);
-            border: none;
-            color: white;
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.2em;
-            line-height: 1;
-        }
-
-        .employee-tag .remove:hover {
-            background: rgba(255,255,255,0.5);
-        }
-
-        .month-selector {
-            display: flex;
             gap: 15px;
-            margin-bottom: 25px;
         }
 
         .month-selector select {
+            padding: 8px;
+            font-size: 1rem;
+            border-radius: 6px;
+            border: 1px solid #ccc;
+        }
+
+        .tabs {
+            display: flex;
+            background: #eee;
+            border-radius: 8px;
+            padding: 4px;
+        }
+
+        .tab-btn {
+            border: none;
+            background: transparent;
+            padding: 8px 16px;
+            cursor: pointer;
+            border-radius: 6px;
+            font-weight: 600;
+            color: #666;
+            transition: all 0.2s;
+        }
+
+        .tab-btn.active {
+            background: white;
+            color: var(--primary);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .tab-btn:hover:not(.active) {
+            background: rgba(255,255,255,0.5);
+        }
+
+        .day-view {
+            padding: 30px;
+            text-align: center;
+        }
+
+        .date-navigator {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .nav-btn {
+            background: var(--primary);
+            color: white;
+            border: none;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            font-size: 1.2rem;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+        }
+
+        .nav-btn:hover { background: var(--primary-dark); }
+
+        .current-date-display {
+            font-size: 1.6rem;
+            font-weight: bold;
+            min-width: 280px;
+        }
+
+        .day-badge {
+            display: inline-block;
+            padding: 8px 18px;
+            border-radius: 20px;
+            background: #eee;
+            color: #666;
+            margin-top: 10px;
+            font-weight: 600;
+            font-size: 0.95rem;
+        }
+
+        .day-badge.qualifying {
+            background: var(--we-color);
+            color: var(--we-text);
+        }
+
+        .day-badge.holiday {
+            background: var(--holiday-color);
+            color: var(--holiday-text);
+        }
+
+        .holiday-name {
+            font-size: 0.9rem;
+            color: #666;
+            margin-top: 8px;
+            font-style: italic;
+        }
+
+        .entry-form {
+            background: #f9f9f9;
+            padding: 20px;
+            border-radius: 8px;
+            max-width: 500px;
+            margin: 0 auto;
+            border: 1px solid #eee;
+        }
+
+        .form-row {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
+        }
+
+        input[type="text"], select {
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-size: 1rem;
             flex: 1;
         }
 
-        .duty-entry {
-            background: #f7fafc;
-            border-radius: 15px;
-            padding: 20px;
-            margin-bottom: 20px;
+        input[type="text"]:focus, select:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(68, 114, 196, 0.2);
         }
 
-        .duty-entry h3 {
-            color: #2d3748;
-            margin-bottom: 15px;
-            font-size: 1.1em;
-        }
-
-        .duty-row {
-            display: grid;
-            grid-template-columns: 1fr 1fr 120px 50px;
-            gap: 10px;
-            align-items: center;
-            margin-bottom: 10px;
+        .btn-add {
+            background: #28a745;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: bold;
+            width: 100%;
+            transition: background 0.2s;
         }
+        .btn-add:hover { background: #218838; }
 
         .duty-list {
-            margin-top: 25px;
+            margin-top: 20px;
+            max-width: 500px;
+            margin-left: auto;
+            margin-right: auto;
         }
 
         .duty-item {
-            display: grid;
-            grid-template-columns: 1fr 1fr 100px 80px;
-            gap: 10px;
-            padding: 12px 15px;
             background: white;
-            border-radius: 10px;
+            border: 1px solid #ddd;
+            padding: 12px 15px;
+            border-radius: 6px;
             margin-bottom: 8px;
-            border-left: 4px solid #cbd5e0;
+            display: flex;
+            justify-content: space-between;
             align-items: center;
         }
 
-        .duty-item.qualifying {
-            border-left-color: #48bb78;
-            background: linear-gradient(90deg, rgba(72, 187, 120, 0.1) 0%, white 50%);
+        .btn-delete {
+            background: #dc3545;
+            color: white;
+            border: none;
+            padding: 6px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-left: 10px;
+            font-size: 0.9rem;
+            transition: background 0.2s;
         }
+        .btn-delete:hover { background: #c82333; }
 
-        .duty-item .day-type {
-            font-size: 0.85em;
-            color: #718096;
-        }
-
-        .duty-item.qualifying .day-type {
-            color: #2f855a;
-            font-weight: 600;
-        }
-
-        .results-container {
+        table {
+            width: 100%;
+            border-collapse: collapse;
             margin-top: 20px;
         }
 
-        .result-card {
-            background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
-            border-radius: 15px;
-            padding: 25px;
-            margin-bottom: 20px;
-            border: 1px solid #e2e8f0;
+        th, td {
+            padding: 12px;
+            text-align: left;
+            border-bottom: 1px solid #ddd;
         }
 
-        .result-card h3 {
-            color: #2d3748;
-            margin-bottom: 20px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid #e2e8f0;
-        }
+        th { background-color: #f8f9fa; font-weight: 600; }
 
-        .result-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 15px;
-        }
+        .amount { font-family: monospace; font-weight: bold; }
+        .positive { color: #28a745; }
+        .neutral { color: #6c757d; }
 
-        .result-item {
-            background: white;
-            padding: 15px;
-            border-radius: 10px;
-            text-align: center;
-        }
-
-        .result-item .label {
+        .threshold-tag {
             font-size: 0.85em;
-            color: #718096;
-            margin-bottom: 5px;
-        }
-
-        .result-item .value {
-            font-size: 1.4em;
-            font-weight: 700;
-            color: #2d3748;
-        }
-
-        .result-item.highlight {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        }
-
-        .result-item.highlight .label,
-        .result-item.highlight .value {
-            color: white;
-        }
-
-        .result-item.success {
-            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
-        }
-
-        .result-item.success .label,
-        .result-item.success .value {
-            color: white;
-        }
-
-        .result-item.warning {
-            background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
-        }
-
-        .result-item.warning .label,
-        .result-item.warning .value {
-            color: white;
-        }
-
-        .threshold-badge {
-            display: inline-block;
-            padding: 5px 15px;
-            border-radius: 20px;
-            font-size: 0.9em;
+            padding: 3px 8px;
+            border-radius: 4px;
             font-weight: 600;
-            margin-left: 10px;
         }
+        .threshold-yes { background: #d4edda; color: #155724; }
+        .threshold-no { background: #f8d7da; color: #721c24; }
 
-        .threshold-badge.reached {
-            background: #c6f6d5;
-            color: #2f855a;
-        }
-
-        .threshold-badge.not-reached {
-            background: #fed7d7;
-            color: #c53030;
-        }
-
-        .total-summary {
-            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
-            color: white;
-            padding: 25px;
-            border-radius: 15px;
-            margin-top: 25px;
-            text-align: center;
-        }
-
-        .total-summary h2 {
-            font-size: 1.2em;
-            opacity: 0.9;
-            margin-bottom: 10px;
-        }
-
-        .total-summary .amount {
-            font-size: 3em;
-            font-weight: 700;
-        }
+        .view-section { display: none; }
+        .view-section.active { display: block; }
 
         .info-box {
-            background: #ebf8ff;
-            border-left: 4px solid #4299e1;
-            padding: 15px 20px;
-            border-radius: 0 10px 10px 0;
-            margin: 20px 0;
-            color: #2b6cb0;
+            background: #e7f3ff;
+            border-left: 4px solid var(--primary);
+            padding: 15px;
+            margin: 20px;
+            border-radius: 0 8px 8px 0;
         }
 
         .info-box h4 {
-            margin-bottom: 5px;
+            margin: 0 0 8px 0;
+            color: var(--primary-dark);
         }
 
-        .navigation {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #e2e8f0;
+        .info-box p {
+            margin: 0;
+            font-size: 0.9rem;
+            color: #555;
         }
 
-        .empty-state {
-            text-align: center;
-            padding: 40px;
-            color: #718096;
+        .data-section {
+            padding: 20px;
         }
 
-        .empty-state svg {
-            width: 80px;
-            height: 80px;
-            margin-bottom: 15px;
-            opacity: 0.5;
-        }
-
-        .calendar-grid {
-            display: grid;
-            grid-template-columns: repeat(7, 1fr);
-            gap: 5px;
-            margin-top: 15px;
-        }
-
-        .calendar-header {
-            text-align: center;
-            font-weight: 600;
-            color: #4a5568;
-            padding: 8px;
-            font-size: 0.85em;
-        }
-
-        .calendar-day {
-            text-align: center;
-            padding: 10px 5px;
-            border-radius: 8px;
+        .data-section button {
+            padding: 10px 20px;
+            margin: 5px;
+            border-radius: 6px;
             cursor: pointer;
+            font-size: 0.95rem;
+            border: 1px solid #ddd;
+            background: white;
             transition: all 0.2s;
-            font-size: 0.9em;
-            border: 2px solid transparent;
         }
 
-        .calendar-day:hover {
-            background: #edf2f7;
+        .data-section button:hover {
+            background: #f8f9fa;
         }
 
-        .calendar-day.empty {
-            cursor: default;
-        }
-
-        .calendar-day.empty:hover {
-            background: transparent;
-        }
-
-        .calendar-day.qualifying {
-            background: #c6f6d5;
-            color: #2f855a;
-            font-weight: 600;
-        }
-
-        .calendar-day.selected {
-            border-color: #667eea;
-            background: #ebf4ff;
-        }
-
-        .calendar-day.has-duty {
-            position: relative;
-        }
-
-        .calendar-day.has-duty::after {
-            content: '';
-            position: absolute;
-            bottom: 3px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: #667eea;
-        }
-
-        .legend {
-            display: flex;
-            gap: 20px;
-            margin-top: 15px;
-            font-size: 0.85em;
-            color: #718096;
-        }
-
-        .legend-item {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .legend-color {
-            width: 16px;
-            height: 16px;
-            border-radius: 4px;
-        }
-
-        .legend-color.qualifying {
-            background: #c6f6d5;
-        }
-
-        .legend-color.selected {
-            border: 2px solid #667eea;
-            background: #ebf4ff;
-        }
-
-        .print-btn {
-            position: fixed;
-            bottom: 20px;
-            right: 20px;
-            width: 60px;
-            height: 60px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        .data-section .btn-danger {
+            background: #dc3545;
             color: white;
             border: none;
-            cursor: pointer;
-            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.5em;
         }
 
-        .print-btn:hover {
-            transform: scale(1.1);
+        .data-section .btn-danger:hover {
+            background: #c82333;
+        }
+
+        .summary-card {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 8px;
+            margin: 20px;
+            text-align: center;
+        }
+
+        .summary-card .total-label {
+            font-size: 0.9rem;
+            opacity: 0.9;
+        }
+
+        .summary-card .total-amount {
+            font-size: 2rem;
+            font-weight: bold;
+            margin-top: 5px;
+        }
+
+        @media (max-width: 600px) {
+            .controls {
+                flex-direction: column;
+            }
+            .current-date-display {
+                font-size: 1.2rem;
+                min-width: auto;
+            }
+            .form-row {
+                flex-direction: column;
+            }
+            th, td {
+                padding: 8px 4px;
+                font-size: 0.85rem;
+            }
         }
 
         @media print {
@@ -558,788 +357,663 @@
             .container {
                 box-shadow: none;
             }
-            .steps-indicator, .navigation, .print-btn {
+            .controls, .entry-form, .btn-delete, .data-section {
                 display: none !important;
             }
-            .step-content {
+            .view-section.active {
                 display: block !important;
             }
-            .step-content:not(.results) {
-                display: none !important;
-            }
-        }
-
-        @media (max-width: 600px) {
-            .duty-row, .duty-item {
-                grid-template-columns: 1fr 1fr;
-            }
-            .month-selector {
-                flex-direction: column;
-            }
-            .step-label {
-                display: none;
-            }
-            .result-grid {
-                grid-template-columns: 1fr 1fr;
-            }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1>Dienstplan NRW</h1>
-            <p>Bonus-Berechnung nach Variante 2 (streng)</p>
-        </header>
 
-        <div class="steps-indicator">
-            <div class="step-item active" data-step="1">
-                <div class="step-number">1</div>
-                <span class="step-label">Mitarbeiter</span>
-            </div>
-            <div class="step-connector"></div>
-            <div class="step-item" data-step="2">
-                <div class="step-number">2</div>
-                <span class="step-label">Dienste</span>
-            </div>
-            <div class="step-connector"></div>
-            <div class="step-item" data-step="3">
-                <div class="step-number">3</div>
-                <span class="step-label">Ergebnis</span>
-            </div>
+<div class="container">
+    <header>
+        <h1>Dienstplan NRW</h1>
+        <div style="opacity: 0.8; font-size: 0.9rem;">Variante 2 (Streng) - Kalender Edition</div>
+    </header>
+
+    <div class="controls">
+        <div class="month-selector">
+            <select id="selectMonth" onchange="app.changeMonth()"></select>
+            <select id="selectYear" onchange="app.changeMonth()"></select>
         </div>
 
-        <div class="content">
-            <!-- Step 1: Mitarbeiter -->
-            <div class="step-content active" id="step1">
-                <h2>Schritt 1: Mitarbeiter eingeben</h2>
-                <p style="color: #718096; margin: 10px 0 25px;">Geben Sie alle Mitarbeiter ein, die in diesem Monat Dienste haben.</p>
-
-                <div class="month-selector">
-                    <div class="form-group" style="margin: 0; flex: 1;">
-                        <label for="month">Monat</label>
-                        <select id="month"></select>
-                    </div>
-                    <div class="form-group" style="margin: 0; flex: 1;">
-                        <label for="year">Jahr</label>
-                        <select id="year"></select>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="employeeName">Mitarbeiter hinzufugen</label>
-                    <div style="display: flex; gap: 10px;">
-                        <input type="text" id="employeeName" placeholder="Name eingeben..." style="flex: 1;">
-                        <button class="btn btn-primary" onclick="addEmployee()">Hinzufugen</button>
-                    </div>
-                </div>
-
-                <div class="employee-list" id="employeeList"></div>
-
-                <div class="info-box" style="margin-top: 25px;">
-                    <h4>Hinweis</h4>
-                    <p>Sie konnen Mitarbeiter jederzeit hinzufugen oder entfernen. Die Daten werden lokal im Browser gespeichert.</p>
-                </div>
-
-                <div class="navigation">
-                    <div></div>
-                    <button class="btn btn-primary" onclick="goToStep(2)">Weiter zu Dienste</button>
-                </div>
-            </div>
-
-            <!-- Step 2: Dienste -->
-            <div class="step-content" id="step2">
-                <h2>Schritt 2: Dienste eintragen</h2>
-                <p style="color: #718096; margin: 10px 0 25px;">Tragen Sie die Dienste fur <span id="monthYearDisplay"></span> ein.</p>
-
-                <div class="duty-entry">
-                    <h3>Neuen Dienst hinzufugen</h3>
-                    <div class="duty-row">
-                        <div class="form-group" style="margin: 0;">
-                            <label for="dutyEmployee">Mitarbeiter</label>
-                            <select id="dutyEmployee"></select>
-                        </div>
-                        <div class="form-group" style="margin: 0;">
-                            <label for="dutyDate">Datum</label>
-                            <input type="date" id="dutyDate">
-                        </div>
-                        <div class="form-group" style="margin: 0;">
-                            <label for="dutyShare">Anteil</label>
-                            <select id="dutyShare">
-                                <option value="1.0">1,0</option>
-                                <option value="0.5">0,5</option>
-                            </select>
-                        </div>
-                        <div style="padding-top: 25px;">
-                            <button class="btn btn-success" onclick="addDuty()">+</button>
-                        </div>
-                    </div>
-                </div>
-
-                <h3>Kalenderubersicht</h3>
-                <div id="calendarContainer"></div>
-                <div class="legend">
-                    <div class="legend-item">
-                        <div class="legend-color qualifying"></div>
-                        <span>WE-Tag (Bonus-Tag)</span>
-                    </div>
-                    <div class="legend-item">
-                        <div class="legend-color selected"></div>
-                        <span>Dienst eingetragen</span>
-                    </div>
-                </div>
-
-                <div class="duty-list">
-                    <h3 style="margin-bottom: 15px;">Eingetragene Dienste (<span id="dutyCount">0</span>)</h3>
-                    <div id="dutyListContainer"></div>
-                </div>
-
-                <div class="navigation">
-                    <button class="btn btn-secondary" onclick="goToStep(1)">Zuruck</button>
-                    <button class="btn btn-primary" onclick="calculateAndShowResults()">Berechnen</button>
-                </div>
-            </div>
-
-            <!-- Step 3: Ergebnis -->
-            <div class="step-content results" id="step3">
-                <h2>Schritt 3: Ergebnis</h2>
-                <p style="color: #718096; margin: 10px 0 25px;">Bonus-Berechnung für <span id="resultMonthYear"></span></p>
-
-                <div id="resultsContainer"></div>
-
-                <div class="navigation">
-                    <button class="btn btn-secondary" onclick="goToStep(2)">Zuruck</button>
-                    <button class="btn btn-primary" onclick="window.print()">Drucken</button>
-                </div>
-            </div>
+        <div class="tabs">
+            <button class="tab-btn active" data-view="calendar" onclick="app.switchView('calendar', this)">Kalender</button>
+            <button class="tab-btn" data-view="results" onclick="app.switchView('results', this)">Auswertung</button>
+            <button class="tab-btn" data-view="data" onclick="app.switchView('data', this)">Daten</button>
         </div>
     </div>
 
-    <button class="print-btn" onclick="window.print()" title="Drucken">
-        <span>&#128424;</span>
-    </button>
+    <div id="view-calendar" class="view-section active">
+        <div class="day-view">
 
-    <script>
-        // ==================== HOLIDAYS ====================
-        const NRW_HOLIDAYS = {
-            2025: [
-                { date: '2025-01-01', name: 'Neujahr' },
-                { date: '2025-04-18', name: 'Karfreitag' },
-                { date: '2025-04-21', name: 'Ostermontag' },
-                { date: '2025-05-01', name: 'Tag der Arbeit' },
-                { date: '2025-05-29', name: 'Christi Himmelfahrt' },
-                { date: '2025-06-09', name: 'Pfingstmontag' },
-                { date: '2025-06-19', name: 'Fronleichnam' },
-                { date: '2025-10-03', name: 'Tag der Deutschen Einheit' },
-                { date: '2025-11-01', name: 'Allerheiligen' },
-                { date: '2025-12-25', name: '1. Weihnachtstag' },
-                { date: '2025-12-26', name: '2. Weihnachtstag' }
-            ],
-            2026: [
-                { date: '2026-01-01', name: 'Neujahr' },
-                { date: '2026-04-03', name: 'Karfreitag' },
-                { date: '2026-04-06', name: 'Ostermontag' },
-                { date: '2026-05-01', name: 'Tag der Arbeit' },
-                { date: '2026-05-14', name: 'Christi Himmelfahrt' },
-                { date: '2026-05-25', name: 'Pfingstmontag' },
-                { date: '2026-06-04', name: 'Fronleichnam' },
-                { date: '2026-10-03', name: 'Tag der Deutschen Einheit' },
-                { date: '2026-11-01', name: 'Allerheiligen' },
-                { date: '2026-12-25', name: '1. Weihnachtstag' },
-                { date: '2026-12-26', name: '2. Weihnachtstag' }
-            ],
-            2027: [
-                { date: '2027-01-01', name: 'Neujahr' },
-                { date: '2027-03-26', name: 'Karfreitag' },
-                { date: '2027-03-29', name: 'Ostermontag' },
-                { date: '2027-05-01', name: 'Tag der Arbeit' },
-                { date: '2027-05-06', name: 'Christi Himmelfahrt' },
-                { date: '2027-05-17', name: 'Pfingstmontag' },
-                { date: '2027-05-27', name: 'Fronleichnam' },
-                { date: '2027-10-03', name: 'Tag der Deutschen Einheit' },
-                { date: '2027-11-01', name: 'Allerheiligen' },
-                { date: '2027-12-25', name: '1. Weihnachtstag' },
-                { date: '2027-12-26', name: '2. Weihnachtstag' }
-            ],
-            2028: [
-                { date: '2028-01-01', name: 'Neujahr' },
-                { date: '2028-04-14', name: 'Karfreitag' },
-                { date: '2028-04-17', name: 'Ostermontag' },
-                { date: '2028-05-01', name: 'Tag der Arbeit' },
-                { date: '2028-05-25', name: 'Christi Himmelfahrt' },
-                { date: '2028-06-05', name: 'Pfingstmontag' },
-                { date: '2028-06-15', name: 'Fronleichnam' },
-                { date: '2028-10-03', name: 'Tag der Deutschen Einheit' },
-                { date: '2028-11-01', name: 'Allerheiligen' },
-                { date: '2028-12-25', name: '1. Weihnachtstag' },
-                { date: '2028-12-26', name: '2. Weihnachtstag' }
-            ],
-            2029: [
-                { date: '2029-01-01', name: 'Neujahr' },
-                { date: '2029-03-30', name: 'Karfreitag' },
-                { date: '2029-04-02', name: 'Ostermontag' },
-                { date: '2029-05-01', name: 'Tag der Arbeit' },
-                { date: '2029-05-10', name: 'Christi Himmelfahrt' },
-                { date: '2029-05-21', name: 'Pfingstmontag' },
-                { date: '2029-05-31', name: 'Fronleichnam' },
-                { date: '2029-10-03', name: 'Tag der Deutschen Einheit' },
-                { date: '2029-11-01', name: 'Allerheiligen' },
-                { date: '2029-12-25', name: '1. Weihnachtstag' },
-                { date: '2029-12-26', name: '2. Weihnachtstag' }
-            ],
-            2030: [
-                { date: '2030-01-01', name: 'Neujahr' },
-                { date: '2030-04-19', name: 'Karfreitag' },
-                { date: '2030-04-22', name: 'Ostermontag' },
-                { date: '2030-05-01', name: 'Tag der Arbeit' },
-                { date: '2030-05-30', name: 'Christi Himmelfahrt' },
-                { date: '2030-06-10', name: 'Pfingstmontag' },
-                { date: '2030-06-20', name: 'Fronleichnam' },
-                { date: '2030-10-03', name: 'Tag der Deutschen Einheit' },
-                { date: '2030-11-01', name: 'Allerheiligen' },
-                { date: '2030-12-25', name: '1. Weihnachtstag' },
-                { date: '2030-12-26', name: '2. Weihnachtstag' }
-            ]
+            <div class="date-navigator">
+                <button class="nav-btn" onclick="app.prevDay()" title="Vorheriger Tag">&larr;</button>
+                <div class="current-date-display" id="displayDate">01.11.2025</div>
+                <button class="nav-btn" onclick="app.nextDay()" title="Nächster Tag">&rarr;</button>
+            </div>
+
+            <div id="dayStatusBadge" class="day-badge">Werktag</div>
+            <div id="holidayName" class="holiday-name"></div>
+
+            <div style="height: 25px;"></div>
+
+            <div class="entry-form">
+                <div class="form-row">
+                    <input type="text" id="inputEmployee" placeholder="Mitarbeiter Name" list="employeeSuggestions" autocomplete="off">
+                    <datalist id="employeeSuggestions"></datalist>
+
+                    <select id="inputShare" style="max-width: 120px;">
+                        <option value="1.0">1.0 (Voll)</option>
+                        <option value="0.5">0.5 (Halb)</option>
+                    </select>
+                </div>
+                <button class="btn-add" onclick="app.addDuty()">Dienst eintragen</button>
+            </div>
+
+            <div class="duty-list" id="dayDutyList"></div>
+        </div>
+    </div>
+
+    <div id="view-results" class="view-section" style="padding: 20px;">
+        <h2>Monatsauswertung</h2>
+        <div id="resultsMonthDisplay" style="color: #666; margin-bottom: 15px;"></div>
+
+        <div style="overflow-x: auto;">
+            <table id="resultsTable">
+                <thead>
+                    <tr>
+                        <th>Mitarbeiter</th>
+                        <th>WT</th>
+                        <th>WE (Fr)</th>
+                        <th>WE (And.)</th>
+                        <th>WE Ges.</th>
+                        <th>Schwelle</th>
+                        <th>Auszahlung</th>
+                    </tr>
+                </thead>
+                <tbody></tbody>
+            </table>
+        </div>
+
+        <div id="totalSummary" class="summary-card" style="display: none;">
+            <div class="total-label">Gesamtauszahlung</div>
+            <div class="total-amount" id="totalAmount">0,00 EUR</div>
+        </div>
+
+        <div class="info-box">
+            <h4>Berechnungsregeln (Variante 2 - Streng)</h4>
+            <p>
+                <strong>Schwelle:</strong> Gesamter Bonus wird nur gezahlt, wenn WE-Einheiten &ge; 2,0.<br>
+                <strong>Bei Erreichen:</strong> WT = 250 EUR/Einheit, WE = 450 EUR/Einheit (abzgl. 1,0 Einheit Abzug).<br>
+                <strong>Unter Schwelle:</strong> Keine Auszahlung (weder WT noch WE).<br>
+                <strong>WE-Tage:</strong> Fr, Sa, So, Feiertage und Vortage von Feiertagen.
+            </p>
+        </div>
+    </div>
+
+    <div id="view-data" class="view-section data-section">
+        <h3>Datenverwaltung</h3>
+        <p style="color: #666;">Daten werden automatisch im Browser gespeichert (localStorage).</p>
+
+        <div style="margin: 20px 0;">
+            <button onclick="app.exportData()">Daten exportieren (JSON)</button>
+            <input type="file" id="importFile" accept=".json" onchange="app.importData(this)" style="display:none">
+            <button onclick="document.getElementById('importFile').click()">Daten importieren</button>
+        </div>
+
+        <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee;">
+            <h4 style="color: #dc3545;">Gefahrenzone</h4>
+            <button class="btn-danger" onclick="app.clearData()">Alle Daten löschen</button>
+        </div>
+    </div>
+</div>
+
+<script>
+// ==================== NRW HOLIDAYS 2024-2030 ====================
+const NRW_HOLIDAYS = {
+    2024: [
+        { date: "2024-01-01", name: "Neujahr" },
+        { date: "2024-03-29", name: "Karfreitag" },
+        { date: "2024-04-01", name: "Ostermontag" },
+        { date: "2024-05-01", name: "Tag der Arbeit" },
+        { date: "2024-05-09", name: "Christi Himmelfahrt" },
+        { date: "2024-05-20", name: "Pfingstmontag" },
+        { date: "2024-05-30", name: "Fronleichnam" },
+        { date: "2024-10-03", name: "Tag der Deutschen Einheit" },
+        { date: "2024-11-01", name: "Allerheiligen" },
+        { date: "2024-12-25", name: "1. Weihnachtstag" },
+        { date: "2024-12-26", name: "2. Weihnachtstag" }
+    ],
+    2025: [
+        { date: "2025-01-01", name: "Neujahr" },
+        { date: "2025-04-18", name: "Karfreitag" },
+        { date: "2025-04-21", name: "Ostermontag" },
+        { date: "2025-05-01", name: "Tag der Arbeit" },
+        { date: "2025-05-29", name: "Christi Himmelfahrt" },
+        { date: "2025-06-09", name: "Pfingstmontag" },
+        { date: "2025-06-19", name: "Fronleichnam" },
+        { date: "2025-10-03", name: "Tag der Deutschen Einheit" },
+        { date: "2025-11-01", name: "Allerheiligen" },
+        { date: "2025-12-25", name: "1. Weihnachtstag" },
+        { date: "2025-12-26", name: "2. Weihnachtstag" }
+    ],
+    2026: [
+        { date: "2026-01-01", name: "Neujahr" },
+        { date: "2026-04-03", name: "Karfreitag" },
+        { date: "2026-04-06", name: "Ostermontag" },
+        { date: "2026-05-01", name: "Tag der Arbeit" },
+        { date: "2026-05-14", name: "Christi Himmelfahrt" },
+        { date: "2026-05-25", name: "Pfingstmontag" },
+        { date: "2026-06-04", name: "Fronleichnam" },
+        { date: "2026-10-03", name: "Tag der Deutschen Einheit" },
+        { date: "2026-11-01", name: "Allerheiligen" },
+        { date: "2026-12-25", name: "1. Weihnachtstag" },
+        { date: "2026-12-26", name: "2. Weihnachtstag" }
+    ],
+    2027: [
+        { date: "2027-01-01", name: "Neujahr" },
+        { date: "2027-03-26", name: "Karfreitag" },
+        { date: "2027-03-29", name: "Ostermontag" },
+        { date: "2027-05-01", name: "Tag der Arbeit" },
+        { date: "2027-05-06", name: "Christi Himmelfahrt" },
+        { date: "2027-05-17", name: "Pfingstmontag" },
+        { date: "2027-05-27", name: "Fronleichnam" },
+        { date: "2027-10-03", name: "Tag der Deutschen Einheit" },
+        { date: "2027-11-01", name: "Allerheiligen" },
+        { date: "2027-12-25", name: "1. Weihnachtstag" },
+        { date: "2027-12-26", name: "2. Weihnachtstag" }
+    ],
+    2028: [
+        { date: "2028-01-01", name: "Neujahr" },
+        { date: "2028-04-14", name: "Karfreitag" },
+        { date: "2028-04-17", name: "Ostermontag" },
+        { date: "2028-05-01", name: "Tag der Arbeit" },
+        { date: "2028-05-25", name: "Christi Himmelfahrt" },
+        { date: "2028-06-05", name: "Pfingstmontag" },
+        { date: "2028-06-15", name: "Fronleichnam" },
+        { date: "2028-10-03", name: "Tag der Deutschen Einheit" },
+        { date: "2028-11-01", name: "Allerheiligen" },
+        { date: "2028-12-25", name: "1. Weihnachtstag" },
+        { date: "2028-12-26", name: "2. Weihnachtstag" }
+    ],
+    2029: [
+        { date: "2029-01-01", name: "Neujahr" },
+        { date: "2029-03-30", name: "Karfreitag" },
+        { date: "2029-04-02", name: "Ostermontag" },
+        { date: "2029-05-01", name: "Tag der Arbeit" },
+        { date: "2029-05-10", name: "Christi Himmelfahrt" },
+        { date: "2029-05-21", name: "Pfingstmontag" },
+        { date: "2029-05-31", name: "Fronleichnam" },
+        { date: "2029-10-03", name: "Tag der Deutschen Einheit" },
+        { date: "2029-11-01", name: "Allerheiligen" },
+        { date: "2029-12-25", name: "1. Weihnachtstag" },
+        { date: "2029-12-26", name: "2. Weihnachtstag" }
+    ],
+    2030: [
+        { date: "2030-01-01", name: "Neujahr" },
+        { date: "2030-04-19", name: "Karfreitag" },
+        { date: "2030-04-22", name: "Ostermontag" },
+        { date: "2030-05-01", name: "Tag der Arbeit" },
+        { date: "2030-05-30", name: "Christi Himmelfahrt" },
+        { date: "2030-06-10", name: "Pfingstmontag" },
+        { date: "2030-06-20", name: "Fronleichnam" },
+        { date: "2030-10-03", name: "Tag der Deutschen Einheit" },
+        { date: "2030-11-01", name: "Allerheiligen" },
+        { date: "2030-12-25", name: "1. Weihnachtstag" },
+        { date: "2030-12-26", name: "2. Weihnachtstag" }
+    ]
+};
+
+// ==================== CONFIGURATION ====================
+const CONFIG = {
+    RATE_WT: 250,
+    RATE_WE: 450,
+    THRESHOLD: 2.0,
+    DEDUCTION: 1.0,
+    TOLERANCE: 0.0001
+};
+
+const MONTHS = ["Januar", "Februar", "März", "April", "Mai", "Juni",
+                "Juli", "August", "September", "Oktober", "November", "Dezember"];
+
+const WEEKDAYS = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
+
+// ==================== DIENSTPLAN APP ====================
+class DienstplanApp {
+    constructor() {
+        this.duties = [];
+        this.employees = [];
+        this.loadFromStorage();
+
+        const today = new Date();
+        this.currentDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+
+        this.initUI();
+        this.updateView();
+    }
+
+    // --- Storage ---
+    loadFromStorage() {
+        try {
+            const savedDuties = localStorage.getItem('nrw_duties_v2');
+            const savedEmployees = localStorage.getItem('nrw_employees_v2');
+            if (savedDuties) this.duties = JSON.parse(savedDuties);
+            if (savedEmployees) this.employees = JSON.parse(savedEmployees);
+        } catch (e) {
+            console.warn('Laden fehlgeschlagen:', e);
+        }
+    }
+
+    save() {
+        try {
+            localStorage.setItem('nrw_duties_v2', JSON.stringify(this.duties));
+            localStorage.setItem('nrw_employees_v2', JSON.stringify([...new Set(this.employees)]));
+        } catch (e) {
+            console.warn('Speichern fehlgeschlagen:', e);
+        }
+        this.updateSuggestions();
+    }
+
+    // --- UI Initialization ---
+    initUI() {
+        const monthSelect = document.getElementById('selectMonth');
+        MONTHS.forEach((m, i) => {
+            monthSelect.add(new Option(m, i));
+        });
+        monthSelect.value = this.currentDate.getMonth();
+
+        const yearSelect = document.getElementById('selectYear');
+        for (let y = 2024; y <= 2030; y++) {
+            yearSelect.add(new Option(y, y));
+        }
+        yearSelect.value = this.currentDate.getFullYear();
+
+        document.getElementById('inputEmployee').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') this.addDuty();
+        });
+    }
+
+    updateSuggestions() {
+        const list = document.getElementById('employeeSuggestions');
+        list.innerHTML = '';
+        [...new Set(this.employees)].forEach(emp => {
+            const opt = document.createElement('option');
+            opt.value = emp;
+            list.appendChild(opt);
+        });
+    }
+
+    // --- Navigation ---
+    changeMonth() {
+        const m = parseInt(document.getElementById('selectMonth').value);
+        const y = parseInt(document.getElementById('selectYear').value);
+        this.currentDate = new Date(y, m, 1);
+        this.updateView();
+    }
+
+    prevDay() {
+        this.currentDate.setDate(this.currentDate.getDate() - 1);
+        this.syncSelectors();
+        this.updateView();
+    }
+
+    nextDay() {
+        this.currentDate.setDate(this.currentDate.getDate() + 1);
+        this.syncSelectors();
+        this.updateView();
+    }
+
+    syncSelectors() {
+        document.getElementById('selectMonth').value = this.currentDate.getMonth();
+        document.getElementById('selectYear').value = this.currentDate.getFullYear();
+    }
+
+    switchView(viewName, btnElement) {
+        document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active'));
+        document.getElementById('view-' + viewName).classList.add('active');
+
+        document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
+        if (btnElement) btnElement.classList.add('active');
+
+        if (viewName === 'results') this.calcResults();
+    }
+
+    // --- Date Helpers ---
+    formatDateISO(date) {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+    }
+
+    isHoliday(date) {
+        const year = date.getFullYear();
+        const iso = this.formatDateISO(date);
+        if (!NRW_HOLIDAYS[year]) return false;
+        return NRW_HOLIDAYS[year].some(h => h.date === iso);
+    }
+
+    getHolidayName(date) {
+        const year = date.getFullYear();
+        const iso = this.formatDateISO(date);
+        if (!NRW_HOLIDAYS[year]) return null;
+        const holiday = NRW_HOLIDAYS[year].find(h => h.date === iso);
+        return holiday ? holiday.name : null;
+    }
+
+    isDayBeforeHoliday(date) {
+        const nextDay = new Date(date);
+        nextDay.setDate(date.getDate() + 1);
+        return this.isHoliday(nextDay);
+    }
+
+    getNextDayHolidayName(date) {
+        const nextDay = new Date(date);
+        nextDay.setDate(date.getDate() + 1);
+        return this.getHolidayName(nextDay);
+    }
+
+    isQualifyingDay(date) {
+        const day = date.getDay();
+        // Fr(5), Sa(6), So(0)
+        if (day === 5 || day === 6 || day === 0) return true;
+        if (this.isHoliday(date)) return true;
+        if (this.isDayBeforeHoliday(date)) return true;
+        return false;
+    }
+
+    isFriday(date) {
+        return date.getDay() === 5;
+    }
+
+    getDayTypeInfo(date) {
+        const day = date.getDay();
+        const holidayName = this.getHolidayName(date);
+        const nextDayHolidayName = this.getNextDayHolidayName(date);
+
+        if (holidayName) {
+            return { type: 'holiday', label: 'Feiertag', detail: holidayName };
+        }
+        if (this.isDayBeforeHoliday(date)) {
+            return { type: 'preHoliday', label: 'Vortag Feiertag', detail: `Tag vor ${nextDayHolidayName}` };
+        }
+        if (day === 5) return { type: 'friday', label: 'Freitag', detail: 'WE-Tag (Freitag)' };
+        if (day === 6) return { type: 'saturday', label: 'Samstag', detail: 'WE-Tag (Samstag)' };
+        if (day === 0) return { type: 'sunday', label: 'Sonntag', detail: 'WE-Tag (Sonntag)' };
+
+        return { type: 'weekday', label: WEEKDAYS[day], detail: 'Normaler Werktag (WT)' };
+    }
+
+    // --- Duties ---
+    getDailyDuties(isoDate) {
+        return this.duties.filter(d => d.date === isoDate);
+    }
+
+    sanitizeName(name) {
+        return name.replace(/[<>&"']/g, c => ({
+            '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;'
+        }[c]));
+    }
+
+    addDuty() {
+        const nameInput = document.getElementById('inputEmployee');
+        const shareInput = document.getElementById('inputShare');
+        const name = nameInput.value.trim();
+
+        if (!name) {
+            alert('Bitte einen Mitarbeiternamen eingeben.');
+            return;
+        }
+
+        if (name.length > 100) {
+            alert('Name zu lang (max. 100 Zeichen).');
+            return;
+        }
+
+        const entry = {
+            id: Date.now() + Math.random(),
+            date: this.formatDateISO(this.currentDate),
+            name: name,
+            share: parseFloat(shareInput.value)
         };
 
-        // ==================== CONSTANTS ====================
-        const RATE_NORMAL = 250;
-        const RATE_WEEKEND = 450;
-        const MIN_QUALIFYING_DAYS = 2.0;
-        const DEDUCTION = 1.0;
-
-        const MONTHS = [
-            'Januar', 'Februar', 'Marz', 'April', 'Mai', 'Juni',
-            'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
-        ];
-
-        // ==================== STATE ====================
-        let employees = [];
-        let duties = [];
-        let currentStep = 1;
-        let selectedMonth = new Date().getMonth();
-        let selectedYear = new Date().getFullYear();
-
-        // ==================== HOLIDAY FUNCTIONS ====================
-        function formatDate(date) {
-            const year = date.getFullYear();
-            const month = String(date.getMonth() + 1).padStart(2, '0');
-            const day = String(date.getDate()).padStart(2, '0');
-            return `${year}-${month}-${day}`;
+        this.duties.push(entry);
+        if (!this.employees.includes(name)) {
+            this.employees.push(name);
         }
 
-        function isHoliday(date) {
-            const year = date.getFullYear();
-            const dateStr = formatDate(date);
-            if (!NRW_HOLIDAYS[year]) return false;
-            return NRW_HOLIDAYS[year].some(h => h.date === dateStr);
+        this.save();
+        this.updateView();
+        nameInput.value = '';
+        nameInput.focus();
+    }
+
+    deleteDuty(id) {
+        this.duties = this.duties.filter(d => d.id !== id);
+        this.save();
+        this.updateView();
+    }
+
+    // --- View Update ---
+    updateView() {
+        const options = { weekday: 'long', year: 'numeric', month: '2-digit', day: '2-digit' };
+        document.getElementById('displayDate').textContent =
+            this.currentDate.toLocaleDateString('de-DE', options);
+
+        const dayInfo = this.getDayTypeInfo(this.currentDate);
+        const badge = document.getElementById('dayStatusBadge');
+        const holidayNameEl = document.getElementById('holidayName');
+
+        const isQual = this.isQualifyingDay(this.currentDate);
+
+        if (dayInfo.type === 'holiday') {
+            badge.textContent = 'Feiertag (WE-Tag)';
+            badge.className = 'day-badge holiday';
+            holidayNameEl.textContent = dayInfo.detail;
+        } else if (dayInfo.type === 'preHoliday') {
+            badge.textContent = 'Vortag Feiertag (WE-Tag)';
+            badge.className = 'day-badge qualifying';
+            holidayNameEl.textContent = dayInfo.detail;
+        } else if (isQual) {
+            badge.textContent = `${dayInfo.label} (WE-Tag)`;
+            badge.className = 'day-badge qualifying';
+            holidayNameEl.textContent = '';
+        } else {
+            badge.textContent = `${dayInfo.label} (WT)`;
+            badge.className = 'day-badge';
+            holidayNameEl.textContent = '';
         }
 
-        function isDayBeforeHoliday(date) {
-            const nextDay = new Date(date);
-            nextDay.setDate(nextDay.getDate() + 1);
-            return isHoliday(nextDay);
+        const iso = this.formatDateISO(this.currentDate);
+        const listContainer = document.getElementById('dayDutyList');
+        listContainer.innerHTML = '';
+
+        const todaysDuties = this.getDailyDuties(iso);
+        if (todaysDuties.length === 0) {
+            listContainer.innerHTML = '<p style="color: #888; margin-top: 20px;">Keine Dienste an diesem Tag eingetragen.</p>';
+        } else {
+            todaysDuties.forEach(d => {
+                const div = document.createElement('div');
+                div.className = 'duty-item';
+                const safeName = this.sanitizeName(d.name);
+                div.innerHTML = `
+                    <div><strong>${safeName}</strong> <span style="color:#666">(${d.share.toFixed(1)})</span></div>
+                    <button class="btn-delete" onclick="app.deleteDuty(${d.id})">Löschen</button>
+                `;
+                listContainer.appendChild(div);
+            });
         }
 
-        function getHolidayName(date) {
-            const year = date.getFullYear();
-            const dateStr = formatDate(date);
-            if (!NRW_HOLIDAYS[year]) return null;
-            const holiday = NRW_HOLIDAYS[year].find(h => h.date === dateStr);
-            return holiday ? holiday.name : null;
+        this.updateSuggestions();
+    }
+
+    // --- Calculation (Variante 2 Streng) ---
+    calcResults() {
+        const m = parseInt(document.getElementById('selectMonth').value);
+        const y = parseInt(document.getElementById('selectYear').value);
+
+        document.getElementById('resultsMonthDisplay').textContent = `${MONTHS[m]} ${y}`;
+
+        const tbody = document.querySelector('#resultsTable tbody');
+        tbody.innerHTML = '';
+
+        const monthDuties = this.duties.filter(d => {
+            const date = new Date(d.date);
+            return date.getMonth() === m && date.getFullYear() === y;
+        });
+
+        if (monthDuties.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color:#888; padding: 30px;">Keine Dienste in diesem Monat eingetragen.</td></tr>';
+            document.getElementById('totalSummary').style.display = 'none';
+            return;
         }
 
-        function isQualifyingDay(date) {
-            const dayOfWeek = date.getDay();
-            const isWeekend = dayOfWeek === 5 || dayOfWeek === 6 || dayOfWeek === 0;
-            return isWeekend || isHoliday(date) || isDayBeforeHoliday(date);
-        }
-
-        function getDayTypeLabel(date) {
-            const dayOfWeek = date.getDay();
-            const holidayName = getHolidayName(date);
-
-            if (holidayName) return `Feiertag (${holidayName})`;
-            if (isDayBeforeHoliday(date)) return 'Tag vor Feiertag';
-            if (dayOfWeek === 5) return 'Freitag';
-            if (dayOfWeek === 6) return 'Samstag';
-            if (dayOfWeek === 0) return 'Sonntag';
-
-            const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
-            return days[dayOfWeek];
-        }
-
-        // ==================== CALCULATION ====================
-        function calculateBonus(employeeDuties) {
-            if (!employeeDuties || employeeDuties.length === 0) {
-                return {
-                    normalDays: 0,
-                    qualifyingDaysFriday: 0,
-                    qualifyingDaysOther: 0,
-                    qualifyingDays: 0,
-                    thresholdReached: false,
-                    deduction: 0,
-                    normalDaysPaid: 0,
-                    qualifyingDaysPaid: 0,
-                    bonusNormalDays: 0,
-                    bonusQualifyingDays: 0,
-                    totalBonus: 0,
-                    details: []
-                };
+        // Group by employee
+        const stats = {};
+        monthDuties.forEach(d => {
+            if (!stats[d.name]) {
+                stats[d.name] = { wt: 0, we_fr: 0, we_other: 0 };
             }
 
-            let qualifyingDaysFriday = 0;
-            let qualifyingDaysOther = 0;
-            let normalDays = 0;
-            const details = [];
+            const date = new Date(d.date);
+            const isQual = this.isQualifyingDay(date);
+            const isFri = this.isFriday(date);
 
-            employeeDuties.forEach(duty => {
-                const date = new Date(duty.date);
-                const qualifying = isQualifyingDay(date);
-                const isFriday = date.getDay() === 5;
-                const dayType = getDayTypeLabel(date);
-
-                if (qualifying) {
-                    if (isFriday) {
-                        qualifyingDaysFriday += duty.share;
-                    } else {
-                        qualifyingDaysOther += duty.share;
-                    }
+            if (!isQual) {
+                stats[d.name].wt += d.share;
+            } else {
+                if (isFri) {
+                    stats[d.name].we_fr += d.share;
                 } else {
-                    normalDays += duty.share;
+                    stats[d.name].we_other += d.share;
                 }
+            }
+        });
 
-                details.push({
-                    date: date,
-                    share: duty.share,
-                    isQualifying: qualifying,
-                    dayType: dayType
-                });
-            });
+        let totalPayout = 0;
 
-            const qualifyingDays = qualifyingDaysFriday + qualifyingDaysOther;
-            const thresholdReached = qualifyingDays >= MIN_QUALIFYING_DAYS - 0.0001;
+        for (const [name, data] of Object.entries(stats)) {
+            const we_total = data.we_fr + data.we_other;
+            const thresholdReached = we_total >= (CONFIG.THRESHOLD - CONFIG.TOLERANCE);
 
-            let bonus = 0;
-            let normalDaysPaid = 0;
-            let qualifyingDaysPaid = 0;
-            let deduction = 0;
+            let payout = 0;
 
             if (thresholdReached) {
-                deduction = DEDUCTION;
-                const deductionFromFriday = Math.min(deduction, qualifyingDaysFriday);
-                const deductionFromOther = Math.max(0, deduction - deductionFromFriday);
+                // WT payment
+                const wt_pay = data.wt * CONFIG.RATE_WT;
 
-                const qualifyingDaysFridayPaid = Math.max(0, qualifyingDaysFriday - deductionFromFriday);
-                const qualifyingDaysOtherPaid = Math.max(0, qualifyingDaysOther - deductionFromOther);
+                // WE payment with deduction (Friday first)
+                let deduct = CONFIG.DEDUCTION;
+                const deduct_fr = Math.min(deduct, data.we_fr);
+                const deduct_other = Math.max(0, deduct - deduct_fr);
 
-                qualifyingDaysPaid = qualifyingDaysFridayPaid + qualifyingDaysOtherPaid;
-                normalDaysPaid = normalDays;
+                const paid_fr = Math.max(0, data.we_fr - deduct_fr);
+                const paid_other = Math.max(0, data.we_other - deduct_other);
+                const we_pay = (paid_fr + paid_other) * CONFIG.RATE_WE;
 
-                bonus = (normalDaysPaid * RATE_NORMAL) + (qualifyingDaysPaid * RATE_WEEKEND);
+                payout = wt_pay + we_pay;
             }
+            // If threshold not reached: payout stays 0 (no WT, no WE)
 
-            return {
-                normalDays: normalDays,
-                qualifyingDaysFriday: qualifyingDaysFriday,
-                qualifyingDaysOther: qualifyingDaysOther,
-                qualifyingDays: qualifyingDays,
-                thresholdReached: thresholdReached,
-                deduction: deduction,
-                normalDaysPaid: normalDaysPaid,
-                qualifyingDaysPaid: qualifyingDaysPaid,
-                bonusNormalDays: normalDaysPaid * RATE_NORMAL,
-                bonusQualifyingDays: qualifyingDaysPaid * RATE_WEEKEND,
-                totalBonus: bonus,
-                details: details
-            };
-        }
+            totalPayout += payout;
 
-        function formatCurrency(amount) {
-            return new Intl.NumberFormat('de-DE', {
-                style: 'currency',
-                currency: 'EUR'
-            }).format(amount);
-        }
-
-        function formatNumber(num) {
-            return num.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 });
-        }
-
-        // ==================== UI FUNCTIONS ====================
-        function init() {
-            loadFromStorage();
-            initSelectors();
-            renderEmployees();
-            updateStep(1);
-        }
-
-        function initSelectors() {
-            const monthSelect = document.getElementById('month');
-            const yearSelect = document.getElementById('year');
-
-            MONTHS.forEach((m, i) => {
-                const opt = document.createElement('option');
-                opt.value = i;
-                opt.textContent = m;
-                if (i === selectedMonth) opt.selected = true;
-                monthSelect.appendChild(opt);
-            });
-
-            const currentYear = new Date().getFullYear();
-            for (let y = currentYear - 1; y <= currentYear + 5; y++) {
-                const opt = document.createElement('option');
-                opt.value = y;
-                opt.textContent = y;
-                if (y === selectedYear) opt.selected = true;
-                yearSelect.appendChild(opt);
-            }
-
-            monthSelect.addEventListener('change', (e) => {
-                selectedMonth = parseInt(e.target.value);
-                saveToStorage();
-                if (currentStep === 2) renderDutyStep();
-            });
-
-            yearSelect.addEventListener('change', (e) => {
-                selectedYear = parseInt(e.target.value);
-                saveToStorage();
-                if (currentStep === 2) renderDutyStep();
-            });
-        }
-
-        function goToStep(step) {
-            if (step === 2 && employees.length === 0) {
-                alert('Bitte geben Sie mindestens einen Mitarbeiter ein.');
-                return;
-            }
-            updateStep(step);
-        }
-
-        function updateStep(step) {
-            currentStep = step;
-
-            document.querySelectorAll('.step-content').forEach(el => el.classList.remove('active'));
-            document.getElementById(`step${step}`).classList.add('active');
-
-            document.querySelectorAll('.step-item').forEach((el, i) => {
-                el.classList.remove('active', 'completed');
-                if (i + 1 === step) {
-                    el.classList.add('active');
-                } else if (i + 1 < step) {
-                    el.classList.add('completed');
-                }
-            });
-
-            if (step === 2) {
-                renderDutyStep();
-            }
-
-            document.querySelector('.print-btn').style.display = step === 3 ? 'flex' : 'none';
-        }
-
-        function addEmployee() {
-            const input = document.getElementById('employeeName');
-            const name = input.value.trim();
-
-            if (!name) {
-                alert('Bitte geben Sie einen Namen ein.');
-                return;
-            }
-
-            if (employees.includes(name)) {
-                alert('Dieser Mitarbeiter existiert bereits.');
-                return;
-            }
-
-            employees.push(name);
-            input.value = '';
-            renderEmployees();
-            saveToStorage();
-        }
-
-        function removeEmployee(name) {
-            employees = employees.filter(e => e !== name);
-            duties = duties.filter(d => d.employee !== name);
-            renderEmployees();
-            saveToStorage();
-        }
-
-        function renderEmployees() {
-            const container = document.getElementById('employeeList');
-
-            if (employees.length === 0) {
-                container.innerHTML = '<div class="empty-state"><p>Noch keine Mitarbeiter hinzugefugt</p></div>';
-                return;
-            }
-
-            container.innerHTML = employees.map(name => `
-                <div class="employee-tag">
-                    <span>${name}</span>
-                    <button class="remove" onclick="removeEmployee('${name}')">&times;</button>
-                </div>
-            `).join('');
-        }
-
-        function renderDutyStep() {
-            document.getElementById('monthYearDisplay').textContent = `${MONTHS[selectedMonth]} ${selectedYear}`;
-
-            const empSelect = document.getElementById('dutyEmployee');
-            empSelect.innerHTML = employees.map(e => `<option value="${e}">${e}</option>`).join('');
-
-            const dateInput = document.getElementById('dutyDate');
-            const firstDay = new Date(selectedYear, selectedMonth, 1);
-            const lastDay = new Date(selectedYear, selectedMonth + 1, 0);
-            dateInput.min = formatDate(firstDay);
-            dateInput.max = formatDate(lastDay);
-            dateInput.value = formatDate(firstDay);
-
-            renderCalendar();
-            renderDutyList();
-        }
-
-        function renderCalendar() {
-            const container = document.getElementById('calendarContainer');
-            const firstDay = new Date(selectedYear, selectedMonth, 1);
-            const lastDay = new Date(selectedYear, selectedMonth + 1, 0);
-            const startDay = firstDay.getDay() || 7;
-
-            let html = '<div class="calendar-grid">';
-            const dayNames = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];
-            dayNames.forEach(d => html += `<div class="calendar-header">${d}</div>`);
-
-            for (let i = 1; i < startDay; i++) {
-                html += '<div class="calendar-day empty"></div>';
-            }
-
-            for (let day = 1; day <= lastDay.getDate(); day++) {
-                const date = new Date(selectedYear, selectedMonth, day);
-                const dateStr = formatDate(date);
-                const qualifying = isQualifyingDay(date);
-                const hasDuty = duties.some(d => d.date === dateStr);
-
-                let classes = 'calendar-day';
-                if (qualifying) classes += ' qualifying';
-                if (hasDuty) classes += ' has-duty selected';
-
-                html += `<div class="${classes}" onclick="selectDate('${dateStr}')" title="${getDayTypeLabel(date)}">${day}</div>`;
-            }
-
-            html += '</div>';
-            container.innerHTML = html;
-        }
-
-        function selectDate(dateStr) {
-            document.getElementById('dutyDate').value = dateStr;
-        }
-
-        function addDuty() {
-            const employee = document.getElementById('dutyEmployee').value;
-            const dateStr = document.getElementById('dutyDate').value;
-            const share = parseFloat(document.getElementById('dutyShare').value);
-
-            if (!employee || !dateStr) {
-                alert('Bitte fullen Sie alle Felder aus.');
-                return;
-            }
-
-            const date = new Date(dateStr);
-            if (date.getMonth() !== selectedMonth || date.getFullYear() !== selectedYear) {
-                alert('Das Datum muss im ausgewahlten Monat liegen.');
-                return;
-            }
-
-            duties.push({ employee, date: dateStr, share });
-            renderCalendar();
-            renderDutyList();
-            saveToStorage();
-        }
-
-        function removeDuty(index) {
-            duties.splice(index, 1);
-            renderCalendar();
-            renderDutyList();
-            saveToStorage();
-        }
-
-        function renderDutyList() {
-            const container = document.getElementById('dutyListContainer');
-            const monthDuties = duties.filter(d => {
-                const date = new Date(d.date);
-                return date.getMonth() === selectedMonth && date.getFullYear() === selectedYear;
-            });
-
-            document.getElementById('dutyCount').textContent = monthDuties.length;
-
-            if (monthDuties.length === 0) {
-                container.innerHTML = '<div class="empty-state"><p>Noch keine Dienste eingetragen</p></div>';
-                return;
-            }
-
-            monthDuties.sort((a, b) => new Date(a.date) - new Date(b.date));
-
-            container.innerHTML = monthDuties.map((duty, idx) => {
-                const date = new Date(duty.date);
-                const qualifying = isQualifyingDay(date);
-                const dayType = getDayTypeLabel(date);
-                const realIndex = duties.indexOf(duty);
-
-                return `
-                    <div class="duty-item ${qualifying ? 'qualifying' : ''}">
-                        <div>
-                            <strong>${duty.employee}</strong>
-                        </div>
-                        <div>
-                            ${date.toLocaleDateString('de-DE', { weekday: 'short', day: '2-digit', month: '2-digit' })}
-                            <div class="day-type">${dayType}</div>
-                        </div>
-                        <div>Anteil: ${formatNumber(duty.share)}</div>
-                        <div>
-                            <button class="btn btn-danger" onclick="removeDuty(${realIndex})">Loschen</button>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-        }
-
-        function calculateAndShowResults() {
-            const monthDuties = duties.filter(d => {
-                const date = new Date(d.date);
-                return date.getMonth() === selectedMonth && date.getFullYear() === selectedYear;
-            });
-
-            if (monthDuties.length === 0) {
-                alert('Keine Dienste fur diesen Monat eingetragen.');
-                return;
-            }
-
-            goToStep(3);
-            renderResults();
-        }
-
-        function renderResults() {
-            document.getElementById('resultMonthYear').textContent = `${MONTHS[selectedMonth]} ${selectedYear}`;
-
-            const monthDuties = duties.filter(d => {
-                const date = new Date(d.date);
-                return date.getMonth() === selectedMonth && date.getFullYear() === selectedYear;
-            });
-
-            const byEmployee = {};
-            monthDuties.forEach(d => {
-                if (!byEmployee[d.employee]) byEmployee[d.employee] = [];
-                byEmployee[d.employee].push(d);
-            });
-
-            let totalBonus = 0;
-            let html = '';
-
-            employees.forEach(emp => {
-                const empDuties = byEmployee[emp] || [];
-                const result = calculateBonus(empDuties);
-                totalBonus += result.totalBonus;
-
-                html += `
-                    <div class="result-card">
-                        <h3>
-                            ${emp}
-                            <span class="threshold-badge ${result.thresholdReached ? 'reached' : 'not-reached'}">
-                                ${result.thresholdReached ? 'Schwelle erreicht' : 'Schwelle nicht erreicht'}
-                            </span>
-                        </h3>
-                        <div class="result-grid">
-                            <div class="result-item">
-                                <div class="label">WT-Einheiten</div>
-                                <div class="value">${formatNumber(result.normalDays)}</div>
-                            </div>
-                            <div class="result-item">
-                                <div class="label">WE-Einheiten (Freitag)</div>
-                                <div class="value">${formatNumber(result.qualifyingDaysFriday)}</div>
-                            </div>
-                            <div class="result-item">
-                                <div class="label">WE-Einheiten (Andere)</div>
-                                <div class="value">${formatNumber(result.qualifyingDaysOther)}</div>
-                            </div>
-                            <div class="result-item ${result.thresholdReached ? 'success' : 'warning'}">
-                                <div class="label">WE-Gesamt</div>
-                                <div class="value">${formatNumber(result.qualifyingDays)}</div>
-                            </div>
-                            <div class="result-item">
-                                <div class="label">Abzug</div>
-                                <div class="value">-${formatNumber(result.deduction)}</div>
-                            </div>
-                            <div class="result-item">
-                                <div class="label">WT bezahlt</div>
-                                <div class="value">${formatNumber(result.normalDaysPaid)}</div>
-                            </div>
-                            <div class="result-item">
-                                <div class="label">WE bezahlt</div>
-                                <div class="value">${formatNumber(result.qualifyingDaysPaid)}</div>
-                            </div>
-                            <div class="result-item highlight">
-                                <div class="label">Bonus Gesamt</div>
-                                <div class="value">${formatCurrency(result.totalBonus)}</div>
-                            </div>
-                        </div>
-                        ${result.thresholdReached ? `
-                            <div style="margin-top: 15px; font-size: 0.9em; color: #718096;">
-                                WT: ${formatNumber(result.normalDaysPaid)} x ${formatCurrency(RATE_NORMAL)} = ${formatCurrency(result.bonusNormalDays)}<br>
-                                WE: ${formatNumber(result.qualifyingDaysPaid)} x ${formatCurrency(RATE_WEEKEND)} = ${formatCurrency(result.bonusQualifyingDays)}
-                            </div>
-                        ` : `
-                            <div style="margin-top: 15px; font-size: 0.9em; color: #c53030;">
-                                WE-Schwelle (2,0) nicht erreicht - kein Bonus
-                            </div>
-                        `}
-                    </div>
-                `;
-            });
-
-            html += `
-                <div class="total-summary">
-                    <h2>Gesamtauszahlung</h2>
-                    <div class="amount">${formatCurrency(totalBonus)}</div>
-                </div>
+            const safeName = this.sanitizeName(name);
+            const tr = document.createElement('tr');
+            tr.innerHTML = `
+                <td><strong>${safeName}</strong></td>
+                <td>${data.wt.toFixed(1)}</td>
+                <td>${data.we_fr.toFixed(1)}</td>
+                <td>${data.we_other.toFixed(1)}</td>
+                <td>${we_total.toFixed(1)}</td>
+                <td><span class="threshold-tag ${thresholdReached ? 'threshold-yes' : 'threshold-no'}">${thresholdReached ? 'JA' : 'NEIN'}</span></td>
+                <td class="amount ${payout > 0 ? 'positive' : 'neutral'}">${this.formatCurrency(payout)}</td>
             `;
-
-            document.getElementById('resultsContainer').innerHTML = html;
+            tbody.appendChild(tr);
         }
 
-        // ==================== STORAGE ====================
-        function saveToStorage() {
+        document.getElementById('totalSummary').style.display = 'block';
+        document.getElementById('totalAmount').textContent = this.formatCurrency(totalPayout);
+    }
+
+    formatCurrency(amount) {
+        return new Intl.NumberFormat('de-DE', {
+            style: 'currency',
+            currency: 'EUR'
+        }).format(amount);
+    }
+
+    // --- Data Management ---
+    exportData() {
+        const exportObj = {
+            version: 2,
+            exported: new Date().toISOString(),
+            duties: this.duties,
+            employees: this.employees
+        };
+        const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj, null, 2));
+        const downloadAnchor = document.createElement('a');
+        downloadAnchor.setAttribute("href", dataStr);
+        downloadAnchor.setAttribute("download", `dienstplan_backup_${new Date().toISOString().split('T')[0]}.json`);
+        document.body.appendChild(downloadAnchor);
+        downloadAnchor.click();
+        downloadAnchor.remove();
+    }
+
+    importData(input) {
+        const file = input.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
             try {
-                localStorage.setItem('dienstplan_portable_employees', JSON.stringify(employees));
-                localStorage.setItem('dienstplan_portable_duties', JSON.stringify(duties));
-                localStorage.setItem('dienstplan_portable_month', selectedMonth);
-                localStorage.setItem('dienstplan_portable_year', selectedYear);
-            } catch (e) {
-                console.log('Speichern nicht moglich:', e);
+                const data = JSON.parse(e.target.result);
+
+                // Support both old format (array) and new format (object with version)
+                if (Array.isArray(data)) {
+                    this.duties = data;
+                    const empSet = new Set(this.employees);
+                    data.forEach(d => empSet.add(d.name));
+                    this.employees = [...empSet];
+                } else if (data.duties) {
+                    this.duties = data.duties;
+                    this.employees = data.employees || [];
+                    const empSet = new Set(this.employees);
+                    this.duties.forEach(d => empSet.add(d.name));
+                    this.employees = [...empSet];
+                } else {
+                    throw new Error('Unbekanntes Datenformat');
+                }
+
+                this.save();
+                this.updateView();
+                alert('Import erfolgreich! ' + this.duties.length + ' Dienste geladen.');
+            } catch (err) {
+                alert('Fehler beim Importieren: ' + err.message);
             }
+        };
+        reader.readAsText(file);
+        input.value = '';
+    }
+
+    clearData() {
+        if (confirm('Wirklich ALLE Daten unwiderruflich löschen?')) {
+            this.duties = [];
+            this.employees = [];
+            localStorage.removeItem('nrw_duties_v2');
+            localStorage.removeItem('nrw_employees_v2');
+            this.updateView();
+            alert('Alle Daten wurden gelöscht.');
         }
+    }
+}
 
-        function loadFromStorage() {
-            try {
-                const savedEmployees = localStorage.getItem('dienstplan_portable_employees');
-                const savedDuties = localStorage.getItem('dienstplan_portable_duties');
-                const savedMonth = localStorage.getItem('dienstplan_portable_month');
-                const savedYear = localStorage.getItem('dienstplan_portable_year');
+// Initialize app
+const app = new DienstplanApp();
+</script>
 
-                if (savedEmployees) employees = JSON.parse(savedEmployees);
-                if (savedDuties) duties = JSON.parse(savedDuties);
-                if (savedMonth !== null) selectedMonth = parseInt(savedMonth);
-                if (savedYear !== null) selectedYear = parseInt(savedYear);
-            } catch (e) {
-                console.log('Laden nicht moglich:', e);
-            }
-        }
-
-        // Enter key for employee input
-        document.addEventListener('DOMContentLoaded', () => {
-            init();
-            document.getElementById('employeeName').addEventListener('keypress', (e) => {
-                if (e.key === 'Enter') addEmployee();
-            });
-        });
-    </script>
 </body>
 </html>
