From d80e6e7aadc8ac84b426c77e83dd98bd5f593f5d Mon Sep 17 00:00:00 2001
From: Dotty Dotter <dotty@Mac.wideopen.space>
Date: Thu, 7 May 2026 09:13:37 +0200
Subject: [PATCH] feat(#177 Phase 21+22): Verdict-Umfluss + Merken bei
 Bewertung
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 21 — Score-Hero auf Float-Layout:
- Score-Zahl floated links, Verdict-Text fließt rechts daneben UND
  unter sie weiter (vorher: flex-baseline, Text bricht nicht um).
- overflow:hidden auf Container fuer clean float-clearing.

Phase 22 — Merken-Button oben rechts auf gleicher Höhe wie 'Bewertung'-Label:
- Visuelle Einheit: 'Bewertung'-Header links, Merken-Button rechts.
- Vorher: Merken-Button stand alleinig zwischen Score und Vote-Block,
  optisch losgeloest.

Refs: #177

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/static/v2/v2.css                        | 19 ++++++++++++++++---
 app/templates/v2/screens/antrag_detail.html | 14 +++++++-------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/app/static/v2/v2.css b/app/static/v2/v2.css
index 31b653a..4c10a5d 100644
--- a/app/static/v2/v2.css
+++ b/app/static/v2/v2.css
@@ -486,13 +486,13 @@ body.v2 strong, body.v2 b {
 
 /* ── Score Hero ─────────────────────────────────────────────────── */
 .v2-score-hero {
-  display: flex;
-  align-items: baseline;
-  gap: 22px;
+  /* Float-Layout: Score-Zahl links, Verdict-Text fließt rechts daneben
+     UND darunter — so nutzt langer Text den Platz unter der Zahl. */
   padding: 20px 0 22px;
   border-top: 2px solid var(--ecg-green);
   border-bottom: 1px solid var(--hairline);
   margin: 4px 0 22px;
+  overflow: hidden; /* clear float */
 }
 
 .v2-score-hero.low {
@@ -506,6 +506,19 @@ body.v2 strong, body.v2 b {
   line-height: 0.9;
   color: var(--ecg-green);
   letter-spacing: -0.02em;
+  /* Umfluss: Score links, Text fließt rechts/drunter */
+  float: left;
+  margin-right: 22px;
+  margin-bottom: 4px;
+}
+.v2-score-hero .verdict {
+  /* kein float — Text läuft rechts vom big-num und unter sie */
+  font-size: 14px;
+  line-height: 1.55;
+}
+.v2-score-hero .verdict b {
+  display: inline-block;
+  margin-right: 6px;
 }
 
 .v2-score-hero.low .big-num {
diff --git a/app/templates/v2/screens/antrag_detail.html b/app/templates/v2/screens/antrag_detail.html
index 591acf9..f523574 100644
--- a/app/templates/v2/screens/antrag_detail.html
+++ b/app/templates/v2/screens/antrag_detail.html
@@ -216,15 +216,13 @@
 
   {# ── Rechte Spalte: Bewertungs-Panel ── #}
   <div class="right">
-    <div class="v2-antrag-id">Bewertung</div>
-
-    {{ score_hero(antrag.score | default(0), antrag.verdict_title | default(""), antrag.verdict_body | default("")) }}
-
-    {# ── Merkliste-Stern (#140) ── #}
-    <div style="margin-top:12px;margin-bottom:4px;">
+    {# Bewertungs-Header mit Merken-Button rechts — visuelle Einheit
+       (User-Wunsch: „Bewertung passend zu Merken verschieben"). #}
+    <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;">
+      <div class="v2-antrag-id">Bewertung</div>
       <button id="v2-merkliste-btn"
               onclick="v2DetailMerklisteToggle()"
-              style="display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
+              style="display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
                      border:1px solid var(--hairline);border-radius:4px;background:none;
                      cursor:pointer;font-family:var(--font-mono);font-size:11px;color:var(--ecg-dark);">
         <span id="v2-merkliste-star">☆</span>
@@ -232,6 +230,8 @@
       </button>
     </div>
 
+    {{ score_hero(antrag.score | default(0), antrag.verdict_title | default(""), antrag.verdict_body | default("")) }}
+
     {# ── Namentliche Abstimmung (#106 Phase 1) ── #}
     {% if antrag.abstimmungsverhalten %}
     {% set aw = antrag.abstimmungsverhalten %}