diff --git a/app/static/v3/v3.css b/app/static/v3/v3.css index f7c0d99..9e720c0 100644 --- a/app/static/v3/v3.css +++ b/app/static/v3/v3.css @@ -7,12 +7,10 @@ * * Konvention: * - Klassen mit Präfix `v3-` sind v3-spezifisch. - * - v2-Klassen werden nur überschrieben, wenn das Citizen-Bedürfnis es - * verlangt (Wort-Etiketten statt Symbol, weniger Tiefe als Default). - * - Inline-Styles in v3-Templates sind verboten (Lint-Hook folgt in #184). + * - Inline-Styles in v3-Templates möglichst vermeiden (Lint-Hook folgt in #184). */ -/* ── v3-Beta-Indikator in der Topbar ────────────────────────────────── */ +/* ── Topbar: Beta-Pill + Modus-Toggle ──────────────────────────────── */ .v3-beta-badge { font-family: var(--font-mono); font-size: 9px; @@ -24,8 +22,6 @@ color: #fff; font-weight: 700; } - -/* ── Modus-Toggle: zwischen Profi (/antrag/...) und Bürgerin (/v3/...) ── */ .v3-modus-toggle { display: inline-flex; align-items: center; @@ -38,9 +34,261 @@ opacity: 0.85; border-bottom: 1px solid rgba(0, 157, 165, 0.35); padding-bottom: 1px; + margin-left: auto; +} +.v3-modus-toggle:hover { opacity: 1; color: var(--ecg-blue); } + +/* ── 1. Drucksache-ID: ruhiger Untertitel ──────────────────────────── */ +.v3-antrag-id { + /* erbt v2-antrag-id; nichts zu ändern auf der Ebene */ } -.v3-modus-toggle:hover { - opacity: 1; +/* ── 2. Score-Hero: Wort-Etikett vor Zahl ──────────────────────────── */ +.v3-score-hero { + background: var(--surface); + border: 1px solid var(--hairline); + border-left: 6px solid var(--ecg-blue); + border-radius: 6px; + padding: 18px 20px; + margin: 8px 0 18px; +} +.v3-score-hero.good { border-left-color: var(--ecg-green); } +.v3-score-hero.mid { border-left-color: var(--ecg-blue); } +.v3-score-hero.low { border-left-color: var(--redline-contra, #cf222e); } + +.v3-score-label { + font-family: var(--font-sans); + font-size: 22px; + font-weight: 900; + line-height: 1.1; + color: var(--ecg-dark); + margin-bottom: 4px; +} +.v3-score-hero.good .v3-score-label { color: #1a7f37; } +.v3-score-hero.low .v3-score-label { color: #a40e26; } + +.v3-score-body { + font-size: 14px; + line-height: 1.5; + color: var(--ecg-dark); + margin: 6px 0 10px; +} +.v3-score-meta { + font-family: var(--font-mono); + font-size: 11px; + color: var(--ecg-dark); + opacity: 0.75; + border-top: 1px dashed var(--hairline); + padding-top: 8px; +} +.v3-score-meta strong { font-weight: 700; } + +/* ── 3. 5-Werte-Bars (Matrix-Vereinfachung) ────────────────────────── */ +.v3-werte-list { + display: flex; + flex-direction: column; + gap: 6px; + margin: 10px 0 16px; +} +.v3-wert-row { + display: grid; + grid-template-columns: minmax(140px, 1fr) 2.5fr auto; + align-items: center; + gap: 10px; + font-size: 13px; +} +.v3-wert-label { + color: var(--ecg-dark); + font-weight: 600; + line-height: 1.3; +} +.v3-wert-bar { + position: relative; + height: 10px; +} +.v3-wert-track { + position: absolute; + inset: 0; + background: var(--surface); + border: 1px solid var(--hairline); + border-radius: 5px; + overflow: hidden; +} +.v3-wert-mid { + position: absolute; + top: 0; + bottom: 0; + left: 50%; + width: 1px; + background: var(--hairline); +} +.v3-wert-fill { + position: absolute; + top: 0; + bottom: 0; + border-radius: 3px; + min-width: 2px; +} +.v3-wert-fill.pos { background: var(--ecg-green); } +.v3-wert-fill.neu { background: var(--ecg-dark); opacity: 0.3; } +.v3-wert-fill.neg { background: var(--redline-contra, #cf222e); } + +.v3-wert-num { + font-family: var(--font-mono); + font-size: 12px; + font-weight: 700; + color: var(--ecg-dark); + min-width: 36px; + text-align: right; +} + +.v3-matrix-details { + margin-top: 10px; + padding: 8px 12px; + background: var(--surface); + border: 1px solid var(--hairline); + border-radius: 5px; +} +.v3-matrix-details > summary { + cursor: pointer; + font-family: var(--font-mono); + font-size: 11px; + letter-spacing: 0.03em; + color: var(--ecg-dark); + user-select: none; + list-style: none; +} +.v3-matrix-details > summary::-webkit-details-marker { display: none; } +.v3-matrix-details > summary::before { + content: "▸ "; + display: inline-block; + margin-right: 4px; + transition: transform 0.15s ease; +} +.v3-matrix-details[open] > summary::before { + transform: rotate(90deg); +} + +/* ── 4. Glossar-Tooltips ───────────────────────────────────────────── */ +.v3-glossar { + display: inline; + border-bottom: 1px dotted var(--ecg-blue); + cursor: help; color: var(--ecg-blue); } +.v3-glossar:hover, +.v3-glossar:focus-visible { + outline: none; + background: rgba(0, 157, 165, 0.12); + border-bottom-style: solid; +} + +.v3-glossar-modal { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.45); + z-index: 9100; + align-items: center; + justify-content: center; +} +.v3-glossar-card { + background: var(--ecg-card-bg, #fff); + border: 1px solid var(--ecg-border, #ddd); + border-radius: 8px; + padding: 22px 26px; + min-width: 280px; + max-width: 480px; + font-family: var(--font-sans); + color: var(--ecg-dark); + box-shadow: 0 8px 32px rgba(0,0,0,0.18); +} +.v3-glossar-head { + display: flex; + justify-content: space-between; + align-items: baseline; + margin-bottom: 10px; +} +.v3-glossar-head strong { + font-family: var(--font-display, inherit); + font-size: 16px; + font-weight: 900; + color: var(--ecg-teal, #009da5); + letter-spacing: 0.03em; +} +.v3-glossar-close { + background: none; + border: none; + font-size: 18px; + cursor: pointer; + color: var(--ecg-dark); + opacity: 0.55; + padding: 0; + line-height: 1; +} +.v3-glossar-card p { + margin: 0; + font-size: 14px; + line-height: 1.55; +} + +/* ── 5. Collapsible-Sections (Verbesserungen, Kommentare default zu) ─ */ +.v3-collapsible { + margin-top: 24px; + padding: 8px 0; + border-top: 1px solid var(--hairline); +} +.v3-collapsible > summary { + cursor: pointer; + list-style: none; + user-select: none; + display: flex; + align-items: baseline; + gap: 12px; + padding: 4px 0; +} +.v3-collapsible > summary::-webkit-details-marker { display: none; } +.v3-collapsible > summary > h3 { + margin: 0; + display: inline-flex; + align-items: baseline; + gap: 8px; +} +.v3-collapsible > summary > h3::before { + content: "▸"; + display: inline-block; + font-family: var(--font-mono); + font-size: 12px; + color: var(--ecg-dark); + opacity: 0.55; + transition: transform 0.15s ease; +} +.v3-collapsible[open] > summary > h3::before { + transform: rotate(90deg); +} +.v3-collapsible-hint { + font-family: var(--font-mono); + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.07em; + color: var(--ecg-dark); + opacity: 0.5; +} +.v3-comments { + margin-top: 40px; + padding-top: 20px; +} + +/* ── 6. Aktions-Links ──────────────────────────────────────────────── */ +.v3-aktions { + margin-top: 24px; + font-family: var(--font-mono); + font-size: 11px; + display: flex; + gap: 16px; + flex-wrap: wrap; +} +.v3-aktions a { + color: var(--ecg-blue); + border-bottom: 1px solid rgba(0, 157, 165, 0.35); +} diff --git a/app/templates/v2/screens/antrag_detail.html b/app/templates/v2/screens/antrag_detail.html index 1387181..5dd3180 100644 --- a/app/templates/v2/screens/antrag_detail.html +++ b/app/templates/v2/screens/antrag_detail.html @@ -126,12 +126,14 @@ {# ── Linke Spalte: Redaktionelle Analyse ── #}
+ {{ v.begruendung }} +
+ {% endif %} +
+
+Kommentare
+ klicken zum Aufklappen · Anmeldung erforderlich +