From b193c5daa039aed521ed30dcaf8e9bbc150acdd4 Mon Sep 17 00:00:00 2001
From: David Kertzscher <david.kertzscher@stud.ph-weingarten.de>
Date: Wed, 3 Jun 2026 12:37:38 +0000
Subject: [PATCH] =?UTF-8?q?U13:=20Begr=C3=BCssung=20nach=20Tageszeit=20im?=
 =?UTF-8?q?=20Header=20+=20Auto-Dark-Mode=20ab=2016=20Uhr?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md         |  9 ++++++---
 api.html          |  2 ++
 css/style.css     | 36 +++++++++++++++++++++++++++++++++++-
 eis_projekt.html  |  2 ++
 galerie.html      |  2 ++
 impressum.html    |  2 ++
 index.html        |  2 ++
 js/script.js      | 36 ++++++++++++++++++++++++++++++++++--
 kanban.html       |  2 ++
 kontakt.html      |  2 ++
 notenrechner.html |  2 ++
 team.html         |  2 ++
 textanalyse.html  |  2 ++
 ueber_uns.html    |  2 ++
 14 files changed, 97 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index ab041bf..fafd817 100644
--- a/README.md
+++ b/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
diff --git a/api.html b/api.html
index 26adbd4..cc00a31 100644
--- a/api.html
+++ b/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>
diff --git a/css/style.css b/css/style.css
index ca2eae0..dec1fe9 100644
--- a/css/style.css
+++ b/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;
diff --git a/eis_projekt.html b/eis_projekt.html
index 4f751f0..1397764 100644
--- a/eis_projekt.html
+++ b/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>
diff --git a/galerie.html b/galerie.html
index ca30c96..d6b6a8e 100644
--- a/galerie.html
+++ b/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>
diff --git a/impressum.html b/impressum.html
index 342ca08..c1a15a4 100644
--- a/impressum.html
+++ b/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>
diff --git a/index.html b/index.html
index 91281d6..58e967a 100644
--- a/index.html
+++ b/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>
diff --git a/js/script.js b/js/script.js
index d1162f8..308db4a 100644
--- a/js/script.js
+++ b/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
 });
 
 // ===========================
diff --git a/kanban.html b/kanban.html
index 422dc91..0f4fa65 100644
--- a/kanban.html
+++ b/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>
diff --git a/kontakt.html b/kontakt.html
index 167d237..9b2e3d0 100644
--- a/kontakt.html
+++ b/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>
diff --git a/notenrechner.html b/notenrechner.html
index 549859e..f4c35d0 100644
--- a/notenrechner.html
+++ b/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>
diff --git a/team.html b/team.html
index 626e78c..ebec2ed 100644
--- a/team.html
+++ b/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>
diff --git a/textanalyse.html b/textanalyse.html
index 87256f5..0e3a6c1 100644
--- a/textanalyse.html
+++ b/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>
diff --git a/ueber_uns.html b/ueber_uns.html
index bab2c90..a7a1c96 100644
--- a/ueber_uns.html
+++ b/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>