feat: tik op het regenblok voor de Buienradar-animatie

Het regenblok linksonder opent een overlay met de geanimeerde regenradar
van Buienradar (550x512, tijd in het beeld), naast de regencijfers die we
al hebben: vandaag, de 3 vorige dagen en het maandtotaal. Sluit na 20
seconden of bij een tik, net als het uuroverzicht.

Het beeld loopt via onze eigen /api/radar.php in plaats van een <img>
rechtstreeks naar Buienradar: de spec wil alles lokaal geserveerd, de
iPad praat zo nooit met een derde partij, we cachen 4 minuten (de radar
ververst elke 5) en de servicewerker kan het laatste beeld offline
bewaren. Bij een storing komt het laatst opgehaalde beeld terug; pas als
er niets is, een nette melding in plaats van een leeg vlak.
Bronvermelding staat in de overlay, zoals Buienradar vraagt.

Verder: de overlay-machinerie (20s-timer, balk, sluiten) staat nu een
keer in plaats van per overlay, Http kan optioneel redirects volgen (de
beeld-API leidt door naar een CDN), en alle /api/-paden zijn in de
servicewerker network-first met een cachesleutel zonder querystring.
Servicewerker naar v7.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

public/index.html

@@ -47,7 +47,7 @@
     <section class="a-inside" id="rooms"></section>
 
     <section class="a-bottom">
-      <div>
+      <div id="rain-block">
         <p class="a-sub">Regen</p>
         <div class="a-rainrow">
           <div>
@@ -63,7 +63,7 @@
 
     <div class="banner" id="banner">Gegevens laden…</div>
 
-    <div class="hour-overlay" id="hour-overlay" hidden>
+    <div class="overlay" id="hour-overlay" hidden>
       <div class="ho-bar"><i id="ho-bar-fill"></i></div>
       <header class="ho-head">
         <span class="ho-date" id="ho-date"></span>
@@ -79,6 +79,27 @@
       <div class="ho-grid ho-wind" id="ho-wind"></div>
       <div class="ho-grid ho-hours" id="ho-hours"></div>
     </div>
+
+    <div class="overlay" id="radar-overlay" hidden>
+      <div class="ho-bar"><i id="ro-bar-fill"></i></div>
+      <header class="ho-head">
+        <span class="ho-date">Regen</span>
+        <span class="ho-hint">tik om te sluiten</span>
+      </header>
+      <div class="ro-body">
+        <div class="ro-map">
+          <p class="ro-status" id="ro-status">Radar laden…</p>
+          <img class="ro-img" id="ro-img" alt="Regenradar" hidden>
+        </div>
+        <div class="ro-side">
+          <p class="ro-big"><span class="num" id="ro-today">–</span> mm</p>
+          <p class="ro-sub">vandaag</p>
+          <div class="ro-days" id="ro-days"></div>
+          <p class="ro-month num" id="ro-month">–</p>
+          <p class="ro-source">bron: Buienradar.nl</p>
+        </div>
+      </div>
+    </div>
   </main>
 </div>
 <div id="rotate">Draai de iPad een kwartslag</div>