feat: Scorecard Portrait neu komponiert — Score-Hero-Band, sichtbare Neutral-Cells, Title gekuerzt

Visuelle Probleme im vorigen Render: Title dominierte oben (5+ Zeilen,
36pt), Matrix wirkte loechrig (Neutral-Cells #f0f0f0 verschwanden im
Karten-Hintergrund), Score-Row war optisch zu zart fuer den Anker.

Neue Komposition:
- Title kompakt: 26pt, line-height 1.18, line-clamp 3 — beschreibt aber
  dominiert nicht mehr.
- Score-Hero-Block: tonierter Hintergrund passend zur Score-Farbe
  (gruen/orange/rot) plus dicker Border-left, full-width — wird zum
  visuellen Anker statt nur zwischen Trennlinien zu sitzen. Score 132pt,
  Verdict 30pt.
- Matrix: 480x480 mit weissem Frame + zarter Border, 6px gap. Neutral-
  Cells (r-0) jetzt #d8d8d2 statt #f0f0f0 → klar sichtbar im Grid,
  Loch-Look weg.
- Legende: Swatches 22px statt 18px, gleiche Sichtbarkeit wie Cells.
- Begruendung: line-clamp 4 (statt 9), eigene 'Begruendung'-Sublabel,
  obere Trennlinie — bewusst schmal als Ausklang.

Hierarchie: Score-Hero ist optisch dominant (Anker), Matrix das datenreiche
Zentrum, Title deskriptiv aber zurueckhaltend, Begruendung ergaenzt ohne
zu konkurrieren.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

app/templates/v2/screens/scorecard.html

@@ -136,7 +136,9 @@
   }
   .cell.r-pp { background: #889E33; color: #fff; }
   .cell.r-p  { background: #cddaa1; color: #44570a; }
-  .cell.r-0  { background: #f0f0f0; color: #888; }
+  /* r-0: deutlich sichtbarer Grauton, sonst verschwindet Neutral-Zelle
+          im hellen Karten-Hintergrund und das Grid sieht loechrig aus. */
+  .cell.r-0  { background: #d8d8d2; color: #6a6a64; }
   .cell.r-n  { background: #efc9c3; color: #931515; }
   .cell.r-nn { background: #9A2A2A; color: #fff; }
 
@@ -150,103 +152,140 @@
     aspect-ratio: 1 / 1;
   }
 
-  /* ── portrait Layout — kompakt, weniger Rand.
+  /* ── portrait Layout — ausbalancierte vertikale Komposition.
-        justify-content: space-between verteilt etwaige Slack-Hoehe
+
-        gleichmaessig zwischen die Sektionen statt unten zu stapeln. */
+     Sektions-Hierarchie (top → bottom):
+       1. Header-Bar (kicker + meta)         ~50 px
+       2. Title (kompakt, 3 Zeilen max)      ~150 px
+       3. Fraktionen-Pills                   ~40 px
+       4. Score-Hero (full-width Farbband)   ~280 px
+       5. Matrix-Block (Grid + Legende)      ~480 px
+       6. Begründung (4 Zeilen)              ~140 px
+       7. Footer (absolut, ~50 px vom unteren Rand)
+     Summe ~1190 + Padding 58 + Gaps ~30 = 1280 / 1350 → ~70 px Slack,
+     gleichmaessig per justify-content space-between auf die fuenf
+     inneren Sektionen verteilt.
+
+     Visuelle Hierarchie: Score-Hero ist optisch prominent (groesster
+     Farbblock + groesste Zahl), Matrix als datenreiches Zentrum, Title
+     deskriptiv aber zurueckhaltend, Begruendung als Ausklang. */
   .portrait-body {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    gap: 14px;
+    gap: 18px;
-    margin-top: 14px;
+    margin-top: 18px;
-    padding-bottom: 26px;
+    padding-bottom: 28px;
   }
+
   .portrait-title {
-    font-size: 36pt;
+    font-size: 26pt;
-    line-height: 1.1;
+    line-height: 1.18;
     color: #1f1f1f;
     font-weight: 700;
+    /* Begrenze Titel auf 3 Zeilen — sonst dominiert er die Karte. */
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   }
+
   .portrait-fraktionen {
     font-family: 'Source Code Pro', monospace;
-    font-size: 14pt;
+    font-size: 13pt;
     color: #555;
   }
   .portrait-fraktionen .pill {
     display: inline-block;
-    padding: 3px 12px;
+    padding: 4px 14px;
     background: rgba(136, 158, 51, 0.18);
     color: #44570a;
     border-radius: 3px;
     margin-right: 6px;
+    font-weight: 700;
   }
-  .portrait-score-row {
+
+  /* ── Score-Hero: full-width Farbband, dominanter visueller Anker ── */
+  .portrait-score-hero {
     display: flex;
     align-items: center;
-    gap: 28px;
+    gap: 32px;
-    padding: 12px 0;
+    padding: 22px 30px;
-    border-top: 1px solid rgba(0,0,0,0.08);
+    background:
-    border-bottom: 1px solid rgba(0,0,0,0.08);
+      {% if score_color == '#1a7f37' %}#e8eed1
+      {% elif score_color == '#bf6c10' %}#f4e6cf
+      {% else %}#f1dcda{% endif %};
+    border-left: 8px solid {{ score_color }};
+    border-radius: 4px;
   }
   .portrait-score-num {
     font-family: 'Source Code Pro', monospace;
-    font-size: 130pt;
+    font-size: 132pt;
     font-weight: 700;
-    line-height: 0.92;
+    line-height: 0.85;
     color: {{ score_color }};
     flex-shrink: 0;
+    letter-spacing: -0.04em;
+  }
+  .portrait-score-num .slash {
+    font-size: 60pt;
+    opacity: 0.5;
+    letter-spacing: 0;
   }
-  .portrait-score-num .slash { font-size: 64pt; opacity: 0.45; }
   .portrait-score-side {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: 10px;
+    flex: 1;
   }
   .portrait-score-label {
     font-family: 'Source Code Pro', monospace;
-    font-size: 13pt;
+    font-size: 12pt;
     text-transform: uppercase;
-    letter-spacing: 0.12em;
+    letter-spacing: 0.14em;
     color: #555;
   }
   .portrait-verdict {
-    font-size: 28pt;
+    font-size: 30pt;
     color: {{ score_color }};
     font-weight: 700;
-    line-height: 1.12;
+    line-height: 1.08;
   }
+
+  /* ── Matrix-Block: Grid links, Legende rechts, vertikal zentriert ── */
   .portrait-matrix-block {
     display: flex;
-    align-items: stretch;
+    align-items: center;
-    gap: 22px;
+    gap: 28px;
   }
   .portrait-matrix {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(5, 1fr);
-    gap: 4px;
+    gap: 6px;
-    width: 460px;
+    width: 480px;
-    height: 460px;
+    height: 480px;
     flex-shrink: 0;
+    padding: 8px;
+    background: #fff;
+    border: 1px solid #e0e0db;
+    border-radius: 6px;
   }
   .portrait-matrix-legend {
     flex: 1;
     font-family: 'Source Code Pro', monospace;
     font-size: 12pt;
-    color: #555;
+    color: #444;
-    line-height: 1.5;
+    line-height: 1.55;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
   }
   .portrait-matrix-legend .l-title {
     font-weight: 700;
     text-transform: uppercase;
     color: #009DA5;
-    margin-bottom: 10px;
+    margin-bottom: 14px;
-    letter-spacing: 0.06em;
+    letter-spacing: 0.08em;
-    font-size: 13pt;
+    font-size: 12pt;
   }
   .portrait-matrix-legend ul {
     list-style: none;
@@ -256,20 +295,34 @@
   .portrait-matrix-legend li {
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
-    margin-bottom: 6px;
+    margin-bottom: 7px;
   }
   .portrait-matrix-legend .swatch {
-    width: 18px; height: 18px; border-radius: 2px; flex-shrink: 0;
+    width: 22px; height: 22px; border-radius: 2px; flex-shrink: 0;
+    border: 1px solid rgba(0,0,0,0.08);
   }
+
   .portrait-summary {
-    font-size: 15pt;
+    font-size: 13pt;
-    line-height: 1.5;
+    line-height: 1.55;
     color: #333;
     display: -webkit-box;
-    -webkit-line-clamp: 9;
+    -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    border-top: 1px solid rgba(0,0,0,0.08);
+    padding-top: 14px;
+  }
+  .portrait-summary-label {
+    display: block;
+    font-family: 'Source Code Pro', monospace;
+    font-size: 10pt;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #009DA5;
+    font-weight: 700;
+    margin-bottom: 6px;
   }
 
   /* ── Footer ── */
@@ -299,20 +352,23 @@
 
   {% if is_portrait %}
   <div class="portrait-body">
-    <div class="portrait-title">{{ assessment.title|truncate(150, end="…") }}</div>
+    <div class="portrait-title">{{ assessment.title|truncate(160, end="…") }}</div>
+
     {% if fraktionen %}
     <div class="portrait-fraktionen">
-      Eingebracht von:
+      Eingebracht von
       {% for f in fraktionen %}<span class="pill">{{ f }}</span>{% endfor %}
     </div>
     {% endif %}
-    <div class="portrait-score-row">
+
+    <div class="portrait-score-hero">
       <div class="portrait-score-num">{{ "%.1f"|format(assessment.gwoe_score) }}<span class="slash">/10</span></div>
       <div class="portrait-score-side">
         <div class="portrait-score-label">Gemeinwohl-Score</div>
         <div class="portrait-verdict">{{ assessment.empfehlung.value }}</div>
       </div>
     </div>
+
     <div class="portrait-matrix-block">
       <div class="portrait-matrix matrix">
         {% for r in ['A','B','C','D','E'] %}
@@ -324,17 +380,21 @@
         {% endfor %}
       </div>
       <div class="portrait-matrix-legend">
-        <div class="l-title">Matrix 5×5</div>
+        <div class="l-title">GWÖ-Matrix 5×5</div>
         <ul>
           <li><span class="swatch" style="background:#889E33;"></span>++ stark fördernd</li>
           <li><span class="swatch" style="background:#cddaa1;"></span>+ fördernd</li>
-          <li><span class="swatch" style="background:#f0f0f0;border:1px solid #ccc;"></span>○ neutral</li>
+          <li><span class="swatch" style="background:#d8d8d2;"></span>○ neutral</li>
           <li><span class="swatch" style="background:#efc9c3;"></span>− widersprechend</li>
           <li><span class="swatch" style="background:#9A2A2A;"></span>−− stark widersprechend</li>
         </ul>
       </div>
     </div>
-    <div class="portrait-summary">{{ assessment.gwoe_begruendung|truncate(700, end="…") }}</div>
+
+    <div class="portrait-summary">
+      <span class="portrait-summary-label">Begründung</span>
+      {{ assessment.gwoe_begruendung|truncate(440, end="…") }}
+    </div>
   </div>
   {% else %}
   <div class="body-grid">