Fix stats route UnboundLocalError and bump version to 1.4.14

- Remove unused imports (abort, g, ngettext) from app.py
- Remove unused variables (werktage, datumsrechnung, werktagsrechnung, wochen_monate)
- Update Flask from 3.0.0 to 3.1.1
- Update requests from 2.31.0 to 2.32.4
- Update pytest from 7.4.3 to 8.4.1
- Update numpy from 1.26.4 to 2.3.2 (safe migration based on NumPy 2.0 guide)
- Add pytest to requirements.txt (was missing)

README.md

@@ -60,6 +60,7 @@ Die Webanwendung erreicht hervorragende Performance-Werte in allen Kategorien (P
 - Datum plus/minus X Wochen/Monate
 - Kalenderwoche zu Datum
 - Start-/Enddatum einer Kalenderwoche eines Jahres
+- Integrierter Taschenrechner mit History und Sprachausgabe
 - Mehrsprachige Unterstützung (Deutsch/Englisch) mit automatischer Browser-Spracherkennung
 - Sprachausgabe für alle Ergebnisse (barrierefrei)
 - Statistik-Dashboard mit Passwortschutz unter `/stats`
@@ -69,6 +70,7 @@ Die Webanwendung erreicht hervorragende Performance-Werte in allen Kategorien (P
 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)
@@ -93,24 +95,29 @@ Die Feiertage werden automatisch für den gewählten Zeitraum abgerufen und bei
 Die Anwendung unterstützt Deutsch und Englisch mit folgenden Features:
 
 ### Automatische Spracherkennung:
+
 - *Browser-Sprache*: Automatische Erkennung der Browser-Einstellung
 - *URL-Parameter*: Sprachauswahl über `?lang=de` oder `?lang=en`
 - *localStorage*: Persistente Sprachauswahl im Browser
 - *Fallback*: Deutsch als Standardsprache
 
 ### *Datenschutzfreundliche Implementierung:*
+
 - *Keine Cookies*: Sprachauswahl ohne Cookies
 - *URL-Parameter*: Transparente Sprachauswahl in der URL
 - *localStorage*: Lokale Speicherung im Browser
 - *Teilbare URLs*: URLs mit Sprachauswahl können geteilt werden
 
 ### *Barrierefreiheit:*
+
 - *Screenreader*: Vollständige Unterstützung
 - *Tastatur-Navigation*: Vollständig bedienbar
 - *ARIA-Attribute*: Korrekte Beschriftungen
 - *Semantische HTML*: Korrekte Struktur
+- *Taschenrechner*: Vollständig barrierefrei mit Tastatur-Bedienung und Sprachausgabe
 
 ### *Technische Details:*
+
 - *Flask-Babel*: Professionelle i18n-Implementierung
 - *Gettext*: Standard für Übersetzungen
 - *Responsive Design*: Angepasst für alle Geräte
@@ -200,8 +207,11 @@ docker-compose up --build
 ## REST API
 
 Alle Datumsfunktionen stehen auch als REST-API zur Verfügung. Die API akzeptiert und liefert JSON.  
+
 **Basis-URL:** `http://localhost:5000/api/`
 
+**Swagger Dokumentation:** [https://date.elpatron.me/api-docs](https://date.elpatron.me/api-docs)
+
 **Hinweis:** Die Nutzung der REST API wird im Statistik-Dashboard ausgewertet und als Diagramm angezeigt.
 
 ### Endpunkte und Beispiele
@@ -334,6 +344,7 @@ curl -X POST http://localhost:5000/api/plusminus \
 ```
 
 **Hinweis:**  
+
 - `"einheit"`: `"tage"`, `"wochen"` oder `"monate"`
 - `"richtung"`: `"add"` (plus) oder `"sub"` (minus)
 - `"werktage"`: `true` für Werktage, sonst `false` (nur bei `"tage"` unterstützt)
@@ -395,6 +406,7 @@ Elpatrons Datumsrechner ist als PWA installierbar (z.B. auf Android/iOS-Homescre
 - Manifest und Service Worker sind integriert
 - App-Icon und Theme-Color für Homescreen
 - Installation über Browser-Menü ("Zum Startbildschirm hinzufügen")
+- Taschenrechner funktioniert vollständig clientseitig (offline verfügbar)
 
 ## Monitoring & Healthcheck
 
@@ -407,9 +419,7 @@ Die App bietet einen Monitoring-Endpunkt unter `/monitor`, der Statusinformation
 
 Beispiel-Aufruf:
 
-```
+`GET https://date.elpatron.me/monitor`
-GET https://date.elpatron.me/monitor
-```
 
 Antwort:
 
@@ -448,7 +458,7 @@ Finde mal eine Datumsrechner- Webapp, die nicht völlig Werbe- und Tracking vers
 
 ### Vibe Coding
 
-Dieses Projekt wurde zu nahezu 100% mit Unterstützung künsticher Intelligenz (*[Vibe Coding](https://de.wikipedia.org/wiki/Vibe_Coding)*) erstellt. Das Grundgerüst war nach ca. 45 Minuten fertig gestellt, insgesamt hat die Entwicklung des Projekts ca. 4 Stunden Zeit beansprucht.
+Dieses Projekt wurde zu nahezu 100% mit Unterstützung künsticher Intelligenz (*[Vibe Coding](https://de.wikipedia.org/wiki/Vibe_Coding)*) erstellt. Das Grundgerüst war nach ca. 45 Minuten fertig gestellt, insgesamt hat die Entwicklung des Projekts ca. 12 Stunden Zeit beansprucht.
 
 ### Statistik-Erfassung, Logging
 
@@ -465,6 +475,7 @@ Es werden keine IP-Adressen oder sonstigen persönlichen Daten gespeichert, ledi
 - *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).
+- *Taschenrechner:* Vollständig barrierefrei mit Tastatur-Bedienung, Sprachausgabe und History-Funktion.
 - *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.
 
@@ -472,23 +483,23 @@ Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Seh
 
 ### Code Statistik
 
-cloc|github.com/AlDanial/cloc v 2.06  T=0.08 s (301.6 files/s, 72354.1 lines/s)
+cloc|github.com/AlDanial/cloc v 2.06  T=0.23 s (109.5 files/s, 30735.0 lines/s)
 --- | ---
 
 Language|files|blank|comment|code
 :-------|-------:|-------:|-------:|-------:
-HTML|8|47|6|2086
+HTML|8|159|8|2805
-Python|2|59|68|690
+Python|2|66|74|739
-JavaScript|2|95|87|571
+JavaScript|2|95|88|580
-Markdown|3|176|0|492
+PO File|2|260|266|544
-PO File|2|234|240|492
+Markdown|3|184|0|498
 JSON|3|0|0|243
 CSS|1|186|3|188
 SVG|2|0|0|14
 Dockerfile|1|5|6|8
 DOS Batch|1|0|0|1
 --------|--------|--------|--------|--------
-SUM:|25|802|410|4785
+SUM:|25|955|445|5620
 
 ## Lizenz
 
@@ -497,4 +508,4 @@ Dieses Projekt steht unter der [MIT-Lizenz](LICENSE).
 ---
 (c) 2025 [Markus Busche](https://digitalcourage.social/@elpatron)
 
-**Version 1.4.0** - Mehrsprachige Unterstützung hinzugefügt
+**Version 1.4.12** - Integrierter Taschenrechner mit History und Sprachausgabe hinzugefügt

app.py

@@ -1,5 +1,5 @@
-from flask import Flask, render_template, request, redirect, url_for, session, abort, jsonify, g
+from flask import Flask, render_template, request, redirect, url_for, session, jsonify, make_response
-from flask_babel import Babel, gettext, ngettext, get_locale
+from flask_babel import Babel, gettext, get_locale
 from datetime import datetime, timedelta
 import numpy as np
 from dateutil.relativedelta import relativedelta
@@ -20,7 +20,23 @@ app.config['BABEL_TRANSLATION_DIRECTORIES'] = 'translations'
 babel = Babel()
 
 # Version der App
-APP_VERSION = "1.4.3"
+APP_VERSION = "1.4.14"
+
+def add_cache_headers(response):
+    """Fügt Cache-Control-Header hinzu, die den Back-Forward-Cache ermöglichen"""
+    # Cache-Control für statische Inhalte und API-Endpunkte
+    if request.path.startswith('/static/') or request.path.startswith('/api/'):
+        response.headers['Cache-Control'] = 'public, max-age=3600, s-maxage=3600'
+    else:
+        # Für HTML-Seiten: kurze Cache-Zeit, aber Back-Forward-Cache erlauben
+        response.headers['Cache-Control'] = 'public, max-age=60, s-maxage=300'
+    
+    # Wichtig: Keine Vary-Header für User-Agent oder andere dynamische Werte
+    # Dies verhindert den Back-Forward-Cache
+    if 'Vary' in response.headers:
+        del response.headers['Vary']
+    
+    return response
 
 # HTML-Template wird jetzt aus templates/index.html geladen
 
@@ -102,7 +118,7 @@ def index():
     with open(log_path, 'a', encoding='utf-8') as f:
         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
+    tage = wochentag = kw_berechnen = kw_datum = None
     feiertage_anzahl = wochenendtage_anzahl = None
     active_idx = 0
     plusminus_result = None
@@ -229,34 +245,72 @@ 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 = gettext('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
+    response = make_response(render_template('index.html', tage=tage, 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, get_locale=get_locale
-    )
+    ))
+    return add_cache_headers(response)
 
 
 def parse_log_stats(log_path):
     pageviews = 0
     func_counts = {}
+    func_counts_hourly = {}
     impressions_per_day = {}
+    impressions_per_hour = {}
     api_counts = {}
+    api_counts_hourly = {}
     if os.path.exists(log_path):
         with open(log_path, encoding='utf-8') as f:
             for line in f:
                 if 'PAGEVIEW' in line:
                     pageviews += 1
                     try:
-                        date = line[:10]
+                        # Parse timestamp (format: YYYY-MM-DDTHH:MM:SS)
+                        timestamp = line[:19]  # First 19 chars for YYYY-MM-DDTHH:MM:SS
+                        date = timestamp[:10]  # YYYY-MM-DD
+                        hour = timestamp[11:13]  # HH
+                        
                         if len(date) == 10 and date[4] == '-' and date[7] == '-':
                             impressions_per_day[date] = impressions_per_day.get(date, 0) + 1
+                            
+                        if len(hour) == 2 and hour.isdigit():
+                            hour_key = f"{date} {hour}:00"
+                            impressions_per_hour[hour_key] = impressions_per_hour.get(hour_key, 0) + 1
                     except Exception:
                         pass
                 elif 'FUNC:' in line:
                     func = line.split('FUNC:')[1].strip()
                     func_counts[func] = func_counts.get(func, 0) + 1
+                    
+                    # Stündliche Funktionsaufrufe
+                    try:
+                        timestamp = line[:19]
+                        date = timestamp[:10]
+                        hour = timestamp[11:13]
+                        if len(hour) == 2 and hour.isdigit():
+                            hour_key = f"{date} {hour}:00"
+                            if hour_key not in func_counts_hourly:
+                                func_counts_hourly[hour_key] = {}
+                            func_counts_hourly[hour_key][func] = func_counts_hourly[hour_key].get(func, 0) + 1
+                    except Exception:
+                        pass
                 elif 'FUNC_API:' in line:
                     api = line.split('FUNC_API:')[1].strip()
                     api_counts[api] = api_counts.get(api, 0) + 1
-    return pageviews, func_counts, impressions_per_day, api_counts
+                    
+                    # Stündliche API-Aufrufe
+                    try:
+                        timestamp = line[:19]
+                        date = timestamp[:10]
+                        hour = timestamp[11:13]
+                        if len(hour) == 2 and hour.isdigit():
+                            hour_key = f"{date} {hour}:00"
+                            if hour_key not in api_counts_hourly:
+                                api_counts_hourly[hour_key] = {}
+                            api_counts_hourly[hour_key][api] = api_counts_hourly[hour_key].get(api, 0) + 1
+                    except Exception:
+                        pass
+    return pageviews, func_counts, func_counts_hourly, impressions_per_day, impressions_per_hour, api_counts, api_counts_hourly
 
 @app.route('/stats', methods=['GET', 'POST'])
 def stats():
@@ -267,11 +321,17 @@ def stats():
                 session['stats_auth'] = True
                 return redirect(url_for('stats'))
             else:
-                return render_template('stats_login.html', error='Falsches Passwort!')
+                response = make_response(render_template('stats_login.html', error='Falsches Passwort!'))
-        return render_template('stats_login.html', error=None)
+                return add_cache_headers(response)
+        else:
+            response = make_response(render_template('stats_login.html', error=None))
+            return add_cache_headers(response)
+    
+    # Wenn authentifiziert, zeige Dashboard
     log_path = os.path.join('log', 'pageviews.log')
-    pageviews, func_counts, impressions_per_day, api_counts = parse_log_stats(log_path)
+    pageviews, func_counts, func_counts_hourly, impressions_per_day, impressions_per_hour, api_counts, api_counts_hourly = parse_log_stats(log_path)
-    return render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, impressions_per_day=impressions_per_day, api_counts=api_counts)
+    response = make_response(render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, func_counts_hourly=func_counts_hourly, impressions_per_day=impressions_per_day, impressions_per_hour=impressions_per_hour, api_counts=api_counts, api_counts_hourly=api_counts_hourly))
+    return add_cache_headers(response)
 
 # --- REST API ---
 def log_api_usage(api_name):
@@ -305,7 +365,8 @@ def api_tage_werktage():
             tage = int(np.busday_count(d1.date(), (d2 + timedelta(days=1)).date(), holidays=holidays))
         else:
             tage = abs((d2 - d1).days)
-        return jsonify({'result': tage})
+        response = jsonify({'result': tage})
+        return add_cache_headers(response)
     except Exception as e:
         return jsonify({'error': 'Ungültige Eingabe', 'details': str(e)}), 400
 
@@ -318,7 +379,8 @@ def api_wochentag():
         d = datetime.strptime(datum, '%Y-%m-%d')
         wochentage = get_wochentage()
         wochentag = wochentage[d.weekday()]
-        return jsonify({'result': wochentag})
+        response = jsonify({'result': wochentag})
+        return add_cache_headers(response)
     except Exception as e:
         return jsonify({'error': 'Ungültige Eingabe', 'details': str(e)}), 400
 
@@ -335,7 +397,8 @@ def api_kw_berechnen():
             kw_berechnen = f"Week {kw} ({d.year})"
         else:
             kw_berechnen = f"KW {kw} ({d.year})"
-        return jsonify({'result': kw_berechnen, 'kw': kw, 'jahr': d.year})
+        response = jsonify({'result': kw_berechnen, 'kw': kw, 'jahr': d.year})
+        return add_cache_headers(response)
     except Exception as e:
         return jsonify({'error': 'Ungültige Eingabe', 'details': str(e)}), 400
 
@@ -355,7 +418,8 @@ def api_kw_datum():
             kw_datum = f"{start.strftime('%m/%d/%Y')} to {end.strftime('%m/%d/%Y')}"
         else:
             kw_datum = f"{start.strftime('%d.%m.%Y')} bis {end.strftime('%d.%m.%Y')}"
-        return jsonify({'result': kw_datum, 'start': start.strftime('%Y-%m-%d'), 'end': end.strftime('%Y-%m-%d')})
+        response = jsonify({'result': kw_datum, 'start': start.strftime('%Y-%m-%d'), 'end': end.strftime('%Y-%m-%d')})
+        return add_cache_headers(response)
     except Exception as e:
         return jsonify({'error': 'Ungültige Eingabe', 'details': str(e)}), 400
 
@@ -378,34 +442,26 @@ def api_plusminus():
             if is_werktage:
                 result = np.busday_offset(d.date(), anzahl_int, roll='forward')
                 result_dt = datetime.strptime(str(result), '%Y-%m-%d')
-                if locale == 'en':
+                response = jsonify({'result': result_dt.strftime('%Y-%m-%d')})
-                    plusminus_result = f"Date {d.strftime('%m/%d/%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} workdays: {result_dt.strftime('%m/%d/%Y')}"
+                return add_cache_headers(response)
-                else:
-                    plusminus_result = f"Datum {d.strftime('%d.%m.%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} Werktage: {result_dt.strftime('%d.%m.%Y')}"
             else:
                 result = d + timedelta(days=anzahl_int)
-                if locale == 'en':
+                response = jsonify({'result': result.strftime('%Y-%m-%d')})
-                    plusminus_result = f"Date {d.strftime('%m/%d/%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} days: {result.strftime('%m/%d/%Y')}"
+                return add_cache_headers(response)
-                else:
-                    plusminus_result = f"Datum {d.strftime('%d.%m.%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} Tage: {result.strftime('%d.%m.%Y')}"
         elif einheit == 'wochen':
             if is_werktage:
                 return jsonify({'error': 'Nicht unterstützt: Werktage + Wochen.'}), 400
             else:
                 result = d + timedelta(weeks=anzahl_int)
-                if locale == 'en':
+                response = jsonify({'result': result.strftime('%Y-%m-%d')})
-                    plusminus_result = f"Date {d.strftime('%m/%d/%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} weeks: {result.strftime('%m/%d/%Y')}"
+                return add_cache_headers(response)
-                else:
-                    plusminus_result = f"Datum {d.strftime('%d.%m.%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} Wochen: {result.strftime('%d.%m.%Y')}"
         elif einheit == 'monate':
             if is_werktage:
                 return jsonify({'error': 'Nicht unterstützt: Werktage + Monate.'}), 400
             else:
                 result = d + relativedelta(months=anzahl_int)
-                if locale == 'en':
+                response = jsonify({'result': result.strftime('%Y-%m-%d')})
-                    plusminus_result = f"Date {d.strftime('%m/%d/%Y')} {'plus' if anzahl_int>=0 else 'minus'} {abs(anzahl_int)} months: {result.strftime('%m/%d/%Y')}"
+                return add_cache_headers(response)
-                else:
-                    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')}"
         else:
             return jsonify({'error': 'Ungültige Einheit'}), 400
     except Exception as e:
@@ -414,8 +470,14 @@ def api_plusminus():
 @app.route('/api/stats', methods=['GET'])
 def api_stats():
     log_path = os.path.join('log', 'pageviews.log')
-    pageviews, func_counts, impressions_per_day, api_counts = parse_log_stats(log_path)
+    pageviews, func_counts, func_counts_hourly, impressions_per_day, impressions_per_hour, api_counts, api_counts_hourly = parse_log_stats(log_path)
-    return render_template('stats_dashboard.html', pageviews=pageviews, func_counts=func_counts, impressions_per_day=impressions_per_day, api_counts=api_counts)
+    response = jsonify({
+        "pageviews": pageviews,
+        "func_counts": func_counts,
+        "impressions_per_day": impressions_per_day,
+        "api_counts": api_counts
+    })
+    return add_cache_headers(response)
 
 @app.route('/api/monitor', methods=['GET'])
 def api_monitor():
@@ -427,17 +489,19 @@ def api_monitor():
                 if 'PAGEVIEW' in line:
                     pageviews += 1
     uptime = int(time.time() - app_start_time)
-    return jsonify({
+    response = jsonify({
         "status": "ok",
         "message": "App running",
         "time": datetime.now().isoformat(),
         "uptime_seconds": uptime,
         "pageviews_last_7_days": pageviews
     })
+    return add_cache_headers(response)
 
 @app.route('/api-docs')
 def api_docs():
-    return render_template('swagger.html')
+    response = make_response(render_template('swagger.html'))
+    return add_cache_headers(response)
 
 
 if __name__ == '__main__':

requirements.txt

@@ -1,5 +1,6 @@
-Flask==3.0.0
+Flask==3.1.1
-numpy==1.26.4
+numpy==2.3.2
 python-dateutil==2.9.0.post0
-requests==2.31.0
+requests==2.32.4
 Flask-Babel==4.0.0
+pytest==8.4.1 

static/service-worker.js

@@ -1,15 +1,25 @@
 const CACHE_NAME = 'datumsrechner-cache-v1';
 const urlsToCache = [
   '/',
-  '/static/style.css',
   '/static/favicon.ico',
   '/static/favicon.png',
+  '/static/favicon.svg',
   '/static/logo.svg',
+  '/static/manifest.json',
 ];
 self.addEventListener('install', event => {
   event.waitUntil(
     caches.open(CACHE_NAME)
-      .then(cache => cache.addAll(urlsToCache))
+      .then(cache => {
+        // Füge nur existierende Dateien zum Cache hinzu
+        return Promise.allSettled(
+          urlsToCache.map(url => 
+            cache.add(url).catch(err => {
+              console.log('Failed to cache:', url, err);
+            })
+          )
+        );
+      })
   );
 });
 self.addEventListener('fetch', event => {

static/swagger.json

@@ -1,4 +1,4 @@
-.v{
+{
   "openapi": "3.0.3",
   "info": {
     "title": "Elpatrons Datumsrechner API",

templates/index.html

@@ -6,12 +6,12 @@
     {%- endif -%}
 {% endmacro %}
 <!doctype html>
-<html lang="de">
+<html lang="{{ get_locale() }}">
 <head>
     <meta charset="utf-8">
     <title>{{ _('Elpatrons Datumsrechner – Open Source Kalender- und Datumsberechnungen') }}</title>
     <meta name="description" content="{{ _('Elpatrons Datumsrechner: Open Source Web-App für Kalender- und Datumsberechnungen. Tage, Werktage, Wochen, Monate, Kalenderwochen, Wochentage und mehr berechnen – barrierefrei, werbefrei, trackingfrei, kostenlos.') }}">
-    <meta name="keywords" content="{{ _('Datum, Kalender, Datumsrechner, Werktage, Tage zählen, Kalenderwoche, Wochentag, Open Source, Python, Flask, barrierefreiheit, barrierefrei, kostenlos, werbefrei, trackingfrei, cookiefrei') }}">
+    <meta name="keywords" content="{{ _('Datum, Kalender, Datumsrechner, Werktage, Tage zählen, Kalenderwoche, Wochentag, Open Source, barrierefreiheit, barrierefrei, kostenlos, werbefrei, trackingfrei, cookiefrei, progressive web app, pwa') }}">
     <meta property="og:title" content="{{ _('Elpatrons Datumsrechner – Open Source Kalender- und Datumsberechnungen') }}">
     <meta property="og:description" content="{{ _('Open Source Web-App für Kalender- und Datumsberechnungen. Werbefrei, trackingfrei, kostenlos.') }}">
     <meta property="og:type" content="website">
@@ -72,7 +72,7 @@ body {
 }
 .help-button-container {
     position: absolute;
-    top: 1.5em;
+    top: 1em;
     right: 2em;
     z-index: 10;
 }
@@ -97,6 +97,186 @@ body {
     background: rgba(37, 99, 235, 0.25);
     border-color: var(--primary);
 }
+.help-button:focus {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+}
+
+/* Calculator Styles */
+.calculator-btn {
+    background: var(--primary);
+    color: white;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-weight: 500;
+    width: 100%;
+    max-width: 480px;
+    min-height: 44px;
+    min-width: 44px;
+    padding: 1em 1.2em;
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+.calculator-btn:hover {
+    background: var(--primary-dark);
+}
+
+.calculator-btn:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px #1e293b;
+}
+
+.calculator-modal {
+    max-width: 400px;
+    width: fit-content;
+}
+
+.calculator {
+    background: #f8fafc;
+    border-radius: 12px;
+    padding: 0.8em;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    width: fit-content;
+    margin: 0 auto;
+}
+
+.calculator-display {
+    margin-bottom: 0.8em;
+}
+
+.calculator-history {
+    margin-bottom: 0.8em;
+    min-height: 40px;
+    border: 2px solid #d1d5db;
+    border-radius: 6px;
+    background: #f9fafb;
+    padding: 0.3em;
+    font-family: 'Courier New', monospace;
+    font-size: 0.8em;
+    color: #6b7280;
+    overflow-y: auto;
+    max-height: 80px;
+}
+
+.history-item {
+    padding: 0.3em 0;
+    border-bottom: 1px solid #e5e7eb;
+    text-align: right;
+    font-weight: 500;
+}
+
+.history-item:last-child {
+    border-bottom: none;
+    color: #374151;
+    font-weight: 600;
+}
+
+.calculator-display input {
+    width: 100%;
+    padding: 0.8em;
+    padding-right: 3.5em;
+    font-size: 1.3em;
+    text-align: right;
+    border: 3px solid #374151;
+    border-radius: 8px;
+    background: #ffffff;
+    color: #111827;
+    font-family: 'Courier New', monospace;
+    font-weight: 600;
+    min-height: 48px;
+}
+
+.calculator-display input:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px #1e293b;
+    border-color: #1f2937;
+}
+
+.calculator-buttons {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.3em;
+    margin: 0 auto;
+}
+
+.calc-btn {
+    padding: 0.7em;
+    font-size: 1.1em !important;
+    font-family: 'Segoe UI', Arial, sans-serif !important;
+    border: 2px solid #374151;
+    background: #f9fafb;
+    color: #111827;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-weight: 600 !important;
+    min-width: 44px;
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+}
+
+.calc-btn:hover {
+    background: #e5e7eb;
+    border-color: #1f2937;
+}
+
+.calc-btn:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px #1e293b;
+    background: #e5e7eb;
+    border-color: #1f2937;
+}
+
+.calc-clear {
+    background: #ef4444;
+    color: white;
+}
+
+.calc-clear:hover {
+    background: #dc2626;
+}
+
+.calc-delete {
+    background: #f59e0b;
+    color: white;
+}
+
+.calc-delete:hover {
+    background: #d97706;
+}
+
+.calc-operator {
+    background: var(--primary);
+    color: white;
+}
+
+.calc-operator:hover {
+    background: var(--primary-dark);
+}
+
+.calc-equals {
+    background: #10b981;
+    color: white;
+    grid-row: span 2;
+}
+
+.calc-equals:hover {
+    background: #059669;
+}
+
+.calc-zero {
+    grid-column: span 2;
+}
+
 .help-button:focus {
     outline: 3px solid #facc15;
     outline-offset: 2px;
@@ -154,7 +334,7 @@ body {
     padding: 2em;
     max-width: 90%;
     width: 90%;
-    max-height: 90vh;
+    max-height: 95vh;
     overflow-y: auto;
     overflow-x: hidden;
     position: relative;
@@ -165,17 +345,17 @@ body {
     box-sizing: border-box;
 }
 .modal-close {
-    position: absolute;
+    position: fixed;
     top: 1em;
     right: 1em;
-    background: none;
+    background: rgba(255, 255, 255, 0.95);
-    border: none;
+    border: 2px solid var(--border);
     font-size: 1.5em;
     cursor: pointer;
     color: var(--text);
     padding: 0.5em;
     border-radius: 50%;
-    transition: background 0.2s;
+    transition: all 0.2s;
     width: 2.5em;
     height: 2.5em;
     display: flex;
@@ -183,6 +363,8 @@ body {
     justify-content: center;
     min-width: 44px;
     min-height: 44px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    z-index: 1001;
 }
 .modal-close:hover {
     background: var(--border);
@@ -473,9 +655,11 @@ button:focus, .accordion-header:focus {
         max-width: none;
         overflow: hidden;
     }
+    .header-section {
+        margin-top: 4.5em; /* Mehr Abstand für Sprachauswahl und Hilfe-Button */
+    }
     h1 {
         font-size: 1.3em;
-        margin-top: 3.5em; /* Abstand für Sprachauswahl */
     }
     .help-button-container {
         top: 1em;
@@ -504,7 +688,7 @@ button:focus, .accordion-header:focus {
         padding: 0.4em 0.6em;
     }
     .modal-content {
-        padding: 1.5em;
+        padding: 1.2em;
         margin: 1em;
         width: calc(100% - 2em);
         max-width: none;
@@ -514,12 +698,64 @@ button:focus, .accordion-header:focus {
         overflow-y: auto;
         overflow-x: hidden;
     }
+    
+    .calculator-modal {
+        max-width: 95%;
+        width: 95%;
+    }
+    
+    .calculator {
+        width: 100%;
+        padding: 0.8em;
+    }
+    
+    .calculator-buttons {
+        width: 100%;
+        gap: 0.3em;
+    }
+    
+    .calc-btn {
+        padding: 0.6em;
+        font-size: 1.1em;
+        padding: 1em 1.2em;
+        font-weight: 600;
+        /* font-family: 'Segoe UI', Arial, sans-serif; */
+        min-width: 44px;
+        min-height: 44px;
+    }
+    
+    .calculator-display input {
+        padding: 0.6em;
+        padding-right: 3em;
+        font-size: 1.2em;
+        min-height: 44px;
+    }
+    
+    .modal-close {
+        top: 0.8em;
+        right: 0.8em;
+        font-size: 1.3em;
+        width: 2.2em;
+        height: 2.2em;
+        min-width: 48px;
+        min-height: 48px;
+        background: rgba(255, 255, 255, 0.98);
+        border: 2px solid var(--border);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    }
+    
+    .modal-content h1 {
+        margin-top: 0;
+        margin-bottom: 1em;
+        font-size: 1.2em;
+        line-height: 1.3;
+    }
 }
 
 /* Sprachauswahl */
 .language-selector {
     position: absolute;
-    top: 1.5em;
+    top: 1em;
     left: 2em;
     z-index: 10;
 }
@@ -653,13 +889,222 @@ footer br + a {
             document.querySelector('.help-button').focus();
         }
         
+        // Taschenrechner-Funktionen
+        let calculatorDisplay = '0';
+        let calculatorPreviousValue = null;
+        let calculatorCurrentOperator = null;
+        let calculatorWaitingForOperand = false;
+        let calculatorHistory = [];
+        
+        function showCalculator() {
+            const modal = document.getElementById('calculatorModal');
+            const input = document.getElementById('calculatorInput');
+            
+            if (modal && input) {
+                modal.style.display = 'flex';
+                modal.classList.add('active');
+                input.focus();
+            }
+        }
+        
+        function hideCalculator() {
+            const modal = document.getElementById('calculatorModal');
+            modal.style.display = 'none';
+            modal.classList.remove('active');
+        }
+        
+        function calculatorClear() {
+            calculatorDisplay = '0';
+            calculatorPreviousValue = null;
+            calculatorCurrentOperator = null;
+            calculatorWaitingForOperand = false;
+            calculatorHistory = [];
+            updateCalculatorDisplay();
+        }
+        
+        function calculatorDelete() {
+            if (calculatorDisplay.length === 1) {
+                calculatorDisplay = '0';
+            } else {
+                calculatorDisplay = calculatorDisplay.slice(0, -1);
+            }
+            updateCalculatorDisplay();
+        }
+        
+        function calculatorNumber(num) {
+            if (calculatorWaitingForOperand) {
+                calculatorDisplay = num;
+                calculatorWaitingForOperand = false;
+            } else {
+                calculatorDisplay = calculatorDisplay === '0' ? num : calculatorDisplay + num;
+            }
+            updateCalculatorDisplay();
+        }
+        
+        function calculatorDecimal() {
+            if (calculatorWaitingForOperand) {
+                calculatorDisplay = '0.';
+                calculatorWaitingForOperand = false;
+            } else if (calculatorDisplay.indexOf('.') === -1) {
+                calculatorDisplay += '.';
+            }
+            updateCalculatorDisplay();
+        }
+        
+        function calculatorOperator(op) {
+            const inputValue = parseFloat(calculatorDisplay);
+            
+            if (calculatorPreviousValue === null) {
+                calculatorPreviousValue = inputValue;
+            } else if (calculatorCurrentOperator) {
+                const result = performCalculation(calculatorPreviousValue, inputValue, calculatorCurrentOperator);
+                calculatorDisplay = String(result);
+                calculatorPreviousValue = result;
+            }
+            
+            calculatorWaitingForOperand = true;
+            calculatorCurrentOperator = op;
+            updateCalculatorDisplay();
+        }
+        
+        function calculatorEquals() {
+            const inputValue = parseFloat(calculatorDisplay);
+            
+            if (calculatorPreviousValue === null || calculatorCurrentOperator === null) {
+                return;
+            }
+            
+            const result = performCalculation(calculatorPreviousValue, inputValue, calculatorCurrentOperator);
+            
+            // Füge zur History hinzu
+            const historyEntry = calculatorPreviousValue + ' ' + getOperatorSymbol(calculatorCurrentOperator) + ' ' + inputValue + ' = ' + result;
+            addToHistory(historyEntry);
+            
+            calculatorDisplay = String(result);
+            calculatorPreviousValue = null;
+            calculatorCurrentOperator = null;
+            calculatorWaitingForOperand = true;
+            updateCalculatorDisplay();
+        }
+        
+        function performCalculation(firstValue, secondValue, operator) {
+            switch (operator) {
+                case '+':
+                    return firstValue + secondValue;
+                case '-':
+                    return firstValue - secondValue;
+                case '*':
+                    return firstValue * secondValue;
+                case '/':
+                    return secondValue !== 0 ? firstValue / secondValue : 'Error';
+                default:
+                    return secondValue;
+            }
+        }
+        
+        function updateCalculatorDisplay() {
+            const display = document.getElementById('calculatorInput');
+            if (calculatorDisplay === 'Error') {
+                display.value = 'Error';
+                display.setAttribute('aria-label', '{{ _("Fehler") }}');
+                calculatorDisplay = '0';
+                calculatorPreviousValue = null;
+                calculatorCurrentOperator = null;
+                calculatorWaitingForOperand = false;
+            } else {
+                display.value = calculatorDisplay;
+                display.setAttribute('aria-label', '{{ _("Taschenrechner Anzeige") }}: ' + calculatorDisplay);
+            }
+            updateHistoryDisplay();
+        }
+        
+        function readAloudFromCalculator(button) {
+            // Prüfe, ob bereits eine Wiedergabe läuft
+            if (currentSpeech && speechSynthesis.speaking) {
+                // Stoppe die aktuelle Wiedergabe
+                speechSynthesis.cancel();
+                currentSpeech = null;
+                button.classList.remove('playing');
+                button.textContent = '🔊';
+                return;
+            }
+            
+            // Finde das Eingabefeld
+            const inputElement = document.getElementById('calculatorInput');
+            if (!inputElement) return;
+            
+            let textToRead = inputElement.value;
+            
+            // Übersetze Zahlen und Operatoren für bessere Sprachausgabe
+            if (textToRead !== 'Error') {
+                // Prüfe, ob es sich um ein Ergebnis einer Berechnung handelt
+                if (calculatorHistory.length > 0) {
+                    // Verwende die letzte Berechnung aus der History
+                    const lastCalculation = calculatorHistory[0];
+                    textToRead = lastCalculation;
+                    
+                    // Übersetze mathematische Symbole für bessere Sprachausgabe
+                    textToRead = textToRead.replace(/×/g, ' mal ');
+                    textToRead = textToRead.replace(/÷/g, ' geteilt durch ');
+                    textToRead = textToRead.replace(/−/g, ' minus ');
+                    textToRead = textToRead.replace(/\+/g, ' plus ');
+                    textToRead = textToRead.replace(/\./g, ' Komma ');
+                    textToRead = textToRead.replace(/=/g, ' ist gleich ');
+                } else {
+                    // Fallback für einzelne Zahlen
+                    textToRead = textToRead.replace(/\./g, ' Komma ');
+                    if (textToRead === '0') {
+                        textToRead = '{{ _("Null") }}';
+                    } else {
+                        textToRead = '{{ _("Taschenrechner Anzeige") }}: ' + textToRead;
+                    }
+                }
+            } else {
+                textToRead = '{{ _("Fehler") }}';
+            }
+            
+            readAloud(textToRead, button);
+        }
+        
+        function addToHistory(entry) {
+            calculatorHistory.unshift(entry);
+            if (calculatorHistory.length > 3) {
+                calculatorHistory.pop();
+            }
+        }
+        
+        function updateHistoryDisplay() {
+            const historyContainer = document.getElementById('calculatorHistory');
+            if (historyContainer) {
+                historyContainer.innerHTML = '';
+                calculatorHistory.forEach((entry, index) => {
+                    const historyItem = document.createElement('div');
+                    historyItem.className = 'history-item';
+                    historyItem.textContent = entry;
+                    historyItem.setAttribute('aria-label', '{{ _("Berechnung") }} ' + (index + 1) + ': ' + entry);
+                    historyContainer.appendChild(historyItem);
+                });
+            }
+        }
+        
+        function getOperatorSymbol(operator) {
+            switch(operator) {
+                case '+': return '+';
+                case '-': return '−';
+                case '*': return '×';
+                case '/': return '÷';
+                default: return operator;
+            }
+        }
+        
         // Sprachausgabe-Funktionalität
         let currentSpeech = null;
         
         function readAloud(text, button) {
             // Stoppe vorherige Wiedergabe
             if (currentSpeech) {
-                currentSpeech.cancel();
+                speechSynthesis.cancel();
+                currentSpeech = null;
             }
             
             // Entferne "playing" Klasse von allen Buttons
@@ -668,12 +1113,92 @@ footer br + a {
                 btn.textContent = '🔊';
             });
             
+            // Bestimme die aktuelle Sprache
+            let currentLang = 'de-DE'; // Standard
+            
+            // Methode 1: Prüfe URL-Parameter
+            const urlParams = new URLSearchParams(window.location.search);
+            const langParam = urlParams.get('lang');
+            
+            // Methode 2: Prüfe localStorage
+            const savedLang = localStorage.getItem('preferred_language');
+            
+            // Methode 3: Prüfe das HTML lang-Attribut
+            const htmlLang = document.documentElement.lang;
+            
+            // Debug-Ausgabe
+            console.log('URL lang param:', langParam);
+            console.log('Saved lang:', savedLang);
+            console.log('HTML lang:', htmlLang);
+            
+            // Verbesserte Spracherkennung - prüfe alle Quellen
+            if (langParam === 'en' || savedLang === 'en' || htmlLang === 'en') {
+                // Prüfe, ob eine britische Stimme verfügbar ist
+                const voices = speechSynthesis.getVoices();
+                const hasBritishVoice = voices.some(voice => voice.lang === 'en-GB');
+                const hasAmericanVoice = voices.some(voice => voice.lang === 'en-US');
+                
+                if (hasBritishVoice) {
+                    currentLang = 'en-GB';
+                    console.log('Setting language to British English:', currentLang);
+                } else if (hasAmericanVoice) {
+                    currentLang = 'en-US';
+                    console.log('Setting language to American English:', currentLang);
+                } else {
+                    // Fallback auf en-US, auch wenn keine Stimme verfügbar ist
+                    currentLang = 'en-US';
+                    console.log('Setting language to English (no specific voice available):', currentLang);
+                }
+            } else {
+                console.log('Setting language to German:', currentLang);
+            }
+            
             // Erstelle neue Sprachausgabe
             currentSpeech = new SpeechSynthesisUtterance(text);
-            currentSpeech.lang = 'de-DE';
+            currentSpeech.lang = currentLang;
             currentSpeech.rate = 0.9;
             currentSpeech.pitch = 1;
             
+            // Versuche eine passende Stimme zu finden
+            const voices = speechSynthesis.getVoices();
+            console.log('Available voices:', voices.map(v => `${v.name} (${v.lang})`));
+            
+            // Suche nach einer Stimme in der gewünschten Sprache
+            let preferredVoice = voices.find(voice => 
+                voice.lang === currentLang
+            );
+            
+            // Falls keine exakte Übereinstimmung, suche nach ähnlicher Sprache
+            if (!preferredVoice) {
+                preferredVoice = voices.find(voice => 
+                    voice.lang.startsWith(currentLang.split('-')[0])
+                );
+            }
+            
+            // Falls immer noch keine Stimme gefunden, suche nach englischen Stimmen für Englisch
+            if (!preferredVoice && (currentLang === 'en-US' || currentLang === 'en-GB')) {
+                // Bevorzuge britische Stimmen für en-GB
+                if (currentLang === 'en-GB') {
+                    preferredVoice = voices.find(voice => 
+                        voice.lang === 'en-GB' || voice.name.toLowerCase().includes('british')
+                    );
+                }
+                
+                // Falls keine britische Stimme, suche nach amerikanischen oder allgemeinen englischen Stimmen
+                if (!preferredVoice) {
+                    preferredVoice = voices.find(voice => 
+                        voice.lang.includes('en') || voice.name.toLowerCase().includes('english')
+                    );
+                }
+            }
+            
+            if (preferredVoice) {
+                currentSpeech.voice = preferredVoice;
+                console.log('Using voice:', preferredVoice.name, 'for language:', currentLang);
+            } else {
+                console.log('No specific voice found for language:', currentLang, '- using default');
+            }
+            
             // Button-Status aktualisieren
             button.classList.add('playing');
             button.textContent = '⏹️';
@@ -696,6 +1221,16 @@ footer br + a {
         }
         
         function readAloudFromElement(button) {
+            // Prüfe, ob bereits eine Wiedergabe läuft
+            if (currentSpeech && speechSynthesis.speaking) {
+                // Stoppe die aktuelle Wiedergabe
+                speechSynthesis.cancel();
+                currentSpeech = null;
+                button.classList.remove('playing');
+                button.textContent = '🔊';
+                return;
+            }
+            
             // Finde das Ergebnis-Element (das div mit class="result")
             const resultElement = button.closest('.result');
             if (!resultElement) return;
@@ -712,7 +1247,7 @@ footer br + a {
         
         function stopReading() {
             if (currentSpeech) {
-                currentSpeech.cancel();
+                speechSynthesis.cancel();
                 currentSpeech = null;
             }
             document.querySelectorAll('.read-aloud-btn').forEach(btn => {
@@ -722,6 +1257,13 @@ footer br + a {
         }
         
         document.addEventListener('DOMContentLoaded', function() {
+            // Stelle sicher, dass die Stimmen geladen sind
+            if (speechSynthesis.onvoiceschanged !== undefined) {
+                speechSynthesis.onvoiceschanged = function() {
+                    console.log('Voices loaded:', speechSynthesis.getVoices().length);
+                };
+            }
+            
             // Prüfe localStorage für gespeicherte Sprachauswahl
             const savedLanguage = localStorage.getItem('preferred_language');
             if (savedLanguage && !window.location.search.includes('lang=')) {
@@ -767,6 +1309,7 @@ footer br + a {
             document.addEventListener('keydown', function(e) {
                 if (e.key === 'Escape') {
                     hideHelp();
+                    hideCalculator();
                     stopReading();
                 }
             });
@@ -777,6 +1320,101 @@ footer br + a {
                     hideHelp();
                 }
             });
+            
+            // Klick außerhalb des Taschenrechner-Modals zum Schließen
+            document.getElementById('calculatorModal').addEventListener('click', function(e) {
+                if (e.target === this) {
+                    hideCalculator();
+                }
+            });
+            
+            // Tastatursteuerung für Taschenrechner-Button
+            document.getElementById('calculatorBtn').addEventListener('keydown', function(event) {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    showCalculator();
+                }
+            });
+            
+            // Tastatursteuerung für Taschenrechner
+            document.addEventListener('keydown', function(event) {
+                const modal = document.getElementById('calculatorModal');
+                if (modal.style.display === 'flex') {
+                    switch(event.key) {
+                        case '0': case '1': case '2': case '3': case '4':
+                        case '5': case '6': case '7': case '8': case '9':
+                            calculatorNumber(event.key);
+                            event.preventDefault();
+                            break;
+                        case '.':
+                        case ',':
+                            calculatorDecimal();
+                            event.preventDefault();
+                            break;
+                        case '+':
+                        case 'p': case 'P': // Plus
+                            calculatorOperator('+');
+                            event.preventDefault();
+                            break;
+                        case '-':
+                        case 'm': case 'M': // Minus
+                            calculatorOperator('-');
+                            event.preventDefault();
+                            break;
+                        case '*':
+                        case 'x': case 'X': // Multiplikation
+                        case '×':
+                            calculatorOperator('*');
+                            event.preventDefault();
+                            break;
+                        case '/':
+                        case 'd': case 'D': // Division
+                        case '÷':
+                            calculatorOperator('/');
+                            event.preventDefault();
+                            break;
+                        case '=':
+                        case 'Enter':
+                        case ' ': // Leertaste für Gleich
+                            calculatorEquals();
+                            event.preventDefault();
+                            break;
+                        case 'Escape':
+                            hideCalculator();
+                            event.preventDefault();
+                            break;
+                        case 'Backspace':
+                        case 'Delete':
+                            calculatorDelete();
+                            event.preventDefault();
+                            break;
+                        case 'c': case 'C':
+                        case 'Escape':
+                            calculatorClear();
+                            event.preventDefault();
+                            break;
+                        case 'Tab':
+                            // Erlaube normale Tab-Navigation
+                            break;
+                        default:
+                            // Verhindere andere Tastatureingaben
+                            event.preventDefault();
+                            break;
+                    }
+                }
+            });
+            
+            // Werktage-Checkbox Event-Handler
+            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();
+            }
         });
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', function() {
@@ -797,7 +1435,7 @@ footer br + a {
                 <option value="en" {% if get_locale() == 'en' %}selected{% endif %}>{{ _('English') }}</option>
             </select>
         </div>
-        <div style="text-align:center; margin-bottom:1.2em;">
+        <div class="header-section" style="text-align:center; margin-bottom:1.2em;">
             <div style="font-size:1.1em; font-style:italic; color:#475569;">{{ _('Elpatrons') }}</div>
             <h1 style="margin:0;">{{ _('Datumsrechner') }}</h1>
             <div style="font-size:0.9em; color:#1e293b; margin-top:0.3em;">
@@ -853,11 +1491,11 @@ footer br + a {
                                 </select>
                             </label>
                         </fieldset>
-                        <button name="action" value="tage_werktage" type="submit">Berechnen</button>
+                        <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>
+                            <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>{% if request.form.get('bundesland') %} {{ _('(Feiertage:') }} {{ request.form.get('bundesland') }}){% endif %}: {{ tage }}
                             {% else %}
@@ -899,7 +1537,7 @@ footer br + a {
                     </form>
                     {% if wochentag 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>
+                            <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 %}
@@ -925,7 +1563,7 @@ footer br + a {
                     </form>
                     {% if kw_berechnen 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>
+                            <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 %}
@@ -951,7 +1589,7 @@ footer br + a {
                     </form>
                     {% if kw_datum 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>
+                            <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 %}
@@ -997,19 +1635,69 @@ footer br + a {
                     </form>
                     {% if plusminus_result 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>
+                            <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>
         </div>
+        
+        <!-- Calculator Button -->
+        <div style="text-align: center; margin-top: 1.5em;">
+            <button type="button" id="calculatorBtn" class="calculator-btn" onclick="showCalculator()" aria-label="{{ _('Taschenrechner öffnen') }}" title="{{ _('Taschenrechner öffnen') }}" tabindex="0">
+                🧮 {{ _('Taschenrechner') }}
+            </button>
+        </div>
+    </div>
+    
+    <!-- Calculator Modal Overlay -->
+    <div id="calculatorModal" class="modal-overlay" role="dialog" aria-labelledby="calculator-title" style="display: none;">
+        <div class="modal-content calculator-modal">
+            <button type="button" class="modal-close" onclick="hideCalculator()" aria-label="{{ _('Taschenrechner schließen') }}">&times;</button>
+            <h1 id="calculator-title">{{ _('Taschenrechner') }}</h1>
+            <p class="sr-only">{{ _('Verwenden Sie die Tab-Taste um durch die Tasten zu navigieren. Tastatur-Kurzbefehle: Zahlen 0-9, Punkt oder Komma für Dezimal, Plus (+) oder P für Addition, Minus (-) oder M für Subtraktion, Stern (*) oder X für Multiplikation, Schrägstrich (/) oder D für Division, Enter oder Leertaste für Gleich, C für Löschen, Backspace für letzte Ziffer löschen.') }}</p>
+            
+            <div class="calculator">
+                <div class="calculator-history" id="calculatorHistory" aria-label="{{ _('Berechnungsverlauf') }}" role="log" aria-live="polite"></div>
+                <div class="calculator-display">
+                    <div style="position: relative; display: flex; align-items: center;">
+                        <input type="text" id="calculatorInput" readonly aria-label="{{ _('Taschenrechner Anzeige') }}" value="0" role="textbox" aria-live="polite">
+                        <button type="button" class="read-aloud-btn" onclick="readAloudFromCalculator(this)" onkeydown="if(event.key==='Enter'||event.key===' ') { event.preventDefault(); readAloudFromCalculator(this); }" aria-label="{{ _('Ergebnis vorlesen') }}" title="{{ _('Ergebnis vorlesen') }}" tabindex="0" style="position: absolute; right: 0.5em; top: 50%; transform: translateY(-50%);">🔊</button>
+                    </div>
+                </div>
+                <div class="calculator-buttons">
+                    <button type="button" onclick="calculatorClear()" class="calc-btn calc-clear" aria-label="{{ _('Löschen (Taste: C)') }}" tabindex="0">C</button>
+                    <button type="button" onclick="calculatorDelete()" class="calc-btn calc-delete" aria-label="{{ _('Letzte Ziffer löschen (Taste: Backspace)') }}" tabindex="0">⌫</button>
+                    <button type="button" onclick="calculatorOperator('/')" class="calc-btn calc-operator" aria-label="{{ _('Dividieren (Taste: / oder D)') }}" tabindex="0">÷</button>
+                    <button type="button" onclick="calculatorOperator('*')" class="calc-btn calc-operator" aria-label="{{ _('Multiplizieren (Taste: * oder X)') }}" tabindex="0">×</button>
+                    
+                    <button type="button" onclick="calculatorNumber('7')" class="calc-btn" aria-label="{{ _('Sieben') }}" tabindex="0">7</button>
+                    <button type="button" onclick="calculatorNumber('8')" class="calc-btn" aria-label="{{ _('Acht') }}" tabindex="0">8</button>
+                    <button type="button" onclick="calculatorNumber('9')" class="calc-btn" aria-label="{{ _('Neun') }}" tabindex="0">9</button>
+                    <button type="button" onclick="calculatorOperator('-')" class="calc-btn calc-operator" aria-label="{{ _('Subtrahieren (Taste: - oder M)') }}" tabindex="0">−</button>
+                    
+                    <button type="button" onclick="calculatorNumber('4')" class="calc-btn" aria-label="{{ _('Vier') }}" tabindex="0">4</button>
+                    <button type="button" onclick="calculatorNumber('5')" class="calc-btn" aria-label="{{ _('Fünf') }}" tabindex="0">5</button>
+                    <button type="button" onclick="calculatorNumber('6')" class="calc-btn" aria-label="{{ _('Sechs') }}" tabindex="0">6</button>
+                    <button type="button" onclick="calculatorOperator('+')" class="calc-btn calc-operator" aria-label="{{ _('Addieren (Taste: + oder P)') }}" tabindex="0">+</button>
+                    
+                    <button type="button" onclick="calculatorNumber('1')" class="calc-btn" aria-label="{{ _('Eins') }}" tabindex="0">1</button>
+                    <button type="button" onclick="calculatorNumber('2')" class="calc-btn" aria-label="{{ _('Zwei') }}" tabindex="0">2</button>
+                    <button type="button" onclick="calculatorNumber('3')" class="calc-btn" aria-label="{{ _('Drei') }}" tabindex="0">3</button>
+                    <button type="button" onclick="calculatorEquals()" class="calc-btn calc-equals" aria-label="{{ _('Gleich (Taste: Enter oder Leertaste)') }}" tabindex="0">=</button>
+                    
+                    <button type="button" onclick="calculatorNumber('0')" class="calc-btn calc-zero" aria-label="{{ _('Null') }}" tabindex="0">0</button>
+                    <button type="button" onclick="calculatorDecimal()" class="calc-btn" aria-label="{{ _('Komma (Taste: . oder ,)') }}" tabindex="0">.</button>
+                </div>
+            </div>
+        </div>
     </div>
     
     <!-- Help Modal Overlay -->
     <div id="helpModal" class="modal-overlay" role="dialog" aria-labelledby="help-title" aria-describedby="help-content">
         <div class="modal-content">
-            <button type="button" class="modal-close" onclick="hideHelp()" aria-label="Hilfe schließen">&times;</button>
+            <button type="button" class="modal-close" onclick="hideHelp()" aria-label="{{ _('Hilfe schließen') }}">&times;</button>
             <h1 id="help-title">{{ _('Was ist Elpatrons Datumsrechner?') }}</h1>
             
             <p>{{ _('Der Datumsrechner kann verschiedene Datumsberechnungen durchführen:') }}</p>
@@ -1025,56 +1713,43 @@ footer br + a {
                 <li>{{ _('Start-/Enddatum einer Kalenderwoche eines Jahres') }}</li>
             </ul>
             
-            <h2>Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?</h2>
+            <h2>{{ _('Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?') }}</h2>
             
-            <p>Aus zwei Gründen:</p>
+            <p>{{ _('Aus zwei Gründen:') }}</p>
             
             <ul>
-                <li>Finde mal einen Datumsrechner, der nicht vollkommen verseucht mit Werbung, Tracking und Cookies ist!</li>
+                <li>{{ _('Finde mal einen Datumsrechner, der nicht vollkommen verseucht mit Werbung, Tracking und Cookies ist!') }}</li>
-                <li>Das hat mich so geärgert, dass ich meinen eigenen programmiert habe.
+                <li>{{ _('Das hat mich so geärgert, dass ich meinen eigenen programmiert habe.') }}
                     <ul>
-                        <li>Genau genommen nicht ich selbst. Diese App wurde zum überwiegenden Teil von KI nach meinen Anweisungen entwickelt (Vibe Coding).</li>
+                        <li>{{ _('Genau genommen nicht ich selbst. Diese App wurde zum überwiegenden Teil von KI nach meinen Anweisungen entwickelt (Vibe Coding).') }}</li>
                     </ul>
                 </li>
             </ul>
             
-            <h2>Was du noch wissen solltest</h2>
+            <h2>{{ _('Was du noch wissen solltest') }}</h2>
             
             <ul>
-                <li>Ich habe versucht, die App möglichst barrierefrei zu gestalten, um Menschen mit Einschränkungen die Benutzung zu erleichtern.</li>
+                <li>{{ _('Ich habe versucht, die App möglichst barrierefrei zu gestalten, um Menschen mit Einschränkungen die Benutzung zu erleichtern.') }}</li>
-                <li>Diese App schnüffelt dir nicht hinterher, sammelt keine persönlichen Daten und geht dir auch sonst (hoffentlich!) in keiner Weise auf die Nerven.</li>
+                <li>{{ _('Diese App schnüffelt dir nicht hinterher, sammelt keine persönlichen Daten und geht dir auch sonst (hoffentlich!) in keiner Weise auf die Nerven.') }}</li>
-                <li>Den Quellcode dieser App habe ich auf <a href="https://codeberg.org/elpatron/datecalc" target="_blank">Codeberg</a> veröffentlicht, du kannst ihn einsehen, verändern oder damit deinen eigenen kleinen Datumsrechner betreiben.</li>
+                <li>{{ _('Den Quellcode dieser App habe ich auf') }} <a href="https://codeberg.org/elpatron/datecalc" target="_blank">Codeberg</a> {{ _('veröffentlicht, du kannst ihn einsehen, verändern oder damit deinen eigenen kleinen Datumsrechner betreiben.') }}</li>
-                <li>Die App läuft auf meinem kleinen Home-Server und ist derzeit nicht für große Besucherzahlen ausgelegt.</li>
+                <li>{{ _('Die App läuft auf meinem kleinen Home-Server und ist derzeit nicht für große Besucherzahlen ausgelegt.') }}</li>
-                <li>Ich übernehme keine Gewähr für die Funktionalität und die Rechenergebnisse. Die KI, die das programmiert hat, übrigens auch nicht.</li>
+                <li>{{ _('Ich übernehme keine Gewähr für die Funktionalität und die Rechenergebnisse. Die KI, die das programmiert hat, übrigens auch nicht.') }}</li>
-                <li>Falls du einen Fehler findest oder eine weitere Funktion wünschst, kannst du mir eine Mail schreiben (siehe Mailto Link in der Fußzeile)</li>
+                <li>{{ _('Falls du einen Fehler findest oder eine weitere Funktion wünschst, kannst du mir eine Mail schreiben (siehe Mailto Link in der Fußzeile)') }}</li>
             </ul>
             
-            <p><strong>Hab Spaß mit Elpatrons Datumsrechner! Dein M. Busche</strong></p>
+            <p><strong>{{ _('Hab Spaß mit Elpatrons Datumsrechner! Dein M. Busche') }}</strong></p>
         </div>
         <div id="help-content" class="sr-only">
-            Hilfe-Informationen für den Datumsrechner mit Erklärungen zu allen Funktionen
+            {{ _('Hilfe-Informationen für den Datumsrechner mit Erklärungen zu allen Funktionen') }}
         </div>
     </div>
     
     <footer style="text-align:center; margin-top:2em; color:#475569; font-size:0.98em; padding-bottom:1.5em;">
-        Dies ist ein werbe- und trackingfreier <a href="https://codeberg.org/elpatron/datecalc/src/branch/main/README.md" target="_blank" style="color:#1e40af; text-decoration:underline;">Open Source Datumsrechner</a><br>
+        Dies ist ein werbe- und trackingfreier <a href="https://codeberg.org/elpatron/datecalc/src/branch/main/README.md" target="_blank" style="color:#1e40af; text-decoration:underline;">Open Source</a> Datumsrechner<br>
         <a href="/api-docs" target="_blank" style="color:#1e40af; text-decoration:underline;">REST API Dokumentation (Swagger)</a><br>
-        © 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#1e40af; text-decoration:underline;">M. Busche</a>
+        © 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#1e40af; text-decoration:underline;">Markus Busche</a>
         <div style="margin-top:0.5em; font-size:0.85em; color:#64748b;">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

@@ -19,6 +19,32 @@
         .stats-label { color: #64748b; }
         .stats-value { font-size: 1.5em; font-weight: bold; }
         .chart-container { margin: 2em 0; }
+        .toggle-container { 
+            display: flex; 
+            justify-content: center; 
+            margin-bottom: 1.5em; 
+            gap: 0.5em; 
+        }
+        .toggle-btn { 
+            padding: 0.5em 1em; 
+            border: 1px solid #d1d5db; 
+            background: #f9fafb; 
+            color: #6b7280; 
+            border-radius: 6px; 
+            cursor: pointer; 
+            transition: all 0.2s; 
+        }
+        .toggle-btn.active { 
+            background: #2563eb; 
+            color: white; 
+            border-color: #2563eb; 
+        }
+        .toggle-btn:hover { 
+            background: #e5e7eb; 
+        }
+        .toggle-btn.active:hover { 
+            background: #1d4ed8; 
+        }
     </style>
 </head>
 <body>
@@ -28,6 +54,12 @@
             <div class="stats-label">Gesamt-Pageviews (7 Tage):</div>
             <div class="stats-value">{{ pageviews }}</div>
         </div>
+        
+        <div class="toggle-container">
+            <button class="toggle-btn active" data-period="week">Wochenverlauf</button>
+            <button class="toggle-btn" data-period="day">24-Stunden-Verlauf</button>
+        </div>
+        
         <div class="chart-container">
             <canvas id="imprChart" width="400" height="180"></canvas>
         </div>
@@ -43,75 +75,196 @@
     </div>
     <script type="text/javascript">
     document.addEventListener('DOMContentLoaded', function() {
-        // Impressions pro Tag
+        // Daten für verschiedene Zeiträume
-        // eslint-disable-next-line
+        const weekData = {{ impressions_per_day|tojson }};
-        const imprData = {{ impressions_per_day|tojson }};
+        const dayData = {{ impressions_per_hour|tojson }};
-        const imprLabels = Object.keys(imprData);
+        const weekFuncData = {{ func_counts|tojson }};
-        const imprCounts = Object.values(imprData);
+        const dayFuncData = {{ func_counts_hourly|tojson }};
-        new Chart(document.getElementById('imprChart').getContext('2d'), {
+        const weekApiData = {{ api_counts|tojson }};
-            type: 'line',
+        const dayApiData = {{ api_counts_hourly|tojson }};
-            data: {
+        
-                labels: imprLabels,
+        let currentPeriod = 'week';
-                datasets: [{
+        let currentImprChart = null;
-                    label: 'Impressions/Tag',
+        let currentFuncChart = null;
-                    data: imprCounts,
+        let currentApiChart = null;
-                    borderColor: '#059669',
+        
-                    backgroundColor: 'rgba(5,150,105,0.1)',
+        // Toggle-Buttons Event Listener
-                    tension: 0.2,
+        document.querySelectorAll('.toggle-btn').forEach(btn => {
-                    fill: true
+            btn.addEventListener('click', function() {
-                }]
+                // Aktiven Button aktualisieren
-            },
+                document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
-            options: {
+                this.classList.add('active');
-                plugins: { legend: { display: true } },
+                
-                scales: {
+                // Zeitraum wechseln
-                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
+                currentPeriod = this.dataset.period;
-                }
+                updateAllCharts();
-            }
+            });
         });
-        // Funktionsaufrufe
+        
-        // eslint-disable-next-line
+        function updateImpressionsChart() {
-        const funcCounts = {{ func_counts|tojson }};
+            const ctx = document.getElementById('imprChart').getContext('2d');
-        const labels = Object.keys(funcCounts);
+            
-        const data = Object.values(funcCounts);
+            // Bestehenden Chart zerstören
-        new Chart(document.getElementById('funcChart').getContext('2d'), {
+            if (currentImprChart) {
-            type: 'bar',
+                currentImprChart.destroy();
-            data: {
-                labels: labels,
-                datasets: [{
-                    label: 'Funktionsaufrufe',
-                    data: data,
-                    backgroundColor: '#2563eb',
-                }]
-            },
-            options: {
-                plugins: { legend: { display: false } },
-                scales: {
-                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
-                }
             }
-        });
+            
-        // API-Nutzung
+            let data, labels, counts;
-        // eslint-disable-next-line
+            
-        const apiCounts = {{ api_counts|tojson }};
+            if (currentPeriod === 'week') {
-        if (Object.keys(apiCounts).length > 0 && document.getElementById('apiChart')) {
+                data = weekData;
-            new Chart(document.getElementById('apiChart').getContext('2d'), {
+                labels = Object.keys(data);
-                type: 'bar',
+                counts = Object.values(data);
+            } else {
+                data = dayData;
+                labels = Object.keys(data);
+                counts = Object.values(data);
+            }
+            
+            currentImprChart = new Chart(ctx, {
+                type: 'line',
                 data: {
-                    labels: Object.keys(apiCounts),
+                    labels: labels,
                     datasets: [{
-                        label: 'API-Aufrufe nach Endpunkt',
+                        label: currentPeriod === 'week' ? 'Impressions/Tag' : 'Impressions/Stunde',
-                        data: Object.values(apiCounts),
+                        data: counts,
-                        backgroundColor: '#f59e42',
+                        borderColor: '#059669',
+                        backgroundColor: 'rgba(5,150,105,0.1)',
+                        tension: 0.2,
+                        fill: true
                     }]
                 },
                 options: {
-                    plugins: { legend: { display: false } },
+                    plugins: { 
+                        legend: { display: true },
+                        title: {
+                            display: true,
+                            text: currentPeriod === 'week' ? 'Wochenverlauf' : '24-Stunden-Verlauf'
+                        }
+                    },
                     scales: {
                         y: { beginAtZero: true, ticks: { stepSize: 1 } }
                     }
                 }
             });
         }
+        
+        function updateFunctionChart() {
+            const ctx = document.getElementById('funcChart').getContext('2d');
+            
+            // Bestehenden Chart zerstören
+            if (currentFuncChart) {
+                currentFuncChart.destroy();
+            }
+            
+            let data, labels, counts;
+            
+            if (currentPeriod === 'week') {
+                data = weekFuncData;
+                labels = Object.keys(data);
+                counts = Object.values(data);
+            } else {
+                // Für stündliche Daten: Summe aller Stunden für jede Funktion
+                const aggregatedData = {};
+                Object.values(dayFuncData).forEach(hourData => {
+                    Object.keys(hourData).forEach(func => {
+                        aggregatedData[func] = (aggregatedData[func] || 0) + hourData[func];
+                    });
+                });
+                data = aggregatedData;
+                labels = Object.keys(data);
+                counts = Object.values(data);
+            }
+            
+            currentFuncChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Funktionsaufrufe',
+                        data: counts,
+                        backgroundColor: '#2563eb',
+                    }]
+                },
+                options: {
+                    plugins: { 
+                        legend: { display: false },
+                        title: {
+                            display: true,
+                            text: currentPeriod === 'week' ? 'Funktionsaufrufe (Woche)' : 'Funktionsaufrufe (24h)'
+                        }
+                    },
+                    scales: {
+                        y: { beginAtZero: true, ticks: { stepSize: 1 } }
+                    }
+                }
+            });
+        }
+        
+        function updateApiChart() {
+            const apiChartElement = document.getElementById('apiChart');
+            if (!apiChartElement) return;
+            
+            const ctx = apiChartElement.getContext('2d');
+            
+            // Bestehenden Chart zerstören
+            if (currentApiChart) {
+                currentApiChart.destroy();
+            }
+            
+            let data, labels, counts;
+            
+            if (currentPeriod === 'week') {
+                data = weekApiData;
+            } else {
+                // Für stündliche Daten: Summe aller Stunden für jede API
+                const aggregatedData = {};
+                Object.values(dayApiData).forEach(hourData => {
+                    Object.keys(hourData).forEach(api => {
+                        aggregatedData[api] = (aggregatedData[api] || 0) + hourData[api];
+                    });
+                });
+                data = aggregatedData;
+            }
+            
+            if (Object.keys(data).length === 0) return;
+            
+            labels = Object.keys(data);
+            counts = Object.values(data);
+            
+            currentApiChart = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'API-Aufrufe nach Endpunkt',
+                        data: counts,
+                        backgroundColor: '#f59e42',
+                    }]
+                },
+                options: {
+                    plugins: { 
+                        legend: { display: false },
+                        title: {
+                            display: true,
+                            text: currentPeriod === 'week' ? 'API-Nutzung (Woche)' : 'API-Nutzung (24h)'
+                        }
+                    },
+                    scales: {
+                        y: { beginAtZero: true, ticks: { stepSize: 1 } }
+                    }
+                }
+            });
+        }
+        
+        function updateAllCharts() {
+            updateImpressionsChart();
+            updateFunctionChart();
+            updateApiChart();
+        }
+        
+        // Initial Charts erstellen
+        updateAllCharts();
     });
     </script>
 </body>

test_app.py

@@ -221,10 +221,11 @@ def test_api_plusminus(client):
 def test_api_stats(client):
     resp = client.get('/api/stats')
     assert resp.status_code == 200
-    # Die Route gibt HTML zurück, nicht JSON
+    data = resp.get_json()
-    html = resp.data.decode('utf-8')
+    assert "pageviews" in data
-    # Prüfe auf typische HTML-Elemente des Dashboards
+    assert "func_counts" in data
-    assert 'Statistik-Dashboard' in html or 'Dashboard' in html
+    assert "impressions_per_day" in data
+    assert "api_counts" in data
 
 def test_api_monitor(client):
     resp = client.get('/api/monitor')

translations/en/LC_MESSAGES/messages.po

@@ -481,3 +481,107 @@ msgstr "Select German"
 #: templates/index.html:131
 msgid "English auswählen"
 msgstr "Select English"
+
+#: templates/index.html:132
+msgid "Taschenrechner"
+msgstr "Calculator"
+
+#: templates/index.html:133
+msgid "Taschenrechner öffnen"
+msgstr "Open calculator"
+
+#: templates/index.html:134
+msgid "Taschenrechner schließen"
+msgstr "Close calculator"
+
+#: templates/index.html:135
+msgid "Verwenden Sie die Tab-Taste um durch die Tasten zu navigieren. Tastatur-Kurzbefehle: Zahlen 0-9, Punkt oder Komma für Dezimal, Plus (+) oder P für Addition, Minus (-) oder M für Subtraktion, Stern (*) oder X für Multiplikation, Schrägstrich (/) oder D für Division, Enter oder Leertaste für Gleich, C für Löschen, Backspace für letzte Ziffer löschen."
+msgstr "Use the Tab key to navigate through the buttons. Keyboard shortcuts: Numbers 0-9, period or comma for decimal, Plus (+) or P for addition, Minus (-) or M for subtraction, Asterisk (*) or X for multiplication, Slash (/) or D for division, Enter or Space for equals, C for clear, Backspace for delete last digit."
+
+#: templates/index.html:136
+msgid "Taschenrechner Anzeige"
+msgstr "Calculator display"
+
+#: templates/index.html:137
+msgid "Berechnungsverlauf"
+msgstr "Calculation history"
+
+#: templates/index.html:138
+msgid "Löschen (Taste: C)"
+msgstr "Clear (key: C)"
+
+#: templates/index.html:139
+msgid "Letzte Ziffer löschen (Taste: Backspace)"
+msgstr "Delete last digit (key: Backspace)"
+
+#: templates/index.html:140
+msgid "Dividieren (Taste: / oder D)"
+msgstr "Divide (key: / or D)"
+
+#: templates/index.html:141
+msgid "Multiplizieren (Taste: * oder X)"
+msgstr "Multiply (key: * or X)"
+
+#: templates/index.html:142
+msgid "Sieben"
+msgstr "Seven"
+
+#: templates/index.html:143
+msgid "Acht"
+msgstr "Eight"
+
+#: templates/index.html:144
+msgid "Neun"
+msgstr "Nine"
+
+#: templates/index.html:145
+msgid "Subtrahieren (Taste: - oder M)"
+msgstr "Subtract (key: - or M)"
+
+#: templates/index.html:146
+msgid "Vier"
+msgstr "Four"
+
+#: templates/index.html:147
+msgid "Fünf"
+msgstr "Five"
+
+#: templates/index.html:148
+msgid "Sechs"
+msgstr "Six"
+
+#: templates/index.html:149
+msgid "Addieren (Taste: + oder P)"
+msgstr "Add (key: + or P)"
+
+#: templates/index.html:150
+msgid "Eins"
+msgstr "One"
+
+#: templates/index.html:151
+msgid "Zwei"
+msgstr "Two"
+
+#: templates/index.html:152
+msgid "Drei"
+msgstr "Three"
+
+#: templates/index.html:153
+msgid "Gleich (Taste: Enter oder Leertaste)"
+msgstr "Equals (key: Enter or Space)"
+
+#: templates/index.html:154
+msgid "Null"
+msgstr "Zero"
+
+#: templates/index.html:155
+msgid "Komma (Taste: . oder ,)"
+msgstr "Decimal (key: . or ,)"
+
+#: templates/index.html:156
+msgid "Fehler"
+msgstr "Error"
+
+#: templates/index.html:157
+msgid "Berechnung"
+msgstr "Calculation"