Kundenansicht neu (Aufträge): Rückfrage-Zeile als ganze Link-Zeile, Einklappen ohne verschachtelte Regel, Balken im Pseudo-Element

- Die Zeile "Wir brauchen eine Info von dir · Im Chat antworten" ist ein Link (#chat) mit großer Tippfläche am Handy; unterstrichen ist nur der zweite Teil.
- Browserlauf: .kn-einklappbar:not(.is-open) [data-extra] verbarg die Zeilen einer aufgeklappten Zeitleiste, wenn der äußere Wrapper zu war.
  Die Wrapper haben jetzt eigene Klassen und Regeln nur für direkte Kinder (mit Regressionstest).
- Die Fläche der Balken-Abschnitte liegt im Pseudo-Element, der Lesetext darunter bleibt auf Weiß (Gate low-contrast).
- Das Modul steht in den Listen der Quelltext- und Stil-Tests der Ansicht-Module.

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

public/neu/ansichten.css

@@ -112,16 +112,19 @@
 .kn-unterstuetzung li { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: 13px; color: var(--kn-text-2); }
 /* „Was wir zuletzt erledigt haben“ als Zeitleiste (Variante C): je Auftrag Überschrift mit Pille, schmaler Balken in vier Abschnitten, Zeitleiste mit Haarlinie */
 .kn-az-liste { margin: 0; }
+.kn-az-liste:not(.is-open) > .kn-az-auftraege > [data-extra] { display: none; } /* nur direkte Kinder: die Zeitleisten darin klappen für sich */
 .kn-az-auftraege { list-style: none; margin: 0; padding: 0; }
 .kn-az { padding: 20px 0; border-top: 1px solid var(--kn-line); }
 .kn-az-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
 .kn-az-titel { flex: 1 1 12em; min-width: 0; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
 .kn-az-kopf .kn-pille { flex: none; margin-top: 2px; }
-.kn-az-info { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--kn-orange-fg); }
-.kn-az-info a { font-weight: 600; text-decoration-color: currentColor; }
+.kn-az-info { margin: 8px 0 0; font-size: 14px; line-height: 20px; }
+.kn-az-info a { color: var(--kn-orange-fg); text-decoration: none; }
+.kn-az-info-link { font-weight: 600; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
 .kn-az-balken { display: flex; gap: 3px; margin: 12px 0 0; padding: 0; list-style: none; }
-.kn-az-balken li { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--kn-line); }
-.kn-az-balken li.is-done { background: var(--kn-accent); }
+.kn-az-balken li { position: relative; flex: 1; height: 4px; }
+.kn-az-balken li::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--kn-line); } /* die Fläche liegt im Pseudo-Element: der Lesetext darunter bleibt auf Weiß */
+.kn-az-balken li.is-done::before { background: var(--kn-accent); }
 .kn-nur-lesen { 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; }
 .kn-az-zeitleiste { margin: 14px 0 0; }
 .kn-az-zeilen { list-style: none; margin: 0 0 0 3px; padding: 0; border-left: 1px solid var(--kn-line-strong); }
@@ -129,6 +132,7 @@
 .kn-az-zeilen li::before { content: ""; position: absolute; left: -3px; top: 12px; width: 5px; height: 5px; border-radius: 50%; background: var(--kn-line-strong); }
 .kn-az-datum { flex: none; min-width: 3.2em; color: var(--kn-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
 .kn-az-text { min-width: 0; overflow-wrap: anywhere; }
+.kn-az-zeitleiste:not(.is-open) > .kn-az-zeilen > [data-extra] { display: none; }
 .kn-az-mehr { margin: 4px 0 0 8px; }
 .kn-az-leer { margin: 12px 0 0; font-size: 14px; color: var(--kn-text-2); }
 .kn-az-aeltere { margin: 8px 0 0; }
@@ -376,8 +380,9 @@
   .kn-zeilenlink { display: inline-flex; align-items: center; min-height: 44px; }
   /* Pflicht- und Zahlungslinks (E-Fix F3): Verträge hier kündigen, Vertrag widerrufen, Vertragsbedingungen, Zahlen in der Zeile „Rechnung offen“ */
   .kn-kuendigen a, .kn-widerruf a, .kn-links a, .kn-rechnung-offen a { display: inline-flex; align-items: center; min-height: 44px; }
-  .kn-az-info a { display: inline-flex; align-items: center; min-height: 44px; }
-  .kn-az-info { margin-top: 4px; }
+  .kn-az-info { margin-top: 0; }
+  .kn-az-info a { display: flex; align-items: center; min-height: 44px; }
+  .kn-az-info + .kn-az-balken { margin-top: 0; }
   .kn-rechnung-offen { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
   .kn-rechnung-offen .kn-trenner { display: none; }
   .kn-rechnung-offen a { flex: none; font-weight: 600; }

public/neu/auftrags-zeitleiste.js

@@ -119,7 +119,8 @@ export function zeitleistenZeilen(auftrag, jetzt = new Date()) {
 const LEER = 'Es wurden noch keine Arbeiten dokumentiert.'
 const KEINE_EINTRAEGE = 'Noch keine Arbeiten dokumentiert.'
 
-/** Knopf, der den nächsten Wrapper [data-einklappbar] auf- und zuklappt (is-open); die Zeilen dahinter tragen [data-extra]. */
+/** Knopf, der den nächsten Wrapper [data-einklappbar] auf- und zuklappt (is-open); die Zeilen dahinter tragen [data-extra]. Die CSS-Regeln dazu gelten nur für
+    direkte Kinder (ansichten.css, .kn-az-…): die allgemeine Regel .kn-einklappbar würde bei verschachtelten Wrappern auch offene Zeilen verbergen. */
 function umschalter({ attribut, klasse, mehr, weniger }) {
   const knopf = h('button', { type: 'button', class: klasse, [attribut]: true, 'aria-expanded': 'false' }, mehr)
   knopf.addEventListener('click', () => {
@@ -146,7 +147,7 @@ function baueZeitleiste(zeilen) {
   const zeile = (z, extra) => h('li', { 'data-extra': extra },
     z.datum ? h('time', { class: 'kn-az-datum', datetime: z.iso || null }, z.datum) : h('span', { class: 'kn-az-datum', 'aria-hidden': 'true' }),
     h('span', { class: 'kn-az-text' }, z.text))
-  return h('div', { class: 'kn-az-zeitleiste kn-einklappbar', 'data-einklappbar': true },
+  return h('div', { class: 'kn-az-zeitleiste', 'data-einklappbar': true },
     h('ol', { class: 'kn-az-zeilen' }, sichtbar.map((z) => zeile(z, false)), rest.map((z) => zeile(z, true))),
     rest.length ? umschalter({ attribut: 'data-mehr', klasse: 'kn-textknopf kn-az-mehr', mehr: 'mehr anzeigen', weniger: 'weniger anzeigen' }) : null)
 }
@@ -158,7 +159,8 @@ function baueAuftragsBlock(auftrag, jetzt, extra) {
     h('div', { class: 'kn-az-kopf' },
       h('h3', { class: 'kn-az-titel' }, auftrag.topic || 'Dein Auftrag'),
       status.label ? h('span', { class: K.pille[statusTon(status.tone)] }, status.label) : null),
-    braucheInfo(auftrag) ? h('p', { class: 'kn-az-info' }, 'Wir brauchen eine Info von dir · ', h('a', zuAnsicht('chat'), 'Im Chat antworten')) : null,
+    // Die ganze Zeile führt in den Chat (große Tippfläche am Handy); unterstrichen ist nur „Im Chat antworten“
+    braucheInfo(auftrag) ? h('p', { class: 'kn-az-info' }, h('a', zuAnsicht('chat'), 'Wir brauchen eine Info von dir · ', h('span', { class: 'kn-az-info-link' }, 'Im Chat antworten'))) : null,
     baueBalken(status),
     zeilen.length ? baueZeitleiste(zeilen) : h('p', { class: 'kn-az-leer' }, KEINE_EINTRAEGE))
 }
@@ -167,7 +169,7 @@ function baueAuftragsBlock(auftrag, jetzt, extra) {
 export function baueAktivitaet(tickets, jetzt = new Date()) {
   const { sichtbar, aeltere } = gruppiereAuftraege(tickets)
   if (!sichtbar.length) return h('p', { class: 'kn-hinweis' }, LEER)
-  return h('div', { class: 'kn-az-liste kn-einklappbar', 'data-einklappbar': true },
+  return h('div', { class: 'kn-az-liste', 'data-einklappbar': true },
     h('ul', { class: 'kn-az-auftraege' }, sichtbar.map((a) => baueAuftragsBlock(a, jetzt, false)), aeltere.map((a) => baueAuftragsBlock(a, jetzt, true))),
     aeltere.length ? umschalter({ attribut: 'data-aeltere', klasse: 'kn-knopf kn-az-aeltere', mehr: 'Ältere Aufträge anzeigen', weniger: 'Weniger anzeigen' }) : null)
 }

test/knAnsichtQuelltext.test.js

@@ -6,7 +6,7 @@ import { fileURLToPath } from 'node:url'
 
 const WURZEL = path.join(path.dirname(fileURLToPath(import.meta.url)), '..')
 const NEU = path.join(WURZEL, 'public', 'neu')
-const MODULE = ['ansicht-hilfen', 'rechnung-offen', 'install-hinweis', 'website-details', 'ansicht-website', 'ansicht-chat', 'ansicht-vertraege', 'vertraege-rechnungen', 'vertraege-abo', 'ansicht-stunden', 'ansicht-speicher', 'ansicht-bestellen', 'ansicht-wechsel', 'ansicht-gutschrift', 'ansicht-passwort', 'bestell-bausteine']
+const MODULE = ['ansicht-hilfen', 'rechnung-offen', 'install-hinweis', 'website-details', 'auftrags-zeitleiste', 'ansicht-website', 'ansicht-chat', 'ansicht-vertraege', 'vertraege-rechnungen', 'vertraege-abo', 'ansicht-stunden', 'ansicht-speicher', 'ansicht-bestellen', 'ansicht-wechsel', 'ansicht-gutschrift', 'ansicht-passwort', 'bestell-bausteine']
 // Seit P7 sprechen auch die vier Bestellseiten „du“ (Fassung 6, C14); einzige Ausnahme ist der Rechtstext TAKEOVER_CONDITIONS (hash-gepinnt)
 const WORTLAUT = []
 const BESTELLSEITEN = ['ansicht-bestellen', 'ansicht-wechsel', 'ansicht-speicher', 'ansicht-gutschrift', 'bestell-bausteine']

test/knAnsichtStil.test.js

@@ -6,7 +6,7 @@ import { K } from '../public/neu/ansicht-hilfen.js'
 const css = (f) => readFileSync(new URL(`../public/neu/${f}`, import.meta.url), 'utf8')
 const lese = (p) => readFileSync(new URL(`../public/${p}`, import.meta.url), 'utf8')
 const A = css('ansichten.css'); const O = css('oeffentlich/oeffentlich.css'); const C = css('chat-composer.css'); const BASIS = css('basis.css'); const TOKENS = css('tokens.css')
-const MODULE = ['ansicht-hilfen', 'rechnung-offen', 'install-hinweis', 'website-details', 'ansicht-website', 'ansicht-chat', 'ansicht-vertraege', 'vertraege-rechnungen', 'vertraege-abo', 'ansicht-stunden', 'ansicht-speicher', 'ansicht-bestellen', 'ansicht-wechsel', 'ansicht-gutschrift', 'ansicht-passwort', 'bestell-bausteine']
+const MODULE = ['ansicht-hilfen', 'rechnung-offen', 'install-hinweis', 'website-details', 'auftrags-zeitleiste', 'ansicht-website', 'ansicht-chat', 'ansicht-vertraege', 'vertraege-rechnungen', 'vertraege-abo', 'ansicht-stunden', 'ansicht-speicher', 'ansicht-bestellen', 'ansicht-wechsel', 'ansicht-gutschrift', 'ansicht-passwort', 'bestell-bausteine']
 const existiert = (n) => existsSync(new URL(`../public/neu/${n}.js`, import.meta.url))
 const lies = (n) => css(`${n}.js`).replace(/\/\*[\s\S]*?\*\//g, '')
 const VERBOTEN = /linear-gradient|radial-gradient|conic-gradient|backdrop-filter|prefers-color-scheme:\s*dark|font-weight:\s*800|#9d3dfe|rgba?\(\s*157\s*,\s*61/i

test/knAuftragsZeitleisteDom.test.js

@@ -1,8 +1,10 @@
 // „Was wir zuletzt erledigt haben“ als Zeitleiste (Variante C): der DOM-Bau mit dem Fake-DOM. Die reine Logik prüft knAuftragsZeitleiste.test.js.
 import { test } from 'node:test'
 import assert from 'node:assert/strict'
+import { readFileSync } from 'node:fs'
 import { baueAktivitaet } from '../public/neu/auftrags-zeitleiste.js'
 import { mitDom } from './support/knDaten.js'
+import { customerOrder, customerWorkEntries } from '../server/services/customerProjectView.js'
 
 const JETZT = new Date('2026-10-16T09:00:00Z')
 const ST = {
@@ -65,7 +67,9 @@ test('Aktivität: Rückfrage steht unter der Überschrift mit Link in den Chat,
   const [wartet, pruefung, fertig] = fx.alle(el, '[data-auftrag]')
   const info = fx.finde(wartet, '.kn-az-info')
   assert.equal(info.textContent, 'Wir brauchen eine Info von dir · Im Chat antworten')
-  const chat = fx.finde(info, 'a'); assert.deepEqual([chat.textContent, chat.getAttribute('href'), chat.getAttribute('data-view')], ['Im Chat antworten', '#chat', 'chat'])
+  // Die ganze Zeile ist der Link in den Chat (eine große Tippfläche am Handy); nur „Im Chat antworten“ ist unterstrichen
+  const chat = fx.finde(info, 'a'); assert.deepEqual([chat.textContent, chat.getAttribute('href'), chat.getAttribute('data-view')], ['Wir brauchen eine Info von dir · Im Chat antworten', '#chat', 'chat'])
+  assert.equal(fx.finde(chat, '.kn-az-info-link').textContent, 'Im Chat antworten'); assert.equal(fx.alle(info, 'a').length, 1)
   assert.equal(fx.alle(el, '.kn-az-info').length, 1); assert.equal(fx.finde(pruefung, '.kn-az-info'), null); assert.equal(fx.finde(fertig, '.kn-az-info'), null)
   // Reihenfolge im Block: Kopf, Info, Balken, Zeitleiste
   const klassen = [...wartet.children].map((k) => k.className.split(' ')[0]); assert.deepEqual(klassen, ['kn-az-kopf', 'kn-az-info', 'kn-az-balken', 'kn-az-zeitleiste'])
@@ -131,3 +135,35 @@ test('Aktivität: fremde Inhalte bleiben Text; leer und kaputte Elemente', () =>
   const roh = baueAktivitaet([{ number: '9' }, { topic: 'Nur Titel', status: null, entries: null }], JETZT)
   assert.equal(fx.alle(roh, '.kn-az').length, 2); assert.match(fx.text(roh), /Dein Auftrag/); assert.doesNotMatch(fx.text(roh), /null|undefined/)
 }))
+
+// Vertrag mit dem Server: GET /api/activity baut jeden Auftrag aus customerOrder() und customerWorkEntries() (server/routes/customerData.js).
+// Hier läuft die echte Server-Aufbereitung in die Zeitleiste, damit eine geänderte Antwortform den Test rot macht.
+test('Vertrag: Aufträge in der Form von /api/activity (customerOrder, customerWorkEntries) erscheinen mit Datum und Kurztext', () => mitDom((fx) => {
+  const ticket = (woid, status, createdAt, worksheets) => ({ woid, topic: `Thema ${woid}`, status, createdAt, worksheets })
+  const antwort = [
+    ticket('100231', 'awaiting', '2026-10-13T10:00:00.000Z', [
+      { serviceType: 'REMOTE', date: '14.10.2026', totalTime: 50, employeeName: 'Lena Vogel', details: 'Fotos erhalten und gesichtet.\nWeitere Zeile.', supporters: '' },
+      { serviceType: 'GIT', date: '2026-10-12', totalTime: 0, isComment: true, details: '- [abcdef1](https://git.example/x/commit/abcdef1): feat: Menü angepasst (Kenso)\n- [abcdef2](https://git.example/x/commit/abcdef2): Bilder getauscht (Kenso)' },
+    ]),
+    ticket('100207', 'closed', '2026-10-02T10:00:00.000Z', [{ serviceType: 'ON SITE', date: '04.10.2026', totalTime: 60, employeeName: 'Kenso', details: '' }]),
+  ].map((t) => ({ ...customerOrder(t), createdAt: t.createdAt, entries: customerWorkEntries(t.worksheets) }))
+  const el = baueAktivitaet(antwort, JETZT)
+  const [wartet, fertig] = fx.alle(el, '[data-auftrag]')
+  assert.deepEqual([wartet.getAttribute('data-auftrag'), fertig.getAttribute('data-auftrag')], ['100231', '100207'])
+  assert.equal(fx.finde(wartet, '.kn-pille').textContent, 'Wartet auf deine Rückmeldung'); assert.ok(fx.finde(wartet, '.kn-az-info'))
+  assert.deepEqual(fx.alle(wartet, '.kn-az-zeilen li').map((z) => z.textContent), ['14.10.Fotos erhalten und gesichtet.', '12.10.Menü angepasst und 1 weitere Änderung'])
+  assert.equal(fx.finde(fertig, '.kn-pille').textContent, 'Erledigt'); assert.deepEqual(fx.alle(fertig, '.kn-az-zeilen li').map((z) => z.textContent), ['04.10.Vor Ort bei dir'])
+}))
+
+// Regression (Browserlauf 17.10.): Die allgemeine Regel `.kn-einklappbar:not(.is-open) [data-extra]` trifft jeden Nachfahren. Läge sie an den verschachtelten Wrappern
+// (Aufträge, darin die Zeitleisten), verbärge ein zugeklappter äußerer Wrapper auch die Zeilen einer aufgeklappten Zeitleiste. Darum tragen beide Wrapper eigene Klassen
+// und eigene Regeln nur für direkte Kinder.
+test('Einklappen: die Wrapper verschachteln sich nicht über .kn-einklappbar, die Regeln gelten nur für direkte Kinder', () => mitDom((fx) => {
+  const viele = Array.from({ length: 6 }, (_, i) => auftrag(400 + i, 'arbeit', `2026-10-0${i + 1}T00:00:00Z`, ['a', 'b', 'c', 'd'].map((t, j) => eintrag(`2026-10-1${j}`, t))))
+  const el = baueAktivitaet(viele, JETZT)
+  assert.deepEqual(fx.alle(el, '[data-einklappbar]').map((w) => w.classList.contains('kn-einklappbar')), new Array(7).fill(false))
+  assert.equal(el.classList.contains('kn-az-liste'), true); assert.equal(fx.finde(el, '[data-einklappbar] [data-einklappbar]').classList.contains('kn-az-zeitleiste'), true)
+  const css = readFileSync(new URL('../public/neu/ansichten.css', import.meta.url), 'utf8')
+  assert.match(css, /\.kn-az-liste:not\(\.is-open\) > \.kn-az-auftraege > \[data-extra\] \{ display: none; \}/)
+  assert.match(css, /\.kn-az-zeitleiste:not\(\.is-open\) > \.kn-az-zeilen > \[data-extra\] \{ display: none; \}/)
+}))