From a12dfb305ee51a536093867f85e3a55c97025044 Mon Sep 17 00:00:00 2001
From: patrick <patrick@perlbach24.de>
Date: Sun, 6 Sep 2026 23:24:27 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20Akte-Header=20und=20Gr=C3=BCnde-List?=
 =?UTF-8?q?e=20=C3=BCberlappten=20sich?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/frontend/src/pages/AktePage.tsx b/frontend/src/pages/AktePage.tsx
index d3d6427..c4da991 100644
--- a/frontend/src/pages/AktePage.tsx
+++ b/frontend/src/pages/AktePage.tsx
@@ -55,24 +55,26 @@ export function AktePage() {
 
   return (
     <main className={`page-wide akte-grid${istFahrzeug ? " ist-fahrzeug" : ""}`}>
-      <div className="akte-kopf row-between" style={{ alignItems: "flex-start" }}>
-        <div>
-          <h1 style={{ marginBottom: "0.15rem" }}>{objekt.name}</h1>
-          <div className="text-muted">
-            {objekt.code} · {akte.objekttyp_name} · Objekt-Status: {objekt.status}
+      <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">
+              {objekt.code} · {akte.objekttyp_name} · Objekt-Status: {objekt.status}
+            </div>
           </div>
+          <ReadinessBadge status={akte.einsatzbereitschaft_status} />
         </div>
-        <ReadinessBadge status={akte.einsatzbereitschaft_status} />
+        {akte.einsatzbereitschaft_gruende.length > 0 && (
+          <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}
+              </li>
+            ))}
+          </ul>
+        )}
       </div>
-      {akte.einsatzbereitschaft_gruende.length > 0 && (
-        <ul className="akte-kopf 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}
-            </li>
-          ))}
-        </ul>
-      )}
 
       <div className="akte-aktionen row" style={{ flexWrap: "wrap" }}>
         <Link to={`/objekte/${objekt.id}/kontrolle`} className="btn btn-primary">