Terminplaner: Gaesteseiten – Nachbesserungen

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

public/termin.css

@@ -40,7 +40,6 @@ body {
 .t-karte { background: var(--t-karte); border: 1px solid var(--t-rand); border-radius: var(--t-radius); padding: 22px 20px; }
 
 .t-titel { margin: 0 0 .75rem; font-size: 1.45rem; line-height: 1.25; font-weight: 700; }
-.t-titel:focus, .t-titel:focus-visible { outline: none; } /* nur zum Anspringen per Skript, kein Bedienelement */
 .t-karte p { margin: 0 0 .85rem; }
 .t-laden { opacity: .8; }
 
@@ -76,9 +75,9 @@ body {
 .t-btn-sek:hover { background: var(--t-weich); filter: none; }
 .t-btn-warn { background: #b91c1c; color: #ffffff; border-color: #b91c1c; }
 .t-btn[disabled] { opacity: .6; cursor: default; }
-.t-link { font: inherit; color: inherit; background: none; border: 0; padding: .35rem 0; min-height: 44px; text-decoration: underline; cursor: pointer; }
-.t-weitere { margin: 1.1rem 0 0; }
 .t-karte :focus-visible, .t-fuss :focus-visible { outline: 3px solid var(--t-text); outline-offset: 2px; }
+/* Die Ueberschrift wird nur per Skript angesprungen (tabindex -1), sie ist kein Bedienelement: kein Rahmen */
+.t-karte .t-titel:focus, .t-karte .t-titel:focus-visible { outline: none; }
 
 /* Kontakt (abgelaufen) */
 .t-kontakt { margin: 0 0 .85rem; padding: 0; list-style: none; display: grid; gap: .4rem; }
@@ -127,7 +126,7 @@ body {
   .t-karte { padding: 18px 16px; }
   .t-zeile { grid-template-columns: 1fr; gap: 0; }
   .t-zeile dd { margin-bottom: .35rem; }
-  .t-nav { flex-direction: column-reverse; align-items: stretch; }
+  .t-nav { flex-direction: column; align-items: stretch; } /* Reihenfolge im DOM = Reihenfolge auf dem Bildschirm */
   .t-nav .t-btn { width: 100%; }
   .t-raster { border-spacing: 2px; }
   .t-tag { height: 40px; }
@@ -140,7 +139,7 @@ body {
 }
 
 @media print {
-  .t-kopf, .t-nav, .t-weitere { display: none; }
+  .t-kopf, .t-nav { display: none; }
   body { background: #fff; }
   .t-karte { border: 0; }
 }

public/termin.html

@@ -27,7 +27,7 @@
   <footer class="t-fuss" id="fuss">
     <div class="t-innen">
       <p class="t-links" id="fuss-links"></p>
-      <p class="t-powered"><a href="/impressum.html" target="_blank" rel="noopener noreferrer">Impressum WEBklar</a> · Terminbuchung über WEBklar</p>
+      <p class="t-powered"><a href="https://webklar.com/impressum" target="_blank" rel="noopener noreferrer">Impressum WEBklar</a> · Terminbuchung über WEBklar</p>
     </div>
   </footer>
   <script src="/termin.js" defer></script>

public/termin.js

@@ -161,12 +161,6 @@
     return m
   }
 
-  function absaetze (text, cls) {
-    const wrap = el('div', cls || '')
-    String(text).split(/\n{2,}/).forEach(function (a) { if (a.trim()) wrap.appendChild(el('p', '', a.trim())) })
-    return wrap
-  }
-
   // Zusammenfassung des Termins (alles vom Server, nur Texte)
   function zusammenfassung (t) {
     const dl = el('dl', 't-zusammen')
@@ -246,11 +240,22 @@
     return k.length ? fehler[k[0]] : vorgabe
   }
 
+  // Kopf und Fuss einer Fehleransicht: Ist die Vorschau schon geladen (der Link laeuft mitten in der Sitzung ab), bleiben
+  // Farbe, Anrede und Fusslinks, wie der Gast sie gesehen hat; sonst neutraler Kopf, Sie-Form, kein Betriebsfuss.
+  function fehlerKopf (name) {
+    if (S.v) {
+      setzeKopf(name || S.v.betrieb.name, S.v.farbe)
+      setzeFuss(S.v.betrieb)
+      return
+    }
+    S.du = false
+    setzeKopf(name, '')
+    setzeFuss(null)
+  }
+
   // Link unbekannt, unvollstaendig oder ohne Hash
   function zeigeUngueltig (text, hinweis) {
-    S.du = false
-    setzeKopf('', '')
-    setzeFuss(null)
+    fehlerKopf('')
     zeichne(function () {
       add(titel(text))
       add(el('p', '', hinweis))
@@ -260,8 +265,7 @@
   // Abgelaufen: die Antwort traegt Name, Telefon und Website des Betriebs
   function zeigeAbgelaufen (err) {
     const b = err.betrieb || {}
-    setzeKopf(b.name, '')
-    setzeFuss(null)
+    fehlerKopf(b.name)
     zeichne(function () {
       add(titel(ersterText(err.fehler, 'Diese Reservierung ist abgelaufen.')))
       add(el('p', '', T('Bitte buchen Sie Ihren Termin noch einmal oder rufen Sie uns an.', 'Bitte buche deinen Termin noch einmal oder ruf uns an.')))
@@ -318,8 +322,15 @@
 
   function start () {
     const roh = window.location.hash
-    // Der Token steht nur im Hash (wird nie an einen Server gesendet) und verschwindet sofort aus der Adresszeile
-    if (roh) window.history.replaceState(null, '', window.location.pathname + window.location.search)
+    S.v = null
+    S.verschieben = null
+    // Der Token steht nur im Hash (wird nie an einen Server gesendet) und verschwindet sofort aus der Adresszeile;
+    // wirft der Browser dabei (eingeschraenkte Umgebung), laeuft die Seite trotzdem weiter
+    if (roh) {
+      try {
+        window.history.replaceState(null, '', window.location.pathname + window.location.search)
+      } catch (e) { /* Token bleibt dann in der Adresszeile, die Seite funktioniert */ }
+    }
     if (!roh) {
       zeigeUngueltig('Bitte öffnen Sie den Link aus Ihrer E-Mail', 'Diese Seite wird über den Link in der E-Mail zu Ihrem Termin aufgerufen. Bitte öffnen Sie diese E-Mail und klicken Sie dort noch einmal auf den Link.')
       return
@@ -330,8 +341,6 @@
       return
     }
     S.token = m[1]
-    S.v = null
-    S.verschieben = null
     lade()
   }
 
@@ -408,11 +417,11 @@
         break
       case 'angefragt':
         ok = true
-        t = neu ? T('Ihre Anfrage ist eingegangen.', 'Deine Anfrage ist eingegangen.') : 'Diese Anfrage ist bereits bestätigt.'
+        t = neu ? T('Ihre Anfrage ist eingegangen.', 'Deine Anfrage ist eingegangen.') : T('Ihre Anfrage wurde bereits abgesendet.', 'Deine Anfrage wurde bereits abgesendet.')
         text = neu
           ? T(betrieb + ' prüft Ihre Anfrage und meldet sich bei Ihnen. Eine Eingangsbestätigung haben wir Ihnen per E-Mail geschickt.',
             betrieb + ' prüft deine Anfrage und meldet sich bei dir. Eine Eingangsbestätigung haben wir dir per E-Mail geschickt.')
-          : T('Sie müssen nichts weiter tun. ' + betrieb + ' meldet sich bei Ihnen.', 'Du musst nichts weiter tun. ' + betrieb + ' meldet sich bei dir.')
+          : T('Sie erhalten eine E-Mail, sobald ' + betrieb + ' sie annimmt.', 'Du erhältst eine E-Mail, sobald ' + betrieb + ' sie annimmt.')
         break
       case 'abgesagt':
         t = 'Dieser Termin wurde abgesagt.'
@@ -465,12 +474,9 @@
       const nav = el('div', 't-nav')
       if (a.verschieben) nav.appendChild(knopf('t-btn', 'Termin verschieben', function () { zeigeVerschieben() }))
       if (a.absagen) nav.appendChild(knopf('t-btn t-btn-sek', 'Termin absagen', zeigeAbsageFrage))
+      // § 356a BGB: die Widerrufsfunktion ist gut sichtbar und leicht erreichbar, ein gleichrangiger Knopf in derselben Reihe
+      if (a.widerrufen) nav.appendChild(knopf('t-btn t-btn-sek', 'Vertrag widerrufen', zeigeWiderruf))
       if (nav.childNodes.length) add(nav)
-      if (a.widerrufen) {
-        const w = el('p', 't-weitere')
-        w.appendChild(knopf('t-link', 'Vertrag widerrufen', zeigeWiderruf))
-        add(w)
-      }
       const offen = v.status === 'bestaetigt' || v.status === 'angefragt'
       if (offen && !a.absagen && !a.verschieben && !a.widerrufen && !(istText(v.hinweis) && v.hinweis)) {
         add(el('p', 't-box', 'Dieser Termin kann online nicht mehr geändert werden.' +