U13: Begrüssung nach Tageszeit im Header + Auto-Dark-Mode ab 16 Uhr

README.md

@@ -57,7 +57,8 @@ https://isa##.edumake.de
 
 ### Features
 - ✅ Responsive Design (Mobile, Tablet, Desktop)
-- ✅ Dark Mode (Toggle + localStorage)
+- ✅ Dark Mode (Toggle + localStorage; Auto-Dark ab 16:00 Uhr)
+- ✅ Begrüssung nach Tageszeit im Header (Morgen/Mittag/Abend + Uhrzeit, live)
 - ✅ Hamburger-Menü (Mobile)
 - ✅ Einheitliche Navigation (11 Seiten)
 - ✅ Kontaktformular mit feldspezifischer JS-Validierung
@@ -120,7 +121,8 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 ## 🔧 JavaScript-Funktionen
 
 ### script.js (Basis)
-- **Dark Mode** – Toggle + sofortige Wiederherstellung via localStorage (IIFE)
+- **Dark Mode** – Toggle + sofortige Wiederherstellung via localStorage (IIFE); ab 16:00 Uhr automatisch Dark Mode (wenn kein manueller Override gespeichert)
+- **Begrüssung nach Tageszeit (U13)** – zeigt „Guten Morgen/Mittag/Abend, es ist HH:MM Uhr" im Header; Uhrzeit aktualisiert sich jede Minute (`setInterval`)
 - **Hamburger-Navigation** – Mobile Menü mit aria-Attributen
 - **Navigation-Highlighting** – Aktiver Link basierend auf URL
 - **Lightbox-Galerie** – Klick auf Bilder öffnet vergrößerte Ansicht (ESC/Overlay zum Schließen)
@@ -196,6 +198,7 @@ Die zentrale `css/style.css` ist in folgende Abschnitte unterteilt:
 
 | Datum | Änderung |
 |-------|----------|
+| 03.06.2026 | U13: Begrüssung nach Tageszeit im Header + Auto-Dark-Mode ab 16:00 Uhr |
 | 20.05.2026 | Dark Mode: Beschreibungstexte Team/Notenrechner/Textanalyse in dunkelblau |
 | 20.05.2026 | Galerie: teambild.jpeg eingefügt |
 | 20.05.2026 | Mega-Bonus: Kanban-Board (Drag & Drop, Labels, localStorage, JSON-Export) |
@@ -215,4 +218,4 @@ Dieses Projekt ist ein Lernprojekt der PH Weingarten und dient zu Ausbildungszwe
 
 ---
 
-**Zuletzt aktualisiert:** 20. Mai 2026
+**Zuletzt aktualisiert:** 3. Juni 2026

api.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

css/style.css

@@ -50,9 +50,24 @@ body::before {
    Dark Mode Styles
    =========================== */
 
+/* Begrüssung nach Tageszeit (U13) */
+.begruessung {
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #be185d;
+  background: rgba(252, 231, 243, 0.85);
+  border: 1px solid #f9a8d4;
+  border-radius: 20px;
+  padding: 0.3rem 0.85rem;
+  white-space: nowrap;
+  letter-spacing: 0.01em;
+  margin-top: -38px;
+  pointer-events: none;
+  user-select: none;
+}
+
 /* Dark Mode Toggle Button */
 .dark-mode-toggle {
-  position: relative;
   width: 55px;
   height: 55px;
   border-radius: 50%;
@@ -377,6 +392,13 @@ body.dark .dark-mode-toggle:hover {
   box-shadow: 0 8px 30px rgba(59, 130, 246, 0.6), inset 0 0 15px rgba(96, 165, 250, 0.3);
 }
 
+/* Begrüssung – Dark Mode */
+body.dark .begruessung {
+  color: #f9a8d4;
+  background: rgba(30, 30, 46, 0.85);
+  border-color: #7c3aed55;
+}
+
 /* ===========================
    Typography
    =========================== */
@@ -2630,6 +2652,13 @@ body.dark .nav-toggle span {
     font-size: 1.3rem;
   }
 
+  /* Begrüssung auf kleinen Screens verkleinern */
+  .begruessung {
+    font-size: 0.72rem;
+    padding: 0.25rem 0.6rem;
+    margin-top: -32px;
+  }
+
   /* Hamburger anzeigen */
   .nav-toggle {
     display: flex;
@@ -2821,6 +2850,11 @@ body.dark .nav-toggle span {
     font-size: 1.1rem;
   }
 
+  /* Begrüssung auf sehr kleinen Screens ausblenden */
+  .begruessung {
+    display: none;
+  }
+
   .nav-toggle {
     width: 38px;
     height: 38px;

eis_projekt.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

galerie.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

impressum.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

index.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

js/script.js

@@ -3,8 +3,14 @@
 // ===========================
 
 // Sofort beim Laden: Dark Mode Preference wiederherstellen
+// Ab 16:00 Uhr automatisch Dark Mode, sofern kein manueller Override gespeichert ist
 (function() {
-  if (localStorage.getItem('darkMode') === 'true') {
+  const saved = localStorage.getItem('darkMode');
+  const hour  = new Date().getHours();
+  const autoDark = hour >= 16;
+  const useDark  = saved !== null ? saved === 'true' : autoDark;
+
+  if (useDark) {
     document.documentElement.classList.add('dark');
     document.body.classList.add('dark');
   }
@@ -30,7 +36,7 @@ document.addEventListener('DOMContentLoaded', function() {
       document.body.classList.toggle('dark');
       document.documentElement.classList.toggle('dark');
       
-      // Speichern in localStorage
+      // Manuellen Override in localStorage speichern
       const darkModeState = document.body.classList.contains('dark');
       localStorage.setItem('darkMode', darkModeState ? 'true' : 'false');
       
@@ -93,6 +99,32 @@ document.addEventListener('DOMContentLoaded', function() {
 
   // Initialize contact form
   initializeContactForm();
+
+  // ===========================
+  // Begrüssung nach Tageszeit (U13)
+  // ===========================
+  function aktualisiereUhrzeit() {
+    const el = document.getElementById('begruessung');
+    if (!el) return;
+
+    const jetzt  = new Date();
+    const stunde = jetzt.getHours();
+    const minute = String(jetzt.getMinutes()).padStart(2, '0');
+
+    let gruss;
+    if (stunde < 12) {
+      gruss = 'Guten Morgen';
+    } else if (stunde < 17) {
+      gruss = 'Guten Mittag';
+    } else {
+      gruss = 'Guten Abend';
+    }
+
+    el.textContent = gruss + ', es ist ' + stunde + ':' + minute + ' Uhr';
+  }
+
+  aktualisiereUhrzeit();
+  setInterval(aktualisiereUhrzeit, 60000); // jede Minute aktualisieren
 });
 
 // ===========================

kanban.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>
       </button>

kontakt.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

notenrechner.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

team.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

textanalyse.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>

ueber_uns.html

@@ -18,6 +18,8 @@
           <span class="project">EIS Projekt</span>
         </div>
       </div>
+      <!-- Begrüssung nach Tageszeit -->
+      <span id="begruessung" class="begruessung"></span>
       <!-- Dark Mode Toggle Button -->
       <button id="dark-mode-toggle" type="button" class="dark-mode-toggle" title="Dark Mode aktivieren">
         <span class="dark-mode-icon">🌙</span>