Design: Rechtstexte als Abschnitte mit Haarlinien, Aufklappzeile als Button

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

src/components/legal/LegalTextsTab.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Badge, Button, Card } from '../ui'
+import { Badge, Card } from '../ui'
 import { currentVersion, formatDate } from '../../lib/legal'
 import VersionForm from './VersionForm'
 import { FileLinks } from './legalUi'
@@ -21,8 +21,8 @@ export default function LegalTextsTab({ documents, versions, fileNames, addVersi
   }
 
   return (
-    <div className="legal-grid">
-      {actionError && <div className="legal-error">{actionError}</div>}
+    <div className="legal-docs">
+      {actionError && <div className="msg err legal-msg" role="alert">{actionError}</div>}
       {documents.map((doc) => {
         const own = versions.filter((v) => v.documentKey === doc.key).sort(byNewest)
         const current = currentVersion(own)
@@ -33,9 +33,14 @@ export default function LegalTextsTab({ documents, versions, fileNames, addVersi
             key={doc.$id}
             className="legal-doc"
             title={doc.title}
-            actions={<Button size="sm" onClick={() => setFormFor(doc)}>Neue Version</Button>}
+            actions={<button type="button" className="link" onClick={() => setFormFor(doc)}>Neue Version</button>}
           >
-            <div className="legal-doc-summary" onClick={() => setOpen(expanded ? null : doc.key)} role="button">
+            <button
+              type="button"
+              className="legal-doc-summary"
+              aria-expanded={expanded}
+              onClick={() => setOpen(expanded ? null : doc.key)}
+            >
               {current ? (
                 <Badge tone="ok">{current.version} · gilt seit {formatDate(current.validFrom)}</Badge>
               ) : (
@@ -44,23 +49,23 @@ export default function LegalTextsTab({ documents, versions, fileNames, addVersi
               {drafts.map((d) => (
                 <Badge key={d.$id} tone="muted">Entwurf {d.version}</Badge>
               ))}
-              <span className="faint legal-toggle">{expanded ? 'Verlauf ausblenden' : `Verlauf (${own.length})`}</span>
-            </div>
+              <span className="legal-toggle">{expanded ? 'Verlauf ausblenden' : `Verlauf (${own.length})`}</span>
+            </button>
             {doc.liveUrl && (
-              <a href={doc.liveUrl} target="_blank" rel="noreferrer" className="legal-live">Live-Seite öffnen</a>
+              <a href={doc.liveUrl} target="_blank" rel="noreferrer" className="link legal-live">Live-Seite öffnen</a>
             )}
             {expanded && (
               <ol className="legal-history">
                 {own.length === 0 && <li className="faint">Noch keine Versionen eingetragen.</li>}
                 {own.map((v) => (
-                  <li key={v.$id} className={`legal-version legal-version-${v.status}`}>
+                  <li key={v.$id} className={v.status === 'superseded' ? 'legal-version is-superseded' : 'legal-version'}>
                     <div className="legal-version-head">
                       <strong>{v.version}</strong>
-                      <span>{formatDate(v.validFrom)} – {v.status === 'current' ? 'heute' : formatDate(v.validTo)}</span>
+                      <span className="muted">{formatDate(v.validFrom)} – {v.status === 'current' ? 'heute' : formatDate(v.validTo)}</span>
                       {v.status === 'current' && <Badge tone="ok">gültig</Badge>}
                       {v.status === 'draft' && <Badge tone="muted">Entwurf</Badge>}
                       {v.status === 'draft' && (
-                        <Button size="sm" onClick={() => promote(v)}>Als gültig markieren</Button>
+                        <button type="button" className="link" onClick={() => promote(v)}>Als gültig markieren</button>
                       )}
                     </div>
                     {v.changeNote && <div className="legal-note">{v.changeNote}</div>}

src/components/legal/legalUi.jsx

@@ -11,9 +11,9 @@ export function FileLinks({ fileIds = [], fileNames = {} }) {
     <span className="legal-files">
       {fileIds.map((id) => (
         <span key={id}>
-          <a href={fileUrl(id)} target="_blank" rel="noreferrer">{fileNames[id] || 'Datei'}</a>
+          <a href={fileUrl(id)} target="_blank" rel="noreferrer" className="link">{fileNames[id] || 'Datei'}</a>
           {' '}
-          <a href={fileDownloadUrl(id)} className="faint">(herunterladen)</a>
+          <a href={fileDownloadUrl(id)} className="link legal-dl">(herunterladen)</a>
         </span>
       ))}
     </span>