diff --git a/app/templates/v2/screens/scorecard.html b/app/templates/v2/screens/scorecard.html index 1a32862..3207ee5 100644 --- a/app/templates/v2/screens/scorecard.html +++ b/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. - justify-content: space-between verteilt etwaige Slack-Hoehe - gleichmaessig zwischen die Sektionen statt unten zu stapeln. */ + /* ── portrait Layout — ausbalancierte vertikale Komposition. + + 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; - margin-top: 14px; - padding-bottom: 26px; + gap: 18px; + margin-top: 18px; + padding-bottom: 28px; } + .portrait-title { - font-size: 36pt; - line-height: 1.1; + font-size: 26pt; + 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; - padding: 12px 0; - border-top: 1px solid rgba(0,0,0,0.08); - border-bottom: 1px solid rgba(0,0,0,0.08); + gap: 32px; + padding: 22px 30px; + background: + {% 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; - gap: 22px; + align-items: center; + gap: 28px; } .portrait-matrix { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); - gap: 4px; - width: 460px; - height: 460px; + gap: 6px; + width: 480px; + 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; - line-height: 1.5; - display: flex; - flex-direction: column; - justify-content: center; + color: #444; + line-height: 1.55; } .portrait-matrix-legend .l-title { font-weight: 700; text-transform: uppercase; color: #009DA5; - margin-bottom: 10px; - letter-spacing: 0.06em; - font-size: 13pt; + margin-bottom: 14px; + letter-spacing: 0.08em; + 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; - margin-bottom: 6px; + gap: 10px; + 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; - line-height: 1.5; + font-size: 13pt; + 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 %}
-
{{ assessment.title|truncate(150, end="…") }}
+
{{ assessment.title|truncate(160, end="…") }}
+ {% if fraktionen %}
- Eingebracht von: + Eingebracht von {% for f in fraktionen %}{{ f }}{% endfor %}
{% endif %} -
+ +
{{ "%.1f"|format(assessment.gwoe_score) }}/10
Gemeinwohl-Score
{{ assessment.empfehlung.value }}
+
{% for r in ['A','B','C','D','E'] %} @@ -324,17 +380,21 @@ {% endfor %}
-
Matrix 5×5
+
GWÖ-Matrix 5×5
  • ++ stark fördernd
  • + fördernd
    • -
  • ○ neutral
    • +
  • ○ neutral
  • − widersprechend
  • −− stark widersprechend
-
{{ assessment.gwoe_begruendung|truncate(700, end="…") }}
+ +
+ Begründung + {{ assessment.gwoe_begruendung|truncate(440, end="…") }} +
{% else %}