Headerline sieht gut aus

Rest funktioniert so la la

frontend/src/App.jsx

@@ -38,15 +38,35 @@ function App() {
     )
   }
 
+  // Aktuelle Zeit formatieren
+  const now = new Date()
+  const dateStr = now.toLocaleDateString('de-DE', { 
+    weekday: 'long', 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric' 
+  })
+  const timeStr = now.toLocaleTimeString('de-DE', { 
+    hour: '2-digit', 
+    minute: '2-digit' 
+  })
+
+  // TODO: Sonnenauf-/untergang und Mondphase berechnen
+  // Aktuell Platzhalter - benötigt Bibliothek wie 'suncalc'
+  const sunrise = "06:45"
+  const sunset = "18:30"
+  const moonPhase = "abnehmend 50%"
+
   return (
     <div className="app">
       <header className="app-header">
-        <h1>🌤️ Wetterstation</h1>
-        {lastUpdate && (
-          <p className="last-update">
-            Letzte Aktualisierung: {lastUpdate.toLocaleTimeString('de-DE')}
-          </p>
-        )}
+        <h1>Aktuelle Wetterdaten</h1>
+        <div className="header-datetime">{dateStr} - {timeStr} Uhr</div>
+        <div className="header-spacer"></div>
+        <div className="header-coordinates">48.6 N - 9.6 E - 574 m NN</div>
+        <div className="header-astro">
+          Sonnen-Aufgang: {sunrise} - Untergang: {sunset} &nbsp;&nbsp; Mond-Phase: {moonPhase}
+        </div>
       </header>
       
       <main className="app-main">