chore: Version auf 1.3.11 erhöht - Sprachausgabe-Funktion und verbesserte Feiertage-Anzeige

- Vorlesen-Buttons (🔊) bei allen Ergebnissen
- Web Speech API mit deutscher Sprachausgabe
- Vollständige Tastaturnavigation (Tab, Enter, Leertaste)
- ESC-Taste zum Stoppen der Wiedergabe
- Barrierefreiheit verbessert für Menschen mit Sehbehinderungen
- README aktualisiert mit Sprachausgabe-Dokumentation

README.md

@@ -41,15 +41,40 @@ Datumsrechner Live: [https://date.elpatron.me](https://date.elpatron.me)
 ## Funktionen
 
 - Anzahl der Tage zwischen zwei Daten
-- Anzahl der Werktage zwischen zwei Daten
+- Anzahl der Werktage zwischen zwei Daten (mit optionaler Berücksichtigung bundeslandspezifischer Feiertage)
 - Anzeige des Wochentags eines Datums
 - Datum plus/minus X Tage
 - Datum plus/minus X Werktage
 - Datum plus/minus X Wochen/Monate
 - Kalenderwoche zu Datum
 - Start-/Enddatum einer Kalenderwoche eines Jahres
+- **Sprachausgabe** für alle Ergebnisse (barrierefrei)
 - Statistik-Dashboard mit Passwortschutz unter `/stats`
 
+## Bundesland-Feiertage
+
+Die Werktagsberechnung kann optional bundeslandspezifische Feiertage berücksichtigen. Dazu wird die kostenlose API von [feiertage-api.de](https://feiertage-api.de) verwendet.
+
+**Verfügbare Bundesländer:**
+- Baden-Württemberg (BW)
+- Bayern (BY)
+- Berlin (BE)
+- Brandenburg (BB)
+- Bremen (HB)
+- Hamburg (HH)
+- Hessen (HE)
+- Mecklenburg-Vorpommern (MV)
+- Niedersachsen (NI)
+- Nordrhein-Westfalen (NW)
+- Rheinland-Pfalz (RP)
+- Saarland (SL)
+- Sachsen (SN)
+- Sachsen-Anhalt (ST)
+- Schleswig-Holstein (SH)
+- Thüringen (TH)
+
+Die Feiertage werden automatisch für den gewählten Zeitraum abgerufen und bei der Werktagsberechnung als arbeitsfreie Tage behandelt. Im Ergebnis werden zusätzlich die Anzahl der Wochenendtage und Feiertage angezeigt.
+
 ## Installation (lokal)
 
 1. Python 3.8+ installieren
@@ -148,7 +173,8 @@ Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptier
 {
   "start": "2024-06-01",
   "end": "2024-06-10",
-  "werktage": true
+  "werktage": true,
+  "bundesland": "BY"
 }
 ```
 
@@ -156,7 +182,7 @@ Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptier
 ```bash
 curl -X POST http://localhost:5000/api/tage_werktage \
   -H "Content-Type: application/json" \
-  -d '{"start": "2024-06-01", "end": "2024-06-10", "werktage": true}'
+  -d '{"start": "2024-06-01", "end": "2024-06-10", "werktage": true, "bundesland": "BY"}'
 ```
 
 **Antwort:**
@@ -164,6 +190,8 @@ curl -X POST http://localhost:5000/api/tage_werktage \
 { "result": 7 }
 ```
 
+**Hinweis:** Der Parameter `bundesland` ist optional und wird nur bei `"werktage": true` berücksichtigt. Verfügbare Bundesland-Kürzel siehe oben.
+
 #### 2. Wochentag zu einem Datum
 
 **POST** `/api/wochentag`
@@ -381,6 +409,7 @@ Es werden keine IP-Adressen oder sonstigen persönlichen Daten gespeichert, ledi
 - *Fokus-Indikatoren:* Deutliche visuelle Hervorhebung des Fokus für alle Bedienelemente.
 - *Farbkontraste:* Hohe Kontraste für Texte, Buttons und Ergebnisboxen, geprüft nach WCAG-Richtlinien.
 - *Status- und Fehlermeldungen:* Ergebnisse und Fehler werden mit `aria-live` für Screenreader zugänglich gemacht.
+- **Sprachausgabe:** Alle Ergebnisse können über 🔊-Buttons vorgelesen werden (Web Speech API, deutsche Sprache).
 - *Mobile Optimierung:* Zusätzliche Meta-Tags für bessere Bedienbarkeit auf mobilen Geräten und Unterstützung von Screenreadern.
 - *SEO:* Das Thema Barrierefreiheit ist in den Meta-Tags für Suchmaschinen sichtbar.
 

app.py

@@ -4,16 +4,32 @@ import numpy as np
 from dateutil.relativedelta import relativedelta
 import os
 import time
+import requests
 
 app_start_time = time.time()
 
 app = Flask(__name__)
 app.secret_key = os.environ.get('SECRET_KEY', 'dev-key')
 
+# Version der App
+APP_VERSION = "1.3.11"
+
 # HTML-Template wird jetzt aus templates/index.html geladen
 
 WOCHENTAGE = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"]
 
+def get_feiertage(year, bundesland):
+    """Holt die Feiertage für ein Jahr und Bundesland von feiertage-api.de."""
+    url = f"https://feiertage-api.de/api/?jahr={year}&nur_land={bundesland}"
+    try:
+        resp = requests.get(url, timeout=5)
+        data = resp.json()
+        # Die API gibt ein Dict mit Feiertagsnamen als Key, jeweils mit 'datum' als Wert
+        return [v['datum'] for v in data.values() if 'datum' in v]
+    except Exception as e:
+        print(f"Fehler beim Abrufen der Feiertage: {e}")
+        return []
+
 @app.route('/', methods=['GET', 'POST'])
 def index():
     # Rudimentäres Logging für Page Impressions
@@ -40,6 +56,7 @@ def index():
         from datetime import datetime as dt
         f.write(f"{dt.now().isoformat()} PAGEVIEW\n")
     tage = werktage = wochentag = datumsrechnung = werktagsrechnung = kw_berechnen = kw_datum = wochen_monate = None
+    feiertage_anzahl = wochenendtage_anzahl = None
     active_idx = 0
     plusminus_result = None
     if request.method == 'POST':
@@ -53,13 +70,27 @@ def index():
             start = request.form.get('start1')
             end = request.form.get('end1')
             is_werktage = request.form.get('werktage') in ('on', 'true', '1', True)
+            bundesland = request.form.get('bundesland')
             try:
                 d1 = datetime.strptime(start, '%Y-%m-%d')
                 d2 = datetime.strptime(end, '%Y-%m-%d')
-                if is_werktage:
                 if d1 > d2:
                     d1, d2 = d2, d1
-                    tage = np.busday_count(d1.date(), (d2 + timedelta(days=1)).date())
+                # Feiertage bestimmen
+                holidays = []
+                if bundesland:
+                    years = set([d1.year, d2.year])
+                    for y in years:
+                        holidays.extend(get_feiertage(y, bundesland))
+                # Alle Tage im Bereich
+                all_days = [(d1 + timedelta(days=i)).date() for i in range((d2 - d1).days + 1)]
+                # Wochenendtage zählen
+                wochenendtage_anzahl = sum(1 for d in all_days if d.weekday() >= 5)
+                # Feiertage zählen (nur die, die im Bereich liegen und nicht auf Wochenende fallen)
+                feiertage_im_zeitraum = [f for f in holidays if d1.date() <= datetime.strptime(f, '%Y-%m-%d').date() <= d2.date()]
+                feiertage_anzahl = sum(1 for f in feiertage_im_zeitraum if datetime.strptime(f, '%Y-%m-%d').date().weekday() < 5)
+                if is_werktage:
+                    tage = np.busday_count(d1.date(), (d2 + timedelta(days=1)).date(), holidays=holidays)
                 else:
                     tage = abs((d2 - d1).days)
             except Exception:
@@ -129,7 +160,9 @@ def index():
                         plusminus_result = f"Datum {d.strftime('%d.%m.%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} Monate: {result.strftime('%d.%m.%Y')}"
             except Exception:
                 plusminus_result = 'Ungültige Eingabe'
-    return render_template('index.html', tage=tage, werktage=werktage, wochentag=wochentag, plusminus_result=plusminus_result, kw_berechnen=kw_berechnen, kw_datum=kw_datum, active_idx=active_idx)
+    return render_template('index.html', tage=tage, werktage=werktage, wochentag=wochentag, plusminus_result=plusminus_result, kw_berechnen=kw_berechnen, kw_datum=kw_datum, active_idx=active_idx
+        , feiertage_anzahl=feiertage_anzahl, wochenendtage_anzahl=wochenendtage_anzahl, app_version=APP_VERSION
+    )
 
 
 def parse_log_stats(log_path):
@@ -187,13 +220,20 @@ def api_tage_werktage():
     start = data.get('start')
     end = data.get('end')
     is_werktage = data.get('werktage', False)
+    bundesland = data.get('bundesland')
     try:
         d1 = datetime.strptime(start, '%Y-%m-%d')
         d2 = datetime.strptime(end, '%Y-%m-%d')
         if is_werktage:
             if d1 > d2:
                 d1, d2 = d2, d1
-            tage = int(np.busday_count(d1.date(), (d2 + timedelta(days=1)).date()))
+            holidays = []
+            if bundesland:
+                # Feiertage für alle Jahre im Bereich holen
+                years = set([d1.year, d2.year])
+                for y in years:
+                    holidays.extend(get_feiertage(y, bundesland))
+            tage = int(np.busday_count(d1.date(), (d2 + timedelta(days=1)).date(), holidays=holidays))
         else:
             tage = abs((d2 - d1).days)
         return jsonify({'result': tage})

requirements.txt

@@ -2,3 +2,4 @@ Flask==3.0.3
 numpy==1.26.4 
 python-dateutil==2.9.0.post0 
 pytest==8.2.2 
+requests 

static/swagger.json

@@ -21,7 +21,12 @@
                 "properties": {
                   "start": { "type": "string", "format": "date" },
                   "end": { "type": "string", "format": "date" },
-                  "werktage": { "type": "boolean", "default": false }
+                  "werktage": { "type": "boolean", "default": false },
+                  "bundesland": { 
+                    "type": "string", 
+                    "description": "Bundesland-Kürzel für Feiertagsberücksichtigung (nur bei werktage=true)",
+                    "enum": ["BW", "BY", "BE", "BB", "HB", "HH", "HE", "MV", "NI", "NW", "RP", "SL", "SN", "ST", "SH", "TH"]
+                  }
                 },
                 "required": ["start", "end"]
               }

templates/index.html

@@ -36,15 +36,22 @@
     --text: #1e293b;
     --shadow: 0 2px 8px rgba(30,41,59,0.07);
 }
+
+* {
+    box-sizing: border-box;
+}
 body {
     background: var(--background);
     color: var(--text);
     font-family: 'Segoe UI', Arial, sans-serif;
     margin: 0;
     padding: 0;
+    overflow-x: hidden;
+    box-sizing: border-box;
 }
 .container {
     max-width: 480px;
+    width: 100%;
     margin: 3em auto;
     background: var(--surface);
     border-radius: 16px;
@@ -52,6 +59,7 @@ body {
     padding: 2.5em 2em 2em 2em;
     border: 1px solid var(--border);
     position: relative;
+    box-sizing: border-box;
 }
 .help-button-container {
     position: absolute;
@@ -136,6 +144,7 @@ body {
     border-radius: 12px;
     padding: 2em;
     max-width: 90%;
+    width: 90%;
     max-height: 90%;
     overflow-y: auto;
     position: relative;
@@ -143,6 +152,7 @@ body {
     margin: 0 auto;
     left: 50%;
     transform: translateX(-50%);
+    box-sizing: border-box;
 }
 .modal-close {
     position: absolute;
@@ -286,8 +296,44 @@ button:focus, .accordion-header:focus {
     color: #1e293b;
     border-radius: 6px;
     padding: 0.7em 1em;
+    padding-right: 4em;
     box-shadow: 0 1px 2px rgba(30,41,59,0.04);
     border: 2px solid #2563eb;
+    position: relative;
+}
+.read-aloud-btn {
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+    background: rgba(37, 99, 235, 0.1);
+    color: var(--primary);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    padding: 0.3em 0.6em;
+    font-size: 0.8em;
+    cursor: pointer;
+    transition: all 0.2s;
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+}
+.read-aloud-btn:hover {
+    background: rgba(37, 99, 235, 0.2);
+    border-color: var(--primary);
+}
+.read-aloud-btn:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px #1e293b;
+    background: rgba(37, 99, 235, 0.2);
+    border-color: var(--primary);
+}
+.read-aloud-btn.playing {
+    background: var(--primary);
+    color: white;
 }
 .accordion {
     border-radius: 12px;
@@ -410,6 +456,8 @@ button:focus, .accordion-header:focus {
     .container {
         margin: 1em;
         padding: 1.2em 0.7em 1em 0.7em;
+        width: calc(100% - 2em);
+        max-width: none;
     }
     h1 {
         font-size: 1.3em;
@@ -432,6 +480,10 @@ button:focus, .accordion-header:focus {
     .modal-content {
         padding: 1.5em;
         margin: 1em;
+        width: calc(100% - 2em);
+        max-width: none;
+        left: 0;
+        transform: none;
     }
 }
 
@@ -509,6 +561,75 @@ footer br + a {
             // Fokus zurück auf den Hilfe-Button setzen
             document.querySelector('.help-button').focus();
         }
+        
+        // Sprachausgabe-Funktionalität
+        let currentSpeech = null;
+        
+        function readAloud(text, button) {
+            // Stoppe vorherige Wiedergabe
+            if (currentSpeech) {
+                currentSpeech.cancel();
+            }
+            
+            // Entferne "playing" Klasse von allen Buttons
+            document.querySelectorAll('.read-aloud-btn').forEach(btn => {
+                btn.classList.remove('playing');
+                btn.textContent = '🔊';
+            });
+            
+            // Erstelle neue Sprachausgabe
+            currentSpeech = new SpeechSynthesisUtterance(text);
+            currentSpeech.lang = 'de-DE';
+            currentSpeech.rate = 0.9;
+            currentSpeech.pitch = 1;
+            
+            // Button-Status aktualisieren
+            button.classList.add('playing');
+            button.textContent = '⏹️';
+            
+            // Event-Handler für Ende der Wiedergabe
+            currentSpeech.onend = function() {
+                button.classList.remove('playing');
+                button.textContent = '🔊';
+                currentSpeech = null;
+            };
+            
+            currentSpeech.onerror = function() {
+                button.classList.remove('playing');
+                button.textContent = '🔊';
+                currentSpeech = null;
+            };
+            
+            // Wiedergabe starten
+            speechSynthesis.speak(currentSpeech);
+        }
+        
+        function readAloudFromElement(button) {
+            // Finde das Ergebnis-Element (das div mit class="result")
+            const resultElement = button.closest('.result');
+            if (!resultElement) return;
+            
+            // Entferne den Button-Text aus dem zu lesenden Text
+            const buttonText = button.textContent;
+            let textToRead = resultElement.textContent.replace(buttonText, '').trim();
+            
+            // Bereinige den Text (entferne HTML-Tags und überschüssige Leerzeichen)
+            textToRead = textToRead.replace(/<[^>]*>/g, '').replace(/\s+/g, ' ').trim();
+            
+            readAloud(textToRead, button);
+        }
+        
+        function stopReading() {
+            if (currentSpeech) {
+                currentSpeech.cancel();
+                currentSpeech = null;
+            }
+            document.querySelectorAll('.read-aloud-btn').forEach(btn => {
+                btn.classList.remove('playing');
+                btn.textContent = '🔊';
+            });
+        }
+        
         document.addEventListener('DOMContentLoaded', function() {
             // Sofortige Aktivierung der ersten Accordion-Sektion um Layout-Shifts zu vermeiden
             const activeIdx = parseInt("{{ active_idx|default(0) }}");
@@ -547,6 +668,7 @@ footer br + a {
             document.addEventListener('keydown', function(e) {
                 if (e.key === 'Escape') {
                     hideHelp();
+                    stopReading();
                 }
             });
             
@@ -604,16 +726,50 @@ footer br + a {
                             <legend class="sr-only">Optionen</legend>
                             <input type="checkbox" name="werktage" id="werktage" {% if request.form.get('werktage') %}checked{% endif %} aria-checked="{{ 'true' if request.form.get('werktage') else 'false' }}">
                             <label for="werktage" style="margin:0;">Nur Werktage</label>
+                            <label for="bundesland" style="margin-left:1em;">Feiertage berücksichtigen für:
+                                <select name="bundesland" id="bundesland" {% if not request.form.get('werktage') %}disabled{% endif %}>
+                                    <option value="">(kein Bundesland)</option>
+                                    <option value="BW" {% if request.form.get('bundesland') == 'BW' %}selected{% endif %}>Baden-Württemberg</option>
+                                    <option value="BY" {% if request.form.get('bundesland') == 'BY' %}selected{% endif %}>Bayern</option>
+                                    <option value="BE" {% if request.form.get('bundesland') == 'BE' %}selected{% endif %}>Berlin</option>
+                                    <option value="BB" {% if request.form.get('bundesland') == 'BB' %}selected{% endif %}>Brandenburg</option>
+                                    <option value="HB" {% if request.form.get('bundesland') == 'HB' %}selected{% endif %}>Bremen</option>
+                                    <option value="HH" {% if request.form.get('bundesland') == 'HH' %}selected{% endif %}>Hamburg</option>
+                                    <option value="HE" {% if request.form.get('bundesland') == 'HE' %}selected{% endif %}>Hessen</option>
+                                    <option value="MV" {% if request.form.get('bundesland') == 'MV' %}selected{% endif %}>Mecklenburg-Vorpommern</option>
+                                    <option value="NI" {% if request.form.get('bundesland') == 'NI' %}selected{% endif %}>Niedersachsen</option>
+                                    <option value="NW" {% if request.form.get('bundesland') == 'NW' %}selected{% endif %}>Nordrhein-Westfalen</option>
+                                    <option value="RP" {% if request.form.get('bundesland') == 'RP' %}selected{% endif %}>Rheinland-Pfalz</option>
+                                    <option value="SL" {% if request.form.get('bundesland') == 'SL' %}selected{% endif %}>Saarland</option>
+                                    <option value="SN" {% if request.form.get('bundesland') == 'SN' %}selected{% endif %}>Sachsen</option>
+                                    <option value="ST" {% if request.form.get('bundesland') == 'ST' %}selected{% endif %}>Sachsen-Anhalt</option>
+                                    <option value="SH" {% if request.form.get('bundesland') == 'SH' %}selected{% endif %}>Schleswig-Holstein</option>
+                                    <option value="TH" {% if request.form.get('bundesland') == 'TH' %}selected{% endif %}>Thüringen</option>
+                                </select>
+                            </label>
                         </fieldset>
                         <button name="action" value="tage_werktage" type="submit">Berechnen</button>
                     </form>
                     {% if tage is not none %}
                         <div class="result" aria-live="polite">
+                            <button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
                             {% if request.form.get('werktage') %}
-                                Anzahl der Werktage zwischen <b>{{ format_date(request.form.get('start1', '')) }}</b> und <b>{{ format_date(request.form.get('end1', '')) }}</b>: {{ tage }}
+                                Anzahl der Werktage zwischen <b>{{ format_date(request.form.get('start1', '')) }}</b> und <b>{{ format_date(request.form.get('end1', '')) }}</b>{% if request.form.get('bundesland') %} (Feiertage {{ request.form.get('bundesland') }}){% endif %}: {{ tage }}
                             {% else %}
                                 Anzahl der Tage zwischen <b>{{ format_date(request.form.get('start1', '')) }}</b> und <b>{{ format_date(request.form.get('end1', '')) }}</b>: {{ tage }}
                             {% endif %}
+                            {% if wochenendtage_anzahl is not none or feiertage_anzahl is not none %}
+                                <br>
+                                <span style="font-size:0.98em; color:#1e293b;">
+                                    {% if wochenendtage_anzahl is not none %}
+                                        <b>{{ wochenendtage_anzahl }}</b> Wochenendtage
+                                    {% endif %}
+                                    {% if feiertage_anzahl is not none %}
+                                        {% if wochenendtage_anzahl is not none %} | {% endif %}
+                                        <b>{{ feiertage_anzahl }}</b> Feiertage (Mo-Fr{% if request.form.get('bundesland') %}, {{ request.form.get('bundesland') }}{% endif %})
+                                    {% endif %}
+                                </span>
+                            {% endif %}
                         </div>
                     {% endif %}
                 </div>
@@ -637,7 +793,10 @@ footer br + a {
                         <button name="action" value="wochentag" type="submit">Anzeigen</button>
                     </form>
                     {% if wochentag is not none %}
-                        <div class="result" aria-live="polite">Wochentag von <b>{{ format_date(request.form.get('datum3', '')) }}</b>: {{ wochentag }}</div>
+                        <div class="result" aria-live="polite">
+                            <button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
+                            Wochentag von <b>{{ format_date(request.form.get('datum3', '')) }}</b>: {{ wochentag }}
+                        </div>
                     {% endif %}
                 </div>
             </div>
@@ -660,7 +819,10 @@ footer br + a {
                         <button name="action" value="kw_berechnen" type="submit">Kalenderwoche berechnen</button>
                     </form>
                     {% if kw_berechnen is not none %}
-                        <div class="result" aria-live="polite">Kalenderwoche von <b>{{ format_date(request.form.get('datum6', '')) }}</b>: {{ kw_berechnen }}</div>
+                        <div class="result" aria-live="polite">
+                            <button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
+                            Kalenderwoche von <b>{{ format_date(request.form.get('datum6', '')) }}</b>: {{ kw_berechnen }}
+                        </div>
                     {% endif %}
                 </div>
             </div>
@@ -683,7 +845,10 @@ footer br + a {
                         <button name="action" value="kw_datum" type="submit">Start-/Enddatum berechnen</button>
                     </form>
                     {% if kw_datum is not none %}
-                        <div class="result" aria-live="polite">Start-/Enddatum der KW <b>{{ request.form.get('kw7', '') }}</b> im Jahr <b>{{ request.form.get('jahr7', '') }}</b>: {{ kw_datum }}</div>
+                        <div class="result" aria-live="polite">
+                            <button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
+                            Start-/Enddatum der KW <b>{{ request.form.get('kw7', '') }}</b> im Jahr <b>{{ request.form.get('jahr7', '') }}</b>: {{ kw_datum }}
+                        </div>
                     {% endif %}
                 </div>
             </div>
@@ -726,7 +891,10 @@ footer br + a {
                         <button name="action" value="plusminus" type="submit">Berechnen</button>
                     </form>
                     {% if plusminus_result is not none %}
-                        <div class="result" aria-live="polite">{{ plusminus_result }}</div>
+                        <div class="result" aria-live="polite">
+                            <button type="button" class="read-aloud-btn" onclick="readAloudFromElement(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromElement(this); }" aria-label="Ergebnis vorlesen" title="Ergebnis vorlesen" tabindex="0">🔊</button>
+                            {{ plusminus_result }}
+                        </div>
                     {% endif %}
                 </div>
             </div>
@@ -787,6 +955,21 @@ footer br + a {
         Dies ist ein werbe- und trackingfreier <a href="https://codeberg.org/elpatron/datecalc/src/branch/main/README.md" target="_blank" style="color:#2563eb; text-decoration:underline;">Open Source Datumsrechner</a><br>
         <a href="/api-docs" target="_blank" style="color:#2563eb; text-decoration:underline;">REST API Dokumentation (Swagger)</a><br>
         © 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#2563eb; text-decoration:underline;">M. Busche</a>
+        <div style="margin-top:0.5em; font-size:0.85em; color:#94a3b8;">v{{ app_version }}</div>
     </footer>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var werktageCheckbox = document.getElementById('werktage');
+    var bundeslandSelect = document.getElementById('bundesland');
+    if (werktageCheckbox && bundeslandSelect) {
+        function toggleBundesland() {
+            bundeslandSelect.disabled = !werktageCheckbox.checked;
+        }
+        werktageCheckbox.addEventListener('change', toggleBundesland);
+        // Initial setzen
+        toggleBundesland();
+    }
+});
+</script>
 </body>
 </html> 

templates/stats_dashboard.html

@@ -6,6 +6,13 @@
     <link rel="stylesheet" href="/static/style.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
+        body {
+            font-family: 'Segoe UI', Arial, sans-serif;
+            background: #f8fafc;
+            color: #1e293b;
+            margin: 0;
+            padding: 0;
+        }
         .dashboard-box { max-width: 600px; margin: 3em auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #cbd5e1; padding: 2em 2em 1.5em 2em; border: 1px solid #e5e7eb; }
         .dashboard-box h2 { text-align: center; margin-bottom: 1.2em; }
         .stats-row { display: flex; justify-content: space-between; margin-bottom: 2em; }
@@ -16,9 +23,9 @@
 </head>
 <body>
     <div class="dashboard-box">
-        <h2>Statistik-Dashboard</h2>
+        <h1>Statistik-Dashboard</h1>
         <div class="stats-row">
-            <div class="stats-label">Gesamt-Pageviews:</div>
+            <div class="stats-label">Gesamt-Pageviews (7 Tage):</div>
             <div class="stats-value">{{ pageviews }}</div>
         </div>
         <div class="chart-container">
@@ -32,12 +39,12 @@
             <canvas id="apiChart" width="400" height="220"></canvas>
         </div>
         {% endif %}
-        <pre style="background:#f3f4f6; color:#334155; padding:0.5em; border-radius:6px; font-size:0.9em;">API-Counts: {{ api_counts|tojson }}</pre>
         <a href="/" style="color:#2563eb;">Zurück zur App</a>
     </div>
     <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function() {
         // Impressions pro Tag
+        // eslint-disable-next-line
         const imprData = {{ impressions_per_day|tojson }};
         const imprLabels = Object.keys(imprData);
         const imprCounts = Object.values(imprData);
@@ -62,6 +69,7 @@
             }
         });
         // Funktionsaufrufe
+        // eslint-disable-next-line
         const funcCounts = {{ func_counts|tojson }};
         const labels = Object.keys(funcCounts);
         const data = Object.values(funcCounts);
@@ -83,6 +91,7 @@
             }
         });
         // API-Nutzung
+        // eslint-disable-next-line
         const apiCounts = {{ api_counts|tojson }};
         if (Object.keys(apiCounts).length > 0 && document.getElementById('apiChart')) {
             new Chart(document.getElementById('apiChart').getContext('2d'), {