e31ee1ad07
Drei zusammenhängende UI-Bausteine:
1) Tour-Engine ist jetzt page-agnostisch — sie liest die Stationen aus
``window.GWOE_TOUR_STEPS`` (pro Page hinterlegt), nicht mehr aus einem
eingebauten Konstanten. Tour-Komponente wird per ``{% include %}``
eingehängt; das Page-Template definiert vorher seine eigenen Steps.
Antrag-Detail-Tour wurde entsprechend in das eigene Template gezogen.
2) Startseite (v2/screens/durchsuchen.html): „Du bist neu hier?"-Banner
oben mit zwei Buttons — „🧭 Tour starten" und „Nein, danke". Banner
bleibt sichtbar, bis explizit weggeklickt wird (localStorage-Flag),
oder die Tour gestartet wird. Fünf Stationen für die Startseite:
Marken-Block, Suche, Score-Filter + Sortierung, Antrags-Liste,
linke Navigation.
3) Logo-Klick führt jetzt zur Startseite — sowohl in v2/base.html als
auch in components/appshell.html. ``v2-brand`` und ``v2-brand-sub``
sind in einen ``<a href="/">`` mit Hover-Highlight gewickelt
(``.v2-brand-link``).
Phase 2 (ElevenLabs-Voice) ist der nächste Schritt — bisher läuft das
Audio über die Web Speech API.
1336 lines
31 KiB
CSS
1336 lines
31 KiB
CSS
/*
|
||
* v2.css — Base-Styles für GWÖ-Antragsprüfer v2
|
||
* Alle Regeln leben unter dem Scope "body.v2" und kollidieren nicht
|
||
* mit dem bestehenden v1-Frontend.
|
||
*
|
||
* Abhängigkeiten: tokens.css (zuerst laden), fonts.css
|
||
*/
|
||
|
||
/* ── Phosphor Icons ─────────────────────────────────────────────── */
|
||
.v2-icon {
|
||
display: inline-flex;
|
||
flex-shrink: 0;
|
||
vertical-align: middle;
|
||
}
|
||
.v2-icon svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
fill: currentColor;
|
||
}
|
||
/* ── Reset & Box Model ──────────────────────────────────────────── */
|
||
body.v2 *, body.v2 *::before, body.v2 *::after {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body.v2 {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font-sans);
|
||
font-size: 15px;
|
||
line-height: 1.55;
|
||
color: var(--ecg-dark);
|
||
background: var(--paper);
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body.v2 a {
|
||
color: var(--ecg-blue);
|
||
text-decoration: none;
|
||
border-bottom: 1px solid rgba(0, 157, 165, 0.35);
|
||
}
|
||
|
||
body.v2 a:hover {
|
||
border-bottom-color: var(--ecg-blue);
|
||
}
|
||
|
||
body.v2 :focus-visible {
|
||
outline: 2px solid var(--ecg-blue);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* ── App-Shell Layout ───────────────────────────────────────────── */
|
||
.v2-shell {
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto;
|
||
grid-template-columns: var(--sidebar-width) 1fr;
|
||
grid-template-areas:
|
||
"sidebar topbar"
|
||
"sidebar main"
|
||
"sidebar footer";
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.v2-topbar {
|
||
grid-area: topbar;
|
||
background: var(--paper);
|
||
border-bottom: 1px solid var(--hairline);
|
||
padding: 0 24px;
|
||
height: 32px; /* harte Höhe statt min-height */
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
line-height: 1;
|
||
color: var(--ecg-dark);
|
||
}
|
||
.v2-topbar > * {
|
||
height: auto;
|
||
max-height: 24px; /* nichts darin höher als 24 px */
|
||
}
|
||
.v2-topbar select,
|
||
.v2-topbar button,
|
||
.v2-topbar a {
|
||
padding: 2px 6px;
|
||
margin: 0;
|
||
line-height: 1;
|
||
height: 22px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
}
|
||
.v2-topbar .v2-icon { width: 12px !important; height: 12px !important; }
|
||
.v2-topbar .v2-icon svg { width: 12px; height: 12px; }
|
||
|
||
.v2-topbar-spacer {
|
||
flex: 1;
|
||
}
|
||
|
||
.v2-topbar a {
|
||
color: var(--ecg-dark);
|
||
border-bottom: none;
|
||
opacity: 0.75;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 4px;
|
||
}
|
||
|
||
.v2-topbar a:hover {
|
||
opacity: 1;
|
||
color: var(--ecg-blue);
|
||
border-bottom: none;
|
||
}
|
||
|
||
.v2-topbar .v2-beta-link {
|
||
color: var(--ecg-green);
|
||
font-weight: 700;
|
||
opacity: 1;
|
||
border-bottom: 1px solid var(--ecg-green);
|
||
}
|
||
|
||
/* ── Sidebar ────────────────────────────────────────────────────── */
|
||
.v2-sidebar {
|
||
grid-area: sidebar;
|
||
width: var(--sidebar-width);
|
||
background: var(--paper);
|
||
border-right: 1px solid var(--hairline);
|
||
padding: 22px 18px;
|
||
overflow-y: auto;
|
||
position: sticky;
|
||
top: 0;
|
||
height: 100vh;
|
||
}
|
||
|
||
.v2-brand-link {
|
||
display: block;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
.v2-brand-link:hover .v2-brand,
|
||
.v2-brand-link:focus-visible .v2-brand {
|
||
color: var(--ecg-teal);
|
||
}
|
||
|
||
.v2-brand {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 18px;
|
||
text-transform: uppercase;
|
||
color: var(--ecg-dark);
|
||
letter-spacing: 0;
|
||
line-height: 1.05;
|
||
transition: color 0.12s ease;
|
||
}
|
||
|
||
.v2-brand .grn { color: var(--ecg-green); }
|
||
.v2-brand .blu { color: var(--ecg-blue); }
|
||
|
||
.v2-brand-sub {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
color: var(--ecg-dark);
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
margin: 6px 0 26px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.v2-nav-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.v2-nav-label {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 10px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--ecg-green);
|
||
margin-bottom: 6px;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.v2-nav-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 7px 10px;
|
||
color: var(--ecg-dark);
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
position: relative;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
}
|
||
|
||
.v2-nav-item:hover {
|
||
background: var(--surface);
|
||
border-bottom: none;
|
||
}
|
||
|
||
.v2-nav-item.active {
|
||
background: var(--ecg-blue);
|
||
color: #fff;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.v2-nav-item.active:hover {
|
||
background: var(--ecg-blue);
|
||
}
|
||
|
||
.v2-nav-count {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--ecg-light);
|
||
}
|
||
|
||
.v2-nav-item.active .v2-nav-count {
|
||
color: #fff;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* ── Main Content ───────────────────────────────────────────────── */
|
||
.v2-main {
|
||
grid-area: main;
|
||
padding: 24px 28px;
|
||
background: var(--paper);
|
||
min-width: 0;
|
||
}
|
||
|
||
/* ── Footer ─────────────────────────────────────────────────────── */
|
||
.v2-footer {
|
||
grid-area: footer;
|
||
padding: 18px 24px;
|
||
border-top: 1px solid var(--hairline);
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--ecg-dark);
|
||
letter-spacing: 0.04em;
|
||
display: flex;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
opacity: 0.75;
|
||
background: var(--paper);
|
||
}
|
||
|
||
.v2-footer a {
|
||
color: var(--ecg-dark);
|
||
border-bottom: none;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.v2-footer a:hover {
|
||
opacity: 1;
|
||
color: var(--ecg-blue);
|
||
border-bottom: none;
|
||
}
|
||
|
||
/* ── Typografie-Skala (Manual) ──────────────────────────────────── */
|
||
body.v2 .v2-title {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 52px;
|
||
line-height: 1.02;
|
||
letter-spacing: -0.005em;
|
||
text-transform: uppercase;
|
||
color: var(--ecg-dark);
|
||
margin: 0;
|
||
}
|
||
|
||
body.v2 .v2-overtitle {
|
||
font-family: var(--font-sans);
|
||
font-weight: 300;
|
||
font-size: 22px;
|
||
text-transform: uppercase;
|
||
color: var(--ecg-dark);
|
||
letter-spacing: 0.01em;
|
||
margin: 4px 0 0;
|
||
}
|
||
|
||
body.v2 h1, body.v2 .v2-h1 {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 26px;
|
||
line-height: 1.2;
|
||
margin: 0 0 8px;
|
||
text-transform: uppercase;
|
||
color: var(--ecg-dark);
|
||
letter-spacing: 0.005em;
|
||
}
|
||
|
||
body.v2 h2, body.v2 .v2-h2 {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 18px;
|
||
line-height: 1.25;
|
||
margin: 0 0 8px;
|
||
color: var(--ecg-dark);
|
||
}
|
||
|
||
body.v2 h3, body.v2 .v2-h3 {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 13px;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
color: var(--ecg-dark);
|
||
margin: 0 0 6px;
|
||
}
|
||
|
||
body.v2 p {
|
||
margin: 0 0 14px;
|
||
max-width: 72ch;
|
||
text-wrap: pretty;
|
||
}
|
||
|
||
body.v2 strong, body.v2 b {
|
||
font-weight: 900;
|
||
color: var(--ecg-dark);
|
||
}
|
||
|
||
/* ── Toolbar / Filter-Row ───────────────────────────────────────── */
|
||
.v2-toolbar {
|
||
display: flex;
|
||
gap: 8px;
|
||
align-items: center;
|
||
padding-bottom: 14px;
|
||
border-bottom: 1px solid var(--hairline);
|
||
margin-bottom: 14px;
|
||
flex-wrap: wrap;
|
||
position: sticky;
|
||
top: 0;
|
||
background: var(--paper);
|
||
z-index: 10;
|
||
}
|
||
|
||
.v2-toolbar-sep { flex: 1; }
|
||
|
||
.v2-search {
|
||
flex: 1;
|
||
min-width: 180px;
|
||
border: 1px solid var(--hairline);
|
||
padding: 8px 12px;
|
||
font-size: 13px;
|
||
color: var(--ecg-dark);
|
||
font-family: var(--font-sans);
|
||
background: var(--paper);
|
||
outline: none;
|
||
}
|
||
|
||
.v2-search:focus {
|
||
border-color: var(--ecg-blue);
|
||
}
|
||
|
||
/* ── Chip ───────────────────────────────────────────────────────── */
|
||
.v2-chip {
|
||
border: 1px solid var(--hairline);
|
||
background: var(--paper);
|
||
padding: 5px 11px;
|
||
font-size: 12px;
|
||
color: var(--ecg-dark);
|
||
font-family: var(--font-sans);
|
||
font-weight: 400;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
display: inline-block;
|
||
}
|
||
|
||
.v2-chip:hover {
|
||
border-color: var(--ecg-light);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.v2-chip.active,
|
||
.v2-chip[data-active="true"] {
|
||
background: var(--ecg-dark);
|
||
color: #fff;
|
||
border-color: var(--ecg-dark);
|
||
font-weight: 900;
|
||
}
|
||
|
||
.v2-chip.green.active,
|
||
.v2-chip.green[data-active="true"] {
|
||
background: var(--ecg-green);
|
||
border-color: var(--ecg-green);
|
||
color: #fff;
|
||
}
|
||
|
||
.v2-chip.dark.active,
|
||
.v2-chip.dark[data-active="true"] {
|
||
background: var(--ecg-dark);
|
||
border-color: var(--ecg-dark);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Result Row ─────────────────────────────────────────────────── */
|
||
.v2-result-row {
|
||
display: grid;
|
||
grid-template-columns: 72px 1fr 140px 90px;
|
||
gap: 18px;
|
||
padding: 14px 4px;
|
||
border-bottom: 1px solid var(--hairline);
|
||
align-items: center;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
}
|
||
|
||
.v2-result-row:hover {
|
||
background: var(--surface);
|
||
}
|
||
|
||
.v2-score-cell {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
padding: 8px 0;
|
||
line-height: 1;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.v2-score-cell small {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: 9px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
font-weight: 500;
|
||
margin-top: 3px;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
.v2-score-cell.s-high { background: var(--score-high-bg); color: var(--score-high-fg); }
|
||
.v2-score-cell.s-mid { background: var(--score-mid-bg); color: var(--score-mid-fg); }
|
||
.v2-score-cell.s-low { background: var(--score-low-bg); color: var(--score-low-fg); }
|
||
|
||
.v2-r-title {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 14.5px;
|
||
line-height: 1.3;
|
||
color: var(--ecg-dark);
|
||
}
|
||
|
||
.v2-r-sub {
|
||
font-family: var(--font-sans);
|
||
font-size: 12px;
|
||
color: var(--ecg-dark);
|
||
margin-top: 4px;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.v2-party-chip {
|
||
display: inline-block;
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
border: 1px solid var(--hairline);
|
||
margin-right: 4px;
|
||
color: var(--ecg-dark);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.v2-r-state {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--ecg-dark);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.v2-r-date {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--ecg-dark);
|
||
text-align: right;
|
||
opacity: 0.75;
|
||
}
|
||
|
||
/* ── Kasten (4 Varianten aus Manual Seite 13) ───────────────────── */
|
||
.v2-kasten {
|
||
padding: 18px 22px;
|
||
margin: 14px 0;
|
||
}
|
||
|
||
.v2-kasten.solid-green { background: var(--ecg-green); color: #fff; }
|
||
.v2-kasten.solid-blue { background: var(--ecg-blue); color: #fff; }
|
||
.v2-kasten.outline-green { border: 2px solid var(--ecg-green); color: var(--ecg-green); }
|
||
.v2-kasten.outline-blue { border: 2px solid var(--ecg-blue); color: var(--ecg-blue); }
|
||
|
||
.v2-kasten h4 { color: inherit; margin: 0 0 6px; }
|
||
.v2-kasten p { color: inherit; margin: 0; max-width: none; }
|
||
|
||
/* ── Score Hero ─────────────────────────────────────────────────── */
|
||
.v2-score-hero {
|
||
/* Float-Layout: Score-Zahl links, Verdict-Text fließt rechts daneben
|
||
UND darunter — so nutzt langer Text den Platz unter der Zahl. */
|
||
padding: 20px 0 22px;
|
||
border-top: 2px solid var(--ecg-green);
|
||
border-bottom: 1px solid var(--hairline);
|
||
margin: 4px 0 22px;
|
||
overflow: hidden; /* clear float */
|
||
}
|
||
|
||
.v2-score-hero.low {
|
||
border-top-color: var(--redline-contra);
|
||
}
|
||
|
||
.v2-score-hero .big-num {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 68px;
|
||
line-height: 0.9;
|
||
color: var(--ecg-green);
|
||
letter-spacing: -0.02em;
|
||
/* Umfluss: Score links, Text fließt rechts/drunter */
|
||
float: left;
|
||
margin-right: 22px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.v2-score-hero .verdict {
|
||
/* kein float — Text läuft rechts vom big-num und unter sie */
|
||
font-size: 14px;
|
||
line-height: 1.55;
|
||
}
|
||
.v2-score-hero .verdict b {
|
||
display: inline-block;
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.v2-score-hero.low .big-num {
|
||
color: var(--redline-contra);
|
||
}
|
||
|
||
.v2-score-hero .slash {
|
||
color: var(--ecg-light);
|
||
font-weight: 300;
|
||
}
|
||
|
||
.v2-score-hero .verdict {
|
||
font-family: var(--font-sans);
|
||
font-size: 15px;
|
||
color: var(--ecg-dark);
|
||
max-width: 28ch;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.v2-score-hero .verdict b {
|
||
color: var(--ecg-green);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.02em;
|
||
display: block;
|
||
font-size: 12px;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.v2-score-hero.low .verdict b {
|
||
color: var(--redline-contra);
|
||
}
|
||
|
||
/* ── Matrix Mini (5×5) ──────────────────────────────────────────── */
|
||
.v2-matrix-mini {
|
||
display: grid;
|
||
grid-template-columns: 130px repeat(5, 1fr);
|
||
gap: 0;
|
||
border: 1px solid var(--hairline);
|
||
font-size: 11px;
|
||
margin: 8px 0 4px;
|
||
}
|
||
|
||
.v2-matrix-mini > div {
|
||
padding: 6px 8px;
|
||
border-right: 1px solid var(--hairline);
|
||
border-bottom: 1px solid var(--hairline);
|
||
font-family: var(--font-mono);
|
||
text-align: center;
|
||
min-height: 36px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.v2-matrix-mini > div:nth-child(6n) { border-right: 0; }
|
||
.v2-matrix-mini > div:nth-last-child(-n+6) { border-bottom: 0; }
|
||
|
||
.v2-matrix-mini .hdr { background: var(--ecg-blue); color: #fff; font-size: 10px; letter-spacing: 0.03em; font-weight: 700; line-height: 1.25; cursor: help; padding: 4px 4px; }
|
||
.v2-matrix-mini .rhdr { background: var(--surface); text-align: left; justify-content: flex-start; padding-left: 10px; color: var(--ecg-dark); font-weight: 700; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.02em; line-height: 1.25; cursor: help; }
|
||
|
||
.v2-matrix-mini .m-pp { background: var(--ecg-green); color: #fff; font-weight: 700; }
|
||
.v2-matrix-mini .m-p { background: var(--redline-ins-bg); color: var(--ecg-dark); }
|
||
.v2-matrix-mini .m-0 { background: var(--paper); color: var(--ecg-light); }
|
||
.v2-matrix-mini .m-n { background: var(--redline-del-bg); color: var(--ecg-dark); }
|
||
.v2-matrix-mini .m-nn { background: var(--redline-contra); color: #fff; font-weight: 700; }
|
||
|
||
.v2-matrix-legend {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
color: var(--ecg-dark);
|
||
margin: 6px 0 0;
|
||
display: flex;
|
||
gap: 14px;
|
||
opacity: 0.85;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
/* ── Quote Card ─────────────────────────────────────────────────── */
|
||
.v2-quote {
|
||
border-left: 3px solid var(--ecg-blue);
|
||
padding: 12px 16px;
|
||
background: var(--paper);
|
||
font-family: var(--font-sans);
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: var(--ecg-dark);
|
||
margin: 10px 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.v2-quote.contra {
|
||
border-left-color: var(--redline-contra);
|
||
}
|
||
|
||
.v2-quote .q-body {
|
||
font-style: italic;
|
||
}
|
||
|
||
.v2-quote cite {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
font-style: normal;
|
||
color: var(--ecg-dark);
|
||
margin-top: 8px;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
.v2-quote .verified {
|
||
display: inline-block;
|
||
color: var(--ecg-green);
|
||
font-weight: 700;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.v2-quote.contra .verified {
|
||
color: var(--redline-contra);
|
||
}
|
||
|
||
/* ── Redline ────────────────────────────────────────────────────── */
|
||
.v2-redline {
|
||
font-family: var(--font-mono);
|
||
font-size: 12.5px;
|
||
background: var(--surface);
|
||
padding: 12px 14px;
|
||
line-height: 1.6;
|
||
border-left: 3px solid var(--ecg-green);
|
||
color: var(--ecg-dark);
|
||
margin: 8px 0;
|
||
}
|
||
|
||
.v2-redline .del {
|
||
background: var(--redline-del-bg);
|
||
text-decoration: line-through;
|
||
padding: 0 2px;
|
||
}
|
||
|
||
.v2-redline .ins {
|
||
background: var(--redline-ins-bg);
|
||
padding: 0 2px;
|
||
}
|
||
|
||
/* ── Detail Split Layout ────────────────────────────────────────── */
|
||
.v2-detail {
|
||
display: grid;
|
||
grid-template-columns: 1.25fr 1fr;
|
||
gap: 0;
|
||
background: var(--paper);
|
||
}
|
||
|
||
.v2-detail .left {
|
||
padding: 30px 34px 30px 0;
|
||
border-right: 1px solid var(--hairline);
|
||
min-width: 0;
|
||
}
|
||
|
||
.v2-detail .right {
|
||
padding: 30px 0 30px 34px;
|
||
background: var(--surface);
|
||
min-width: 0;
|
||
}
|
||
|
||
.v2-antrag-id {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
color: var(--ecg-dark);
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
opacity: 0.85;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.v2-big-title {
|
||
font-family: var(--font-sans);
|
||
font-weight: 900;
|
||
font-size: 24px;
|
||
line-height: 1.2;
|
||
margin: 6px 0 8px;
|
||
color: var(--ecg-dark);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.005em;
|
||
}
|
||
|
||
.v2-byline {
|
||
font-family: var(--font-sans);
|
||
font-size: 12px;
|
||
color: var(--ecg-dark);
|
||
margin-bottom: 20px;
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* ── Skeleton Loading ───────────────────────────────────────────── */
|
||
@keyframes v2-shimmer {
|
||
0% { background-position: -400px 0; }
|
||
100% { background-position: 400px 0; }
|
||
}
|
||
|
||
.v2-skeleton {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--surface) 25%,
|
||
var(--hairline) 50%,
|
||
var(--surface) 75%
|
||
);
|
||
background-size: 800px 100%;
|
||
animation: v2-shimmer 1.4s ease-in-out infinite;
|
||
border-radius: 2px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.v2-skeleton-row {
|
||
display: grid;
|
||
grid-template-columns: 72px 1fr 140px 90px;
|
||
gap: 18px;
|
||
padding: 14px 4px;
|
||
border-bottom: 1px solid var(--hairline);
|
||
align-items: center;
|
||
}
|
||
|
||
/* ── Manual-Aufzählung ──────────────────────────────────────────── */
|
||
body.v2 ul.v2-manual {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 10px 0 16px;
|
||
}
|
||
|
||
body.v2 ul.v2-manual > li {
|
||
position: relative;
|
||
padding: 5px 0 5px 24px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
body.v2 ul.v2-manual > li::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 13px;
|
||
width: 9px;
|
||
height: 9px;
|
||
background: var(--ecg-blue);
|
||
}
|
||
|
||
body.v2 ul.v2-manual > li.green::before {
|
||
background: var(--ecg-green);
|
||
}
|
||
|
||
body.v2 ul.v2-manual ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 4px 0 4px 4px;
|
||
}
|
||
|
||
body.v2 ul.v2-manual ul li {
|
||
position: relative;
|
||
padding: 3px 0 3px 22px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
body.v2 ul.v2-manual ul li::before {
|
||
content: "–";
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 3px;
|
||
color: var(--ecg-blue);
|
||
font-weight: 900;
|
||
}
|
||
|
||
/* ── Responsive: Mobile Drawer ──────────────────────────────────── */
|
||
@media (max-width: 900px) {
|
||
/* CSS-Grid-Bug: 1fr-Track schrumpft NICHT unter die min-content seiner
|
||
Kinder. Mit minmax(0, 1fr) erlauben wir track auf 0 zu schrumpfen.
|
||
|
||
KEIN body.overflow-x:hidden hier — das bricht position:sticky in
|
||
Safari (sticky-Element kommt nicht ueber den scrollenden Container,
|
||
Topbar verschwindet hinter Safari-Chrome). minmax(0,1fr) reicht. */
|
||
body.v2 .v2-shell {
|
||
grid-template-columns: minmax(0, 1fr);
|
||
grid-template-areas:
|
||
"topbar"
|
||
"main"
|
||
"footer";
|
||
width: 100%;
|
||
max-width: 100vw;
|
||
min-width: 0;
|
||
}
|
||
body.v2 .v2-main,
|
||
body.v2 .v2-topbar,
|
||
body.v2 .v2-footer {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
body.v2 .v2-main {
|
||
padding: 16px 12px;
|
||
}
|
||
/* Mobile Topbar: nicht wrappen (broke sticky in Safari), stattdessen
|
||
weniger wichtige Items via display:none aus dem Flow nehmen. Brand,
|
||
Auth-Widget und Theme-Toggle bleiben erreichbar. */
|
||
body.v2 .v2-topbar {
|
||
height: 32px;
|
||
padding: 0 12px;
|
||
flex-wrap: nowrap;
|
||
z-index: 200;
|
||
}
|
||
/* Methodik + Quellen + Bundesland-Selector werden auf Mobile aus dem
|
||
Topbar verbannt (sind im Sidebar-Drawer + Footer ohnehin nochmal). */
|
||
body.v2 .v2-topbar > a[href="/methodik"],
|
||
body.v2 .v2-topbar > a[href="/quellen"],
|
||
body.v2 .v2-topbar > #v2-global-bl {
|
||
display: none;
|
||
}
|
||
/* Safe-Area-Inset fuer iOS-Safari: Topbar respektiert die Browser-
|
||
Chrome-Hoehe ueber den ersten 0 px der Page. */
|
||
body.v2 .v2-topbar {
|
||
padding-top: env(safe-area-inset-top, 0);
|
||
}
|
||
|
||
.v2-sidebar {
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100vh;
|
||
z-index: 200;
|
||
box-shadow: 4px 0 16px rgba(0,0,0,0.12);
|
||
}
|
||
|
||
.v2-sidebar.open {
|
||
display: block;
|
||
}
|
||
|
||
.v2-topbar {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.v2-result-row {
|
||
grid-template-columns: 64px 1fr;
|
||
}
|
||
|
||
.v2-result-row .v2-r-date,
|
||
.v2-result-row .v2-r-state {
|
||
display: none;
|
||
}
|
||
|
||
.v2-detail {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.v2-detail .left {
|
||
padding: 20px 0;
|
||
border-right: 0;
|
||
border-bottom: 1px solid var(--hairline);
|
||
}
|
||
|
||
.v2-detail .right {
|
||
padding: 20px 0;
|
||
}
|
||
|
||
.v2-matrix-mini {
|
||
grid-template-columns: 70px repeat(5, 1fr);
|
||
font-size: 10px;
|
||
}
|
||
|
||
.v2-menu-toggle {
|
||
display: inline-flex;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 901px) {
|
||
.v2-menu-toggle {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
/* ── Overlay for mobile drawer ──────────────────────────────────── */
|
||
.v2-overlay {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0,0,0,0.3);
|
||
z-index: 150;
|
||
}
|
||
|
||
.v2-overlay.open {
|
||
display: block;
|
||
}
|
||
|
||
/* ── Button primitives ──────────────────────────────────────────── */
|
||
.v2-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 16px;
|
||
font-family: var(--font-sans);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: var(--ecg-blue);
|
||
color: #fff;
|
||
letter-spacing: 0.02em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.v2-btn:hover {
|
||
background: color-mix(in srgb, var(--ecg-blue) 85%, black);
|
||
}
|
||
|
||
.v2-btn.green {
|
||
background: var(--ecg-green);
|
||
}
|
||
|
||
.v2-btn.green:hover {
|
||
background: color-mix(in srgb, var(--ecg-green) 85%, black);
|
||
}
|
||
|
||
.v2-btn.outline {
|
||
background: transparent;
|
||
border: 2px solid var(--ecg-blue);
|
||
color: var(--ecg-blue);
|
||
}
|
||
|
||
.v2-btn.outline:hover {
|
||
background: var(--ecg-blue);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Menu Toggle Button — nur auf Mobile sichtbar (< 900 px) ───────
|
||
!important nötig wegen .v2-topbar button { display: inline-flex }
|
||
(die generische Reset-Regel hat 2 Klassen Specificity vs hier 1). */
|
||
.v2-topbar .v2-menu-toggle {
|
||
display: none !important;
|
||
padding: 6px 10px;
|
||
background: none;
|
||
border: 1px solid var(--hairline);
|
||
color: var(--ecg-dark);
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
line-height: 1;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.v2-topbar .v2-menu-toggle { display: inline-flex !important; }
|
||
}
|
||
|
||
/* ── Fraktions-Score-Tabelle (Fix 2+3) ─────────────────────────── */
|
||
.v2-fraktions-scores {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.v2-fraktion-row {
|
||
display: block;
|
||
padding: 10px 12px;
|
||
background: var(--paper);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: 4px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.v2-fraktion-head {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.v2-fraktion-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
/* Rolle-Pills (Antragsteller:in / Regierungsfraktion) */
|
||
.v2-pill {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
.v2-pill-antrag {
|
||
color: #bf6c10;
|
||
background: rgba(247, 148, 29, 0.15);
|
||
}
|
||
.v2-pill-reg {
|
||
color: #1e6a90;
|
||
background: rgba(0, 157, 165, 0.15);
|
||
}
|
||
|
||
/* Programm-Block (Wahlprogramm/Parteiprogramm) im BELEGE-Layout.
|
||
<details open> per Default — alles sichtbar, Faltmechanismus optional.
|
||
Pro Fraktion zwei Blöcke; der zweite hat eine zarte Trenn-Linie. */
|
||
.v2-treue-block {
|
||
margin: 8px 0 0;
|
||
padding-top: 8px;
|
||
}
|
||
.v2-treue-block + .v2-treue-block {
|
||
border-top: 1px dashed var(--hairline);
|
||
}
|
||
|
||
/* Summary = klickbare Header-Zeile. list-style:none entfernt das native
|
||
Marker-Dreieck, wir setzen einen eigenen subtilen Chevron rechts. */
|
||
.v2-treue-block > summary {
|
||
list-style: none;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
outline-offset: 2px;
|
||
}
|
||
.v2-treue-block > summary::-webkit-details-marker { display: none; }
|
||
.v2-treue-block > summary:hover .v2-treue-label { color: var(--ecg-blue); }
|
||
|
||
.v2-treue-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 8px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.v2-treue-label {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
color: #0d6f76;
|
||
font-weight: 600;
|
||
transition: color 0.12s ease;
|
||
}
|
||
.v2-treue-label::after {
|
||
content: "▾";
|
||
margin-left: 6px;
|
||
font-size: 9px;
|
||
opacity: 0.5;
|
||
display: inline-block;
|
||
transition: transform 0.15s ease;
|
||
}
|
||
.v2-treue-block:not([open]) > summary .v2-treue-label::after {
|
||
transform: rotate(-90deg);
|
||
}
|
||
.v2-treue-spacer {
|
||
flex: 1 1 auto;
|
||
}
|
||
|
||
/* "Bewertung"-Tag links vom Score-Chip — schwächt die Zahl optisch ab,
|
||
macht klar, dass sie eine Wert-Auszeichnung ist, kein Kontext. */
|
||
.v2-treue-score-tag {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
color: var(--ecg-dark);
|
||
opacity: 0.55;
|
||
}
|
||
|
||
/* Body-Container und Sub-Labels Einschätzung/Belege */
|
||
.v2-treue-body {
|
||
padding-top: 6px;
|
||
}
|
||
.v2-treue-sublabel {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.07em;
|
||
color: var(--ecg-dark);
|
||
opacity: 0.6;
|
||
margin: 8px 0 4px;
|
||
}
|
||
.v2-einschaetzung {
|
||
margin-bottom: 4px;
|
||
}
|
||
.v2-einschaetzung-text {
|
||
font-size: 13px;
|
||
line-height: 1.55;
|
||
color: var(--ecg-dark);
|
||
}
|
||
.v2-belege {
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.v2-fraktion-scores {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.v2-score-chip {
|
||
display: inline-block;
|
||
padding: 2px 7px;
|
||
border-radius: 3px;
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.v2-score-chip.chip-green {
|
||
background: var(--score-chip-green-bg);
|
||
color: var(--score-chip-green-fg);
|
||
}
|
||
|
||
.v2-score-chip.chip-mid {
|
||
background: var(--score-chip-mid-bg);
|
||
color: var(--score-chip-mid-fg);
|
||
}
|
||
|
||
.v2-score-chip.chip-red {
|
||
background: var(--score-chip-red-bg);
|
||
color: var(--score-chip-red-fg);
|
||
}
|
||
|
||
.v2-badge-antragsteller,
|
||
.v2-badge-regierung {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
cursor: help; /* Browser zeigt Hilfe-Cursor — Affordanz fuer Tooltip */
|
||
}
|
||
|
||
/* Score-Chips bekommen die gleiche cursor-Affordanz, sodass User merken,
|
||
dass WP/PP nicht nur Labels sind sondern Tooltips haben (#147). */
|
||
.v2-score-chip[title] { cursor: help; }
|
||
|
||
.v2-badge-antragsteller {
|
||
background: var(--ecg-blue);
|
||
color: #fff;
|
||
}
|
||
|
||
.v2-badge-regierung {
|
||
background: var(--ecg-green);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ── Admin-Screens ──────────────────────────────────────────────────────── */
|
||
|
||
body.v2 .v2-admin-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
|
||
body.v2 .v2-admin-table thead th {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
font-weight: 700;
|
||
letter-spacing: .08em;
|
||
text-transform: uppercase;
|
||
opacity: 0.5;
|
||
padding: 6px 10px;
|
||
text-align: left;
|
||
border-bottom: 1px solid var(--ecg-teal);
|
||
}
|
||
|
||
body.v2 .v2-admin-table tbody tr {
|
||
border-bottom: 1px solid rgba(0,0,0,.06);
|
||
transition: background .15s;
|
||
}
|
||
|
||
body.v2 .v2-admin-table tbody tr:hover {
|
||
background: rgba(0,120,100,.04);
|
||
}
|
||
|
||
body.v2 .v2-admin-table td {
|
||
padding: 8px 10px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
body.v2 .v2-admin-btn {
|
||
font-family: var(--font-mono);
|
||
font-size: 11px;
|
||
padding: 4px 10px;
|
||
background: var(--ecg-teal);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
transition: opacity .15s;
|
||
}
|
||
|
||
body.v2 .v2-admin-btn:hover { opacity: .8; }
|
||
body.v2 .v2-admin-btn:disabled { opacity: .4; cursor: default; }
|
||
|
||
body.v2 .v2-admin-btn.danger {
|
||
background: transparent;
|
||
color: var(--ecg-blue);
|
||
border: 1px solid var(--ecg-blue);
|
||
}
|
||
|
||
body.v2 .v2-admin-btn.danger:hover { background: var(--ecg-blue); color: #fff; }
|
||
|
||
body.v2 .v2-admin-badge {
|
||
font-family: var(--font-mono);
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
border-radius: 2px;
|
||
background: rgba(0,120,100,.12);
|
||
color: var(--ecg-teal);
|
||
}
|
||
|
||
body.v2 .v2-admin-badge.running {
|
||
background: rgba(0,120,100,.18);
|
||
color: var(--ecg-teal);
|
||
}
|
||
|
||
/* ── Abstimmungsergebnis: Pills, Marker, Legende ───────────────────── */
|
||
.v2-vote-pill {
|
||
display: inline-block;
|
||
padding: 1px 6px;
|
||
border-radius: 3px;
|
||
margin-right: 3px;
|
||
}
|
||
.v2-vote-ja { background: color-mix(in srgb, #2da44e 15%, transparent); color: #1a7f37; }
|
||
.v2-vote-nein { background: color-mix(in srgb, #cf222e 15%, transparent); color: #a40e26; }
|
||
.v2-vote-enth { background: color-mix(in srgb, #6e7781 15%, transparent); color: #57606a; }
|
||
|
||
/* Marker (⚠ Heuchelei / ! Opportunismus): kompakt, mit klarer
|
||
Hover-/Focus-Affordanz fuer Bürger:innen, die Tooltip-Konventionen
|
||
nicht kennen. Native title= bleibt fuer Screenreader/Tooltip aktiv. */
|
||
.v2-vote-marker {
|
||
display: inline-block;
|
||
margin-left: 4px;
|
||
padding: 0 4px;
|
||
border-radius: 8px;
|
||
cursor: help;
|
||
font-weight: 700;
|
||
line-height: 1.4;
|
||
border-bottom: 1px dotted transparent;
|
||
transition: background 0.12s ease, border-color 0.12s ease;
|
||
}
|
||
.v2-vote-marker:hover,
|
||
.v2-vote-marker:focus-visible {
|
||
outline: none;
|
||
border-bottom-color: currentColor;
|
||
}
|
||
.v2-marker-heuchelei {
|
||
color: #a40e26;
|
||
background: rgba(207, 34, 46, 0.08);
|
||
}
|
||
.v2-marker-heuchelei:hover,
|
||
.v2-marker-heuchelei:focus-visible {
|
||
background: rgba(207, 34, 46, 0.18);
|
||
}
|
||
.v2-marker-opp {
|
||
color: #bf8700;
|
||
background: rgba(191, 135, 0, 0.10);
|
||
font-style: italic;
|
||
}
|
||
.v2-marker-opp:hover,
|
||
.v2-marker-opp:focus-visible {
|
||
background: rgba(191, 135, 0, 0.20);
|
||
}
|
||
|
||
/* Legende unter den Vote-Pills: erklärt sichtbar, was die Marker
|
||
bedeuten. Wird nur eingeblendet, wenn auf dem Block tatsaechlich
|
||
ein Marker vorkommt (Template-Logik). */
|
||
.v2-marker-legend {
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px dashed var(--hairline);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16px 24px;
|
||
font-family: var(--font-mono);
|
||
font-size: 10.5px;
|
||
color: var(--ecg-dark);
|
||
opacity: 0.78;
|
||
line-height: 1.5;
|
||
}
|
||
.v2-marker-legend .v2-marker-icon {
|
||
display: inline-block;
|
||
padding: 0 4px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
margin-right: 2px;
|
||
}
|
||
.v2-marker-legend .v2-marker-heuchelei {
|
||
background: rgba(207, 34, 46, 0.12);
|
||
color: #a40e26;
|
||
}
|
||
.v2-marker-legend .v2-marker-opp {
|
||
background: rgba(191, 135, 0, 0.12);
|
||
color: #bf8700;
|
||
font-style: italic;
|
||
}
|
||
|
||
/* Plenarprotokoll-Outlink in der Header-Zeile */
|
||
.v2-quelle-link:hover {
|
||
background: rgba(0, 157, 165, 0.08);
|
||
}
|