Öffnungszeiten: Fixrunde Website-Skript und Editor (JSON-LD, Kopf beim Scrollen, späte Platzhalter, Links, Bestätigung)

- JSON-LD wird ohne "<" geschrieben (<), ein </script> im Firmennamen bricht keinen Block mehr
- verschiebe(): ist die Hinweis-Leiste weggescrollt, bekommen feste Elemente ihren eigenen Inline-top zurück
  (Köpfe, die per Klasse beim Scrollen wegfahren, funktionieren wieder)
- Späte Platzhalter (Einzelseiten-Apps): entprellter MutationObserver auf body zeichnet neue oder wieder
  eingehängte Platzhalter nach
- sichererLink lehnt Zugangsdaten in der Adresse ab; die Adresse der Schnittstelle bestimmt nur das eigene
  Script-Tag, kein Platzhalter mehr (der siteKey am Platzhalter bleibt laut Spec 4.2)
- Editor: die Bestätigung klebt unter der Kopfleiste und bleibt nach dem Speichern eines unteren Abschnitts sichtbar

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

test/ui/zeiten-embed.ui.mjs

@@ -211,6 +211,25 @@ async function pruefungen() {
     await page.waitForFunction(([erwartet]) => Math.abs(document.getElementById('kopf').getBoundingClientRect().top - erwartet) < 1, [h])
   }, { eingabe: zeitenEingabe({ hinweise: [INFO] }) })
 
+  await check('fester_header_versteckt_beim_scrollen', async (page) => {
+    // Kopf, der per Klasse beim Scrollen wegfaehrt (top: -100px), mit dem eigenen Scroll-Skript der Seite. Solange die Hinweis-Leiste sichtbar ist,
+    // rueckt das Skript ihn; ist sie weggescrollt, muss die Klasse der Seite wieder gelten (kein dauerhaftes top: 0 !important).
+    const kopf = '<header id="kopf" style="position:fixed;left:0;right:0;height:60px;background:#222;color:#fff;z-index:100;padding:0 16px;line-height:60px">Bäckerei Sonnenschein</header>'
+      + '<script>addEventListener("scroll",function(){document.getElementById("kopf").classList.toggle("weg",scrollY>300)},{passive:true})</script>'
+    await page.goto(srv.seite('kopf-weg.html', seitenHtml({ anfang: kopf, stil: '#kopf{top:0}#kopf.weg{top:-100px}' })))
+    await warteBereit(page)
+    await page.locator(HOST('hinweis')).waitFor({ state: 'attached' })
+    const h = await hoehe(page, HOST('hinweis'))
+    assert(nahe(await oben(page, '#kopf'), h, 1), `Kopf steht bei ${fmt(await oben(page, '#kopf'))} statt unter der Leiste (${fmt(h)})`)
+    // weit gescrollt: die Seite blendet den Kopf aus, das Skript haelt ihn nicht fest
+    await scrolle(page, 700)
+    await page.waitForFunction(() => document.getElementById('kopf').getBoundingClientRect().top < -99)
+    eq(await page.evaluate(() => document.getElementById('kopf').style.getPropertyValue('top')), '', 'Inline-top des Kopfes nach dem Wegscrollen der Leiste')
+    // zurueck nach oben: die Klasse faellt ab, der Kopf steht wieder unter der Leiste
+    await scrolle(page, 0)
+    await page.waitForFunction(([erwartet]) => Math.abs(document.getElementById('kopf').getBoundingClientRect().top - erwartet) < 1, [h])
+  }, { eingabe: zeitenEingabe({ hinweise: [INFO] }) })
+
   await check('team_navselektor', async (page) => {
     // der Schwebende hat top: 10px (nicht top: 0): nur der Selektor des Teams findet ihn
     const seite = seitenHtml({
@@ -420,6 +439,56 @@ async function pruefungen() {
     eq(await anzahl(page, 'script[type="application/ld+json"]'), 1, 'neuer JSON-LD-Block trotz aktiv: false')
   }, { eingabe: zeitenEingabe({ hinweise: [INFO] }) })
 
+  await check('spaeter_platzhalter_wird_gefuellt', async (page) => {
+    // Einzelseiten-App: der Platzhalter kommt erst nach einem Seitenwechsel auf die Seite (der erste Abruf ist dann laengst durch)
+    const html = seitenHtml({ inhalt: `<div id="spa"></div>${lang(5)}`, skript: SKRIPT })
+    await page.goto(srv.seite('spa.html', html))
+    await page.locator(HOST('hinweis')).waitFor({ state: 'attached' }) // das Skript hat gelaufen, es gibt keinen Platzhalter
+    await page.evaluate(() => {
+      const d = document.createElement('div')
+      d.id = 'neu'
+      d.setAttribute('data-webklar-zeiten', '')
+      d.setAttribute('data-modus', 'status')
+      d.textContent = 'Ersatz-Status'
+      document.getElementById('spa').appendChild(d)
+    })
+    await page.waitForFunction(() => { const s = document.getElementById('neu'); return s && !s.textContent.includes('Ersatz') }, null, { timeout: 3000 })
+    assert((await page.locator('#neu').innerText()).includes('geöffnet'), `Status: ${await page.locator('#neu').innerText()}`)
+    // ein zweiter Seitenwechsel: der alte Knoten geht, ein neuer kommt
+    await page.evaluate(() => {
+      document.getElementById('neu').remove()
+      const d = document.createElement('span')
+      d.id = 'neu2'
+      d.setAttribute('data-webklar-zeiten', '')
+      d.setAttribute('data-modus', 'badge')
+      d.textContent = 'Ersatz-Badge'
+      document.getElementById('spa').appendChild(d)
+    })
+    await page.waitForFunction(() => { const s = document.getElementById('neu2'); return s && !s.textContent.includes('Ersatz') }, null, { timeout: 3000 })
+    eq(await page.locator('#neu2').innerText(), 'Geöffnet', 'Badge')
+    eq(await anzahl(page, 'style#wkz-style'), 1, 'Stile')
+  }, { eingabe: zeitenEingabe({ hinweise: [INFO] }) })
+
+  await check('wieder_eingehaengter_platzhalter_wird_neu_gezeichnet', async (page) => {
+    await page.goto(srv.seite('spa-zurueck.html', seitenHtml({ inhalt: `<div id="spa"></div>${STATUS}${lang(5)}` })))
+    await warteBereit(page)
+    // der Knoten verlaesst die Seite, ein anderer Platzhalter loest ein Zeichnen aus (der alte wird dabei vergessen) ...
+    await page.evaluate(() => { window.__alt = document.getElementById('status'); window.__alt.remove() })
+    await page.evaluate(() => {
+      const d = document.createElement('div')
+      d.id = 'anderer'
+      d.setAttribute('data-webklar-zeiten', '')
+      d.setAttribute('data-modus', 'status')
+      d.textContent = 'Ersatz-Status'
+      document.getElementById('spa').appendChild(d)
+    })
+    await page.waitForFunction(() => { const s = document.getElementById('anderer'); return s && !s.textContent.includes('Ersatz') }, null, { timeout: 3000 })
+    // ... und kommt zurueck, mit dem Inhalt, den die App ihm gegeben hat
+    await page.evaluate(() => { window.__alt.textContent = 'Ersatz-Status'; document.getElementById('spa').appendChild(window.__alt) })
+    await page.waitForFunction(() => !document.getElementById('status').textContent.includes('Ersatz'), null, { timeout: 3000 })
+    assert((await statusText(page)).includes('geöffnet'), `Status: ${await statusText(page)}`)
+  }, { eingabe: zeitenEingabe({ hinweise: [INFO] }) })
+
   await check('unbekannter_plan', async (page) => {
     const meldungen = []
     page.on('console', (m) => { if (m.type() === 'warning') meldungen.push(m.text()) })

test/ui/zeiten-portal.ui.mjs

@@ -357,6 +357,30 @@ async function pruefungen() {
     eq(puts, [3, 4], 'zweites PUT mit der neuen Version')
   })
 
+  // ---------------------------------------------------------------- Bestätigung bleibt sichtbar
+  // Die Meldung ist das erste Kind des Editors; nach dem Speichern eines unteren Abschnitts (Kontakt) springt der Fokus auf den Knopf. Ohne
+  // klebende Meldung stünde „gespeichert“ dann ausserhalb des Fensters.
+  await check('fx_meldung_bleibt_sichtbar', async (page) => {
+    await oeffneEditor(page)
+    const form = page.locator('form[aria-label="Kontakt-Leiste"]')
+    await form.scrollIntoViewIfNeeded()
+    await form.locator('input[type="tel"]').first().fill('06301 999888')
+    await knopf(form, 'Kontakt-Leiste speichern').click()
+    await meldung(page).filter({ hasText: 'Kontakt-Leiste gespeichert' }).waitFor()
+    await page.waitForTimeout(150)
+    const lage = await meldung(page).evaluate((e) => {
+      const r = e.getBoundingClientRect()
+      return { oben: r.top, unten: r.bottom, hoehe: r.height, fenster: window.innerHeight, pos: getComputedStyle(e).position, scroll: window.scrollY }
+    })
+    assert(lage.scroll > 300, `die Prüfung braucht eine gescrollte Seite (scrollY ${lage.scroll})`)
+    assert(lage.hoehe > 0 && lage.oben >= -0.5 && lage.unten <= lage.fenster + 0.5, `Meldung liegt ausserhalb des Fensters: ${JSON.stringify(lage)}`)
+    eq(lage.pos, 'sticky', 'Meldung klebt unter der Kopfleiste')
+    // leer klebt sie nicht (kein leerer Streifen)
+    await meldung(page).evaluate((e) => { e.textContent = '' })
+    eq(await meldung(page).evaluate((e) => getComputedStyle(e).position), 'static', 'leere Meldung')
+    await shot(page, 'meldung-sichtbar')
+  }, { context: { viewport: { width: 1280, height: 600 } } })
+
   // ---------------------------------------------------------------- Urlaub ⇒ Hinweis-Vorschlag, „Hinweis-Leiste anlegen“
   await check('fx_hinweis_vorschlag', async (page, _ctx, fx) => {
     await oeffneEditor(page)

test/zeitenEditor.test.js

@@ -1942,3 +1942,10 @@ test('zeiten.css: jede zt-Klasse der Editor-Module ist gestaltet', () => {
   assert.ok(gesetzt.size >= 5)
   for (const klasse of gesetzt) assert.ok(css.includes(`.${klasse}`), `.${klasse} hat keine Gestaltung`)
 })
+
+test('zeiten.css: die Bestätigung des Editors klebt unter der Kopfleiste, solange sie nicht leer ist (undurchsichtig, z-index 5)', () => {
+  const css = lesen('public/zeiten.css')
+  assert.match(css, /\.zt-editor > \.tm-meldung:not\(:empty\) \{ position: sticky; top: calc\(var\(--kb-appbar-h, 0px\) \+ 8px\); z-index: 5;/)
+  assert.match(css, /\.zt-editor > \.tm-meldung-ok:not\(:empty\) \{ background: linear-gradient\(.*\), #0c0c0e; \}/)
+  assert.match(css, /\.zt-editor > \.tm-meldung-fehler:not\(:empty\) \{ background: linear-gradient\(.*\), #0c0c0e; \}/)
+})

test/zeitenEmbedStatic.test.js

@@ -410,7 +410,7 @@ function leisten() {
   const tel = /\/\/ @telefon-anfang[^\n]*\n([\s\S]*?)\/\/ @telefon-ende/.exec(QUELLE)
   assert.ok(rein && tel, 'Marken fehlen')
   return vm.runInNewContext(
-    `${tel[1]}; ${rein[1]}; ({ jsonLdEinbauen, kontaktKnoepfe, istEigeneAnrufLeiste, hinweisKnopf, HINWEIS_FARBEN })`,
+    `${tel[1]}; ${rein[1]}; ({ jsonLdEinbauen, jsonLdText, kontaktKnoepfe, istEigeneAnrufLeiste, hinweisKnopf, HINWEIS_FARBEN })`,
     {},
   )
 }
@@ -571,9 +571,15 @@ test('Kontakt-Knöpfe aus Teildaten', () => {
 test('Links aus der API werden erneut geprüft (https:, tel: nur über telefonLink)', () => {
   const { hinweisKnopf } = leisten()
   assert.equal(hinweisKnopf({ art: 'link', ziel: 'javascript:alert(1)', text: 'Los' }), null, 'javascript: ist kein Link')
-  for (const bose of ['JaVaScRiPt:alert(1)', 'data:text/html,<b>x</b>', 'vbscript:x', 'http://x.example/', '//x.example/', '/aktion', 'x.example', ' https://x.example/', 'https://x.example/a b', 'https://', 'https:x', '', 'tel:+4963011234', 'https://x.example/\n', 5, null, {}]) {
+  for (const bose of ['JaVaScRiPt:alert(1)', 'data:text/html,<b>x</b>', 'vbscript:x', 'http://x.example/', '//x.example/', '/aktion', 'x.example', ' https://x.example/', 'https://x.example/a b', 'https://', 'https:x', '', 'tel:+4963011234', 'https://x.example/\n', 5, null, {},
+    // Zugangsdaten in der Adresse (wie der Server und linkOk des Portals): nie ein Link
+    'https://user:pw@x.example/', 'https://user@x.example/', 'https://:pw@x.example/', 'https://x.example@evil.example/', 'https://evil.example\\@x.example/']) {
     assert.equal(hinweisKnopf({ art: 'link', ziel: bose, text: 'Los' }), null, JSON.stringify(bose))
   }
+  // Pfad, Suche, Anker und Port bleiben erlaubt (ein @ dort ist keine Zugangsdaten)
+  for (const gut of ['https://x.example', 'https://x.example:8443/a', 'https://x.example?x=1', 'https://x.example#a', 'https://x.example/mail@x.example', 'https://x.example/a?u=a@b#c@d']) {
+    assert.equal(hinweisKnopf({ art: 'link', ziel: gut, text: 'Los' })?.href, gut, gut)
+  }
   assert.deepEqual(norm(hinweisKnopf({ art: 'link', ziel: 'https://baeckerei.example/aktion?x=1#a', text: 'Zur Aktion' })), { art: 'link', href: 'https://baeckerei.example/aktion?x=1#a', text: 'Zur Aktion' })
   assert.deepEqual(norm(hinweisKnopf({ art: 'anruf', ziel: '06301 1234', text: 'Jetzt anrufen' })), { art: 'anruf', href: 'tel:063011234', text: 'Jetzt anrufen' })
   assert.deepEqual(norm(hinweisKnopf({ art: 'anruf', ziel: '+49 6301 1234', text: '' })), { art: 'anruf', href: 'tel:+4963011234', text: 'Anrufen' }, 'ohne Beschriftung eine Vorgabe')
@@ -583,6 +589,44 @@ test('Links aus der API werden erneut geprüft (https:, tel: nur über telefonLi
   for (const leer of [null, undefined, {}, 'x', 5, []]) assert.equal(hinweisKnopf(leer), null, JSON.stringify(leer))
 })
 
+test('Kontakt-Knöpfe: Route und WhatsApp mit Zugangsdaten in der Adresse fallen weg', () => {
+  const { kontaktKnoepfe } = leisten()
+  assert.deepEqual(norm(kontaktKnoepfe({ telefon: null, routeUrl: 'https://user:pw@www.google.com/maps', whatsappUrl: 'https://wa.me@evil.example/491711234567' })), [])
+})
+
+test('JSON-LD-Text: kein "<" im geschriebenen Text (</script> beendet sonst ein serialisiertes Skript), Inhalt bleibt gleich lesbar', () => {
+  const { jsonLdText } = leisten()
+  const wert = { '@type': 'LocalBusiness', name: 'Bäckerei </script><img src=x onerror=alert(1)> & Co', address: 'a<b' }
+  const text = jsonLdText(wert)
+  assert.ok(!text.includes('<'), text)
+  assert.ok(text.includes('\\u003c/script>'))
+  assert.deepEqual(JSON.parse(text), wert, 'JSON.parse macht daraus wieder dasselbe')
+  assert.equal(jsonLdText([]), '[]')
+  // beide Stellen, die JSON-LD in die Seite schreiben, gehen über den Helfer
+  assert.doesNotMatch(OHNE_KOMMENTARE, /textContent = JSON\.stringify\(/, 'JSON-LD nie ohne Escape in textContent')
+  assert.equal([...OHNE_KOMMENTARE.matchAll(/textContent = jsonLdText\(/g)].length, 2, 'eigener und fremder Block')
+})
+
+test('Quelltext: die Adresse der Schnittstelle bestimmt nur das eigene Script-Tag (data-api) oder dessen Herkunft, nie ein Platzhalter', () => {
+  const api = /function bestimmeApi \(skript\) \{([\s\S]*?)\n  \}\n/.exec(OHNE_KOMMENTARE)
+  assert.ok(api, 'bestimmeApi fehlt')
+  assert.match(api[1], /attr\(skript, 'data-api'\)/)
+  assert.doesNotMatch(api[1], /platzhalter/, 'kein data-api an Platzhaltern: eine Seite könnte sonst die Anfragen umleiten')
+  // der siteKey darf (Spec 4.2) auch am Platzhalter stehen
+  const key = /function bestimmeSiteKey \(skript\) \{([\s\S]*?)\n  \}\n/.exec(OHNE_KOMMENTARE)
+  assert.ok(key && /attr\(skript, 'data-site'\)/.test(key[1]) && /attr\(platzhalter\[i\]\.root, 'data-webklar-zeiten'\)/.test(key[1]))
+})
+
+test('Späte Platzhalter (Einzelseiten-Apps): ein MutationObserver auf body, entprellt über timer, rendert nur bei neuem oder wieder eingehängtem Platzhalter', () => {
+  assert.match(OHNE_KOMMENTARE, /new MutationObserver\(/)
+  assert.match(OHNE_KOMMENTARE, /observe\(document\.body, \{ childList: true, subtree: true \}\)/)
+  const beo = /function beobachteSeite \(\) \{([\s\S]*?)\n  \}\n/.exec(OHNE_KOMMENTARE)
+  assert.ok(beo, 'beobachteSeite fehlt')
+  assert.match(beo[1], /timer\(/, 'die Entprellung läuft über timer (die einzige setTimeout-Stelle)')
+  assert.match(OHNE_KOMMENTARE, /var BEOBACHTER_MS = 200\b/)
+  assert.match(OHNE_KOMMENTARE, /querySelector\(SELEKTOR \+ ':not\(\[data-wkz-init\]\)'\)/)
+})
+
 test('istEigeneAnrufLeiste: festes oder klebendes Element unten mit tel:-Link; oben, ausgeblendet oder bildschirmhoch zählt nicht', () => {
   const { istEigeneAnrufLeiste } = leisten()
   const fenster = 844
@@ -629,7 +673,7 @@ test('Leisten im Quelltext: Shadow DOM, Rolle und Name, Handy-Abfrage, z-index 4
   assert.doesNotMatch(OHNE_KOMMENTARE, /aria-live/)
   assert.ok(!OHNE_KOMMENTARE.includes('close') && !/Schlie(ss|ß)en/.test(OHNE_KOMMENTARE), 'keine Schließen-Schaltfläche')
   // JSON-LD wird über textContent geschrieben (nie innerHTML), der Selektor des Teams nur in try/catch
-  assert.match(OHNE_KOMMENTARE, /\.textContent = JSON\.stringify\(/)
+  assert.match(OHNE_KOMMENTARE, /\.textContent = jsonLdText\(/, "JSON-LD wird über jsonLdText (ohne <) geschrieben")
   assert.match(OHNE_KOMMENTARE, /try \{[^}]*querySelectorAll\(nav\)[^}]*\} catch/, 'navSelektor nur in try/catch')
   // Linkziele nie per String in HTML, sondern per setAttribute; jeder Link bekommt rel
   assert.ok(OHNE_KOMMENTARE.includes("'rel', 'noopener noreferrer'"))