new file: .dockerignore

new file:   Dockerfile
	new file:   __pycache__/app.cpython-310.pyc
	new file:   app.py
	new file:   requirements.txt
	new file:   static/css/style.css
	new file:   templates/base.html
	new file:   templates/index.html
	new file:   templates/weather.html

.dockerignore

@@ -0,0 +1,14 @@
+__pycache__/
+*.py[cod]
+*.egg-info/
+.env
+.env.*
+.venv/
+venv/
+*.log
+.git/
+.gitignore
+.github/
+*.md
+.DS_Store
+Thumbs.db

Dockerfile

@@ -0,0 +1,33 @@
+# DWD Wetter
+FROM python:3.11-slim
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends curl \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 5000
+
+ENV PYTHONUNBUFFERED=1
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+
+# Non-root user
+RUN useradd -m -u 1000 appuser && chown -R appuser:appuser /app
+USER appuser
+
+# 4 workers, 120s timeout (DWD requests can be slow)
+CMD ["gunicorn", \
+     "--bind", "0.0.0.0:5000", \
+     "--workers", "4", \
+     "--timeout", "120", \
+     "--keep-alive", "5", \
+     "--access-logfile", "-", \
+     "--error-logfile", "-", \
+     "app:app"]
+

app.py

@@ -0,0 +1,286 @@
+# -*- coding: utf-8 -*-
+from flask import Flask, render_template, request, jsonify
+from geopy.geocoders import Nominatim
+from geopy.exc import GeocoderTimedOut
+import math
+import traceback
+import pandas as pd
+
+from wetterdienst.provider.dwd.mosmix import DwdMosmixRequest
+
+app = Flask(__name__)
+
+# ── Parameter (wetterdienst ≥ 0.100, Format: resolution/dataset/parameter) ───
+MOSMIX_PARAMS = [
+    "hourly/small/temperature_air_mean_2m",
+    "hourly/small/wind_speed",
+    "hourly/small/wind_direction",
+    "hourly/small/wind_gust_max_last_1h",
+    "hourly/small/cloud_cover_total",
+    "hourly/small/pressure_air_site_reduced",
+    "hourly/small/precipitation_height_significant_weather_last_1h",
+    "hourly/small/sunshine_duration",
+    "hourly/large/precipitation_height_last_1h",
+    "hourly/large/probability_precipitation_height_gt_0_1mm_last_1h",
+]
+
+# ── Hilfsfunktionen ──────────────────────────────────────────────────────────
+
+def geocode_location(query: str):
+    geolocator = Nominatim(user_agent="dwd-wetter-app/1.0")
+    try:
+        loc = geolocator.geocode(query, language="de", timeout=10)
+        if loc:
+            return loc.latitude, loc.longitude, loc.address
+    except GeocoderTimedOut:
+        pass
+    return None, None, None
+
+
+def haversine(lat1, lon1, lat2, lon2):
+    R = 6371
+    dlat = math.radians(lat2 - lat1)
+    dlon = math.radians(lon2 - lon1)
+    a = (math.sin(dlat / 2) ** 2
+         + math.cos(math.radians(lat1)) * math.cos(math.radians(lat2))
+         * math.sin(dlon / 2) ** 2)
+    return R * 2 * math.atan2(math.sqrt(a), math.sqrt(1 - a))
+
+
+def _isnan(v):
+    try:
+        return math.isnan(float(v))
+    except (TypeError, ValueError):
+        return True
+
+
+def _round_temp(k):
+    """Wetterdienst gives temperature already in degC."""
+    if k is None or _isnan(k):
+        return None
+    return round(float(k), 1)
+
+
+def get_mosmix_forecast(lat, lon, hours=72):
+    """Holt MOSMIX-Vorhersage für die nächsten Stunden."""
+    try:
+        req = DwdMosmixRequest(parameters=MOSMIX_PARAMS)
+        nearest = req.filter_by_rank(latlon=(lat, lon), rank=1)
+        result = nearest.values.all()
+        df = result.df
+
+        if df is None or (hasattr(df, "__len__") and len(df) == 0):
+            return [], {}
+
+        # Polars → Pandas
+        if hasattr(df, "to_pandas"):
+            df = df.to_pandas()
+
+        station_info = {}
+        sdf = nearest.df
+        if sdf is not None and len(sdf) > 0:
+            if hasattr(sdf, "to_pandas"):
+                sdf = sdf.to_pandas()
+            station_info = sdf.iloc[0].to_dict()
+
+        df = df.sort_values("date").copy()
+
+        # Auf die nächsten `hours` Stunden begrenzen
+        min_date = df["date"].min()
+        cutoff = min_date + pd.Timedelta(hours=hours)
+        df = df[df["date"] <= cutoff]
+
+        forecast = []
+        for date_val, group in df.groupby("date"):
+            params = {row["parameter"]: row["value"] for _, row in group.iterrows()}
+
+            temp_c     = _round_temp(params.get("temperature_air_mean_2m"))
+            ff         = params.get("wind_speed")
+            wind_kmh   = round(float(ff) * 3.6, 1) if not _isnan(ff) else None
+            fx1        = params.get("wind_gust_max_last_1h")
+            gust_kmh   = round(float(fx1) * 3.6, 1) if not _isnan(fx1) else None
+            pppp       = params.get("pressure_air_site_reduced")
+            pressure   = round(float(pppp), 1) if not _isnan(pppp) else None
+            # Niederschlag: rr1c (significant) oder rr1 (gesamt) als Fallback
+            rr1c   = params.get("precipitation_height_significant_weather_last_1h")
+            rr1    = params.get("precipitation_height_last_1h")
+            precip_raw = rr1c if not _isnan(rr1c) else (rr1 if not _isnan(rr1) else None)
+            precip = round(float(precip_raw), 1) if precip_raw is not None else 0.0
+
+            # Regenwahrscheinlichkeit
+            rprob_raw = params.get("probability_precipitation_height_gt_0_1mm_last_1h")
+            rain_prob = round(float(rprob_raw)) if not _isnan(rprob_raw) else None
+
+            n          = params.get("cloud_cover_total")
+            clouds     = round(float(n)) if not _isnan(n) else None
+            sun        = params.get("sunshine_duration")
+            sun_min    = round(float(sun) / 60) if not _isnan(sun) else 0
+            wind_dir_v = params.get("wind_direction")
+            wind_dir   = float(wind_dir_v) if not _isnan(wind_dir_v) else None
+
+            forecast.append({
+                "datetime":     date_val,
+                "temp_c":       temp_c,
+                "wind_kmh":     wind_kmh,
+                "gust_kmh":     gust_kmh,
+                "pressure_hpa": pressure,
+                "precip_mm":    precip,
+                "rain_prob":    rain_prob,
+                "cloud_pct":    clouds,
+                "sun_min":      sun_min,
+                "wind_dir":     wind_dir,
+                "icon":         weather_icon(clouds, precip, rain_prob, temp_c),
+            })
+
+        return forecast, station_info
+    except Exception:
+        traceback.print_exc()
+        return [], {}
+
+
+def wind_direction_name(degrees):
+    if degrees is None or _isnan(degrees):
+        return "–"
+    dirs = ["N", "NNO", "NO", "ONO", "O", "OSO", "SO", "SSO",
+            "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"]
+    idx = round(float(degrees) / 22.5) % 16
+    return dirs[idx]
+
+
+def weather_icon(cloud_pct, precip_mm, rain_prob, temp_c):
+    # Schnee
+    if temp_c is not None and temp_c <= 0 and (precip_mm and precip_mm > 0 or rain_prob and rain_prob >= 40):
+        return "❄️"
+    # Regen (tatsächlicher Niederschlag)
+    if precip_mm and precip_mm > 0.2:
+        return "🌧️"
+    # Hohe Regenwahrscheinlichkeit
+    if rain_prob is not None and rain_prob >= 60:
+        return "🌦️"
+    if rain_prob is not None and rain_prob >= 30:
+        if cloud_pct is not None and cloud_pct > 50:
+            return "🌦️"
+    if cloud_pct is not None:
+        if cloud_pct > 80:
+            return "☁️"
+        if cloud_pct > 35:
+            return "⛅"
+    return "☀️"
+
+
+# ── Routen ───────────────────────────────────────────────────────────────────
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/wetter", methods=["GET"])
+def wetter():
+    ort = request.args.get("ort", "").strip()
+    if not ort:
+        return render_template("index.html", error="Bitte einen Ort eingeben.")
+
+    lat, lon, display_name = geocode_location(ort)
+    if lat is None:
+        return render_template("index.html",
+                               error=f'Ort "{ort}" konnte nicht gefunden werden.')
+
+    forecast, mosmix_station = get_mosmix_forecast(lat, lon, hours=72)
+
+    if not forecast:
+        return render_template(
+            "index.html",
+            error="Keine Wetterdaten von DWD verfügbar. Bitte später erneut versuchen.",
+        )
+
+    station_name = mosmix_station.get("name", ort)
+    station_id   = mosmix_station.get("station_id", "–")
+    station_lat  = float(mosmix_station.get("latitude", lat))
+    station_lon  = float(mosmix_station.get("longitude", lon))
+    station_dist = round(haversine(lat, lon, station_lat, station_lon), 1)
+
+    current = forecast[0]
+
+    # Tageszusammenfassung
+    daily = {}
+    for h in forecast:
+        dt  = h["datetime"]
+        day = dt.date() if hasattr(dt, "date") else str(dt)[:10]
+        if day not in daily:
+            daily[day] = {"temps": [], "precip": 0.0, "cloud": [], "wind": [], "icons": [], "rain_prob": []}
+        if h["temp_c"] is not None:
+            daily[day]["temps"].append(h["temp_c"])
+        daily[day]["precip"] += h.get("precip_mm") or 0
+        if h["cloud_pct"] is not None:
+            daily[day]["cloud"].append(h["cloud_pct"])
+        if h["wind_kmh"] is not None:
+            daily[day]["wind"].append(h["wind_kmh"])
+        if h.get("rain_prob") is not None:
+            daily[day]["rain_prob"].append(h["rain_prob"])
+        daily[day]["icons"].append(h["icon"])
+
+    daily_summary = []
+    for day, d in daily.items():
+        daily_summary.append({
+            "date":      day,
+            "temp_min":  min(d["temps"]) if d["temps"] else None,
+            "temp_max":  max(d["temps"]) if d["temps"] else None,
+            "precip":    round(d["precip"], 1),
+            "rain_prob": max(d["rain_prob"]) if d["rain_prob"] else None,
+            "cloud":     round(sum(d["cloud"]) / len(d["cloud"])) if d["cloud"] else None,
+            "wind_max":  max(d["wind"]) if d["wind"] else None,
+            "icon":      max(set(d["icons"]), key=d["icons"].count),
+        })
+
+    # Chart-Daten (erste 48 h)
+    chart_labels, chart_temps, chart_precip = [], [], []
+    for h in forecast[:48]:
+        dt    = h["datetime"]
+        label = (dt.strftime("%d.%m %H:%M") if hasattr(dt, "strftime")
+                 else str(dt)[5:16])
+        chart_labels.append(label)
+        chart_temps.append(h["temp_c"])
+        chart_precip.append(h.get("precip_mm") or 0)
+
+    return render_template(
+        "weather.html",
+        ort=ort,
+        display_name=display_name,
+        lat=lat,
+        lon=lon,
+        station_name=station_name,
+        station_id=station_id,
+        station_dist=station_dist,
+        current=current,
+        forecast=forecast[:48],
+        daily=daily_summary,
+        chart_labels=chart_labels,
+        chart_temps=chart_temps,
+        chart_precip=chart_precip,
+        wind_dir_name=wind_direction_name,
+    )
+
+
+@app.route("/api/suggest")
+def suggest():
+    q = request.args.get("q", "").strip()
+    if len(q) < 2:
+        return jsonify([])
+    geolocator = Nominatim(user_agent="dwd-wetter-app/1.0")
+    try:
+        results = geolocator.geocode(
+            q, exactly_one=False, limit=5, language="de",
+            addressdetails=True, timeout=5,
+        )
+        return jsonify(
+            [{"name": r.address, "lat": r.latitude, "lon": r.longitude}
+             for r in results]
+            if results else []
+        )
+    except Exception:
+        return jsonify([])
+
+
+if __name__ == "__main__":
+    app.run(debug=True, host="0.0.0.0", port=5000)

requirements.txt

@@ -0,0 +1,7 @@
+flask>=3.0.0
+wetterdienst>=0.90.0
+geopy>=2.4.0
+pandas>=2.0.0
+numpy>=1.24.0
+requests>=2.31.0
+gunicorn>=21.2.0

static/css/style.css

@@ -0,0 +1,478 @@
+/* ═══════════════════════════════════════════════════════════
+   BASE
+═══════════════════════════════════════════════════════════ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg:       #08090d;
+  --bg1:      #0f1117;
+  --bg2:      #161b25;
+  --glass:    rgba(255,255,255,0.035);
+  --glass-b:  rgba(255,255,255,0.07);
+  --text:     #e8edf5;
+  --muted:    #5a6a7a;
+  --muted2:   #9aa8b8;
+  --orange:   #ff8c32;
+  --blue:     #50b4ff;
+  --green:    #34d399;
+  --r:        14px;
+  --nav-h:    56px;
+}
+
+html { scroll-behavior: smooth; }
+body {
+  font-family: "Inter", system-ui, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+}
+a { color: var(--blue); text-decoration: none; }
+a:hover { text-decoration: underline; }
+main { flex: 1; }
+
+/* ═══════════════════════════════════════════════════════════
+   NAV
+═══════════════════════════════════════════════════════════ */
+.nav {
+  position: sticky; top: 0; z-index: 100;
+  height: var(--nav-h);
+  display: flex; align-items: center; gap: 1rem;
+  padding: 0 1.5rem;
+  background: rgba(8,9,13,0.85);
+  backdrop-filter: blur(18px);
+  border-bottom: 1px solid rgba(255,255,255,0.06);
+}
+
+.nav-logo {
+  font-weight: 900; font-size: 1.1rem;
+  color: var(--text); letter-spacing: -0.5px;
+  flex-shrink: 0; text-decoration: none;
+}
+.nav-logo span { color: var(--orange); }
+
+.nav-search { flex: 1; max-width: 420px; margin-left: auto; }
+.nav-search-wrap { position: relative; display: flex; align-items: center; }
+.nav-search-icon {
+  position: absolute; left: 10px; width: 16px; height: 16px;
+  color: var(--muted); pointer-events: none;
+}
+.nav-search input {
+  width: 100%; padding: 0.45rem 0.9rem 0.45rem 2.2rem;
+  background: var(--bg2); border: 1px solid rgba(255,255,255,0.07);
+  border-radius: 8px; color: var(--text); font: inherit; font-size: 0.9rem;
+  outline: none; transition: border-color 0.2s;
+}
+.nav-search input:focus { border-color: var(--orange); }
+
+/* ═══════════════════════════════════════════════════════════
+   AUTOCOMPLETE
+═══════════════════════════════════════════════════════════ */
+.ac-list {
+  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
+  background: var(--bg2); border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 10px; list-style: none;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.6); z-index: 999; overflow: hidden;
+}
+.ac-list[hidden] { display: none; }
+.ac-list li {
+  padding: 0.6rem 1rem; font-size: 0.875rem; cursor: pointer;
+  color: var(--muted2); border-bottom: 1px solid rgba(255,255,255,0.05);
+  transition: background 0.12s, color 0.12s;
+}
+.ac-list li:last-child { border-bottom: none; }
+.ac-list li:hover { background: var(--glass); color: var(--text); }
+
+/* ═══════════════════════════════════════════════════════════
+   FOOTER
+═══════════════════════════════════════════════════════════ */
+.footer {
+  text-align: center; padding: 2rem 1rem;
+  font-size: 0.78rem; color: var(--muted);
+  border-top: 1px solid rgba(255,255,255,0.05);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   HOME PAGE
+═══════════════════════════════════════════════════════════ */
+.home-wrap {
+  min-height: calc(100vh - var(--nav-h));
+  display: flex; align-items: center; justify-content: center;
+  position: relative; overflow: hidden;
+  padding: 4rem 1.5rem;
+}
+
+/* Giant muted "WETTER" behind everything */
+.home-bg-text {
+  position: absolute;
+  font-size: clamp(7rem, 22vw, 20rem);
+  font-weight: 900;
+  color: rgba(255,255,255,0.018);
+  letter-spacing: -0.05em;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+}
+
+.home-center { position: relative; z-index: 1; max-width: 620px; width: 100%; }
+
+.home-eyebrow {
+  font-size: 0.72rem; font-weight: 600;
+  letter-spacing: 1.5px; text-transform: uppercase;
+  color: var(--orange); margin-bottom: 1rem;
+}
+
+.home-title {
+  font-size: clamp(2.2rem, 6vw, 4rem);
+  font-weight: 900; line-height: 1.05;
+  letter-spacing: -0.03em;
+  margin-bottom: 2.5rem;
+}
+
+.home-form { display: flex; flex-direction: column; gap: 0.8rem; }
+
+.home-input-wrap { position: relative; }
+.home-search-icon {
+  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
+  width: 20px; height: 20px; color: var(--muted); pointer-events: none;
+}
+.home-input-wrap input {
+  width: 100%;
+  padding: 1rem 1.2rem 1rem 3rem;
+  font: inherit; font-size: 1.05rem;
+  background: var(--bg2);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: var(--r);
+  color: var(--text); outline: none;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+.home-input-wrap input:focus {
+  border-color: var(--orange);
+  box-shadow: 0 0 0 3px rgba(255,140,50,0.15);
+}
+
+.home-btn {
+  align-self: flex-start;
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.85rem 1.8rem;
+  background: var(--orange); color: #000;
+  font: inherit; font-weight: 700; font-size: 1rem;
+  border: none; border-radius: var(--r); cursor: pointer;
+  transition: background 0.15s, transform 0.1s;
+}
+.home-btn svg { width: 16px; height: 16px; }
+.home-btn:hover { background: #ffaa5e; }
+.home-btn:active { transform: scale(0.97); }
+
+.home-error {
+  margin-top: 1rem;
+  padding: 0.75rem 1rem;
+  background: rgba(255,80,80,0.1);
+  border: 1px solid rgba(255,80,80,0.3);
+  border-radius: var(--r); font-size: 0.9rem; color: #ff6b6b;
+}
+
+.home-chips {
+  display: flex; flex-wrap: wrap; gap: 0.5rem;
+  margin-top: 2rem; align-items: center;
+}
+.chip {
+  padding: 0.3rem 0.85rem;
+  background: var(--glass); border: 1px solid var(--glass-b);
+  border-radius: 99px; font-size: 0.82rem; color: var(--muted2);
+  transition: all 0.15s; white-space: nowrap;
+}
+.chip:hover { background: rgba(255,140,50,0.1); border-color: rgba(255,140,50,0.3); color: var(--orange); text-decoration: none; }
+
+/* Decorative weather art */
+.home-deco {
+  position: absolute; right: -4rem; top: 50%;
+  transform: translateY(-50%);
+  width: clamp(200px, 35vw, 480px);
+  height: clamp(200px, 35vw, 480px);
+  pointer-events: none; user-select: none;
+}
+.deco-sun {
+  position: absolute;
+  width: 55%; height: 55%;
+  top: 5%; right: 10%;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(255,180,50,0.35) 0%, rgba(255,120,30,0.1) 55%, transparent 75%);
+  animation: pulse-sun 6s ease-in-out infinite;
+}
+@keyframes pulse-sun {
+  0%,100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.08); opacity: 0.8; }
+}
+.deco-cloud {
+  position: absolute;
+  background: rgba(255,255,255,0.04);
+  border-radius: 99px;
+}
+.deco-cloud::before, .deco-cloud::after {
+  content: ""; position: absolute;
+  background: inherit; border-radius: 50%;
+}
+.c1 { width: 48%; height: 18%; bottom: 28%; left: 10%; animation: drift 14s ease-in-out infinite; }
+.c1::before { width: 55%; height: 200%; top: -80%; left: 20%; }
+.c1::after  { width: 35%; height: 160%; top: -60%; left: 55%; }
+.c2 { width: 36%; height: 14%; bottom: 18%; left: 35%; opacity: 0.6; animation: drift 18s 3s ease-in-out infinite reverse; }
+.c2::before { width: 50%; height: 200%; top: -70%; left: 15%; }
+.c2::after  { width: 30%; height: 160%; top: -55%; left: 55%; }
+@keyframes drift {
+  0%,100% { transform: translateX(0); }
+  50% { transform: translateX(10px); }
+}
+.deco-rain {
+  position: absolute; bottom: 10%; left: 15%;
+  width: 70%; height: 30%;
+  display: flex; gap: 0.4rem; align-items: flex-start;
+}
+.deco-rain span {
+  flex: 1; height: 60%; min-height: 20px;
+  background: linear-gradient(to bottom, rgba(80,180,255,0.3), transparent);
+  border-radius: 99px;
+  animation: rain 2.2s ease-in-out infinite;
+}
+.deco-rain span:nth-child(2n)   { animation-delay: 0.4s; height: 40%; }
+.deco-rain span:nth-child(3n)   { animation-delay: 0.8s; height: 70%; }
+.deco-rain span:nth-child(4n)   { animation-delay: 1.2s; height: 50%; }
+.deco-rain span:nth-child(5n)   { animation-delay: 0.2s; height: 35%; }
+@keyframes rain {
+  0%,100% { opacity: 0.6; transform: scaleY(1); }
+  50% { opacity: 0.2; transform: scaleY(0.6); }
+}
+
+/* ═══════════════════════════════════════════════════════════
+   WEATHER PAGE – HERO
+═══════════════════════════════════════════════════════════ */
+.hero {
+  position: relative; overflow: hidden;
+  padding: 3rem 2rem 1.5rem;
+}
+
+/* Weather-condition gradients */
+.w-clear    { background: linear-gradient(135deg, #1a0f05 0%, #2d1a08 50%, #0f0d12 100%); }
+.w-partcloud{ background: linear-gradient(135deg, #0d1520 0%, #1a2535 60%, #0a0d14 100%); }
+.w-cloudy   { background: linear-gradient(135deg, #0e1218 0%, #1c262e 60%, #0a0c10 100%); }
+.w-rain     { background: linear-gradient(135deg, #050d18 0%, #0d2035 60%, #080c12 100%); }
+.w-snow     { background: linear-gradient(135deg, #0d1520 0%, #162035 60%, #0a0d12 100%); }
+
+.hero::before {
+  content: "";
+  position: absolute; inset: 0;
+  background: radial-gradient(ellipse 70% 70% at 80% 20%, rgba(255,255,255,0.03) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.hero-inner { max-width: 1000px; margin: 0 auto; }
+
+.hero-meta {
+  display: flex; align-items: center; gap: 0.5rem;
+  font-size: 0.85rem; color: var(--muted2); margin-bottom: 1.5rem;
+  font-weight: 500;
+}
+.hero-meta svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--orange); }
+.hero-meta-sub { color: var(--muted); font-weight: 400; }
+
+.hero-main {
+  display: flex; align-items: flex-start; gap: 2rem;
+  margin-bottom: 2rem; flex-wrap: wrap;
+}
+
+.hero-temp {
+  font-size: clamp(4.5rem, 12vw, 8rem);
+  font-weight: 900; line-height: 0.9;
+  letter-spacing: -0.04em;
+  color: var(--text);
+}
+
+.hero-desc {
+  display: flex; flex-direction: column;
+  justify-content: flex-end; padding-bottom: 0.6rem;
+}
+.hero-icon-big { font-size: 3rem; line-height: 1; margin-bottom: 0.4rem; }
+.hero-stats-mini { display: flex; flex-direction: column; gap: 0.2rem; }
+.hero-stats-mini span { font-size: 0.85rem; color: var(--muted2); }
+
+.hero-metrics {
+  display: flex; gap: 0; flex-wrap: wrap;
+  border: 1px solid rgba(255,255,255,0.08);
+  border-radius: var(--r); overflow: hidden;
+}
+.hero-metric {
+  flex: 1; min-width: 100px;
+  padding: 0.9rem 1.2rem;
+  display: flex; flex-direction: column; gap: 0.2rem;
+  border-right: 1px solid rgba(255,255,255,0.07);
+  background: rgba(255,255,255,0.025);
+}
+.hero-metric:last-child { border-right: none; }
+.hm-val   { font-size: 1.05rem; font-weight: 600; }
+.hm-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }
+
+.hero-station {
+  max-width: 1000px; margin: 1.5rem auto 0;
+  font-size: 0.75rem; color: var(--muted);
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding-top: 1rem;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   SECTIONS
+═══════════════════════════════════════════════════════════ */
+.section {
+  max-width: 1000px; margin: 0 auto;
+  padding: 2.5rem 2rem 0;
+}
+
+.section-title {
+  font-size: 0.68rem; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 1.4px;
+  color: var(--muted); margin-bottom: 1.2rem;
+}
+
+.data-note {
+  max-width: 1000px; margin: 2.5rem auto 0;
+  padding: 1.5rem 2rem;
+  font-size: 0.75rem; color: var(--muted);
+}
+
+/* ═══════════════════════════════════════════════════════════
+   HOURLY STRIP
+═══════════════════════════════════════════════════════════ */
+.hourly-strip-wrap {
+  overflow-x: auto;
+  padding-bottom: 0.75rem;
+  /* hide scrollbar but keep functionality */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,255,255,0.1) transparent;
+}
+.hourly-strip-wrap::-webkit-scrollbar { height: 4px; }
+.hourly-strip-wrap::-webkit-scrollbar-track { background: transparent; }
+.hourly-strip-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
+
+.hourly-strip {
+  display: flex; gap: 0.5rem;
+  min-width: max-content; padding: 0.25rem 0;
+}
+
+.hcard {
+  display: flex; flex-direction: column;
+  align-items: center; gap: 0.3rem;
+  padding: 0.8rem 0.9rem;
+  background: var(--glass);
+  border: 1px solid var(--glass-b);
+  border-radius: 12px;
+  min-width: 72px;
+  transition: background 0.12s;
+}
+.hcard:hover { background: rgba(255,255,255,0.065); }
+.hcard--now {
+  background: rgba(255,140,50,0.12);
+  border-color: rgba(255,140,50,0.3);
+}
+
+.hcard-time { font-size: 0.85rem; font-weight: 600; color: var(--text); }
+.hcard-date { font-size: 0.68rem; color: var(--muted); margin-top: -0.15rem; }
+.hcard-icon { font-size: 1.4rem; line-height: 1; margin: 0.2rem 0; }
+.hcard-temp { font-size: 1rem; font-weight: 700; }
+.hcard-precip      { font-size: 0.7rem; color: var(--blue); font-weight: 500; }
+.hcard-precip--none { color: var(--muted); font-weight: 400; }
+.hcard-precip--prob { color: #7dd3fc; font-weight: 500; }
+.hcard-wind { font-size: 0.72rem; color: var(--muted2); }
+.hcard-wind small { font-size: 0.62rem; color: var(--muted); }
+
+/* ═══════════════════════════════════════════════════════════
+   CHART
+═══════════════════════════════════════════════════════════ */
+.chart-head {
+  display: flex; align-items: baseline; gap: 0.75rem;
+  margin-bottom: 1.2rem;
+}
+.chart-range {
+  font-size: 0.7rem; font-weight: 600;
+  background: rgba(255,140,50,0.12);
+  color: var(--orange); border-radius: 99px;
+  padding: 0.15rem 0.6rem; letter-spacing: 0.3px;
+}
+.chart-head .section-title { margin-bottom: 0; }
+
+.chart-box {
+  height: 300px;
+  background: var(--glass);
+  border: 1px solid var(--glass-b);
+  border-radius: var(--r);
+  padding: 1.25rem 1rem 0.75rem;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   DAILY LIST
+═══════════════════════════════════════════════════════════ */
+.daily-list {
+  display: flex; flex-direction: column;
+  border: 1px solid rgba(255,255,255,0.07);
+  border-radius: var(--r); overflow: hidden;
+}
+
+.drow {
+  display: grid;
+  grid-template-columns: 80px 1fr 160px;
+  align-items: center;
+  padding: 0.9rem 1.2rem;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+  gap: 1rem;
+  background: var(--glass);
+  transition: background 0.12s;
+}
+.drow:last-child { border-bottom: none; }
+.drow:hover { background: rgba(255,255,255,0.05); }
+
+.drow-left { display: flex; align-items: center; gap: 0.6rem; }
+.drow-icon { font-size: 1.4rem; flex-shrink: 0; }
+.drow-dow  { font-size: 0.875rem; font-weight: 600; color: var(--text); }
+
+.drow-bar-wrap { position: relative; }
+.drow-bar-track {
+  height: 6px; background: rgba(255,255,255,0.08);
+  border-radius: 99px; position: relative; overflow: hidden;
+}
+.drow-bar {
+  position: absolute; top: 0; height: 100%;
+  background: linear-gradient(90deg, var(--blue), var(--orange));
+  border-radius: 99px;
+  min-width: 12px;
+}
+
+.drow-right {
+  display: flex; align-items: center;
+  gap: 0.5rem; justify-content: flex-end;
+  font-size: 0.875rem; font-weight: 600;
+}
+.drow-min   { color: var(--blue); }
+.drow-max   { color: var(--orange); }
+.drow-precip { font-size: 0.72rem; color: var(--muted2); font-weight: 400; margin-left: 0.4rem; }
+
+/* ═══════════════════════════════════════════════════════════
+   RESPONSIVE
+═══════════════════════════════════════════════════════════ */
+@media (max-width: 640px) {
+  .hero { padding: 2rem 1.25rem 1.25rem; }
+  .section { padding: 2rem 1.25rem 0; }
+  .drow { grid-template-columns: 64px 1fr 120px; padding: 0.75rem 0.9rem; gap: 0.6rem; }
+  .hero-metrics { border-radius: 10px; }
+  .hero-metric { padding: 0.7rem 0.9rem; min-width: 80px; }
+  .hm-val { font-size: 0.95rem; }
+  .home-deco { display: none; }
+  .home-title { font-size: 2.2rem; }
+  .chart-box { height: 220px; }
+}
+
+@media (max-width: 400px) {
+  .drow-right { flex-wrap: wrap; justify-content: flex-end; }
+  .drow-precip { display: none; }
+}

templates/base.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>{% block title %}Wetter{% endblock %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}?v=2"/>
+  {% block head %}{% endblock %}
+</head>
+<body>
+<nav class="nav">
+  <a href="/" class="nav-logo">DWD<span>Wetter</span></a>
+  <form class="nav-search" action="/wetter" method="get" autocomplete="off">
+    <div class="nav-search-wrap">
+      <svg class="nav-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
+      <input type="text" name="ort" id="nav-ort" placeholder="Ort suchen …" value="{{ request.args.get('ort','') }}"/>
+      <ul class="ac-list" id="nav-ac"></ul>
+    </div>
+  </form>
+</nav>
+
+<main>{% block content %}{% endblock %}</main>
+
+<footer class="footer">
+  Daten: <a href="https://opendata.dwd.de" target="_blank">Deutscher Wetterdienst – Open Data</a>
+</footer>
+
+<script>
+function setupAC(input, list) {
+  if (!input || !list) return;
+  let t;
+  input.addEventListener("input", () => {
+    clearTimeout(t);
+    const q = input.value.trim();
+    if (q.length < 2) { list.hidden = true; list.innerHTML = ""; return; }
+    t = setTimeout(async () => {
+      const r = await fetch(`/api/suggest?q=${encodeURIComponent(q)}`);
+      const data = await r.json();
+      list.innerHTML = "";
+      if (!data.length) { list.hidden = true; return; }
+      data.forEach(item => {
+        const li = document.createElement("li");
+        li.textContent = item.name;
+        li.addEventListener("click", () => {
+          input.value = item.name;
+          list.hidden = true;
+          input.closest("form").submit();
+        });
+        list.appendChild(li);
+      });
+      list.hidden = false;
+    }, 220);
+  });
+  document.addEventListener("click", e => { if (!list.contains(e.target) && e.target !== input) list.hidden = true; });
+}
+setupAC(document.getElementById("nav-ort"), document.getElementById("nav-ac"));
+window.setupAC = setupAC;
+</script>
+{% block scripts %}{% endblock %}
+</body>
+</html>

templates/index.html

@@ -0,0 +1,48 @@
+{% extends "base.html" %}
+{% block title %}DWD Wetter{% endblock %}
+
+{% block content %}
+<div class="home-wrap">
+  <div class="home-bg-text" aria-hidden="true">WETTER</div>
+
+  <div class="home-center">
+    <p class="home-eyebrow">Deutscher Wetterdienst · Open Data</p>
+    <h1 class="home-title">Wo willst du<br>das Wetter wissen?</h1>
+
+    <form class="home-form" action="/wetter" method="get" autocomplete="off">
+      <div class="home-input-wrap">
+        <svg class="home-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+        </svg>
+        <input type="text" name="ort" id="home-ort" placeholder="Stadt, Gemeinde oder PLZ …" required autofocus/>
+        <ul class="ac-list" id="home-ac"></ul>
+      </div>
+      <button type="submit" class="home-btn">
+        Abrufen
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+      </button>
+    </form>
+
+    {% if error %}<p class="home-error">{{ error }}</p>{% endif %}
+
+    <div class="home-chips">
+      {% for city in ["Berlin","Hamburg","München","Köln","Frankfurt","Dresden","Düsseldorf","Stuttgart"] %}
+      <a href="/wetter?ort={{ city }}" class="chip">{{ city }}</a>
+      {% endfor %}
+    </div>
+  </div>
+
+  <div class="home-deco" aria-hidden="true">
+    <div class="deco-sun"></div>
+    <div class="deco-cloud c1"></div>
+    <div class="deco-cloud c2"></div>
+    <div class="deco-rain">
+      {% for i in range(18) %}<span></span>{% endfor %}
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>setupAC(document.getElementById("home-ort"), document.getElementById("home-ac"));</script>
+{% endblock %}

templates/weather.html

@@ -0,0 +1,265 @@
+{% extends "base.html" %}
+{% block title %}{{ display_name.split(',')[0] }} – DWD Wetter{% endblock %}
+
+{% block head %}
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.2/dist/chart.umd.min.js"></script>
+{% endblock %}
+
+{% block content %}
+
+{# ── Wetterklasse für den Hero-Gradient ─────────────────────────── #}
+{% if current.icon == "🌧️" %}{% set wclass = "w-rain" %}
+{% elif current.icon == "❄️" %}{% set wclass = "w-snow" %}
+{% elif current.icon == "☁️" %}{% set wclass = "w-cloudy" %}
+{% elif current.icon == "⛅" %}{% set wclass = "w-partcloud" %}
+{% else %}{% set wclass = "w-clear" %}{% endif %}
+
+<!-- HERO -->
+<header class="hero {{ wclass }}">
+  <div class="hero-inner">
+    <div class="hero-meta">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+      {{ display_name.split(',')[0] }}
+      <span class="hero-meta-sub">{{ display_name.split(',')[1:3]|join(',') if ',' in display_name else '' }}</span>
+    </div>
+
+    <div class="hero-main">
+      <div class="hero-temp">{{ current.temp_c if current.temp_c is not none else "–" }}°</div>
+      <div class="hero-desc">
+        <div class="hero-icon-big">{{ current.icon or "☁️" }}</div>
+        <div class="hero-stats-mini">
+          {% if current.wind_kmh is not none %}
+          <span>{{ current.wind_kmh }} km/h {{ wind_dir_name(current.wind_dir) }}</span>
+          {% endif %}
+          {% if current.cloud_pct is not none %}
+          <span>{{ current.cloud_pct }}% Bedeckung</span>
+          {% endif %}
+          {% if current.pressure_hpa is not none %}
+          <span>{{ current.pressure_hpa }} hPa</span>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+
+    <div class="hero-metrics">
+      {% set items = [
+        ("Gefühlt wie", (current.temp_c|string + " °C") if current.temp_c is not none else "–"),
+        ("Böen", (current.gust_kmh|string + " km/h") if current.gust_kmh is not none else "–"),
+        ("Niederschlag", (current.precip_mm|string + " mm") if current.precip_mm is not none else "0 mm"),
+        ("Sonne", (current.sun_min|string + " min/h") if current.sun_min is not none else "–"),
+      ] %}
+      {% for label, val in items %}
+      <div class="hero-metric">
+        <span class="hm-val">{{ val }}</span>
+        <span class="hm-label">{{ label }}</span>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  <div class="hero-station">
+    📡 Station <strong>{{ station_name }}</strong> ({{ station_dist }} km) · ID {{ station_id }}
+  </div>
+</header>
+
+<!-- STÜNDLICH -->
+<section class="section">
+  <h2 class="section-title">Stundenweise</h2>
+  <div class="hourly-strip-wrap">
+    <div class="hourly-strip">
+      {% for h in forecast %}
+      <div class="hcard {% if loop.first %}hcard--now{% endif %}">
+        <div class="hcard-time">
+          {% if h.datetime is string %}{{ h.datetime[11:16] }}
+          {% else %}{{ h.datetime.strftime('%H:%M') }}{% endif %}
+        </div>
+        <div class="hcard-date">
+          {% if h.datetime is string %}{{ h.datetime[8:10] }}.{{ h.datetime[5:7] }}.
+          {% else %}{{ h.datetime.strftime('%d.%m.') }}{% endif %}
+        </div>
+        <div class="hcard-icon">{{ h.icon }}</div>
+        <div class="hcard-temp">
+          {% if h.temp_c is not none %}{{ h.temp_c }}°{% else %}–{% endif %}
+        </div>
+        {% if h.precip_mm and h.precip_mm > 0 %}
+        <div class="hcard-precip">{{ h.precip_mm }} mm</div>
+        {% elif h.rain_prob is not none and h.rain_prob > 0 %}
+        <div class="hcard-precip hcard-precip--prob">{{ h.rain_prob }}%</div>
+        {% else %}
+        <div class="hcard-precip hcard-precip--none">–</div>
+        {% endif %}
+        {% if h.wind_kmh is not none %}
+        <div class="hcard-wind">{{ h.wind_kmh }}<small>km/h</small></div>
+        {% endif %}
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+<!-- CHART -->
+<section class="section">
+  <div class="chart-head">
+    <h2 class="section-title">Temperatur &amp; Niederschlag</h2>
+    <span class="chart-range">48 Stunden</span>
+  </div>
+  <div class="chart-box">
+    <canvas id="wxChart"></canvas>
+  </div>
+</section>
+
+<!-- TAGESÜBERSICHT -->
+<section class="section">
+  <h2 class="section-title">Tagesübersicht</h2>
+  <div class="daily-list">
+    {# calc global min/max for bar scaling – do it in a loop to stay Jinja2-safe #}
+    {% set ns = namespace(g_min=99, g_max=-99) %}
+    {% for d in daily %}
+      {% if d.temp_min is not none and d.temp_min < ns.g_min %}{% set ns.g_min = d.temp_min %}{% endif %}
+      {% if d.temp_max is not none and d.temp_max > ns.g_max %}{% set ns.g_max = d.temp_max %}{% endif %}
+    {% endfor %}
+    {% set g_min = ns.g_min %}
+    {% set g_max = ns.g_max %}
+    {% set g_range = (g_max - g_min) if (g_max - g_min) > 0 else 1 %}
+
+    {% for d in daily %}
+    <div class="drow">
+      <div class="drow-left">
+        <span class="drow-icon">{{ d.icon }}</span>
+        <div class="drow-date-wrap">
+          <span class="drow-dow">
+            {% if d.date is string %}
+              {% set y = d.date[:4]|int %}{% set mo = d.date[5:7]|int %}{% set dy = d.date[8:10]|int %}
+              {% set days = ["Mo","Di","Mi","Do","Fr","Sa","So"] %}
+              {{ dy }}.{{ d.date[5:7] }}.
+            {% else %}
+              {{ d.date.strftime('%a') }}
+            {% endif %}
+          </span>
+        </div>
+      </div>
+
+      <div class="drow-bar-wrap">
+        {% if d.temp_min is not none and d.temp_max is not none %}
+        {% set left_pct  = ((d.temp_min - g_min) / g_range * 100)|round(1) %}
+        {% set width_pct = ((d.temp_max - d.temp_min) / g_range * 100)|round(1) %}
+        <div class="drow-bar-track">
+          <div class="drow-bar" style="left:{{ left_pct }}%; width:{{ [width_pct, 4]|max }}%"></div>
+        </div>
+        {% endif %}
+      </div>
+
+      <div class="drow-right">
+        <span class="drow-min">{{ d.temp_min }}°</span>
+        <span class="drow-max">{{ d.temp_max }}°</span>
+        {% if d.precip > 0 %}
+        <span class="drow-precip">🌧 {{ d.precip }}mm</span>
+        {% elif d.rain_prob is not none and d.rain_prob > 0 %}
+        <span class="drow-precip">💧 {{ d.rain_prob }}%</span>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</section>
+
+<p class="data-note">
+  Alle Daten: <a href="https://opendata.dwd.de" target="_blank">Deutscher Wetterdienst – Open Data (MOSMIX)</a>
+</p>
+{% endblock %}
+
+{% block scripts %}
+<script>
+(function() {
+  const labels = {{ chart_labels | tojson }};
+  const temps  = {{ chart_temps  | tojson }};
+  const precip = {{ chart_precip | tojson }};
+
+  // Nur jeden 3. Label anzeigen, Rest leer lassen
+  const sparseLabels = labels.map((l, i) => i % 3 === 0 ? l : "");
+
+  const ctx = document.getElementById("wxChart").getContext("2d");
+
+  // Gradient für Temperatur-Linie
+  const grad = ctx.createLinearGradient(0, 0, 0, 300);
+  grad.addColorStop(0, "rgba(255,140,50,0.35)");
+  grad.addColorStop(1, "rgba(255,140,50,0)");
+
+  new Chart(ctx, {
+    data: {
+      labels,
+      datasets: [
+        {
+          type: "line",
+          label: "Temperatur (°C)",
+          data: temps,
+          borderColor: "#ff8c32",
+          backgroundColor: grad,
+          borderWidth: 2.5,
+          tension: 0.45,
+          fill: true,
+          yAxisID: "yT",
+          pointRadius: 0,
+          pointHoverRadius: 5,
+          pointHoverBackgroundColor: "#ff8c32",
+        },
+        {
+          type: "bar",
+          label: "Niederschlag (mm)",
+          data: precip,
+          backgroundColor: "rgba(80,180,255,0.55)",
+          borderColor: "rgba(80,180,255,0.9)",
+          borderWidth: 1,
+          borderRadius: 3,
+          yAxisID: "yR",
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      interaction: { mode: "index", intersect: false },
+      plugins: {
+        legend: {
+          labels: { color: "#9aa8b8", font: { family: "Inter", size: 12 }, boxWidth: 14 }
+        },
+        tooltip: {
+          backgroundColor: "rgba(10,12,18,0.92)",
+          borderColor: "rgba(255,255,255,0.1)",
+          borderWidth: 1,
+          titleColor: "#fff",
+          bodyColor: "#9aa8b8",
+          padding: 12,
+          callbacks: {
+            title: items => labels[items[0].dataIndex],
+          }
+        }
+      },
+      scales: {
+        x: {
+          ticks: {
+            color: "#5a6a7a",
+            font: { family: "Inter", size: 11 },
+            maxRotation: 0,
+            callback: (_, i) => i % 6 === 0 ? labels[i] : "",
+            autoSkip: false,
+          },
+          grid: { color: "rgba(255,255,255,0.04)" }
+        },
+        yT: {
+          position: "left",
+          ticks: { color: "#ff8c32", font: { family: "Inter", size: 11 }, callback: v => v + "°" },
+          grid: { color: "rgba(255,255,255,0.06)" }
+        },
+        yR: {
+          position: "right",
+          min: 0,
+          ticks: { color: "#50b4ff", font: { family: "Inter", size: 11 }, callback: v => v + "mm" },
+          grid: { display: false }
+        }
+      }
+    }
+  });
+})();
+</script>
+{% endblock %}