v1.3.12: Verbesserte Farbkontraste für bessere Barrierefreiheit

- 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

@@ -29,6 +29,7 @@ Diese moderne Python-Webanwendung (Flask) ermöglicht verschiedene Datumsberechn
   - [Vibe Coding](#vibe-coding)
   - [Statistik-Erfassung, Logging](#statistik-erfassung-logging)
   - [Barrierefreiheit (Accessibility)](#barrierefreiheit-accessibility)
+  - [Code Statistik](#code-statistik)
 - [Lizenz](#lizenz)
 
 ## Demo
@@ -40,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
@@ -147,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"
 }
 ```
 
@@ -155,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:**
@@ -163,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`
@@ -380,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.
 
@@ -387,21 +417,21 @@ Damit ist die App für Menschen mit unterschiedlichen Einschränkungen (z.B. Seh
 
 ### Code Statistik
 
-cloc|github.com/AlDanial/cloc v 2.04  T=0.06 s (290.4 files/s, 30411.5 lines/s)
+cloc|github.com/AlDanial/cloc v 2.06  T=0.06 s (263.5 files/s, 39193.4 lines/s)
 --- | ---
 
 Language|files|blank|comment|code
 :-------|-------:|-------:|-------:|-------:
+HTML|4|21|6|927
 Python|2|34|26|482
-HTML|4|0|5|404
+Markdown|2|116|0|328
-Markdown|2|108|0|293
 JSON|2|0|0|237
-CSS|1|0|0|229
 JavaScript|1|0|0|20
 SVG|2|0|0|14
 Dockerfile|1|5|6|8
+DOS Batch|1|0|0|1
 --------|--------|--------|--------|--------
-SUM:|18|148|37|1700
+SUM:|15|176|38|2017
 
 ## Lizenz
 

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.12"
+
 # 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 d1 > d2:
+                    d1, d2 = d2, d1
+                # 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:
-                    if d1 > d2:
+                    tage = np.busday_count(d1.date(), (d2 + timedelta(days=1)).date(), holidays=holidays)
-                        d1, d2 = d2, d1
-                    tage = np.busday_count(d1.date(), (d2 + timedelta(days=1)).date())
                 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})

h origin main --no-edit

@@ -0,0 +1,324 @@
+
+                   SSUUMMMMAARRYY OOFF LLEESSSS CCOOMMMMAANNDDSS
+
+      Commands marked with * may be preceded by a number, _N.
+      Notes in parentheses indicate the behavior if _N is given.
+      A key preceded by a caret indicates the Ctrl key; thus ^K is ctrl-K.
+
+  h  H                 Display this help.
+  q  :q  Q  :Q  ZZ     Exit.
+ ---------------------------------------------------------------------------
+
+                           MMOOVVIINNGG
+
+  e  ^E  j  ^N  CR  *  Forward  one line   (or _N lines).
+  y  ^Y  k  ^K  ^P  *  Backward one line   (or _N lines).
+  ESC-j             *  Forward  one file line (or _N file lines).
+  ESC-k             *  Backward one file line (or _N file lines).
+  f  ^F  ^V  SPACE  *  Forward  one window (or _N lines).
+  b  ^B  ESC-v      *  Backward one window (or _N lines).
+  z                 *  Forward  one window (and set window to _N).
+  w                 *  Backward one window (and set window to _N).
+  ESC-SPACE         *  Forward  one window, but don't stop at end-of-file.
+  ESC-b             *  Backward one window, but don't stop at beginning-of-file.
+  d  ^D             *  Forward  one half-window (and set half-window to _N).
+  u  ^U             *  Backward one half-window (and set half-window to _N).
+  ESC-)  RightArrow *  Right one half screen width (or _N positions).
+  ESC-(  LeftArrow  *  Left  one half screen width (or _N positions).
+  ESC-}  ^RightArrow   Right to last column displayed.
+  ESC-{  ^LeftArrow    Left  to first column.
+  F                    Forward forever; like "tail -f".
+  ESC-F                Like F but stop when search pattern is found.
+  r  ^R  ^L            Repaint screen.
+  R                    Repaint screen, discarding buffered input.
+        ---------------------------------------------------
+        Default "window" is the screen height.
+        Default "half-window" is half of the screen height.
+ ---------------------------------------------------------------------------
+
+                          SSEEAARRCCHHIINNGG
+
+  /_p_a_t_t_e_r_n          *  Search forward for (_N-th) matching line.
+  ?_p_a_t_t_e_r_n          *  Search backward for (_N-th) matching line.
+  n                 *  Repeat previous search (for _N-th occurrence).
+  N                 *  Repeat previous search in reverse direction.
+  ESC-n             *  Repeat previous search, spanning files.
+  ESC-N             *  Repeat previous search, reverse dir. & spanning files.
+  ^O^N  ^On         *  Search forward for (_N-th) OSC8 hyperlink.
+  ^O^P  ^Op         *  Search backward for (_N-th) OSC8 hyperlink.
+  ^O^L  ^Ol            Jump to the currently selected OSC8 hyperlink.
+  ESC-u                Undo (toggle) search highlighting.
+  ESC-U                Clear search highlighting.
+  &_p_a_t_t_e_r_n          *  Display only matching lines.
+        ---------------------------------------------------
+		Search is case-sensitive unless changed with -i or -I.
+        A search pattern may begin with one or more of:
+        ^N or !  Search for NON-matching lines.
+        ^E or *  Search multiple files (pass thru END OF FILE).
+        ^F or @  Start search at FIRST file (for /) or last file (for ?).
+        ^K       Highlight matches, but don't move (KEEP position).
+        ^R       Don't use REGULAR EXPRESSIONS.
+        ^S _n     Search for match in _n-th parenthesized subpattern.
+        ^W       WRAP search if no match found.
+        ^L       Enter next character literally into pattern.
+ ---------------------------------------------------------------------------
+
+                           JJUUMMPPIINNGG
+
+  g  <  ESC-<       *  Go to first line in file (or line _N).
+  G  >  ESC->       *  Go to last line in file (or line _N).
+  p  %              *  Go to beginning of file (or _N percent into file).
+  t                 *  Go to the (_N-th) next tag.
+  T                 *  Go to the (_N-th) previous tag.
+  {  (  [           *  Find close bracket } ) ].
+  }  )  ]           *  Find open bracket { ( [.
+  ESC-^F _<_c_1_> _<_c_2_>  *  Find close bracket _<_c_2_>.
+  ESC-^B _<_c_1_> _<_c_2_>  *  Find open bracket _<_c_1_>.
+        ---------------------------------------------------
+        Each "find close bracket" command goes forward to the close bracket 
+          matching the (_N-th) open bracket in the top line.
+        Each "find open bracket" command goes backward to the open bracket 
+          matching the (_N-th) close bracket in the bottom line.
+
+  m_<_l_e_t_t_e_r_>            Mark the current top line with <letter>.
+  M_<_l_e_t_t_e_r_>            Mark the current bottom line with <letter>.
+  '_<_l_e_t_t_e_r_>            Go to a previously marked position.
+  ''                   Go to the previous position.
+  ^X^X                 Same as '.
+  ESC-m_<_l_e_t_t_e_r_>        Clear a mark.
+        ---------------------------------------------------
+        A mark is any upper-case or lower-case letter.
+        Certain marks are predefined:
+             ^  means  beginning of the file
+             $  means  end of the file
+ ---------------------------------------------------------------------------
+
+                        CCHHAANNGGIINNGG FFIILLEESS
+
+  :e [_f_i_l_e]            Examine a new file.
+  ^X^V                 Same as :e.
+  :n                *  Examine the (_N-th) next file from the command line.
+  :p                *  Examine the (_N-th) previous file from the command line.
+  :x                *  Examine the first (or _N-th) file from the command line.
+  ^O^O                 Open the currently selected OSC8 hyperlink.
+  :d                   Delete the current file from the command line list.
+  =  ^G  :f            Print current file name.
+ ---------------------------------------------------------------------------
+
+                    MMIISSCCEELLLLAANNEEOOUUSS CCOOMMMMAANNDDSS
+
+  -_<_f_l_a_g_>              Toggle a command line option [see OPTIONS below].
+  --_<_n_a_m_e_>             Toggle a command line option, by name.
+  __<_f_l_a_g_>              Display the setting of a command line option.
+  ___<_n_a_m_e_>             Display the setting of an option, by name.
+  +_c_m_d                 Execute the less cmd each time a new file is examined.
+
+  !_c_o_m_m_a_n_d             Execute the shell command with $SHELL.
+  #_c_o_m_m_a_n_d             Execute the shell command, expanded like a prompt.
+  |XX_c_o_m_m_a_n_d            Pipe file between current pos & mark XX to shell command.
+  s _f_i_l_e               Save input to a file.
+  v                    Edit the current file with $VISUAL or $EDITOR.
+  V                    Print version number of "less".
+ ---------------------------------------------------------------------------
+
+                           OOPPTTIIOONNSS
+
+        Most options may be changed either on the command line,
+        or from within less by using the - or -- command.
+        Options may be given in one of two forms: either a single
+        character preceded by a -, or a name preceded by --.
+
+  -?  ........  --help
+                  Display help (from command line).
+  -a  ........  --search-skip-screen
+                  Search skips current screen.
+  -A  ........  --SEARCH-SKIP-SCREEN
+                  Search starts just after target line.
+  -b [_N]  ....  --buffers=[_N]
+                  Number of buffers.
+  -B  ........  --auto-buffers
+                  Don't automatically allocate buffers for pipes.
+  -c  ........  --clear-screen
+                  Repaint by clearing rather than scrolling.
+  -d  ........  --dumb
+                  Dumb terminal.
+  -D xx_c_o_l_o_r  .  --color=xx_c_o_l_o_r
+                  Set screen colors.
+  -e  -E  ....  --quit-at-eof  --QUIT-AT-EOF
+                  Quit at end of file.
+  -f  ........  --force
+                  Force open non-regular files.
+  -F  ........  --quit-if-one-screen
+                  Quit if entire file fits on first screen.
+  -g  ........  --hilite-search
+                  Highlight only last match for searches.
+  -G  ........  --HILITE-SEARCH
+                  Don't highlight any matches for searches.
+  -h [_N]  ....  --max-back-scroll=[_N]
+                  Backward scroll limit.
+  -i  ........  --ignore-case
+                  Ignore case in searches that do not contain uppercase.
+  -I  ........  --IGNORE-CASE
+                  Ignore case in all searches.
+  -j [_N]  ....  --jump-target=[_N]
+                  Screen position of target lines.
+  -J  ........  --status-column
+                  Display a status column at left edge of screen.
+  -k _f_i_l_e  ...  --lesskey-file=_f_i_l_e
+                  Use a compiled lesskey file.
+  -K  ........  --quit-on-intr
+                  Exit less in response to ctrl-C.
+  -L  ........  --no-lessopen
+                  Ignore the LESSOPEN environment variable.
+  -m  -M  ....  --long-prompt  --LONG-PROMPT
+                  Set prompt style.
+  -n .........  --line-numbers
+                  Suppress line numbers in prompts and messages.
+  -N .........  --LINE-NUMBERS
+                  Display line number at start of each line.
+  -o [_f_i_l_e] ..  --log-file=[_f_i_l_e]
+                  Copy to log file (standard input only).
+  -O [_f_i_l_e] ..  --LOG-FILE=[_f_i_l_e]
+                  Copy to log file (unconditionally overwrite).
+  -p _p_a_t_t_e_r_n .  --pattern=[_p_a_t_t_e_r_n]
+                  Start at pattern (from command line).
+  -P [_p_r_o_m_p_t]   --prompt=[_p_r_o_m_p_t]
+                  Define new prompt.
+  -q  -Q  ....  --quiet  --QUIET  --silent --SILENT
+                  Quiet the terminal bell.
+  -r  -R  ....  --raw-control-chars  --RAW-CONTROL-CHARS
+                  Output "raw" control characters.
+  -s  ........  --squeeze-blank-lines
+                  Squeeze multiple blank lines.
+  -S  ........  --chop-long-lines
+                  Chop (truncate) long lines rather than wrapping.
+  -t _t_a_g  ....  --tag=[_t_a_g]
+                  Find a tag.
+  -T [_t_a_g_s_f_i_l_e] --tag-file=[_t_a_g_s_f_i_l_e]
+                  Use an alternate tags file.
+  -u  -U  ....  --underline-special  --UNDERLINE-SPECIAL
+                  Change handling of backspaces, tabs and carriage returns.
+  -V  ........  --version
+                  Display the version number of "less".
+  -w  ........  --hilite-unread
+                  Highlight first new line after forward-screen.
+  -W  ........  --HILITE-UNREAD
+                  Highlight first new line after any forward movement.
+  -x [_N[,...]]  --tabs=[_N[,...]]
+                  Set tab stops.
+  -X  ........  --no-init
+                  Don't use termcap init/deinit strings.
+  -y [_N]  ....  --max-forw-scroll=[_N]
+                  Forward scroll limit.
+  -z [_N]  ....  --window=[_N]
+                  Set size of window.
+  -" [_c[_c]]  .  --quotes=[_c[_c]]
+                  Set shell quote characters.
+  -~  ........  --tilde
+                  Don't display tildes after end of file.
+  -# [_N]  ....  --shift=[_N]
+                  Set horizontal scroll amount (0 = one half screen width).
+
+                --exit-follow-on-close
+                  Exit F command on a pipe when writer closes pipe.
+                --file-size
+                  Automatically determine the size of the input file.
+                --follow-name
+                  The F command changes files if the input file is renamed.
+                --form-feed
+                  Stop scrolling when a form feed character is reached.
+                --header=[_L[,_C[,_N]]]
+                  Use _L lines (starting at line _N) and _C columns as headers.
+                --incsearch
+                  Search file as each pattern character is typed in.
+                --intr=[_C]
+                  Use _C instead of ^X to interrupt a read.
+                --lesskey-context=_t_e_x_t
+                  Use lesskey source file contents.
+                --lesskey-src=_f_i_l_e
+                  Use a lesskey source file.
+                --line-num-width=[_N]
+                  Set the width of the -N line number field to _N characters.
+                --match-shift=[_N]
+                  Show at least _N characters to the left of a search match.
+                --modelines=[_N]
+                  Read _N lines from the input file and look for vim modelines.
+                --mouse
+                  Enable mouse input.
+                --no-edit-warn
+                  Don't warn when using v command on a file opened via LESSOPEN.
+                --no-keypad
+                  Don't send termcap keypad init/deinit strings.
+                --no-histdups
+                  Remove duplicates from command history.
+                --no-number-headers
+                  Don't give line numbers to header lines.
+                --no-paste
+                  Ignore pasted input.
+                --no-search-header-lines
+                  Searches do not include header lines.
+                --no-search-header-columns
+                  Searches do not include header columns.
+                --no-search-headers
+                  Searches do not include header lines or columns.
+                --no-vbell
+                  Disable the terminal's visual bell.
+                --redraw-on-quit
+                  Redraw final screen when quitting.
+                --rscroll=[_C]
+                  Set the character used to mark truncated lines.
+                --save-marks
+                  Retain marks across invocations of less.
+                --search-options=[EFKNRW-]
+                  Set default options for every search.
+                --show-preproc-errors
+                  Display a message if preprocessor exits with an error status.
+                --proc-backspace
+                  Process backspaces for bold/underline.
+                --PROC-BACKSPACE
+                  Treat backspaces as control characters.
+                --proc-return
+                  Delete carriage returns before newline.
+                --PROC-RETURN
+                  Treat carriage returns as control characters.
+                --proc-tab
+                  Expand tabs to spaces.
+                --PROC-TAB
+                  Treat tabs as control characters.
+                --status-col-width=[_N]
+                  Set the width of the -J status column to _N characters.
+                --status-line
+                  Highlight or color the entire line containing a mark.
+                --use-backslash
+                  Subsequent options use backslash as escape char.
+                --use-color
+                  Enables colored text.
+                --wheel-lines=[_N]
+                  Each click of the mouse wheel moves _N lines.
+                --wordwrap
+                  Wrap lines at spaces.
+
+
+ ---------------------------------------------------------------------------
+
+                          LLIINNEE EEDDIITTIINNGG
+
+        These keys can be used to edit text being entered 
+        on the "command line" at the bottom of the screen.
+
+ RightArrow ..................... ESC-l ... Move cursor right one character.
+ LeftArrow ...................... ESC-h ... Move cursor left one character.
+ ctrl-RightArrow  ESC-RightArrow  ESC-w ... Move cursor right one word.
+ ctrl-LeftArrow   ESC-LeftArrow   ESC-b ... Move cursor left one word.
+ HOME ........................... ESC-0 ... Move cursor to start of line.
+ END ............................ ESC-$ ... Move cursor to end of line.
+ BACKSPACE ................................ Delete char to left of cursor.
+ DELETE ......................... ESC-x ... Delete char under cursor.
+ ctrl-BACKSPACE   ESC-BACKSPACE ........... Delete word to left of cursor.
+ ctrl-DELETE .... ESC-DELETE .... ESC-X ... Delete word under cursor.
+ ctrl-U ......... ESC (MS-DOS only) ....... Delete entire line.
+ UpArrow ........................ ESC-k ... Retrieve previous command line.
+ DownArrow ...................... ESC-j ... Retrieve next command line.
+ TAB ...................................... Complete filename & cycle.
+ SHIFT-TAB ...................... ESC-TAB   Complete filename & reverse cycle.
+ ctrl-L ................................... Complete filename, list all.

info.md

@@ -0,0 +1,31 @@
+# Was ist Elpatrons Datumsrechner?
+
+Der Datumsrechner kann verschiedene Datumsberechnungen durchführen:
+
+- Anzahl der Tage zwischen zwei Daten
+- Anzahl der Werktage zwischen zwei Daten
+- 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
+
+## Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?
+
+Aus zwei Gründen:
+
+- Finde mal einen Datumsrechner, der nicht vollkommen verseucht mit Werbung, Tracking und Cookies ist!
+- Das hat mich so geärgert, dass ich meinen eigenen programmiert habe.
+  - Genau genommen nicht ich selbst. Diese App wurde zum überwiegenden Teil von KI nach meinen Anweisungen entwickelt ([Vibe Coding}(https://www.wikiwand.com/en/articles/Vibe_coding).)
+
+## Was du noch wissen solltest
+
+- Ich habe versucht, die App möglichst barrierefrei zu gestalten, um Menschen mit Einschränkungen die Benutzung zu erleichtern. 
+- Diese App schnüffelt dir nicht hinterher, sammelt keine persönlichen Daten und geht dir auch sonst (hoffentlich!) in keiner Weise auf die Nerven. 
+- Den Quellcode dieser App habe ich auf [Codeberg](https://codeberg.org/elpatron/datecalc) veröffentlicht, du kannst ihn einsehen, verändern oder damit deinen eigenen kleinen Datumsrechner betreiben.
+- Die App läuft auf meinem kleinen Home-Server und ist derzeit nicht für große Besucherzahlen ausgelegt.
+- Ich übernehme keine Gewähr für die Funktionalität und die Rechenergebnisse. Die KI, die das programmiert hat, übrigens auch nicht.
+- Falls du einen Fehler findest oder eine weitere Funktion wünschst, kannst du mir eine Mail schreiben (siehe Mailto Link in der Fußzeile)
+
+Hab Spaß mit Elpatrons Datumsrechner! Dein M. Busche

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/manifest.json

@@ -7,8 +7,8 @@
   "theme_color": "#2563eb",
   "description": "Open Source Web-App für Kalender- und Datumsberechnungen.",
   "icons": [
-    { "src": "/favicon.png", "sizes": "32x32", "type": "image/png" },
+    { "src": "/static/favicon.png", "sizes": "32x32", "type": "image/png" },
-    { "src": "/favicon.ico", "sizes": "48x48 64x64 128x128 256x256", "type": "image/x-icon" },
+    { "src": "/static/favicon.ico", "sizes": "48x48 64x64 128x128 256x256", "type": "image/x-icon" },
     { "src": "/static/logo.svg", "sizes": "any", "type": "image/svg+xml" }
   ]
 } 

static/service-worker.js

@@ -2,9 +2,9 @@ const CACHE_NAME = 'datumsrechner-cache-v1';
 const urlsToCache = [
   '/',
   '/static/style.css',
-  '/favicon.ico',
+  '/static/favicon.ico',
-  '/favicon.png',
+  '/static/favicon.png',
-  '/logo.svg',
+  '/static/logo.svg',
 ];
 self.addEventListener('install', event => {
   event.waitUntil(

static/style.css

@@ -1,229 +0,0 @@
-:root {
-    --primary: #2563eb;
-    --primary-dark: #1e40af;
-    --background: #f8fafc;
-    --surface: #fff;
-    --border: #e5e7eb;
-    --text: #1e293b;
-    --shadow: 0 2px 8px rgba(30,41,59,0.07);
-}
-body {
-    background: var(--background);
-    color: var(--text);
-    font-family: 'Segoe UI', Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-}
-.container {
-    max-width: 480px;
-    margin: 3em auto;
-    background: var(--surface);
-    border-radius: 16px;
-    box-shadow: var(--shadow);
-    padding: 2.5em 2em 2em 2em;
-    border: 1px solid var(--border);
-}
-h1 {
-    text-align: center;
-    margin-bottom: 2em;
-    font-size: 2.1em;
-    letter-spacing: 0.01em;
-}
-form {
-    margin-bottom: 2.2em;
-    padding-bottom: 1.2em;
-    border-bottom: 1px solid var(--border);
-}
-form:last-of-type {
-    border-bottom: none;
-    margin-bottom: 0;
-}
-h2 {
-    font-size: 1.15em;
-    margin-bottom: 0.7em;
-    color: var(--primary-dark);
-}
-label {
-    display: block;
-    margin-bottom: 0.7em;
-    font-weight: 500;
-}
-.date-row {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-    margin-top: 0.2em;
-}
-.date-calc-row {
-    display: flex;
-    align-items: center;
-    gap: 0.5em;
-    margin-top: 0.2em;
-}
-input[type="date"] {
-    padding: 0.45em 0.7em;
-    border: 1px solid var(--border);
-    border-radius: 6px;
-    font-size: 1em;
-    background: #f1f5f9;
-    color: var(--text);
-}
-.today-btn {
-    padding: 0.35em 0.9em;
-    background: var(--primary-dark);
-    color: #fff;
-    border: none;
-    border-radius: 6px;
-    font-size: 0.95em;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 0.2s;
-}
-.today-btn:hover {
-    background: var(--primary);
-}
-button, .accordion-header {
-    background: var(--primary);
-    color: #fff;
-    border: none;
-    border-radius: 6px;
-    font-size: 1em;
-    font-weight: 600;
-    cursor: pointer;
-    box-shadow: 0 1px 3px rgba(30,41,59,0.05);
-    transition: background 0.2s;
-}
-button:hover, .accordion-header:hover {
-    background: var(--primary-dark);
-}
-button:focus, .accordion-header:focus {
-    outline: 3px solid #facc15;
-    outline-offset: 2px;
-    box-shadow: 0 0 0 4px #1e293b;
-    z-index: 2;
-}
-.result {
-    margin-top: 1em;
-    font-weight: bold;
-    background: #e0e7ff;
-    color: #1e293b;
-    border-radius: 6px;
-    padding: 0.7em 1em;
-    box-shadow: 0 1px 2px rgba(30,41,59,0.04);
-    border: 2px solid #2563eb;
-}
-.accordion {
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: var(--shadow);
-    background: var(--surface);
-    margin-bottom: 2em;
-}
-.accordion-item + .accordion-item {
-    border-top: 1px solid var(--border);
-}
-.accordion-header {
-    background: var(--primary-dark);
-    color: #fff;
-    cursor: pointer;
-    padding: 1em 1.2em;
-    font-size: 1.1em;
-    font-weight: 600;
-    border: none;
-    outline: none;
-    width: 100%;
-    text-align: left;
-    transition: background 0.2s;
-}
-.accordion-header.active, .accordion-header:hover {
-    background: var(--primary);
-}
-.accordion-content {
-    display: none;
-    padding: 1.2em 1.2em 1em 1.2em;
-    background: var(--surface);
-}
-.accordion-content.active {
-    display: block;
-}
-.header-tage {
-    background: #2563eb;
-    color: #fff;
-}
-.header-tage.active, .header-tage:hover {
-    background: #1e40af;
-    color: #fff;
-}
-.header-werktage {
-    background: #059669;
-    color: #fff;
-}
-.header-werktage.active, .header-werktage:hover {
-    background: #047857;
-    color: #fff;
-}
-.header-wochentag {
-    background: #f59e42;
-    color: #1e293b;
-}
-.header-wochentag.active, .header-wochentag:hover {
-    background: #d97706;
-    color: #fff;
-}
-.header-plusminus-tage {
-    background: #a21caf;
-    color: #fff;
-}
-.header-plusminus-tage.active, .header-plusminus-tage:hover {
-    background: #701a75;
-    color: #fff;
-}
-.header-plusminus-werktage {
-    background: #0ea5e9;
-    color: #fff;
-}
-.header-plusminus-werktage.active, .header-plusminus-werktage:hover {
-    background: #0369a1;
-    color: #fff;
-}
-.header-plusminus-wochenmonate {
-    background: #f43f5e;
-    color: #fff;
-}
-.header-plusminus-wochenmonate.active, .header-plusminus-wochenmonate:hover {
-    background: #be123c;
-    color: #fff;
-}
-.header-kw {
-    background: #a78bfa;
-    color: #1e293b;
-}
-.header-kw.active, .header-kw:hover {
-    background: #7c3aed;
-    color: #fff;
-}
-.header-kw-datum {
-    background: #facc15;
-    color: #1e293b;
-}
-.header-kw-datum.active, .header-kw-datum:hover {
-    background: #ca8a04;
-    color: #fff;
-}
-.header-plusminus {
-    background: #be123c;
-    color: #fff;
-}
-.header-plusminus.active, .header-plusminus:hover {
-    background: #7f1d1d;
-    color: #fff;
-}
-@media (max-width: 600px) {
-    .container {
-        margin: 1em;
-        padding: 1.2em 0.7em 1em 0.7em;
-    }
-    h1 {
-        font-size: 1.3em;
-    }
-} 

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

@@ -19,14 +19,515 @@
     <meta property="og:image" content="/static/logo.svg">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="HandheldFriendly" content="true">
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="format-detection" content="telephone=no">
     <meta http-equiv="x-ua-compatible" content="IE=edge">
     <meta name="application-name" content="Elpatrons Datumsrechner">
     <meta name="msapplication-TileColor" content="#2563eb">
-    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
-    <link rel="stylesheet" href="/static/style.css">
+    <style>
+:root {
+    --primary: #2563eb;
+    --primary-dark: #1e40af;
+    --background: #f8fafc;
+    --surface: #fff;
+    --border: #e5e7eb;
+    --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;
+    box-shadow: var(--shadow);
+    padding: 2.5em 2em 2em 2em;
+    border: 1px solid var(--border);
+    position: relative;
+    box-sizing: border-box;
+}
+.help-button-container {
+    position: absolute;
+    top: 2.5em;
+    right: 2em;
+    z-index: 10;
+}
+.help-button {
+    width: 2.2em;
+    height: 2.2em;
+    border-radius: 50%;
+    background: rgba(37, 99, 235, 0.15);
+    color: var(--primary-dark);
+    border: 1px solid var(--border);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1em;
+    font-weight: 600;
+    transition: all 0.2s;
+    min-width: 44px;
+    min-height: 44px;
+}
+.help-button:hover {
+    background: rgba(37, 99, 235, 0.25);
+    border-color: var(--primary);
+}
+.help-button:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px #1e293b;
+}
+.help-tooltip {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--text);
+    color: white;
+    padding: 0.5em 0.8em;
+    border-radius: 6px;
+    font-size: 0.85em;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s, visibility 0.2s;
+    margin-top: 0.5em;
+    z-index: 20;
+}
+.help-tooltip::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-bottom-color: var(--text);
+}
+.help-button:hover + .help-tooltip,
+.help-button:focus + .help-tooltip {
+    opacity: 1;
+    visibility: visible;
+}
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+.modal-overlay.active {
+    display: flex;
+}
+.modal-content {
+    background: var(--surface);
+    border-radius: 12px;
+    padding: 2em;
+    max-width: 90%;
+    width: 90%;
+    max-height: 90%;
+    overflow-y: auto;
+    position: relative;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    margin: 0 auto;
+    left: 50%;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+}
+.modal-close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    background: none;
+    border: none;
+    font-size: 1.5em;
+    cursor: pointer;
+    color: var(--text);
+    padding: 0.5em;
+    border-radius: 50%;
+    transition: background 0.2s;
+    width: 2.5em;
+    height: 2.5em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+}
+.modal-close:hover {
+    background: var(--border);
+}
+.modal-close:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+}
+.modal-content h1 {
+    margin-top: 0;
+    color: var(--primary-dark);
+}
+.modal-content h2 {
+    color: var(--primary-dark);
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+}
+.modal-content p {
+    line-height: 1.6;
+    margin-bottom: 1em;
+}
+.modal-content ul {
+    margin-bottom: 1em;
+    padding-left: 1.5em;
+}
+.modal-content li {
+    margin-bottom: 0.5em;
+}
+h1 {
+    text-align: center;
+    margin-bottom: 2em;
+    font-size: 2.1em;
+    letter-spacing: 0.01em;
+}
+form {
+    margin-bottom: 2.2em;
+    padding-bottom: 1.2em;
+    border-bottom: 1px solid var(--border);
+}
+form:last-of-type {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+h2 {
+    font-size: 1.15em;
+    margin-bottom: 0.7em;
+    color: var(--primary-dark);
+}
+label {
+    display: block;
+    margin-bottom: 0.7em;
+    font-weight: 500;
+}
+.date-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    margin-top: 0.2em;
+}
+.date-calc-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    margin-top: 0.2em;
+}
+input[type="date"] {
+    padding: 0.45em 0.7em;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    font-size: 1em;
+    background: #ffffff;
+    color: var(--text);
+}
+.today-btn {
+    padding: 0.35em 0.9em;
+    background: var(--primary-dark);
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.95em;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+.today-btn:hover {
+    background: var(--primary);
+}
+button, .accordion-header {
+    background: var(--primary);
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-size: 1em;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(30,41,59,0.05);
+    transition: background 0.2s;
+}
+
+/* Berechnungs-Buttons vergrößern */
+button[type="submit"] {
+    font-size: 1.1em;
+    padding: 0.8em 1.5em;
+    min-width: 140px;
+    margin-top: 1.2em;
+}
+
+button:hover, .accordion-header:hover {
+    background: var(--primary-dark);
+}
+button:focus, .accordion-header:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 4px #1e293b;
+    z-index: 2;
+}
+.result {
+    margin-top: 1em;
+    font-weight: bold;
+    background: #dbeafe;
+    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;
+    min-height: 3.5em;
+}
+.read-aloud-btn {
+    position: absolute;
+    top: 0.5em;
+    right: 0.5em;
+    background: rgba(37, 99, 235, 0.15);
+    color: var(--primary-dark);
+    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.25);
+    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.25);
+    border-color: var(--primary);
+}
+.read-aloud-btn.playing {
+    background: var(--primary);
+    color: white;
+}
+.accordion {
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: var(--shadow);
+    background: var(--surface);
+    margin-bottom: 2em;
+    /* Layout-Shift-Prävention */
+    min-height: 200px;
+    contain: layout style paint;
+}
+.accordion-item + .accordion-item {
+    border-top: 1px solid var(--border);
+    margin-top: 0.5em;
+}
+.accordion-header {
+    background: var(--primary-dark);
+    color: #fff;
+    cursor: pointer;
+    padding: 1em 1.2em;
+    font-size: 1.1em;
+    font-weight: 600;
+    border: none;
+    outline: none;
+    width: 100%;
+    text-align: left;
+    transition: background 0.2s;
+}
+.accordion-header.active, .accordion-header:hover {
+    background: var(--primary);
+}
+.accordion-content {
+    display: none;
+    padding: 1.2em 1.2em 1em 1.2em;
+    background: var(--surface);
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
+    opacity: 0;
+}
+.accordion-content.active {
+    display: block;
+    max-height: 500px;
+    opacity: 1;
+    transition: max-height 0.3s ease-in, padding 0.3s ease-in, opacity 0.3s ease-in;
+}
+.header-tage {
+    background: #2563eb;
+    color: #fff;
+}
+.header-tage.active, .header-tage:hover {
+    background: #1e40af;
+    color: #fff;
+}
+.header-werktage {
+    background: #059669;
+    color: #fff;
+}
+.header-werktage.active, .header-werktage:hover {
+    background: #047857;
+    color: #fff;
+}
+.header-wochentag {
+    background: #ea580c;
+    color: #fff;
+}
+.header-wochentag.active, .header-wochentag:hover {
+    background: #c2410c;
+    color: #fff;
+}
+.header-plusminus-tage {
+    background: #a21caf;
+    color: #fff;
+}
+.header-plusminus-tage.active, .header-plusminus-tage:hover {
+    background: #701a75;
+    color: #fff;
+}
+.header-plusminus-werktage {
+    background: #0ea5e9;
+    color: #fff;
+}
+.header-plusminus-werktage.active, .header-plusminus-werktage:hover {
+    background: #0369a1;
+    color: #fff;
+}
+.header-plusminus-wochenmonate {
+    background: #f43f5e;
+    color: #fff;
+}
+.header-plusminus-wochenmonate.active, .header-plusminus-wochenmonate:hover {
+    background: #be123c;
+    color: #fff;
+}
+.header-kw {
+    background: #7c3aed;
+    color: #fff;
+}
+.header-kw.active, .header-kw:hover {
+    background: #6d28d9;
+    color: #fff;
+}
+.header-kw-datum {
+    background: #ca8a04;
+    color: #fff;
+}
+.header-kw-datum.active, .header-kw-datum:hover {
+    background: #a16207;
+    color: #fff;
+}
+.header-plusminus {
+    background: #be123c;
+    color: #fff;
+}
+.header-plusminus.active, .header-plusminus:hover {
+    background: #7f1d1d;
+    color: #fff;
+}
+@media (max-width: 600px) {
+    .container {
+        margin: 1em;
+        padding: 1.2em 0.7em 1em 0.7em;
+        width: calc(100% - 2em);
+        max-width: none;
+    }
+    h1 {
+        font-size: 1.3em;
+    }
+    .help-button-container {
+        top: 1.5em;
+        right: 1.2em;
+    }
+    .help-button {
+        width: 2em;
+        height: 2em;
+        font-size: 0.9em;
+        min-width: 48px;
+        min-height: 48px;
+    }
+    .help-tooltip {
+        font-size: 0.8em;
+        padding: 0.4em 0.6em;
+    }
+    .modal-content {
+        padding: 1.5em;
+        margin: 1em;
+        width: calc(100% - 2em);
+        max-width: none;
+        left: 0;
+        transform: none;
+    }
+}
+
+/* Touch-Target Optimierungen für Footer-Links */
+footer a {
+    display: inline-block;
+    padding: 0.5em 0.8em;
+    margin: 0.3em 0.2em;
+    min-height: 44px;
+    min-width: 44px;
+    line-height: 1.4;
+    text-decoration: none;
+    border-radius: 6px;
+    transition: background-color 0.2s, color 0.2s;
+    position: relative;
+}
+
+footer a:hover {
+    background-color: rgba(37, 99, 235, 0.1);
+    text-decoration: underline;
+}
+
+footer a:focus {
+    outline: 3px solid #facc15;
+    outline-offset: 2px;
+    background-color: rgba(37, 99, 235, 0.1);
+}
+
+/* Zusätzlicher Abstand zwischen Footer-Links */
+footer br + a {
+    margin-top: 0.5em;
+}
+
+/* Responsive Anpassungen für Footer */
+@media (max-width: 600px) {
+    footer a {
+        padding: 0.6em 1em;
+        margin: 0.4em 0.3em;
+        min-height: 48px;
+        min-width: 48px;
+    }
+}
+    </style>
     <link rel="manifest" href="/static/manifest.json">
     <meta name="theme-color" content="#2563eb">
     <script>
@@ -45,10 +546,107 @@
                 el.classList.toggle('active', i === idx);
             });
         }
+        function showHelp() {
+            const modal = document.getElementById('helpModal');
+            modal.classList.add('active');
+            document.body.style.overflow = 'hidden';
+            // Fokus auf den Schließen-Button setzen
+            setTimeout(() => {
+                document.querySelector('.modal-close').focus();
+            }, 100);
+        }
+        function hideHelp() {
+            const modal = document.getElementById('helpModal');
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+            // 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() {
-            openAccordion(parseInt("{{ active_idx|default(0) }}"));
+            // Sofortige Aktivierung der ersten Accordion-Sektion um Layout-Shifts zu vermeiden
-            // Tastatursteuerung für Accordion
+            const activeIdx = parseInt("{{ active_idx|default(0) }}");
             const headers = document.querySelectorAll('.accordion-header');
+            const panels = document.querySelectorAll('.accordion-content');
+            
+            // Sofort den aktiven Zustand setzen
+            headers.forEach((btn, i) => {
+                btn.classList.toggle('active', i === activeIdx);
+                btn.setAttribute('aria-expanded', i === activeIdx ? 'true' : 'false');
+            });
+            panels.forEach((el, i) => {
+                el.classList.toggle('active', i === activeIdx);
+            });
+            
+            // Tastatursteuerung für Accordion
             headers.forEach((header, idx) => {
                 header.addEventListener('keydown', function(e) {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -66,6 +664,21 @@
                     }
                 });
             });
+            
+            // ESC-Taste zum Schließen des Modals
+            document.addEventListener('keydown', function(e) {
+                if (e.key === 'Escape') {
+                    hideHelp();
+                    stopReading();
+                }
+            });
+            
+            // Klick außerhalb des Modals zum Schließen
+            document.getElementById('helpModal').addEventListener('click', function(e) {
+                if (e.target === this) {
+                    hideHelp();
+                }
+            });
         });
         if ('serviceWorker' in navigator) {
             window.addEventListener('load', function() {
@@ -76,23 +689,27 @@
 </head>
 <body>
     <div class="container">
+        <div class="help-button-container">
+            <button type="button" class="help-button" onclick="showHelp()" aria-label="Hilfe anzeigen" title="Hilfe anzeigen" aria-describedby="help-tooltip">?</button>
+            <div id="help-tooltip" class="help-tooltip" role="tooltip">Öffnet ein Hilfefenster mit Informationen über den Datumsrechner</div>
+        </div>
         <div style="text-align:center; margin-bottom:1.2em;">
-            <div style="font-size:1.1em; font-style:italic; color:#64748b;">Elpatrons</div>
+            <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:#353535; margin-top:0.3em;">
+            <div style="font-size:0.9em; color:#1e293b; margin-top:0.3em;">
                 Eine <em>freie</em> Web-App: barriere<em>frei</em>, werbe<em>frei</em>, tracking<em>frei</em>, lizenz<em>frei</em> und kosten<em>frei</em>.
             </div>
         </div>
         <div class="accordion">
             <div class="accordion-item">
-                <button type="button" class="accordion-header header-tage" id="accordion-header-0" aria-expanded="true" aria-controls="accordion-panel-0" role="button" tabindex="0" onclick="openAccordion(0)">
+                <button type="button" class="accordion-header header-tage active" id="accordion-header-0" aria-expanded="true" aria-controls="accordion-panel-0" role="button" tabindex="0" onclick="openAccordion(0)">
                     <span style="vertical-align:middle;display:inline-block;width:1.5em;">
                         <!-- Kalender mit Doppelpfeil -->
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="5" width="18" height="16" rx="4" fill="#fff" stroke="#2563eb" stroke-width="2"/><rect x="3" y="5" width="18" height="4" rx="2" fill="#2563eb"/><rect x="6" y="2" width="2" height="4" rx="1" fill="#2563eb"/><rect x="16" y="2" width="2" height="4" rx="1" fill="#2563eb"/><path d="M8 15h8M8 15l2-2M8 15l2 2M16 15l-2-2M16 15l-2 2" stroke="#2563eb" stroke-width="1.5" stroke-linecap="round"/></svg>
                     </span>
                     Anzahl der Tage/Werktage zwischen zwei Daten
                 </button>
-                <div class="accordion-content" id="accordion-panel-0" role="region" aria-labelledby="accordion-header-0">
+                <div class="accordion-content active" id="accordion-panel-0" role="region" aria-labelledby="accordion-header-0">
                     <form method="post">
                         <label for="start1">Startdatum:<br>
                             <span class="date-row">
@@ -110,15 +727,49 @@
                             <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 }}
+                                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 and request.form.get('bundesland')) %}
+                                <br>
+                                <span style="font-size:0.98em; color:#1e293b;">
+                                    {% if wochenendtage_anzahl is not none %}
+                                        <b>Davon sind {{ wochenendtage_anzahl }}</b> Tage Wochenendtage.
+                                    {% endif %}
+                                    {% if feiertage_anzahl is not none and request.form.get('bundesland') %}
+                                        {% if wochenendtage_anzahl is not none %}, {% endif %}
+                                        <b>{{ feiertage_anzahl }}</b> Feiertage (Mo-Fr, {{ request.form.get('bundesland') }})
+                                    {% endif %}
+                                </span>
                             {% endif %}
                         </div>
                     {% endif %}
@@ -143,7 +794,10 @@
                         <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>
@@ -166,7 +820,10 @@
                         <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>
@@ -189,7 +846,10 @@
                         <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>
@@ -217,9 +877,9 @@
                             <label for="richtung_pm_add"><input type="radio" name="richtung_pm" id="richtung_pm_add" value="add" checked> addieren</label>
                             <label for="richtung_pm_sub"><input type="radio" name="richtung_pm" id="richtung_pm_sub" value="sub"> subtrahieren</label>
                         </fieldset>
-                        <fieldset class="date-calc-row" style="border:none; padding:0;">
+                        <fieldset style="display:flex; align-items:center; gap:0.5em; margin-top:0.7em; border:none; padding:0;">
                             <legend class="sr-only">Einheit und Werktage</legend>
-                            <label for="einheit_pm">Einheit:
+                            <label for="einheit_pm" style="margin:0;">Einheit:
                                 <select name="einheit_pm" id="einheit_pm">
                                     <option value="tage">Tage</option>
                                     <option value="wochen">Wochen</option>
@@ -227,21 +887,90 @@
                                 </select>
                             </label>
                             <input type="checkbox" name="werktage_pm" id="werktage_pm">
-                            <label for="werktage_pm" style="margin-left:1em;">Nur Werktage</label>
+                            <label for="werktage_pm" style="margin:0;">Nur Werktage</label>
                         </fieldset>
                         <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>
         </div>
     </div>
-    <footer style="text-align:center; margin-top:2em; color:#64748b; 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:#2563eb; text-decoration:underline;">Open Source Datumsrechner</a><br>
+    <!-- Help Modal Overlay -->
-        <a href="/api-docs" target="_blank" style="color:#2563eb; text-decoration:underline;">REST API Dokumentation (Swagger)</a><br>
+    <div id="helpModal" class="modal-overlay" role="dialog" aria-labelledby="help-title" aria-describedby="help-content">
-        © 2025 <a href="mailto:elpatron@mailbox.org?subject=Datumsrechner" style="color:#2563eb; text-decoration:underline;">M. Busche</a>
+        <div class="modal-content">
+            <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>
+            
+            <ul>
+                <li>Anzahl der Tage zwischen zwei Daten</li>
+                <li>Anzahl der Werktage zwischen zwei Daten</li>
+                <li>Anzeige des Wochentags eines Datums</li>
+                <li>Datum plus/minus X Tage</li>
+                <li>Datum plus/minus X Werktage</li>
+                <li>Datum plus/minus X Wochen/Monate</li>
+                <li>Kalenderwoche zu Datum</li>
+                <li>Start-/Enddatum einer Kalenderwoche eines Jahres</li>
+            </ul>
+            
+            <h2>Online Datumsrechner gibt es bereits in einer Vielzahl, warum also noch einer?</h2>
+            
+            <p>Aus zwei Gründen:</p>
+            
+            <ul>
+                <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.
+                    <ul>
+                        <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>
+            
+            <ul>
+                <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>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>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>
+            </ul>
+            
+            <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
+        </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>
+        <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>
+        <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

@@ -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'), {

templates/swagger.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>API-Dokumentation – Swagger UI</title>
-    <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui.css">
     <style>
         body { margin: 0; background: #f8fafc; }
         #swagger-ui { max-width: 900px; margin: 2em auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(30,41,59,0.07); }
@@ -11,7 +11,7 @@
 </head>
 <body>
     <div id="swagger-ui"></div>
-    <script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5.9.0/swagger-ui-bundle.js"></script>
     <script>
         window.onload = function() {
             SwaggerUIBundle({