Buchungskalender: Website-Widget mit Kalender und Anfrageformular

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

public/embed/unterkunft-demo.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex">
+<title>Buchungskalender Testseite</title>
+<style>
+  body{margin:0;font-family:system-ui,sans-serif;background:#f6f7f9;color:#1f2937;line-height:1.5}
+  header,footer{padding:16px 24px;background:#e8ebf0}
+  main{max-width:1180px;margin:0 auto;padding:32px 16px}
+  /* Gestaltung ueber CSS-Variablen der Seite (alle optional):
+     [data-webklar-unterkunft]{ --wku-akzent:#0f766e; --wku-radius:8px; --wku-schrift:Georgia,serif; } */
+</style>
+</head>
+<body>
+<header>Testseite der Kundenwebsite (intern, nicht verlinkt)</header>
+<main>
+  <h1>Unterkunft anfragen</h1>
+  <!-- data-api weglassen = Herkunft des Skripts; die SiteKey ist ein Platzhalter -->
+  <div data-webklar-unterkunft="abcdefghijklmnop"></div>
+</main>
+<footer>Ende der Testseite</footer>
+<script src="unterkunft.js" defer></script>
+</body>
+</html>

public/embed/unterkunft.js

@@ -0,0 +1,471 @@
+/*! WEBklar Buchungskalender: Einbau-Skript fuer Kundenwebsites.
+ *  <div data-webklar-unterkunft="SITEKEY" data-api="https://project.webklar.com"></div>
+ *  <script src="https://project.webklar.com/embed/unterkunft.js" defer></script>
+ *  Keine Abhaengigkeiten, keine Cookies, kein Storage, keine Drittanfragen. Alle Texte nur ueber textContent.
+ *  Gestaltung ueber CSS-Variablen der Seite (alle optional): --wku-akzent, --wku-akzent-text, --wku-hintergrund, --wku-text,
+ *  --wku-rand, --wku-radius, --wku-schrift, --wku-schrift-titel.
+ *  Belegte Naechte kommen als [von,bis) (bis = Abreisetag, nicht belegt). Datumsrechnung ist reine Kalenderrechnung auf Zeichenketten
+ *  (UTC), die Zeitzone des Browsers spielt nie eine Rolle; "heute" und das Ende des Buchungsfensters liefert der Server. */
+(function () {
+  'use strict'
+  var SELF = document.currentScript
+  var STYLE_ID = 'wku-style'
+  var API_PFAD = '/api/public/unterkunft/v1/'
+  var AUSWEICH = 'Anfragen gerne per Telefon oder E-Mail.'
+  var TIMEOUT_MS = 20000
+  var MONAT_KURZ = ['Jan.', 'Feb.', 'März', 'Apr.', 'Mai', 'Juni', 'Juli', 'Aug.', 'Sept.', 'Okt.', 'Nov.', 'Dez.']
+  var MONAT_LANG = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+  var WOCHE_KURZ = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
+  var WOCHE_LANG = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag']
+  var EMAIL_FORM = /^[^\s@,;<>"]+@[^\s@,;<>"]+\.[^\s@,;<>"]+$/
+  var FARBE = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/
+  var zaehler = 0
+
+  /* ------------------------------------------------------------ reine Kalenderlogik --- */
+  function zwei(n) { return (n < 10 ? '0' : '') + n }
+  function iso(j, m, t) { return j + '-' + zwei(m) + '-' + zwei(t) }
+  function zerlege(s) { var p = s.split('-'); return [parseInt(p[0], 10), parseInt(p[1], 10), parseInt(p[2], 10)] }
+  function utc(s) { var p = zerlege(s); return Date.UTC(p[0], p[1] - 1, p[2]) }
+  function plusTage(s, n) {
+    var d = new Date(utc(s) + n * 86400000)
+    return iso(d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate())
+  }
+  function tageZwischen(a, b) { return Math.round((utc(b) - utc(a)) / 86400000) }
+  function wochentag(s) { return (new Date(utc(s)).getUTCDay() + 6) % 7 } // 0 = Montag
+  function tageImMonat(j, m) { return new Date(Date.UTC(j, m, 0)).getUTCDate() }
+
+  var WKU_LOGIK = {
+    monatsRaster: function (jahr, monat) {
+      var r = []
+      var lead = wochentag(iso(jahr, monat, 1))
+      var n = tageImMonat(jahr, monat)
+      var i
+      for (i = 0; i < lead; i += 1) r.push({ tag: null })
+      for (i = 1; i <= n; i += 1) r.push({ tag: iso(jahr, monat, i) })
+      while (r.length % 7) r.push({ tag: null })
+      return r
+    },
+    nachtBelegt: function (tag, belegt) {
+      for (var i = 0; i < (belegt || []).length; i += 1) if (belegt[i].von <= tag && tag < belegt[i].bis) return true
+      return false
+    },
+    waehle: function (zustand, tag, belegt, mindestNaechte) {
+      var z = zustand || {}
+      var L = WKU_LOGIK
+      var neu = function () { return L.nachtBelegt(tag, belegt) ? { von: z.von || null, bis: z.bis || null } : { von: tag, bis: null } }
+      if (!z.von || z.bis || tag <= z.von) return neu()
+      for (var d = z.von; d < tag; d = plusTage(d, 1)) if (L.nachtBelegt(d, belegt)) return neu()
+      if (tageZwischen(z.von, tag) < (mindestNaechte || 1)) return { von: z.von, bis: null, fehler: 'mindestnaechte' }
+      return { von: z.von, bis: tag }
+    },
+    zusammenfassung: function (von, bis) {
+      var a = zerlege(von)
+      var b = zerlege(bis)
+      var n = tageZwischen(von, bis)
+      var tail = ' · ' + n + (n === 1 ? ' Nacht' : ' Nächte')
+      if (a[0] !== b[0]) return a[2] + '. ' + MONAT_KURZ[a[1] - 1] + ' ' + a[0] + ' – ' + b[2] + '. ' + MONAT_KURZ[b[1] - 1] + ' ' + b[0] + tail
+      if (a[1] === b[1]) return a[2] + '.–' + b[2] + '. ' + MONAT_KURZ[a[1] - 1] + tail
+      return a[2] + '. ' + MONAT_KURZ[a[1] - 1] + ' – ' + b[2] + '. ' + MONAT_KURZ[b[1] - 1] + tail
+    }
+  }
+  var testModus = false
+  try { testModus = !!(SELF && SELF.dataset && SELF.dataset.test === '1') } catch (e) { testModus = false }
+  if (testModus) globalThis.__wkuLogik = WKU_LOGIK
+
+  function langesDatum(s) {
+    var p = zerlege(s)
+    return WOCHE_LANG[wochentag(s)] + ', ' + p[2] + '. ' + MONAT_LANG[p[1] - 1] + ' ' + p[0]
+  }
+
+  /* ------------------------------------------------------------------- Gestaltung --- */
+  var CSS = [
+    '@layer wku{',
+    '.wku-root{--wku-i-akzent:var(--wku-akzent,var(--wku-vorgabe-akzent,#0f766e));--wku-i-akzent-text:var(--wku-akzent-text,var(--wku-vorgabe-akzent-text,#fff));',
+    '--wku-i-bg:var(--wku-hintergrund,#fff);--wku-i-text:var(--wku-text,#1f2937);--wku-i-rand:var(--wku-rand,#b6bcc6);--wku-i-radius:var(--wku-radius,12px);',
+    '--wku-i-weich:#f3f4f6;--wku-i-bereich:#e5eceb;--wku-i-fehler:#b91c1c;--wku-i-schrift:var(--wku-schrift,inherit);--wku-i-titel:var(--wku-schrift-titel,var(--wku-schrift,inherit))}',
+    '@supports (color:color-mix(in srgb,red,blue)){.wku-root{--wku-i-weich:color-mix(in srgb,var(--wku-i-text) 6%,var(--wku-i-bg));--wku-i-bereich:color-mix(in srgb,var(--wku-i-akzent) 18%,var(--wku-i-bg))}}',
+    '.wku-root{container:wku/inline-size;display:block;position:relative;box-sizing:border-box;color:var(--wku-i-text);font-family:var(--wku-i-schrift);font-size:16px;line-height:1.5;text-align:left}',
+    '.wku-root *,.wku-root *::before,.wku-root *::after{box-sizing:border-box}',
+    '.wku-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}',
+    '.wku-haupt{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}',
+    '.wku-karte{background:var(--wku-i-bg);border:1px solid var(--wku-i-rand);border-radius:var(--wku-i-radius);padding:20px}',
+    '.wku-titel{font-family:var(--wku-i-titel);font-size:1.2rem;line-height:1.25;font-weight:700;margin:0 0 .75rem}',
+    '.wku-ausweich{margin:0}',
+    '.wku-monate{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}',
+    '.wku-zwei{display:none}',
+    '.wku-monat-kopf{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:44px;margin-bottom:.35rem}',
+    '.wku-monat-name{font-family:var(--wku-i-titel);font-size:1.05rem;font-weight:700;margin:0;flex:1;text-align:center}',
+    '.wku-pfeil{font:inherit;font-size:1.4rem;line-height:1;min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--wku-i-rand);background:var(--wku-i-bg);color:inherit;cursor:pointer;padding:0}',
+    '.wku-pfeil:hover{background:var(--wku-i-weich)}.wku-pfeil[disabled]{opacity:.3;cursor:default}.wku-pfeil-leer{display:inline-block;width:44px;height:44px}',
+    '.wku-raster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));row-gap:2px}',
+    '.wku-wt{font-size:.78rem;font-weight:600;text-align:center;padding:.25rem 0;opacity:.7}',
+    '.wku-leer{min-height:44px}',
+    '.wku-tag{font:inherit;position:relative;min-height:44px;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:inherit;text-align:center;cursor:pointer;overflow:hidden}',
+    '.wku-tag>span{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid transparent;z-index:1}',
+    '.wku-tag:hover>span{background:var(--wku-i-weich)}',
+    '.wku-heute>span{border-color:var(--wku-i-text)}',
+    '.wku-vergangen,.wku-zu{opacity:.35;cursor:default}.wku-vergangen:hover>span,.wku-zu:hover>span{background:transparent}',
+    '.wku-belegt{color:#6b7280;cursor:default;background:linear-gradient(to top right,transparent calc(50% - 1px),#9ca3af calc(50% - 1px),#9ca3af calc(50% + 1px),transparent calc(50% + 1px)) center/60% 60% no-repeat}',
+    '.wku-belegt:hover>span{background:transparent}',
+    '.wku-bereich{background:var(--wku-i-bereich)}',
+    '.wku-an{background:linear-gradient(to right,transparent 50%,var(--wku-i-bereich) 50%)}',
+    '.wku-ab{background:linear-gradient(to left,transparent 50%,var(--wku-i-bereich) 50%)}',
+    '.wku-an.wku-ab{background:transparent}',
+    '.wku-an>span,.wku-ab>span,.wku-an:hover>span,.wku-ab:hover>span{background:var(--wku-i-akzent);color:var(--wku-i-akzent-text);border-color:var(--wku-i-akzent)}',
+    '.wku-root :focus-visible{outline:3px solid var(--wku-i-text);outline-offset:2px}',
+    '.wku-legende{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin:.75rem 0 0;font-size:.8rem;opacity:.8}',
+    '.wku-zus{margin:1rem 0 0;font-weight:700;min-height:1.5rem}',
+    '.wku-hinweis{margin:.25rem 0 0;font-size:.9rem;color:var(--wku-i-fehler);font-weight:600;min-height:1.4rem}',
+    '.wku-form{margin:0}',
+    '.wku-feld{margin:0 0 .9rem}',
+    '.wku-label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.25rem}',
+    '.wku-stern{color:var(--wku-i-fehler)}',
+    '.wku-eingabe{display:block;width:100%;min-height:44px;font:inherit;color:inherit;background:var(--wku-i-bg);border:1px solid var(--wku-i-rand);border-radius:calc(var(--wku-i-radius) * .7);padding:.5rem .7rem}',
+    'textarea.wku-eingabe{min-height:5.5rem;resize:vertical}',
+    '.wku-eingabe[aria-invalid="true"]{border-color:var(--wku-i-fehler);border-width:2px}',
+    '.wku-feldfehler{color:var(--wku-i-fehler);font-weight:600;font-size:.88rem;margin:.25rem 0 0}',
+    '.wku-reihe{display:grid;grid-template-columns:minmax(0,1fr);gap:0 12px}',
+    '.wku-fehler{margin:0 0 .75rem;padding:.6rem .8rem;border-left:4px solid var(--wku-i-fehler);background:var(--wku-i-weich);font-weight:600}',
+    '.wku-datenschutz{font-size:.85rem;margin:0 0 1rem;opacity:.9}.wku-datenschutz a{color:inherit}',
+    '.wku-btn{font:inherit;font-weight:700;min-height:48px;padding:.6rem 1.5rem;border-radius:var(--wku-i-radius);border:2px solid var(--wku-i-akzent);background:var(--wku-i-akzent);color:var(--wku-i-akzent-text);cursor:pointer;line-height:1.25;width:100%}',
+    '.wku-btn:hover{filter:brightness(1.08)}.wku-btn[disabled]{opacity:.6;cursor:default}',
+    '.wku-danke{margin:0;font-size:1.05rem;font-weight:600}',
+    '.wku-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}',
+    '@container wku (min-width:520px){.wku-reihe{grid-template-columns:1fr 1fr}}',
+    '@container wku (min-width:760px){.wku-haupt{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}',
+    '@container wku (min-width:1100px){.wku-zwei{display:block}.wku-monate{grid-template-columns:1fr 1fr}.wku-weiter-ein{display:none}}',
+    '@media (prefers-reduced-motion:no-preference){.wku-btn,.wku-tag>span{transition:background-color .15s}}',
+    '}'
+  ].join('')
+
+  function ensureStyle() {
+    if (document.getElementById(STYLE_ID)) return
+    var st = document.createElement('style')
+    st.id = STYLE_ID
+    st.textContent = CSS
+    ;(document.head || document.documentElement).appendChild(st)
+  }
+
+  /* ------------------------------------------------------------------------ Helfer --- */
+  function h(tag, attrs, kinder) {
+    var el = document.createElement(tag)
+    var k
+    attrs = attrs || {}
+    for (k in attrs) {
+      if (!Object.prototype.hasOwnProperty.call(attrs, k) || attrs[k] === null || attrs[k] === undefined || attrs[k] === false) continue
+      if (k === 'text') el.textContent = attrs[k]
+      else if (k === 'class') el.className = attrs[k]
+      else el.setAttribute(k, attrs[k] === true ? '' : String(attrs[k]))
+    }
+    ;(kinder || []).forEach(function (c) { if (c) el.appendChild(c) })
+    return el
+  }
+
+  function apiBasis(el) {
+    var a = el.getAttribute('data-api')
+    if (!a && SELF && SELF.src) { var m = /^(https?:\/\/[^\/]+)/.exec(SELF.src); a = m ? m[1] : '' }
+    return (a || '').replace(/\/+$/, '')
+  }
+
+  function holen(url, opt) {
+    var ctl = typeof AbortController === 'function' ? new AbortController() : null
+    var t = ctl ? setTimeout(function () { ctl.abort() }, TIMEOUT_MS) : null
+    var o = opt || {}
+    if (ctl) o.signal = ctl.signal
+    return fetch(url, o).then(function (r) {
+      if (t) clearTimeout(t)
+      return r.json().then(function (body) { return { status: r.status, ok: r.ok, body: body || {} } }, function () { return { status: r.status, ok: r.ok, body: {} } })
+    }, function (e) { if (t) clearTimeout(t); throw e })
+  }
+
+  function textFarbe(hex) {
+    var s = hex.slice(1)
+    if (s.length === 3) s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2]
+    var r = parseInt(s.slice(0, 2), 16); var g = parseInt(s.slice(2, 4), 16); var b = parseInt(s.slice(4, 6), 16)
+    return (0.299 * r + 0.587 * g + 0.114 * b) > 160 ? '#111827' : '#ffffff'
+  }
+
+  function ausweich(el) {
+    el.textContent = ''
+    el.appendChild(h('p', { class: 'wku-root wku-ausweich', text: AUSWEICH }))
+  }
+
+  /* ------------------------------------------------------------------------ Widget --- */
+  function starten(el) {
+    if (el.getAttribute('data-wku-fertig')) return
+    el.setAttribute('data-wku-fertig', '1')
+    var siteKey = el.getAttribute('data-webklar-unterkunft')
+    if (!/^[A-Za-z0-9_-]{8,64}$/.test(siteKey || '')) return
+    ensureStyle()
+    var basis = apiBasis(el) + API_PFAD + encodeURIComponent(siteKey)
+    holen(basis, { headers: { Accept: 'application/json' } }).then(function (r) {
+      if (!r.ok || !r.body || r.body.aktiv !== true || !r.body.unterkuenfte || !r.body.unterkuenfte.length) return ausweich(el)
+      bauen(el, basis, r.body)
+    }, function () { ausweich(el) })
+  }
+
+  function bauen(el, basis, cfg) {
+    var id = 'wku' + (zaehler += 1) + '-'
+    var heute = null
+    var bisMax = null
+    var belegt = []
+    var sel = { von: null, bis: null }
+    var hinweis = ''
+    var unterk = cfg.unterkuenfte[0]
+    var token = cfg.formToken
+    var ansicht = null // { j, m } erster angezeigter Monat
+    var fokusTag = null
+    var sendet = false
+
+    var root = h('div', { class: 'wku-root' })
+    if (cfg.akzentfarbe && FARBE.test(cfg.akzentfarbe) && root.style) {
+      root.style.setProperty('--wku-vorgabe-akzent', cfg.akzentfarbe)
+      root.style.setProperty('--wku-vorgabe-akzent-text', textFarbe(cfg.akzentfarbe))
+    }
+    var haupt = h('div', { class: 'wku-haupt' })
+    var kal = h('div', { class: 'wku-karte' })
+    var formBox = h('div', { class: 'wku-karte' })
+    var zus = h('p', { class: 'wku-zus', 'aria-live': 'polite' })
+    var hint = h('p', { class: 'wku-hinweis', 'aria-live': 'polite' })
+    var monate = h('div', { class: 'wku-monate' })
+    kal.appendChild(h('h2', { class: 'wku-titel', text: 'Zeitraum wählen' }))
+    kal.appendChild(monate)
+    kal.appendChild(h('div', { class: 'wku-legende' }, [h('span', { text: 'Grau durchgestrichen: belegt' }), h('span', { text: 'Umrandet: heute' })]))
+    kal.appendChild(zus)
+    kal.appendChild(hint)
+    haupt.appendChild(kal)
+    haupt.appendChild(formBox)
+    root.appendChild(haupt)
+    el.textContent = ''
+    el.appendChild(root)
+
+    /* ---- Formular ---- */
+    var feld = {}
+    var fehlerBox = h('p', { class: 'wku-fehler', role: 'alert', hidden: true })
+    var form = h('form', { class: 'wku-form', novalidate: true })
+    var selU = null
+    var selP = h('select', { class: 'wku-eingabe', id: id + 'personen', name: 'personen' })
+    function eingabe(name, label, opt) {
+      opt = opt || {}
+      var inp = h(opt.mehrzeilig ? 'textarea' : 'input', { class: 'wku-eingabe', id: id + name, name: name, type: opt.mehrzeilig ? null : (opt.type || 'text'), autocomplete: opt.auto || 'off', maxlength: opt.max || 200, required: opt.pflicht ? true : null, rows: opt.mehrzeilig ? 4 : null })
+      var fe = h('p', { class: 'wku-feldfehler', id: id + name + '-f', hidden: true })
+      var box = h('div', { class: 'wku-feld' }, [h('label', { class: 'wku-label', for: id + name }, [h('span', { text: label }), opt.pflicht ? h('span', { class: 'wku-stern', 'aria-hidden': 'true', text: ' *' }) : null]), inp, fe])
+      feld[name] = { inp: inp, fe: fe }
+      return box
+    }
+    function fuellePersonen() {
+      selP.textContent = ''
+      var max = Math.max(1, parseInt(unterk.maxPersonen, 10) || 1)
+      for (var i = 1; i <= max; i += 1) selP.appendChild(h('option', { value: i, text: i === 1 ? '1 Person' : i + ' Personen' }))
+    }
+    if (cfg.unterkuenfte.length > 1) {
+      selU = h('select', { class: 'wku-eingabe', id: id + 'unterkunft', name: 'unterkunft' })
+      cfg.unterkuenfte.forEach(function (u, i) { selU.appendChild(h('option', { value: i, text: u.name })) })
+      form.appendChild(h('div', { class: 'wku-feld' }, [h('label', { class: 'wku-label', for: id + 'unterkunft', text: 'Unterkunft' }), selU]))
+    }
+    form.appendChild(h('div', { class: 'wku-feld' }, [h('label', { class: 'wku-label', for: id + 'personen', text: 'Personen' }), selP]))
+    form.appendChild(eingabe('firma', 'Firma (optional)', { auto: 'organization' }))
+    form.appendChild(eingabe('name', 'Name', { pflicht: true, auto: 'name' }))
+    form.appendChild(h('div', { class: 'wku-reihe' }, [eingabe('email', 'E-Mail', { pflicht: true, type: 'email', auto: 'email' }), eingabe('telefon', 'Telefon (optional)', { type: 'tel', auto: 'tel', max: 50 })]))
+    form.appendChild(eingabe('nachricht', 'Nachricht (optional)', { mehrzeilig: true, max: 2000 }))
+    var hp = h('input', { type: 'text', name: 'kontakt_url', id: id + 'hp', tabindex: '-1', autocomplete: 'off' })
+    form.appendChild(h('div', { class: 'wku-hp', 'aria-hidden': 'true' }, [hp]))
+    var ds = h('p', { class: 'wku-datenschutz' })
+    var anb = cfg.anbieter || {}
+    ds.appendChild(document.createTextNode('Ihre Angaben werden zur Bearbeitung Ihrer Anfrage verwendet' + (anb.name ? ' (' + anb.name + ')' : '') + '. Mehr dazu in der '))
+    if (anb.datenschutzUrl && /^https?:\/\//i.test(anb.datenschutzUrl)) ds.appendChild(h('a', { href: anb.datenschutzUrl, target: '_blank', rel: 'noopener noreferrer', text: 'Datenschutzerklärung' }))
+    else ds.appendChild(document.createTextNode('Datenschutzerklärung'))
+    ds.appendChild(document.createTextNode('.'))
+    form.appendChild(ds)
+    var btn = h('button', { class: 'wku-btn', type: 'submit', text: 'Anfrage senden' })
+    form.appendChild(fehlerBox)
+    form.appendChild(btn)
+    formBox.appendChild(h('h2', { class: 'wku-titel', text: 'Unverbindlich anfragen' }))
+    formBox.appendChild(form)
+    fuellePersonen()
+
+    function zeigeFehler(text) { fehlerBox.textContent = text || ''; fehlerBox.hidden = !text }
+    function feldFehler(name, text) {
+      var f = feld[name]
+      if (!f) return false
+      f.fe.textContent = text || ''
+      f.fe.hidden = !text
+      if (text) { f.inp.setAttribute('aria-invalid', 'true'); f.inp.setAttribute('aria-describedby', f.fe.id) } else { f.inp.removeAttribute('aria-invalid'); f.inp.removeAttribute('aria-describedby') }
+      return true
+    }
+
+    /* ---- Kalender ---- */
+    function monatKey(j, m) { return j * 12 + (m - 1) }
+    function aktualisiereZus() {
+      if (sel.von && sel.bis) { zus.textContent = WKU_LOGIK.zusammenfassung(sel.von, sel.bis); hint.textContent = '' }
+      else if (sel.von) { zus.textContent = 'Anreise ' + langesDatum(sel.von) + '. Bitte Abreise wählen.'; hint.textContent = hinweis }
+      else { zus.textContent = ''; hint.textContent = '' }
+      if (hinweis && !sel.bis) hint.textContent = hinweis
+    }
+    function tagKnopf(tag) {
+      var p = zerlege(tag)
+      var vergangen = tag < heute
+      var zu = tag > bisMax
+      var nb = WKU_LOGIK.nachtBelegt(tag, belegt)
+      var kl = ['wku-tag']
+      if (tag === heute) kl.push('wku-heute')
+      if (vergangen) kl.push('wku-vergangen')
+      if (zu) kl.push('wku-zu')
+      if (nb && !vergangen && !zu) kl.push('wku-belegt')
+      var istAn = sel.von === tag
+      var istAb = sel.bis === tag
+      if (istAn && sel.bis) kl.push('wku-an')
+      else if (istAn) kl.push('wku-an', 'wku-ab')
+      if (istAb) kl.push('wku-ab')
+      if (sel.von && sel.bis && tag > sel.von && tag < sel.bis) kl.push('wku-bereich')
+      var status = (nb ? 'belegt' : 'frei') + (istAn ? ', Anreise' : '') + (istAb ? ', Abreise' : '')
+      var b = h('button', { class: kl.join(' '), type: 'button', 'data-tag': tag, 'aria-label': langesDatum(tag) + ', ' + status, 'aria-pressed': (istAn || istAb) ? 'true' : 'false', tabindex: tag === fokusTag ? '0' : '-1' }, [h('span', { text: String(p[2]) })])
+      if (vergangen || zu) { b.setAttribute('aria-disabled', 'true') }
+      b.addEventListener('click', function () { tagKlick(tag) })
+      return b
+    }
+    function monatBauen(j, m, erster, letzter) {
+      var kopf = h('div', { class: 'wku-monat-kopf' })
+      var min = monatKey(heute.slice(0, 4) * 1, heute.slice(5, 7) * 1)
+      var max = monatKey(bisMax.slice(0, 4) * 1, bisMax.slice(5, 7) * 1)
+      if (erster) {
+        var zur = h('button', { class: 'wku-pfeil', type: 'button', 'aria-label': 'Vorheriger Monat', text: '‹' })
+        if (monatKey(j, m) <= min) zur.setAttribute('disabled', '')
+        zur.addEventListener('click', function () { blaettern(-1) })
+        kopf.appendChild(zur)
+      } else kopf.appendChild(h('span', { class: 'wku-pfeil-leer' }))
+      kopf.appendChild(h('h3', { class: 'wku-monat-name', text: MONAT_LANG[m - 1] + ' ' + j }))
+      if (letzter) {
+        var vor = h('button', { class: 'wku-pfeil' + (erster ? ' wku-weiter-ein' : ''), type: 'button', 'aria-label': 'Nächster Monat', text: '›' })
+        if (monatKey(j, m) >= max) vor.setAttribute('disabled', '')
+        vor.addEventListener('click', function () { blaettern(1) })
+        kopf.appendChild(vor)
+      } else kopf.appendChild(h('span', { class: 'wku-pfeil-leer wku-weiter-ein' }))
+      var grid = h('div', { class: 'wku-raster', role: 'group', 'aria-label': MONAT_LANG[m - 1] + ' ' + j })
+      WOCHE_KURZ.forEach(function (w, i) { grid.appendChild(h('div', { class: 'wku-wt', 'aria-hidden': 'true', text: w, title: WOCHE_LANG[i] })) })
+      WKU_LOGIK.monatsRaster(j, m).forEach(function (z) { grid.appendChild(z.tag ? tagKnopf(z.tag) : h('div', { class: 'wku-leer' })) })
+      return h('div', { class: 'wku-monat' + (erster ? '' : ' wku-zwei') }, [kopf, grid])
+    }
+    function zeichne(fokus) {
+      if (!heute) return
+      var a = ansicht
+      var b = a.m === 12 ? { j: a.j + 1, m: 1 } : { j: a.j, m: a.m + 1 }
+      monate.textContent = ''
+      monate.appendChild(monatBauen(a.j, a.m, true, false))
+      monate.appendChild(monatBauen(b.j, b.m, false, true))
+      aktualisiereZus()
+      if (fokus && fokusTag) {
+        var k = monate.querySelector('[data-tag="' + fokusTag + '"]')
+        if (k && k.focus) k.focus()
+      }
+    }
+    function blaettern(d) {
+      var m = ansicht.m + d
+      var j = ansicht.j
+      if (m < 1) { m = 12; j -= 1 } else if (m > 12) { m = 1; j += 1 }
+      var min = monatKey(heute.slice(0, 4) * 1, heute.slice(5, 7) * 1)
+      var max = monatKey(bisMax.slice(0, 4) * 1, bisMax.slice(5, 7) * 1)
+      if (monatKey(j, m) < min || monatKey(j, m) > max) return
+      ansicht = { j: j, m: m }
+      zeichne(false)
+    }
+    function tagKlick(tag) {
+      if (tag < heute || tag > bisMax) return
+      var neu = WKU_LOGIK.waehle(sel, tag, belegt, parseInt(unterk.mindestNaechte, 10) || 1)
+      hinweis = neu.fehler === 'mindestnaechte' ? 'Mindestaufenthalt: ' + (unterk.mindestNaechte === 1 ? '1 Nacht' : unterk.mindestNaechte + ' Nächte') + '.' : ''
+      sel = { von: neu.von || null, bis: neu.bis || null }
+      fokusTag = tag
+      zeichne(true)
+    }
+    monate.addEventListener('keydown', function (ev) {
+      var t = ev.target && ev.target.getAttribute ? ev.target.getAttribute('data-tag') : null
+      if (!t) return
+      var d = ev.key === 'ArrowRight' ? 1 : ev.key === 'ArrowLeft' ? -1 : ev.key === 'ArrowDown' ? 7 : ev.key === 'ArrowUp' ? -7 : 0
+      if (!d) return
+      ev.preventDefault()
+      var ziel = plusTage(t, d)
+      if (ziel < heute || ziel > bisMax) return
+      fokusTag = ziel
+      var p = zerlege(ziel)
+      var sichtbar = monatKey(p[0], p[1]) >= monatKey(ansicht.j, ansicht.m) && monatKey(p[0], p[1]) <= monatKey(ansicht.j, ansicht.m) + 1
+      if (!sichtbar) ansicht = { j: p[0], m: p[1] }
+      zeichne(true)
+    })
+
+    function pad(n) { return zwei(n) }
+    function laden() {
+      var jetzt = new Date()
+      var von = jetzt.getUTCFullYear() + '-' + pad(jetzt.getUTCMonth() + 1) + '-' + pad(jetzt.getUTCDate())
+      von = plusTage(von, -1)
+      var bis = plusTage(von, 540)
+      return holen(basis + '/belegung?unterkunft=' + encodeURIComponent(unterk.id) + '&von=' + von + '&bis=' + bis, { headers: { Accept: 'application/json' } }).then(function (r) {
+        if (!r.ok || !r.body.heute || !r.body.bisMax) throw new Error('belegung')
+        belegt = r.body.belegt || []
+        heute = r.body.heute
+        bisMax = r.body.bisMax
+        if (!ansicht) { var p = zerlege(heute); ansicht = { j: p[0], m: p[1] } }
+        if (!fokusTag) fokusTag = heute
+        sel = { von: null, bis: null }
+        hinweis = ''
+        zeichne(false)
+      })
+    }
+    function ladenOderAusweichen() { laden().then(null, function () { ausweich(el) }) }
+
+    if (selU) selU.addEventListener('change', function () {
+      unterk = cfg.unterkuenfte[parseInt(selU.value, 10) || 0]
+      fuellePersonen()
+      ladenOderAusweichen()
+    })
+
+    form.addEventListener('submit', function (ev) {
+      ev.preventDefault()
+      if (sendet) return
+      zeigeFehler('')
+      Object.keys(feld).forEach(function (k) { feldFehler(k, '') })
+      if (!sel.von || !sel.bis) { zeigeFehler('Bitte wählen Sie Anreise und Abreise im Kalender.'); return }
+      var wert = function (n) { return String(feld[n].inp.value || '').trim() }
+      var fehler = 0
+      if (!wert('name')) { feldFehler('name', 'Bitte geben Sie Ihren Namen an.'); fehler += 1 }
+      if (!EMAIL_FORM.test(wert('email'))) { feldFehler('email', 'Bitte geben Sie eine gültige E-Mail-Adresse an.'); fehler += 1 }
+      if (fehler) { var ersteFehl = form.querySelector('[aria-invalid="true"]'); if (ersteFehl && ersteFehl.focus) ersteFehl.focus(); return }
+      sendet = true
+      btn.setAttribute('disabled', '')
+      var body = { unterkunft: unterk.id, von: sel.von, bis: sel.bis, personen: parseInt(selP.value, 10) || 1, name: wert('name'), firma: wert('firma'), email: wert('email'), telefon: wert('telefon'), nachricht: wert('nachricht'), formToken: token, kontakt_url: hp.value }
+      holen(basis + '/anfrage', { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(body) }).then(function (r) {
+        sendet = false
+        btn.removeAttribute('disabled')
+        if (r.ok && r.body.nummer) {
+          formBox.textContent = ''
+          formBox.appendChild(h('p', { class: 'wku-danke', role: 'status', tabindex: '-1', text: 'Danke! Ihre Anfrage ' + r.body.nummer + ' ist eingegangen. Sie erhalten gleich eine Bestätigung per E-Mail.' }))
+          var d = formBox.querySelector('.wku-danke'); if (d && d.focus) d.focus()
+          ladenOderAusweichen()
+          return
+        }
+        var b = r.body || {}
+        var gezeigt = false
+        if (b.felder) Object.keys(b.felder).forEach(function (k) { if (feldFehler(k, String(b.felder[k]))) gezeigt = true })
+        if (gezeigt) return
+        if (b.fehler === 'belegt' || r.status === 409) { zeigeFehler('Dieser Zeitraum ist leider nicht mehr frei. Bitte wählen Sie einen anderen.'); laden().then(null, function () {}) }
+        else if (r.status === 429) zeigeFehler('Zu viele Anfragen. Bitte versuchen Sie es später noch einmal.')
+        else {
+          zeigeFehler('Die Anfrage konnte nicht gesendet werden. Bitte versuchen Sie es erneut oder melden Sie sich per Telefon oder E-Mail.')
+          holen(basis, { headers: { Accept: 'application/json' } }).then(function (c) { if (c.ok && c.body.formToken) token = c.body.formToken }, function () {})
+        }
+      }, function () {
+        sendet = false
+        btn.removeAttribute('disabled')
+        zeigeFehler('Die Anfrage konnte nicht gesendet werden. Bitte versuchen Sie es erneut oder melden Sie sich per Telefon oder E-Mail.')
+      })
+    })
+
+    ladenOderAusweichen()
+  }
+
+  function alleStarten() {
+    var liste = document.querySelectorAll('[data-webklar-unterkunft]')
+    for (var i = 0; i < liste.length; i += 1) starten(liste[i])
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', alleStarten)
+  else alleStarten()
+})()

test/unterkunftEmbedStatic.test.js

@@ -0,0 +1,31 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync, statSync } from 'node:fs'
+import vm from 'node:vm'
+
+// Statische Pruefung des Einbau-Skripts public/embed/unterkunft.js (Task 16; Muster test/shopEmbedStatic.test.js).
+const QUELLE = readFileSync(new URL('../public/embed/unterkunft.js', import.meta.url), 'utf8')
+const OHNE_KOMMENTARE = QUELLE.replace(/\/\*[\s\S]*?\*\//g, '').replace(/(^|\s)\/\/.*$/gm, '$1')
+
+test('gueltiges JavaScript, unter 40 KB, IIFE mit use strict', () => {
+  assert.doesNotThrow(() => new vm.Script(QUELLE, { filename: 'unterkunft.js' }))
+  assert.ok(statSync(new URL('../public/embed/unterkunft.js', import.meta.url)).size < 40 * 1024)
+  assert.match(OHNE_KOMMENTARE, /^\s*\(function \(\) \{\s*'use strict'/)
+})
+
+test('kein innerHTML, outerHTML, insertAdjacentHTML, document.write, eval, new Function', () => {
+  assert.doesNotMatch(OHNE_KOMMENTARE, /innerHTML|outerHTML|insertAdjacentHTML|document\.write|\beval\s*\(|new Function/)
+})
+
+test('API-Pfad, Praefix .wku-, @layer wku, Style-Id, kein Storage, keine Cookies, keine Fremdadressen', () => {
+  assert.ok(OHNE_KOMMENTARE.includes('/api/public/unterkunft/v1/'))
+  assert.ok(OHNE_KOMMENTARE.includes('@layer wku'))
+  assert.ok(OHNE_KOMMENTARE.includes('wku-style'))
+  assert.match(OHNE_KOMMENTARE, /\.wku-root/)
+  assert.doesNotMatch(OHNE_KOMMENTARE, /localStorage|sessionStorage|document\.cookie|https?:\/\//)
+})
+
+test('Pflichttexte und Honeypot', () => {
+  for (const t of ['Anfragen gerne per Telefon oder E-Mail.', 'Bitte wählen Sie Anreise und Abreise im Kalender.', 'Anfrage senden', 'kontakt_url', 'formToken']) assert.ok(QUELLE.includes(t), t)
+  assert.match(QUELLE, /Danke! Ihre Anfrage/)
+})

test/unterkunftKalenderLogik.test.js

@@ -0,0 +1,88 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import vm from 'node:vm'
+
+// Reine Kalenderlogik des Widgets public/embed/unterkunft.js (Task 16): Datei per node:vm laden, data-test="1" macht WKU_LOGIK als __wkuLogik sichtbar.
+const QUELLE = readFileSync(new URL('../public/embed/unterkunft.js', import.meta.url), 'utf8')
+function lade() {
+  const doc = { readyState: 'complete', currentScript: { dataset: { test: '1' } }, querySelectorAll: () => [], addEventListener() {} }
+  const ctx = vm.createContext({ document: doc, console })
+  vm.runInContext(QUELLE, ctx, { filename: 'unterkunft.js' })
+  return ctx.__wkuLogik
+}
+const L = lade()
+
+test('ohne data-test bleibt die Logik verborgen', () => {
+  const doc = { readyState: 'complete', currentScript: { dataset: {} }, querySelectorAll: () => [], addEventListener() {} }
+  const ctx = vm.createContext({ document: doc })
+  vm.runInContext(QUELLE, ctx)
+  assert.equal(ctx.__wkuLogik, undefined)
+})
+
+test('monatsRaster: Montag zuerst, 1.11.2026 (Sonntag) hat 6 Leerfelder, 30 Tage', () => {
+  const r = L.monatsRaster(2026, 11)
+  assert.equal(r.length % 7, 0)
+  assert.ok(r.slice(0, 6).every((z) => z.tag === null))
+  assert.equal(r[6].tag, '2026-11-01')
+  assert.equal(r.filter((z) => z.tag).length, 30)
+  assert.equal(L.monatsRaster(2026, 2).filter((z) => z.tag).length, 28)
+  assert.equal(L.monatsRaster(2028, 2).filter((z) => z.tag).length, 29)
+  assert.equal(L.monatsRaster(2026, 12)[1].tag, '2026-12-01') // 1.12.2026 ist Dienstag
+})
+
+test('nachtBelegt: Nacht von von (inklusive) bis bis (exklusive)', () => {
+  const b = [{ von: '2026-11-10', bis: '2026-11-12' }]
+  assert.equal(L.nachtBelegt('2026-11-09', b), false)
+  assert.equal(L.nachtBelegt('2026-11-10', b), true)
+  assert.equal(L.nachtBelegt('2026-11-11', b), true)
+  assert.equal(L.nachtBelegt('2026-11-12', b), false)
+})
+
+test('waehle: Anreise, Abreise, Neustart', () => {
+  const b = [{ von: '2026-11-20', bis: '2026-11-25' }]
+  let z = L.waehle({}, '2026-11-12', b, 1)
+  assert.deepEqual({ von: z.von, bis: z.bis }, { von: '2026-11-12', bis: null })
+  z = L.waehle(z, '2026-11-15', b, 1)
+  assert.deepEqual({ von: z.von, bis: z.bis }, { von: '2026-11-12', bis: '2026-11-15' })
+  z = L.waehle(z, '2026-11-14', b, 1) // dritter Klick = neue Anreise
+  assert.deepEqual({ von: z.von, bis: z.bis }, { von: '2026-11-14', bis: null })
+  z = L.waehle(z, '2026-11-10', b, 1) // Klick vor Anreise
+  assert.deepEqual({ von: z.von, bis: z.bis }, { von: '2026-11-10', bis: null })
+})
+
+test('waehle: belegte Nacht dazwischen -> neue Anreise; Abreise am Anreisetag eines Fremdbuchers erlaubt', () => {
+  const b = [{ von: '2026-11-20', bis: '2026-11-25' }]
+  let z = L.waehle({ von: '2026-11-18', bis: null }, '2026-11-27', b, 1)
+  assert.deepEqual({ von: z.von, bis: z.bis }, { von: '2026-11-27', bis: null })
+  z = L.waehle({ von: '2026-11-18', bis: null }, '2026-11-20', b, 1) // Nacht 18., 19. frei, Abreise am 20.
+  assert.deepEqual({ von: z.von, bis: z.bis }, { von: '2026-11-18', bis: '2026-11-20' })
+  z = L.waehle({ von: '2026-11-18', bis: null }, '2026-11-21', b, 1)
+  assert.deepEqual({ von: z.von, bis: z.bis }, { von: '2026-11-18', bis: null }) // Nacht 20. belegt, 21. selbst belegt: weder Abreise noch Anreise, Zustand bleibt
+})
+
+test('waehle: Anreise auf belegter Nacht nicht moeglich; Anreise am Abreisetag eines Fremdbuchers moeglich', () => {
+  const b = [{ von: '2026-11-20', bis: '2026-11-25' }]
+  const z1 = L.waehle({}, '2026-11-22', b, 1)
+  assert.equal(z1.von, null)
+  const z2 = L.waehle({}, '2026-11-25', b, 1)
+  assert.equal(z2.von, '2026-11-25')
+})
+
+test('waehle: unter den Mindestnaechten -> Hinweis-Zustand, Anreise bleibt', () => {
+  const z = L.waehle({ von: '2026-11-12', bis: null }, '2026-11-13', [], 3)
+  assert.equal(z.fehler, 'mindestnaechte')
+  assert.equal(z.von, '2026-11-12')
+  assert.equal(z.bis, null)
+  const ok = L.waehle({ von: '2026-11-12', bis: null }, '2026-11-15', [], 3)
+  assert.equal(ok.bis, '2026-11-15')
+  assert.equal(ok.fehler, undefined)
+})
+
+test('zusammenfassung', () => {
+  assert.equal(L.zusammenfassung('2026-11-12', '2026-11-30'), '12.–30. Nov. · 18 Nächte')
+  assert.equal(L.zusammenfassung('2026-11-28', '2026-12-03'), '28. Nov. – 3. Dez. · 5 Nächte')
+  assert.equal(L.zusammenfassung('2026-11-12', '2026-11-13'), '12.–13. Nov. · 1 Nacht')
+  assert.equal(L.zusammenfassung('2026-12-30', '2027-01-02'), '30. Dez. 2026 – 2. Jan. 2027 · 3 Nächte')
+  assert.equal(L.zusammenfassung('2026-03-01', '2026-03-05').slice(0, 18), '1.–5. März · 4 Näc')
+})

test/unterkunftWidgetFluss.test.js

@@ -0,0 +1,72 @@
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
+import vm from 'node:vm'
+import { installFakeDom } from './support/fakeDom.js'
+
+// Ablauf des Widgets public/embed/unterkunft.js gegen den Vertrag docs/funktionen/unterkunft-api.md (Fake-fetch, Minimal-DOM).
+const QUELLE = readFileSync(new URL('../public/embed/unterkunft.js', import.meta.url), 'utf8')
+const CFG = { aktiv: true, anbieter: { name: 'Haus Test', ort: 'X', datenschutzUrl: 'https://kunde.example/datenschutz' }, akzentfarbe: '#0f766e', formToken: 'tok1', unterkuenfte: [{ id: 'u1', name: 'Ferienwohnung', maxPersonen: 3, mindestNaechte: 2, checkIn: '15:00', checkOut: '11:00' }] }
+const BEL = { belegt: [{ von: '2026-11-20', bis: '2026-11-25' }], heute: '2026-11-01', bisMax: '2028-04-30' }
+
+function start(antworten) {
+  const fx = installFakeDom({ antworten })
+  fx.document.readyState = 'complete'
+  fx.document.currentScript = { dataset: {}, src: 'https://project.webklar.com/embed/unterkunft.js' }
+  const el = fx.document.createElement('div')
+  el.setAttribute('data-webklar-unterkunft', 'abcdefghijklmnop')
+  fx.document.body.appendChild(el)
+  vm.runInThisContext(QUELLE, { filename: 'unterkunft.js' })
+  return { fx, el }
+}
+const tag = (fx, el, t) => fx.finde(el, `[data-tag="${t}"]`)
+
+test('Ladefehler und aktiv:false zeigen nur den Ausweichsatz', async () => {
+  for (const antwort of [{ status: 200, body: { aktiv: false } }, { status: 500, body: {} }]) {
+    const { fx, el } = start([antwort])
+    try {
+      await fx.ruhe()
+      assert.equal(fx.text(el), 'Anfragen gerne per Telefon oder E-Mail.')
+    } finally { fx.restore() }
+  }
+})
+
+test('Kalender, Auswahl, Mindestnaechte, Absenden mit Vertragsfeldern, Danke-Text', async () => {
+  const { fx, el } = start([{ status: 200, body: CFG }, { status: 200, body: BEL }, { status: 201, body: { nummer: 'A-1234' } }, { status: 200, body: BEL }])
+  try {
+    await fx.ruhe(); await fx.ruhe()
+    assert.match(fx.fetchLog[0].url, /^https:\/\/project\.webklar\.com\/api\/public\/unterkunft\/v1\/abcdefghijklmnop$/)
+    assert.match(fx.fetchLog[1].url, /\/belegung\?unterkunft=u1&von=\d{4}-\d{2}-\d{2}&bis=\d{4}-\d{2}-\d{2}$/)
+    assert.equal(tag(fx, el, '2026-11-10').getAttribute('aria-label'), 'Dienstag, 10. November 2026, frei')
+    assert.equal(tag(fx, el, '2026-11-21').getAttribute('aria-label').includes('belegt'), true)
+    assert.ok(fx.finde(el, '[name="kontakt_url"]'), 'Honeypot')
+    // ohne Zeitraum
+    await fx.setze(fx.finde(el, '[name="name"]'), 'Max'); await fx.setze(fx.finde(el, '[name="email"]'), 'max@example.com')
+    await fx.klick(fx.finde(el, 'button[type="submit"]'))
+    assert.match(fx.text(el), /Bitte wählen Sie Anreise und Abreise im Kalender\./)
+    assert.equal(fx.fetchLog.length, 2)
+    // Mindestnaechte (2): 1 Nacht -> Hinweis
+    await fx.klick(tag(fx, el, '2026-11-10')); await fx.klick(tag(fx, el, '2026-11-11'))
+    assert.match(fx.text(el), /Mindestaufenthalt: 2 Nächte/)
+    await fx.klick(tag(fx, el, '2026-11-14'))
+    assert.match(fx.text(el), /10\.–14\. Nov\. · 4 Nächte/)
+    await fx.klick(fx.finde(el, 'button[type="submit"]'))
+    const post = fx.fetchLog[2]
+    assert.equal(post.method, 'POST')
+    assert.match(post.url, /\/anfrage$/)
+    assert.deepEqual(post.body, { unterkunft: 'u1', von: '2026-11-10', bis: '2026-11-14', personen: 1, name: 'Max', firma: '', email: 'max@example.com', telefon: '', nachricht: '', formToken: 'tok1', kontakt_url: '' })
+    assert.match(fx.text(el), /Danke! Ihre Anfrage A-1234 ist eingegangen\. Sie erhalten gleich eine Bestätigung per E-Mail\./)
+  } finally { fx.restore() }
+})
+
+test('Pfeiltasten bewegen den Fokus', async () => {
+  const { fx, el } = start([{ status: 200, body: CFG }, { status: 200, body: BEL }])
+  try {
+    await fx.ruhe(); await fx.ruhe()
+    await fx.klick(tag(fx, el, '2026-11-10'))
+    await fx.sende(tag(fx, el, '2026-11-10'), 'keydown', { key: 'ArrowRight' })
+    assert.equal(fx.document.activeElement.getAttribute('data-tag'), '2026-11-11')
+    await fx.sende(fx.document.activeElement, 'keydown', { key: 'ArrowDown' })
+    assert.equal(fx.document.activeElement.getAttribute('data-tag'), '2026-11-18')
+  } finally { fx.restore() }
+})