<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>Wartungsmodus</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    body{
      margin:0; min-height:100vh; display:grid; place-items:center;
      background:#fff; color:#222; font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial;
    }
    main{ text-align:center; width:min(560px,92vw); }
    h1{ margin:0 0 .5rem; font-weight:700; font-size:clamp(22px,5vw,32px); }
    p{ margin:.25rem 0 1rem; color:#555; }
    .timer{ display:flex; justify-content:center; gap:.75rem; margin:1rem 0; }
    .unit{ min-width:90px; padding:.8rem .5rem; border:1px solid #ddd; border-radius:8px; }
    .value{ font-size:clamp(24px,7vw,36px); font-variant-numeric:tabular-nums; }
    .label{ font-size:12px; color:#777; text-transform:uppercase; letter-spacing:.12em; }
    .phrase{ font-size:15px; color:#333; margin-top:1rem; font-weight:500; }
    .note{ font-size:14px; color:#666; margin-top:.75rem; }
    a{ color:#3366cc; text-decoration:none; }
    a:focus-visible{ outline:2px solid #3366cc; outline-offset:3px; }
    @media (max-width:420px){ .unit{ flex:1; min-width:auto } }
  </style>
</head>
<body>
  <main role="main" aria-labelledby="title">
    <h1 id="title">Wir sind bald wieder online</h1>
    <p>Geplante Wartungsarbeiten sind im Gange.</p>

    <div class="timer" role="timer" aria-live="polite">
      <div class="unit"><div class="value" id="h">--</div><div class="label">Stunden</div></div>
      <div class="unit"><div class="value" id="m">--</div><div class="label">Minuten</div></div>
      <div class="unit"><div class="value" id="s">--</div><div class="label">Sekunden</div></div>
    </div>

    <p class="phrase" id="phrase">Bitte kommen Sie in --h --m --s wieder</p>

  </main>

  <script>
    // Der Server hat END_MS ggf. bereits automatisch auf +1h verlängert, wenn es abgelaufen war.
    const END_MS = 1764411896055;

    const H = document.getElementById('h');
    const M = document.getElementById('m');
    const S = document.getElementById('s');
    const phrase = document.getElementById('phrase');
    const title = document.getElementById('title');
    const pad2 = (n) => String(Math.max(0, Math.floor(n))).padStart(2,'0');

    function render(ms){
      if (ms <= 0 || !Number.isFinite(ms)){
        // Wenn 0 erreicht: Seite einmal neu laden, um das neue (serverseitig verlängerte) END_MS zu holen
        H.textContent = M.textContent = S.textContent = '00';
        phrase.textContent = 'Bitte warten…';
        document.title = 'Wartung';
        setTimeout(() => { location.reload(); }, 1000);
        return false;
      }
      const hrs  = Math.floor(ms / 3600000);
      const mins = Math.floor((ms % 3600000) / 60000);
      const secs = Math.floor((ms % 60000) / 1000);
      H.textContent = pad2(hrs);
      M.textContent = pad2(mins);
      S.textContent = pad2(secs);
      phrase.textContent = `Bitte kommen Sie in ${pad2(hrs)}h ${pad2(mins)}m ${pad2(secs)}s wieder`;
      document.title = `${pad2(hrs)}:${pad2(mins)}:${pad2(secs)} verbleibend`;
      return true;
    }

    function tick(){
      if (END_MS === null){
        H.textContent = M.textContent = S.textContent = '00';
        phrase.textContent = 'Kein Timer gesetzt.';
        document.title = 'Wartung';
        return;
      }
      const ms = END_MS - Date.now();
      if (!render(ms)) clearInterval(timer);
    }

    const timer = setInterval(tick, 1000);
    tick();
  </script>
</body>
</html>
