gwoe-antragspruefer/app/templates/v2/screens/scorecard.html

{# scorecard.html — Social-Card-Render-Template

   Drei Formate, ueber `width`/`height` parametrisiert:
   - 1200×630   (og)       — LinkedIn/Twitter-OG; horizontal mit Matrix rechts
   - 1080×1080  (square)   — Instagram klassisch; vertikal gestackt
   - 1080×1350  (portrait) — Instagram 4:5 Hochformat (Default Feed);
                              Title + grosser Score + grosse Matrix + Begruendung

   `is_portrait` und `is_og` schalten Layout-Varianten in den CSS-Switches.
#}
{% set is_og        = (width >= 1200) %}
{% set is_portrait  = (height > width) %}
{% set is_square    = (not is_og and not is_portrait) %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Scorecard — {{ assessment.title }}</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif; }
  body {
    width: {{ width }}px;
    height: {{ height }}px;
    background: linear-gradient(135deg, #f8faf2 0%, #e9ede0 100%);
    color: #1f1f1f;
    overflow: hidden;
    position: relative;
  }
  .card {
    width: 100%;
    height: 100%;
    padding: {% if is_og %}28px 38px{% elif is_portrait %}34px 38px 24px{% else %}26px 30px{% endif %};
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 2px solid #009DA5;
    padding-bottom: 10px;
  }
  .kicker {
    font-family: 'Source Code Pro', monospace;
    font-size: {% if is_portrait %}13pt{% else %}12pt{% endif %};
    color: #009DA5;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  .meta {
    font-family: 'Source Code Pro', monospace;
    font-size: 11pt;
    color: #555;
  }

  /* ── og + square: zweispaltig (og) bzw. einspaltig (square) ── */
  .body-grid {
    flex: 1;
    display: grid;
    grid-template-columns: {% if is_og %}1.4fr 1fr{% else %}1fr{% endif %};
    gap: 28px;
    margin-top: 22px;
  }
  .left-col h1 {
    font-size: {% if is_og %}28pt{% else %}22pt{% endif %};
    line-height: 1.18;
    margin-bottom: 14px;
    color: #1f1f1f;
    font-weight: 700;
  }
  .left-col .fraktionen {
    font-family: 'Source Code Pro', monospace;
    font-size: 11pt;
    color: #555;
    margin-bottom: 18px;
  }
  .left-col .fraktionen .pill {
    display: inline-block;
    padding: 2px 10px;
    background: rgba(136, 158, 51, 0.15);
    color: #44570a;
    border-radius: 3px;
    margin-right: 5px;
  }
  .left-col .verdict {
    font-size: 14pt;
    color: #1a7f37;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .left-col .summary {
    font-size: 12pt;
    line-height: 1.55;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: {% if is_og %}6{% else %}4{% endif %};
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .right-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px;
  }
  .score-big {
    font-family: 'Source Code Pro', monospace;
    font-size: {% if is_og %}88pt{% else %}72pt{% endif %};
    font-weight: 700;
    line-height: 1;
    color: {{ score_color }};
    margin-bottom: 4px;
  }
  .score-label {
    font-family: 'Source Code Pro', monospace;
    font-size: 11pt;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #555;
    margin-bottom: 16px;
  }

  /* ── Matrix-Zellen (alle Formate gleiche Klassen) ── */
  .matrix .cell {
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Source Code Pro', monospace;
    font-size: {% if is_portrait %}19pt{% elif is_og %}10pt{% else %}10pt{% endif %};
    font-weight: 700;
  }
  .cell.r-pp { background: #889E33; color: #fff; }
  .cell.r-p  { background: #cddaa1; color: #44570a; }
  /* 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; }

  /* ── og/square Matrix-Container ── */
  .matrix-compact {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 2px;
    width: {% if is_og %}220px{% else %}180px{% endif %};
    aspect-ratio: 1 / 1;
  }

  /* ── 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: 18px;
    margin-top: 18px;
    padding-bottom: 28px;
  }

  .portrait-title {
    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: 13pt;
    color: #555;
  }
  .portrait-fraktionen .pill {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(136, 158, 51, 0.18);
    color: #44570a;
    border-radius: 3px;
    margin-right: 6px;
    font-weight: 700;
  }

  /* ── Score-Hero: full-width Farbband, dominanter visueller Anker ── */
  .portrait-score-hero {
    display: flex;
    align-items: center;
    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: 132pt;
    font-weight: 700;
    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-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .portrait-score-label {
    font-family: 'Source Code Pro', monospace;
    font-size: 12pt;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #555;
  }
  .portrait-verdict {
    font-size: 30pt;
    color: {{ score_color }};
    font-weight: 700;
    line-height: 1.08;
  }

  /* ── Matrix-Block: Grid links, Legende rechts, vertikal zentriert ── */
  .portrait-matrix-block {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .portrait-matrix {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    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: #444;
    line-height: 1.55;
  }
  .portrait-matrix-legend .l-title {
    font-weight: 700;
    text-transform: uppercase;
    color: #009DA5;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
    font-size: 12pt;
  }
  .portrait-matrix-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .portrait-matrix-legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
  }
  .portrait-matrix-legend .swatch {
    width: 22px; height: 22px; border-radius: 2px; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
  }

  .portrait-summary {
    font-size: 13pt;
    line-height: 1.55;
    color: #333;
    display: -webkit-box;
    -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 ── */
  .footer {
    position: absolute;
    bottom: {% if is_og %}12px{% elif is_portrait %}16px{% else %}10px{% endif %};
    left: {% if is_og %}38px{% elif is_portrait %}38px{% else %}30px{% endif %};
    right: {% if is_og %}38px{% elif is_portrait %}38px{% else %}30px{% endif %};
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Source Code Pro', monospace;
    font-size: 9pt;
    color: #888;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 6px;
  }
  .footer .brand { color: #009DA5; font-weight: 700; letter-spacing: 0.06em; }
</style>
</head>
<body>
<div class="card">
  <div class="header">
    <div class="kicker">GWÖ-Bewertung · {{ bundesland }} · {{ assessment.drucksache }}</div>
    <div class="meta">{{ datum }}</div>
  </div>

  {% if is_portrait %}
  <div class="portrait-body">
    <div class="portrait-title">{{ assessment.title|truncate(160, end="…") }}</div>

    {% if fraktionen %}
    <div class="portrait-fraktionen">
      Eingebracht von
      {% for f in fraktionen %}<span class="pill">{{ f }}</span>{% endfor %}
    </div>
    {% endif %}

    <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'] %}
          {% for c in ['1','2','3','4','5'] %}
            {% set cell = matrix_lookup.get(r ~ c, {}) %}
            {% set rt = cell.get('rating', 0) %}
            <div class="cell {% if rt >= 4 %}r-pp{% elif rt >= 1 %}r-p{% elif rt == 0 %}r-0{% elif rt <= -4 %}r-nn{% else %}r-n{% endif %}">{% if rt >= 4 %}++{% elif rt >= 1 %}+{% elif rt == 0 %}·{% elif rt <= -4 %}−−{% else %}−{% endif %}</div>
          {% endfor %}
        {% endfor %}
      </div>
      <div class="portrait-matrix-legend">
        <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:#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">
      <span class="portrait-summary-label">Begründung</span>
      {{ assessment.gwoe_begruendung|truncate(440, end="…") }}
    </div>
  </div>
  {% else %}
  <div class="body-grid">
    <div class="left-col">
      <h1>{{ assessment.title|truncate(100, end="…") }}</h1>
      {% if fraktionen %}
      <div class="fraktionen">
        {% for f in fraktionen %}<span class="pill">{{ f }}</span>{% endfor %}
      </div>
      {% endif %}
      <div class="verdict">{{ assessment.empfehlung.value }}</div>
      <div class="summary">{{ assessment.gwoe_begruendung|truncate(420, end="…") }}</div>
    </div>
    <div class="right-col">
      <div class="score-big">{{ "%.1f"|format(assessment.gwoe_score) }}</div>
      <div class="score-label">GWÖ-Score · 0–10</div>
      <div class="matrix-compact matrix">
        {% for r in ['A','B','C','D','E'] %}
          {% for c in ['1','2','3','4','5'] %}
            {% set cell = matrix_lookup.get(r ~ c, {}) %}
            {% set rt = cell.get('rating', 0) %}
            <div class="cell {% if rt >= 4 %}r-pp{% elif rt >= 1 %}r-p{% elif rt == 0 %}r-0{% elif rt <= -4 %}r-nn{% else %}r-n{% endif %}">{% if rt >= 4 %}++{% elif rt >= 1 %}+{% elif rt == 0 %}·{% elif rt <= -4 %}−−{% else %}−{% endif %}</div>
          {% endfor %}
        {% endfor %}
      </div>
    </div>
  </div>
  {% endif %}

  <div class="footer">
    <span><span class="brand">gwoe.toppyr.de</span> · automatische Gemeinwohl-Bilanzierung</span>
    <span>{{ assessment.drucksache }}</span>
  </div>
</div>
</body>
</html>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								{# scorecard.html — Social-Card-Render-Template
 								   Drei Formate, ueber `width`/`height` parametrisiert:
 								   - 1200×630   (og)       — LinkedIn/Twitter-OG; horizontal mit Matrix rechts
 								   - 1080×1080  (square)   — Instagram klassisch; vertikal gestackt
 								   - 1080×1350  (portrait) — Instagram 4:5 Hochformat (Default Feed);
 								                              Title + grosser Score + grosse Matrix + Begruendung
 								   `is_portrait` und `is_og` schalten Layout-Varianten in den CSS-Switches.
 								#}
 								{% set is_og        = (width >= 1200) %}
 								{% set is_portrait  = (height > width) %}
 								{% set is_square    = (not is_og and not is_portrait) %}
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								<!DOCTYPE html>
 								<html lang="de">
 								<head>
 								<meta charset="UTF-8">
 								<title>Scorecard — {{ assessment.title }}</title>
 								<style>
 								  * { box-sizing: border-box; margin: 0; padding: 0; }
 								  html, body { font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif; }
 								  body {
 								    width: {{ width }}px;
 								    height: {{ height }}px;
 								    background: linear-gradient(135deg, #f8faf2 0%, #e9ede0 100%);
 								    color: #1f1f1f;
 								    overflow: hidden;
 								    position: relative;
 								  }
 								  .card {
 								    width: 100%;
 								    height: 100%;
-												feat: Scorecard-Default = portrait, Instagram via Web-Share-API, Padding gestrafft

User-Feedback in drei Punkten:

1. 'Standard auch fuer die Scorecard sein' — /v2/scorecard und
   /api/assessment/scorecard.{png,pdf} default jetzt format=portrait
   statt og. Wer das alte OG-Layout will, muss explizit ?format=og
   setzen (oder square). Externe OG-Tags sind nicht betroffen, die
   nutzen ein anderes Template (v2/og_template.html).

2. 'Instagram-Button sollte den Teilen-Dialog aufrufen' — implementiert
   mit navigator.share() + File-Blob. Auf Mobile (Safari iOS / Chrome
   Android) oeffnet der native Share-Sheet und Instagram erscheint
   direkt als Ziel; Bild + Text gehen mit. Auf Desktop / Browsern
   ohne canShare({files:…}) falle auf den vorigen Fallback zurueck:
   Bild in neuem Tab + Text in Zwischenablage.

3. 'Card nutzt Platz besser, viel Rand' — alle Paddings reduziert:
   - Card-Padding portrait: 54/56/32 → 34/38/24
   - Body gap: 22 → 16, margin-top: 26 → 16
   - Title: 32pt → 36pt
   - Score-Number: 110pt → 130pt
   - Matrix: 380×380 → 460×460 (groesser, mehr Detail erkennbar)
   - Footer: enger an den Rand
   Inhalt nimmt jetzt mehr Platz ein, weniger Whitespace-Verschwendung.

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

											
										
										
											2026-05-07 13:06:46 +02:00
+								    padding: {% if is_og %}28px 38px{% elif is_portrait %}34px 38px 24px{% else %}26px 30px{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    display: flex;
 								    flex-direction: column;
 								    justify-content: space-between;
 								    position: relative;
 								  }
 								  .header {
 								    display: flex;
 								    justify-content: space-between;
 								    align-items: baseline;
 								    border-bottom: 2px solid #009DA5;
 								    padding-bottom: 10px;
 								  }
 								  .kicker {
 								    font-family: 'Source Code Pro', monospace;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    font-size: {% if is_portrait %}13pt{% else %}12pt{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    color: #009DA5;
 								    text-transform: uppercase;
 								    letter-spacing: 0.1em;
 								  }
 								  .meta {
 								    font-family: 'Source Code Pro', monospace;
 								    font-size: 11pt;
 								    color: #555;
 								  }
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
 								  /* ── og + square: zweispaltig (og) bzw. einspaltig (square) ── */
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								  .body-grid {
 								    flex: 1;
 								    display: grid;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    grid-template-columns: {% if is_og %}1.4fr 1fr{% else %}1fr{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    gap: 28px;
 								    margin-top: 22px;
 								  }
 								  .left-col h1 {
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    font-size: {% if is_og %}28pt{% else %}22pt{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    line-height: 1.18;
 								    margin-bottom: 14px;
 								    color: #1f1f1f;
 								    font-weight: 700;
 								  }
 								  .left-col .fraktionen {
 								    font-family: 'Source Code Pro', monospace;
 								    font-size: 11pt;
 								    color: #555;
 								    margin-bottom: 18px;
 								  }
 								  .left-col .fraktionen .pill {
 								    display: inline-block;
 								    padding: 2px 10px;
 								    background: rgba(136, 158, 51, 0.15);
 								    color: #44570a;
 								    border-radius: 3px;
 								    margin-right: 5px;
 								  }
 								  .left-col .verdict {
 								    font-size: 14pt;
 								    color: #1a7f37;
 								    font-weight: 600;
 								    margin-bottom: 12px;
 								  }
 								  .left-col .summary {
 								    font-size: 12pt;
 								    line-height: 1.55;
 								    color: #333;
 								    display: -webkit-box;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    -webkit-line-clamp: {% if is_og %}6{% else %}4{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    -webkit-box-orient: vertical;
 								    overflow: hidden;
 								  }
 								  .right-col {
 								    display: flex;
 								    flex-direction: column;
 								    align-items: center;
 								    justify-content: flex-start;
 								    padding-top: 8px;
 								  }
 								  .score-big {
 								    font-family: 'Source Code Pro', monospace;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    font-size: {% if is_og %}88pt{% else %}72pt{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    font-weight: 700;
 								    line-height: 1;
 								    color: {{ score_color }};
 								    margin-bottom: 4px;
 								  }
 								  .score-label {
 								    font-family: 'Source Code Pro', monospace;
 								    font-size: 11pt;
 								    text-transform: uppercase;
 								    letter-spacing: 0.1em;
 								    color: #555;
 								    margin-bottom: 16px;
 								  }
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
 								  /* ── Matrix-Zellen (alle Formate gleiche Klassen) ── */
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								  .matrix .cell {
 								    border-radius: 2px;
 								    display: flex;
 								    align-items: center;
 								    justify-content: center;
 								    font-family: 'Source Code Pro', monospace;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    font-size: {% if is_portrait %}19pt{% elif is_og %}10pt{% else %}10pt{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    font-weight: 700;
 								  }
 								  .cell.r-pp { background: #889E33; color: #fff; }
 								  .cell.r-p  { background: #cddaa1; color: #44570a; }
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								  /* 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; }
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								  .cell.r-n  { background: #efc9c3; color: #931515; }
 								  .cell.r-nn { background: #9A2A2A; color: #fff; }
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
 								  /* ── og/square Matrix-Container ── */
 								  .matrix-compact {
 								    display: grid;
 								    grid-template-columns: repeat(5, 1fr);
 								    grid-template-rows: repeat(5, 1fr);
 								    gap: 2px;
 								    width: {% if is_og %}220px{% else %}180px{% endif %};
 								    aspect-ratio: 1 / 1;
 								  }
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								  /* ── portrait Layout — ausbalancierte vertikale Komposition.
 								     Sektions-Hierarchie (top → bottom):
 . Header-Bar (kicker + meta)         ~50 px
 . Title (kompakt, 3 Zeilen max)      ~150 px
 . Fraktionen-Pills                   ~40 px
 . Score-Hero (full-width Farbband)   ~280 px
 . Matrix-Block (Grid + Legende)      ~480 px
 . Begründung (4 Zeilen)              ~140 px
 . 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. */
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  .portrait-body {
 								    flex: 1;
 								    display: flex;
 								    flex-direction: column;
-												fix: Scorecard-Whitespace + Instagram-Button ehrlicher

Whitespace-Problem (User: 'Da ist immer noch viel Rand'):
Inspektion am gerenderten PNG zeigte: massive Slack-Zone unten zwischen
Summary-Text und Footer. Ursache: portrait-body hatte flex:1 ohne
justify-content, alle Items stapelten sich am oberen Rand und der
Bottom war leer. Plus: Summary war auf 360 Zeichen + line-clamp:6
beschraenkt — Text wurde regelmaessig vor Ende abgeschnitten und
fuellte selbst die wenigen Zeilen nicht voll.

Fix:
- portrait-body bekommt justify-content: space-between und
  padding-bottom: 26px
- Summary truncate 360 → 700, line-clamp 6 → 9
- gap 16 → 14, margin-top 16 → 14

Effekt: Slack wird zwischen Sektionen gleichverteilt UND der Begruendungs-
text fuellt jetzt seinen Bereich, sodass kaum noch Slack uebrig ist.

Instagram-Button (User: 'funktioniert weiter nicht'):
Realitaet ist: Instagram hat keine Web-Publishing-API. Auf Desktop
ist 'Direkt-Posten' physikalisch nicht moeglich. Vorher: Fallback
oeffnete das Bild im neuen Tab — fuehlte sich nicht wie 'Sharing' an.

Jetzt zwei klar getrennte Pfade:
A) Mobile mit Web-Share-Files: navigator.share({files:[png]}) oeffnet
   OS-Share-Sheet, Instagram als Ziel; AbortError (User-Cancel) wird
   STILL gehandelt (vorher fiel das in den Fallback).
B) Desktop / unsupported: PNG-Download via <a download> getriggert,
   Begleittext geht in die Zwischenablage. Toast erklaert klar:
   'Bild aufs Phone uebertragen, in der Instagram-App posten, Text
   einfuegen.' — keine falsche Erwartung mehr, dass Web allein das
   Posten erledigt.

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

											
										
										
											2026-05-07 13:11:48 +02:00
+								    justify-content: space-between;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    gap: 18px;
 								    margin-top: 18px;
 								    padding-bottom: 28px;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  .portrait-title {
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    font-size: 26pt;
 								    line-height: 1.18;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    color: #1f1f1f;
 								    font-weight: 700;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    /* Begrenze Titel auf 3 Zeilen — sonst dominiert er die Karte. */
 								    display: -webkit-box;
 								    -webkit-line-clamp: 3;
 								    -webkit-box-orient: vertical;
 								    overflow: hidden;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  .portrait-fraktionen {
 								    font-family: 'Source Code Pro', monospace;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    font-size: 13pt;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    color: #555;
 								  }
 								  .portrait-fraktionen .pill {
 								    display: inline-block;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    padding: 4px 14px;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    background: rgba(136, 158, 51, 0.18);
 								    color: #44570a;
 								    border-radius: 3px;
 								    margin-right: 6px;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    font-weight: 700;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
 								  /* ── Score-Hero: full-width Farbband, dominanter visueller Anker ── */
 								  .portrait-score-hero {
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    display: flex;
 								    align-items: center;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    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;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-score-num {
 								    font-family: 'Source Code Pro', monospace;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    font-size: 132pt;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    font-weight: 700;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    line-height: 0.85;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    color: {{ score_color }};
 								    flex-shrink: 0;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    letter-spacing: -0.04em;
 								  }
 								  .portrait-score-num .slash {
 								    font-size: 60pt;
 								    opacity: 0.5;
 								    letter-spacing: 0;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-score-side {
 								    display: flex;
 								    flex-direction: column;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    gap: 10px;
 								    flex: 1;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-score-label {
 								    font-family: 'Source Code Pro', monospace;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    font-size: 12pt;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    text-transform: uppercase;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    letter-spacing: 0.14em;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    color: #555;
 								  }
 								  .portrait-verdict {
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    font-size: 30pt;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    color: {{ score_color }};
 								    font-weight: 700;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    line-height: 1.08;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
 								  /* ── Matrix-Block: Grid links, Legende rechts, vertikal zentriert ── */
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  .portrait-matrix-block {
 								    display: flex;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    align-items: center;
 								    gap: 28px;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-matrix {
 								    display: grid;
 								    grid-template-columns: repeat(5, 1fr);
 								    grid-template-rows: repeat(5, 1fr);
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    gap: 6px;
 								    width: 480px;
 								    height: 480px;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    flex-shrink: 0;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    padding: 8px;
 								    background: #fff;
 								    border: 1px solid #e0e0db;
 								    border-radius: 6px;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-matrix-legend {
 								    flex: 1;
 								    font-family: 'Source Code Pro', monospace;
-												feat: Scorecard-Default = portrait, Instagram via Web-Share-API, Padding gestrafft

User-Feedback in drei Punkten:

1. 'Standard auch fuer die Scorecard sein' — /v2/scorecard und
   /api/assessment/scorecard.{png,pdf} default jetzt format=portrait
   statt og. Wer das alte OG-Layout will, muss explizit ?format=og
   setzen (oder square). Externe OG-Tags sind nicht betroffen, die
   nutzen ein anderes Template (v2/og_template.html).

2. 'Instagram-Button sollte den Teilen-Dialog aufrufen' — implementiert
   mit navigator.share() + File-Blob. Auf Mobile (Safari iOS / Chrome
   Android) oeffnet der native Share-Sheet und Instagram erscheint
   direkt als Ziel; Bild + Text gehen mit. Auf Desktop / Browsern
   ohne canShare({files:…}) falle auf den vorigen Fallback zurueck:
   Bild in neuem Tab + Text in Zwischenablage.

3. 'Card nutzt Platz besser, viel Rand' — alle Paddings reduziert:
   - Card-Padding portrait: 54/56/32 → 34/38/24
   - Body gap: 22 → 16, margin-top: 26 → 16
   - Title: 32pt → 36pt
   - Score-Number: 110pt → 130pt
   - Matrix: 380×380 → 460×460 (groesser, mehr Detail erkennbar)
   - Footer: enger an den Rand
   Inhalt nimmt jetzt mehr Platz ein, weniger Whitespace-Verschwendung.

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

											
										
										
											2026-05-07 13:06:46 +02:00
+								    font-size: 12pt;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    color: #444;
 								    line-height: 1.55;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-matrix-legend .l-title {
 								    font-weight: 700;
 								    text-transform: uppercase;
 								    color: #009DA5;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    margin-bottom: 14px;
 								    letter-spacing: 0.08em;
 								    font-size: 12pt;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-matrix-legend ul {
 								    list-style: none;
 								    padding: 0;
 								    margin: 0;
 								  }
 								  .portrait-matrix-legend li {
 								    display: flex;
 								    align-items: center;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    gap: 10px;
 								    margin-bottom: 7px;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  .portrait-matrix-legend .swatch {
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    width: 22px; height: 22px; border-radius: 2px; flex-shrink: 0;
 								    border: 1px solid rgba(0,0,0,0.08);
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  .portrait-summary {
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    font-size: 13pt;
 								    line-height: 1.55;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    color: #333;
 								    display: -webkit-box;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    -webkit-line-clamp: 4;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    -webkit-box-orient: vertical;
 								    overflow: hidden;
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    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;
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  }
 								  /* ── Footer ── */
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								  .footer {
 								    position: absolute;
-												feat: Scorecard-Default = portrait, Instagram via Web-Share-API, Padding gestrafft

User-Feedback in drei Punkten:

1. 'Standard auch fuer die Scorecard sein' — /v2/scorecard und
   /api/assessment/scorecard.{png,pdf} default jetzt format=portrait
   statt og. Wer das alte OG-Layout will, muss explizit ?format=og
   setzen (oder square). Externe OG-Tags sind nicht betroffen, die
   nutzen ein anderes Template (v2/og_template.html).

2. 'Instagram-Button sollte den Teilen-Dialog aufrufen' — implementiert
   mit navigator.share() + File-Blob. Auf Mobile (Safari iOS / Chrome
   Android) oeffnet der native Share-Sheet und Instagram erscheint
   direkt als Ziel; Bild + Text gehen mit. Auf Desktop / Browsern
   ohne canShare({files:…}) falle auf den vorigen Fallback zurueck:
   Bild in neuem Tab + Text in Zwischenablage.

3. 'Card nutzt Platz besser, viel Rand' — alle Paddings reduziert:
   - Card-Padding portrait: 54/56/32 → 34/38/24
   - Body gap: 22 → 16, margin-top: 26 → 16
   - Title: 32pt → 36pt
   - Score-Number: 110pt → 130pt
   - Matrix: 380×380 → 460×460 (groesser, mehr Detail erkennbar)
   - Footer: enger an den Rand
   Inhalt nimmt jetzt mehr Platz ein, weniger Whitespace-Verschwendung.

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

											
										
										
											2026-05-07 13:06:46 +02:00
+								    bottom: {% if is_og %}12px{% elif is_portrait %}16px{% else %}10px{% endif %};
 								    left: {% if is_og %}38px{% elif is_portrait %}38px{% else %}30px{% endif %};
 								    right: {% if is_og %}38px{% elif is_portrait %}38px{% else %}30px{% endif %};
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								    display: flex;
 								    justify-content: space-between;
 								    align-items: center;
 								    font-family: 'Source Code Pro', monospace;
 								    font-size: 9pt;
 								    color: #888;
 								    border-top: 1px solid rgba(0,0,0,0.1);
-												feat: Scorecard-Default = portrait, Instagram via Web-Share-API, Padding gestrafft

User-Feedback in drei Punkten:

1. 'Standard auch fuer die Scorecard sein' — /v2/scorecard und
   /api/assessment/scorecard.{png,pdf} default jetzt format=portrait
   statt og. Wer das alte OG-Layout will, muss explizit ?format=og
   setzen (oder square). Externe OG-Tags sind nicht betroffen, die
   nutzen ein anderes Template (v2/og_template.html).

2. 'Instagram-Button sollte den Teilen-Dialog aufrufen' — implementiert
   mit navigator.share() + File-Blob. Auf Mobile (Safari iOS / Chrome
   Android) oeffnet der native Share-Sheet und Instagram erscheint
   direkt als Ziel; Bild + Text gehen mit. Auf Desktop / Browsern
   ohne canShare({files:…}) falle auf den vorigen Fallback zurueck:
   Bild in neuem Tab + Text in Zwischenablage.

3. 'Card nutzt Platz besser, viel Rand' — alle Paddings reduziert:
   - Card-Padding portrait: 54/56/32 → 34/38/24
   - Body gap: 22 → 16, margin-top: 26 → 16
   - Title: 32pt → 36pt
   - Score-Number: 110pt → 130pt
   - Matrix: 380×380 → 460×460 (groesser, mehr Detail erkennbar)
   - Footer: enger an den Rand
   Inhalt nimmt jetzt mehr Platz ein, weniger Whitespace-Verschwendung.

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

											
										
										
											2026-05-07 13:06:46 +02:00
+								    padding-top: 6px;
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								  }
 								  .footer .brand { color: #009DA5; font-weight: 700; letter-spacing: 0.06em; }
 								</style>
 								</head>
 								<body>
 								<div class="card">
 								  <div class="header">
 								    <div class="kicker">GWÖ-Bewertung · {{ bundesland }} · {{ assessment.drucksache }}</div>
 								    <div class="meta">{{ datum }}</div>
 								  </div>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
 								  {% if is_portrait %}
 								  <div class="portrait-body">
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								    <div class="portrait-title">{{ assessment.title|truncate(160, end="…") }}</div>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    {% if fraktionen %}
 								    <div class="portrait-fraktionen">
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								      Eingebracht von
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								      {% for f in fraktionen %}<span class="pill">{{ f }}</span>{% endfor %}
 								    </div>
 								    {% endif %}
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
 								    <div class="portrait-score-hero">
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								      <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>
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								    <div class="portrait-matrix-block">
 								      <div class="portrait-matrix matrix">
 								        {% for r in ['A','B','C','D','E'] %}
 								          {% for c in ['1','2','3','4','5'] %}
 								            {% set cell = matrix_lookup.get(r ~ c, {}) %}
 								            {% set rt = cell.get('rating', 0) %}
 								            <div class="cell {% if rt >= 4 %}r-pp{% elif rt >= 1 %}r-p{% elif rt == 0 %}r-0{% elif rt <= -4 %}r-nn{% else %}r-n{% endif %}">{% if rt >= 4 %}++{% elif rt >= 1 %}+{% elif rt == 0 %}·{% elif rt <= -4 %}−−{% else %}−{% endif %}</div>
 								          {% endfor %}
 								        {% endfor %}
 								      </div>
 								      <div class="portrait-matrix-legend">
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								        <div class="l-title">GWÖ-Matrix 5×5</div>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								        <ul>
 								          <li><span class="swatch" style="background:#889E33;"></span>++ stark fördernd</li>
 								          <li><span class="swatch" style="background:#cddaa1;"></span>+ fördernd</li>
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
+								          <li><span class="swatch" style="background:#d8d8d2;"></span>○ neutral</li>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								          <li><span class="swatch" style="background:#efc9c3;"></span>− widersprechend</li>
 								          <li><span class="swatch" style="background:#9A2A2A;"></span>−− stark widersprechend</li>
 								        </ul>
 								      </div>
 								    </div>
-												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>

											
										
										
											2026-05-07 13:21:03 +02:00
 								    <div class="portrait-summary">
 								      <span class="portrait-summary-label">Begründung</span>
 								      {{ assessment.gwoe_begruendung|truncate(440, end="…") }}
 								    </div>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  </div>
 								  {% else %}
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								  <div class="body-grid">
 								    <div class="left-col">
 								      <h1>{{ assessment.title|truncate(100, end="…") }}</h1>
 								      {% if fraktionen %}
 								      <div class="fraktionen">
 								        {% for f in fraktionen %}<span class="pill">{{ f }}</span>{% endfor %}
 								      </div>
 								      {% endif %}
 								      <div class="verdict">{{ assessment.empfehlung.value }}</div>
 								      <div class="summary">{{ assessment.gwoe_begruendung|truncate(420, end="…") }}</div>
 								    </div>
 								    <div class="right-col">
 								      <div class="score-big">{{ "%.1f"|format(assessment.gwoe_score) }}</div>
 								      <div class="score-label">GWÖ-Score · 0–10</div>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								      <div class="matrix-compact matrix">
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								        {% for r in ['A','B','C','D','E'] %}
 								          {% for c in ['1','2','3','4','5'] %}
 								            {% set cell = matrix_lookup.get(r ~ c, {}) %}
 								            {% set rt = cell.get('rating', 0) %}
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								            <div class="cell {% if rt >= 4 %}r-pp{% elif rt >= 1 %}r-p{% elif rt == 0 %}r-0{% elif rt <= -4 %}r-nn{% else %}r-n{% endif %}">{% if rt >= 4 %}++{% elif rt >= 1 %}+{% elif rt == 0 %}·{% elif rt <= -4 %}−−{% else %}−{% endif %}</div>
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								          {% endfor %}
 								        {% endfor %}
 								      </div>
 								    </div>
 								  </div>
-												feat: Scorecard im Instagram 4:5 Hochformat (1080×1350) — Title + Score + Matrix prominenter

User-Frage: 'Mach die Scorecard im Instagram-Format hochkant. Was genau
ist das nochmal? Vier zu fünf?' — Ja, 1080×1350 ist das Instagram-Feed-
Format mit dem groessten vertikalen Real-Estate. Stories sind 9:16,
quadratisch ist 1:1.

Neuer format=portrait (1080×1350) in /v2/scorecard und
/api/assessment/scorecard.png. Layout speziell vertikal:

- Title gross (32 pt) mit reichlich Leading
- Fraktions-Pills in eigener Zeile
- Score-Row: HUGE Zahl (110 pt) links + Empfehlung-Wort rechts,
  oben/unten zarte Trennlinien — klare Bewertungs-Anker
- Matrix 5×5 gross (380×380) mit Legende daneben — User sieht
  sofort welche Felder + - + - sind
- gwoe_begruendung als 5-zeilige Zusammenfassung darunter
- Footer am Boden

Instagram-Button im Share-Block stellt von square auf portrait um.

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

											
										
										
											2026-05-07 13:02:04 +02:00
+								  {% endif %}
-												feat(#179 Phase 15): Scorecards — HTML-Template + PNG-Endpoint

Mockup im GWÖ-Stil mit:
- Drucksachen-Header (Kicker + Datum)
- Titel + antragstellende Fraktionen als Pills
- Empfehlungs-Verdict
- 420-Zeichen-Zusammenfassung
- Big Score-Zahl (farbcodiert nach 8/5/3-Schwellen)
- 5x5 Mini-Matrix mit korrekten 5 Klassen (rating-pp/-p/-0/-n/-nn)
- Footer mit Brand + Drucksachen-ID

Endpoints:
- GET /v2/scorecard?drucksache=&bundesland=&format=og|square (HTML)
- GET /api/assessment/scorecard.png?... (PNG via Playwright,
  1200x630 für og, 1080x1080 für square)

Pattern entlehnt von app/og_card.py (Playwright-Headless-Render).

Refs: #179

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

											
										
										
											2026-05-06 23:44:21 +02:00
+								  <div class="footer">
 								    <span><span class="brand">gwoe.toppyr.de</span> · automatische Gemeinwohl-Bilanzierung</span>
 								    <span>{{ assessment.drucksache }}</span>
 								  </div>
 								</div>
 								</body>
 								</html>