Prüfdurchgang: Buchungslinks, alte Adressen, Tablet/Handy-Layout

- Buchungslinks direkt auf Portal-IDs; Ernährungsberatung auf id=107,
  Kaufberatung entfernt (im Portal gibt es keine Seite dafür)
- .htaccess: alte WordPress-Adressen per 301 auf die neuen Seiten
- Tablet bis 980 px: Logo-Siegel über den Kacheln statt darauf
- Handy: lange Wörter werden nicht mehr abgeschnitten, Pfeile
  überdecken keinen Text mehr, „Buchen“ neben dem Menü-Knopf
- Dreier-Karten: Überschriften auf einer Linie (Subgrid)
- Menü schließt mit Escape und Tipp daneben; sichtbarer Fokusrahmen
- Startseite Handy/Tablet: Kopfleiste, sobald das Siegel weg ist
- 404: Pfade ab der Wurzel statt <base>, Sprunglink bleibt auf der Seite

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

assets/site.js

@@ -1,31 +1,41 @@
 (() => {
   const body = document.body;
 
-  // Mobiles Menü
+  // Mobiles Menü – schließt auch mit Escape oder Tipp daneben
   const burger = document.querySelector('.burger');
   if (burger) {
-    burger.addEventListener('click', () => {
-      const open = body.classList.toggle('menu-open');
+    const setMenu = open => {
+      body.classList.toggle('menu-open', open);
       burger.setAttribute('aria-expanded', open);
+      burger.setAttribute('aria-label', open ? 'Menü schließen' : 'Menü öffnen');
+    };
+    burger.addEventListener('click', () => setMenu(!body.classList.contains('menu-open')));
+    document.querySelectorAll('.nav a').forEach(a => a.addEventListener('click', () => setMenu(false)));
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape' && body.classList.contains('menu-open')) { setMenu(false); burger.focus(); }
+    });
+    document.addEventListener('click', e => {
+      if (body.classList.contains('menu-open') && !e.target.closest('.nav, .burger')) setMenu(false);
     });
-    document.querySelectorAll('.nav a').forEach(a =>
-      a.addEventListener('click', () => {
-        body.classList.remove('menu-open');
-        burger.setAttribute('aria-expanded', 'false');
-      })
-    );
   }
 
-  // Startseite: Header einblenden, sobald der Hero verlassen wird
+  // Startseite: Header einblenden, sobald der Hero verlassen wird. Auf Handy/Tablet steht das
+  // Siegel über den Kacheln – dort kommt der Header schon, sobald das Siegel aus dem Bild ist.
   const hero = document.querySelector('.hero');
+  const seal = document.querySelector('.seal');
   if (body.classList.contains('is-home') && hero) {
-    new IntersectionObserver(([e]) => body.classList.toggle('scrolled', !e.isIntersecting), {
+    const past = { hero: false, seal: false };
+    const update = () => body.classList.toggle('scrolled', past.hero || past.seal);
+    new IntersectionObserver(([e]) => { past.hero = !e.isIntersecting; update(); }, {
       rootMargin: '-120px 0px 0px 0px'
     }).observe(hero);
+    if (seal) new IntersectionObserver(([e]) => {
+      past.seal = !e.isIntersecting && e.boundingClientRect.top < 0 && getComputedStyle(seal).position === 'static';
+      update();
+    }).observe(seal);
   }
 
   // Ring um das Logo-Siegel: Kreis + die vier Kachel-Lücken, Übergänge mit Radius f abgerundet
-  const seal = document.querySelector('.seal');
   const joint = document.querySelector('.seal-joint');
   if (seal && joint) {
     const drawJoint = () => {