<style>
@import url('https://fonts.googleapis.com/css?family=Courgette');
 
#box_clock {
  background: #fff;
  margin: auto;
  padding: 10px 10px;
  max-width: 600px;
  text-align: center;
  border-radius: 5px;
  border: 2px solid #ccc;
  box-shadow: 0 5px 5px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
  z-index: 999999;
}
#box_time {
  font: 20px Arial, serif;
  color: #a52a2a;
}
#box_date {
  font: 15px Arial, serif;
  color: #191970;
  padding: 3px 0 10px 0;
}
#box_greetings {
  font: 16px 'Courgette', serif;
  color: #008000;
}
</style>
 
<div id="box_clock" role="timer" aria-label="Uhrzeit und Begrüßung">
  <div id="box_time"></div>
  <div id="box_date"></div>
  <div id="box_greetings"></div>
</div>
 
<script>
(function(){
  // Hilfsfunktion für Padding
  function lpad(str, padString, length) {
    str = '' + str;
    while (str.length < length) {
      str = padString + str;
    }
    return str;
  }
 
  // Lokale Zeit unter Berücksichtigung der Zeitzone
  function getLocalTime() {
    const now = new Date();
    const offsetMinutes = now.getTimezoneOffset(); // z.B. -60 für MEZ
    now.setMinutes(now.getMinutes() - offsetMinutes);
    return now;
  }
 
  function parseLocalTime(dateTime) {
    return lpad(dateTime.getUTCHours(), '0', 2) + ':' + lpad(dateTime.getUTCMinutes(), '0', 2) + ':' + lpad(dateTime.getUTCSeconds(), '0', 2);
  }
 
  function parseLocalDate(dateTime) {
    const dayNames = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
    return dayNames[dateTime.getUTCDay()] + ', ' + lpad(dateTime.getUTCDate(), '0', 2) + '.' + lpad(dateTime.getUTCMonth() + 1, '0', 2) + '.' + dateTime.getUTCFullYear();
  }
 
  function updateClock() {
    const dateTime = getLocalTime();
    document.getElementById("box_time").innerHTML = parseLocalTime(dateTime);
    document.getElementById("box_date").innerHTML = parseLocalDate(dateTime);
 
    const hour = dateTime.getUTCHours();
    let greeting = "";
 
    if (hour >= 0 && hour < 6) greeting = "Willkommen im neuen Tag!";
    else if (hour >= 6 && hour < 10) greeting = "Guten Morgen! <br>Ich wünsche Dir einen großartigen Start in den Tag!";
    else if (hour >= 10 && hour < 17) greeting = "Guten Tag! <br>Möge er voller positiver Momente und erfolgreicher Erlebnisse sein!";
    else if (hour >= 17 && hour < 22) greeting = "Guten Abend! <br>Zeit zum Entspannen und Abschalten.";
    else greeting = "Ich wünsche Dir eine gute Nacht";
 
    const day = dateTime.getUTCDay();
    if (day === 0 || day === 6) {
      document.getElementById("box_greetings").innerHTML =
        'Ich wünsche Euch ein schönes Wochenende <br /><br />' +
        '<img src="//files.homepagemodules.de/b104774/a_icon9_7e6af05b.gif" height="20px">';
    } else {
      document.getElementById("box_greetings").innerHTML = greeting;
    }
  }
 
  setInterval(updateClock, 1000);
  updateClock(); // Initialer Aufruf
})();
</script>