fix(ui): Akte-Header und Gründe-Liste überlappten sich

Beide Elemente trugen die Klasse akte-kopf und damit dasselbe
grid-area - das CSS-Grid platzierte sie übereinander statt
untereinander. Jetzt ein gemeinsamer Container mit einem grid-area.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CVgbozhYmuEhiEJHffRXCV

frontend/src/pages/AktePage.tsx

@@ -55,7 +55,8 @@ export function AktePage() {
 
   return (
     <main className={`page-wide akte-grid${istFahrzeug ? " ist-fahrzeug" : ""}`}>
-      <div className="akte-kopf row-between" style={{ alignItems: "flex-start" }}>
+      <div className="akte-kopf">
+        <div className="row-between" style={{ alignItems: "flex-start" }}>
           <div>
             <h1 style={{ marginBottom: "0.15rem" }}>{objekt.name}</h1>
             <div className="text-muted">
@@ -65,7 +66,7 @@ export function AktePage() {
           <ReadinessBadge status={akte.einsatzbereitschaft_status} />
         </div>
         {akte.einsatzbereitschaft_gruende.length > 0 && (
-        <ul className="akte-kopf card-list" style={{ marginTop: "0.5rem" }}>
+          <ul className="card-list" style={{ marginTop: "0.5rem" }}>
             {akte.einsatzbereitschaft_gruende.map((g) => (
               <li key={g} className="text-muted" style={{ fontSize: "0.9rem" }}>
                 • {GRUND_TEXT[g] ?? g}
@@ -73,6 +74,7 @@ export function AktePage() {
             ))}
           </ul>
         )}
+      </div>
 
       <div className="akte-aktionen row" style={{ flexWrap: "wrap" }}>
         <Link to={`/objekte/${objekt.id}/kontrolle`} className="btn btn-primary">