Workers P3-Endprüfung W4: kein Zusatzabstand von 36 px zwischen den Abschnitten des Interessenten-Panels

Die globale Regel .page section + section traf den zweiten Abschnitt "Nachrichtenverlauf" und
ergab 52 px statt 16 px vor der Trennlinie. Eine Regel mit Nachbar-Kombinator (0,3,0) nimmt den
Zusatzabstand zurück; der Abstand kommt allein aus gap.

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

src/styles/workers.css

@@ -208,6 +208,10 @@
 .wk-prospect-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; overflow-wrap: anywhere; }
 .wk-prospect-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--line); }
 .wk-prospect-section p { margin: 0; }
+/* Das Panel liegt unter .page: dessen globale Regel `.page section + section { margin-top: 36px }` träfe sonst den zweiten Abschnitt und */
+/* ergäbe 52 px (16 px gap + 36 px) statt 16 px vor der Trennlinie. Der Abstand kommt allein aus gap. Die Regel braucht den Nachbar-Kombinator, */
+/* damit sie mit (0,3,0) gegen (0,1,2) gewinnt; ein einfaches `.wk-prospect-section { margin-top: 0 }` (0,1,0) verlöre. */
+.wk-prospect .wk-prospect-section + .wk-prospect-section { margin-top: 0; }
 .wk-prospect-title { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--text-2); }
 .wk-prospect-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
 .wk-prospect-msg { min-width: 0; }

tests/unit/workersCss.test.mjs

@@ -24,3 +24,16 @@ test('workers.css: die Karte bleibt beim Anspringen unter der festen Leiste der
   const phone = css.slice(css.indexOf('@media (max-width: 860px)'))
   assert.match(phone, /\.wk-card\s*\{\s*scroll-margin-top:\s*64px/)   // 52 px Leiste + Luft
 })
+test('workers.css: die globale Regel .page section + section (36 px) verlängert den Abstand der Panel-Abschnitte nicht (W4)', () => {
+  const global = readFileSync(new URL('../../src/styles/global.css', import.meta.url), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+  const css = readFileSync(new URL('../../src/styles/workers.css', import.meta.url), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '')
+  assert.match(global, /\.page section \+ section\s*\{\s*margin-top:\s*36px/)   // die Regel, gegen die das Panel sich behaupten muss: Spezifität (0,1,2)
+  const m = css.match(/(\.wk-prospect [^{}]*\.wk-prospect-section \+ \.wk-prospect-section)\s*\{([^}]*)\}/)
+  assert.ok(m, 'Regel für zwei benachbarte Abschnitte im Panel')
+  assert.match(m[2], /margin-top:\s*0\b/)
+  // Spezifität: zwei Klassen (0,2,0) schlagen schon (0,1,2); eine einzelne Klasse (0,1,0) verlöre
+  assert.ok((m[1].match(/\.[\w-]+/g) || []).length >= 2, 'mindestens zwei Klassen')
+  // der Abstand der Abschnitte kommt aus gap, nicht aus einem eigenen margin-top
+  assert.match(css, /\.wk-prospect\s*\{[^}]*gap:\s*16px/)
+  assert.doesNotMatch(css.match(/\.wk-prospect-section\s*\{([^}]*)\}/)[1], /margin-top/)
+})