/**
* pollgraphics-maps.css
*
* COMPLETE CSS ownership for map pages (migrated from estar-child/style.css in Task 3.2.3).
* Desktop layout, responsive overrides, and all map-element styling owned by this file.
*
* BREAKPOINT HIERARCHY (largest → smallest) — ALL in §3.3:
* 1200px — Desktop narrow: tighter polls gap + entry padding
* 1180px — Tablet/iPad: force 1-column grid + 1-column polls
* 900px — Mobile: controls above map, compact layout (§7)
* 768px — Small mobile: charts adapt, area cards to 1-column
* 480px — Small phone: tighter padding, smaller zoom controls
* 769px+— Desktop-only: hide mobile-only elements
*
* SECTION STRUCTURE:
* §0 Typography (@font-face, font variables)
* §0.2 Desktop Layout (grid, containers, map, polls, zoom, fieldset)
* §1 Button ("Karte laden")
* §2 Select dropdowns
* §3 Zoom controls
* §3.1 Card system
* §3.2 Spacing rhythm
* §3.3 ★ CONSOLIDATED RESPONSIVE BREAKPOINTS (1200→1180→768→480→769+)
* §4 Area cards (desktop base only)
* §5 Loading state
* §6 Skeleton shimmer
* §7 ★ CONSOLIDATED MOBILE 900px (layout + bottom sheet)
* §8 Dark Mode
*
* Safari :has() fallback: body.pg-map-body (added via PHP)
*
* @since 2.28.0
* @modified 2.28.23 — Consolidated breakpoints, removed duplicates
* @modified 2.28.24 — Task 3.2.3: Full map CSS migrated from estar-child/style.css
* @modified 2.28.34 — Task 2.1.6: CSS consolidation pass — all breakpoints at ONE place,
* removed 8 duplicate/contradicting rules, fixed cascade order conflicts
* @modified 2.28.35 — Task 2.5.2: Mobile stabilization — grid fr units (no % overflow),
* flex SVG centering on all breakpoints, 1180px overflow-x protection,
* removed cascade duplicates in 768px/900px blocks
* @modified 2.28.36 — Task 2.5.3: Dark Mode + Card Polish — title-legend keeps light BG
* (SVG object isolation), area-bar-chart dark inset, explainer text
* readability + link colors, constituency grid auto-fill (no checkerboard),
* desktop grid gap-based spacing, explainer text typography
* @modified 2.28.41 — Task 2.5.3.3: Tighter area-overview padding (48→24px), title-legend
* overflow fix + reduced whitespace, legend SVG bottom gap removed
* @modified 2.28.69 — Desktop Overflow-Bug Fix: #polls-container minmax(0,...) grid,
* SVG flex-shrink:1 + min-width:0, 100vw→100%, body overflow-x:clip
*/
/* ============================================================
0. TYPOGRAPHY: Self-hosted font stack (Task 1.3.1)
============================================================ */
@font-face {
font-family: 'Source Sans 3';
src: url('../fonts/SourceSans3-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Sans 3';
src: url('../fonts/SourceSans3-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Sans 3';
src: url('../fonts/SourceSans3-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Serif 4';
src: url('../fonts/SourceSerif4-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Source Serif 4';
src: url('../fonts/SourceSerif4-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
:root {
--pg-font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--pg-font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
--pg-map-space-1: 8px;
--pg-map-space-2: 16px;
--pg-map-space-3: 24px;
--pg-map-space-4: 32px;
--pg-map-space-5: 48px;
}
/* Desktop overflow protection: html + body both need clip to prevent
any child from triggering viewport-level horizontal scroll (v2.28.69) */
html:has(#map-container) {
overflow-x: clip !important;
}
body:has(#map-container) {
font-family: var(--pg-font-body);
overflow-x: clip !important;
}
body.pg-map-body {
overflow-x: clip !important;
}
body:has(#map-container) h2,
body:has(#map-container) h3,
body:has(#map-container) h4 {
font-family: var(--pg-font-heading);
}
body.pg-map-body .map-grid-wrapper,
body:has(#map-container) .map-grid-wrapper {
column-gap: var(--pg-map-space-3) !important;
row-gap: var(--pg-map-space-3) !important;
}
/* ============================================================
0.2 DESKTOP LAYOUT: Map page grid & full-width containers
(Migrated from estar-child/style.css — Task 3.2.3)
============================================================ */
/* --- Full-width eStar container overrides for map pages ---
WICHTIG: 100% statt 'none' — verhindert unbegrenzte Breite auf Ultra-Wide (2560px+).
Zusammen mit --container:100% im Child Theme reicht 100% für Full-Width. (v2.28.69)
v2.28.69 FIX: .main und .content hinzugefügt — eStar setzt bei @media (min-width:1024px):
.no-sidebar .main { margin-left: 171px; margin-right: 171px; } → 342px Margins!
.sidebar-right .content { display: flex; flex-wrap: wrap; } → Flex-Layout
Ohne Override schrumpft der Inhalt ab 1024px um 342px und verursacht Overflow. */
body.pg-map-body .entry-content,
body.pg-map-body .site-content,
body.pg-map-body #primary,
body.pg-map-body .content-area,
body.pg-map-body main,
body.pg-map-body .main,
body.pg-map-body article,
body.pg-map-body .content,
body:has(#map-container) .entry-content,
body:has(#map-container) .site-content,
body:has(#map-container) #primary,
body:has(#map-container) .content-area,
body:has(#map-container) main,
body:has(#map-container) .main,
body:has(#map-container) article,
body:has(#map-container) .content {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* --- eStar .main: Neutralisiere Sidebar-Margins (eStar @media min-width:1024px) ---
eStar parent setzt .no-sidebar .main { margin-left:171px; margin-right:171px }
und .page-template-narrow .main etc. → muss auf Map-Seiten 0 sein. */
body.pg-map-body .main,
body:has(#map-container) .main {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
/* --- eStar .content wrapper: Block-Layout erzwingen ---
eStar parent setzt .sidebar-right .content { display: flex; flex-wrap: wrap }
bei min-width:1024px → kann Map-Grid-Layout brechen. */
body.pg-map-body .content,
body:has(#map-container) .content {
display: block !important;
max-width: none !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.pg-map-body .entry-content,
body:has(#map-container) .entry-content {
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 40px !important;
box-sizing: border-box !important;
display: block !important;
overflow-x: clip !important;
}
/* --- Intro text: full width --- */
body.pg-map-body .entry-content > h2:first-of-type,
body:has(#map-container) .entry-content > h2:first-of-type,
body.pg-map-body .entry-header h2,
body:has(#map-container) .entry-header h2,
body.pg-map-body .entry-title,
body:has(#map-container) .entry-title {
width: 100% !important;
max-width: 100% !important;
font-family: var(--pg-font-heading);
color: #1f2937;
}
/* --- 2-column grid: ~57/43 map/info split (fr units prevent overflow) --- */
body.pg-map-body .map-grid-wrapper,
body:has(#map-container) .map-grid-wrapper {
display: grid !important;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
grid-template-areas:
"map title-legend"
"map area-info"
"map menu" !important;
column-gap: var(--pg-map-space-3) !important;
row-gap: var(--pg-map-space-2) !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* --- Title-Legend container --- */
body.pg-map-body #title-legend-container,
body:has(#map-container) #title-legend-container {
grid-area: title-legend !important;
width: 100% !important;
margin: 0 !important;
padding: 12px 20px 4px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* --- Title container --- */
body.pg-map-body #title-container,
body:has(#map-container) #title-container {
width: 100% !important;
margin: 0 0 4px 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* --- Legend container --- */
body.pg-map-body #legend-container,
body:has(#map-container) #legend-container {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* Legend SVG: remove intrinsic whitespace below the image */
body.pg-map-body #legend-container object,
body:has(#map-container) #legend-container object {
display: block;
margin-bottom: -4px;
}
/* --- Map container --- */
body.pg-map-body #map-container,
body:has(#map-container) #map-container {
grid-area: map !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-sizing: border-box !important;
background: transparent !important;
}
body.pg-map-body #map-container::after,
body:has(#map-container) #map-container::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* --- SVG container: card with uniform padding, centered content --- */
body.pg-map-body #svg-container,
body:has(#map-container) #svg-container {
width: 100% !important;
height: auto !important;
padding: 16px !important;
margin: 0 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
overflow: hidden !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06) !important;
box-sizing: border-box !important;
}
/* --- SVG objects: all map IDs — centered + constrained --- */
body.pg-map-body #svg-container object,
body:has(#map-container) #svg-container object,
body.pg-map-body [id^="map-id-"],
body:has(#map-container) [id^="map-id-"] {
width: 100% !important;
height: auto !important;
display: block !important;
max-width: 100% !important;
margin: 0 auto !important;
border: none !important;
outline: none !important;
flex-shrink: 1;
min-width: 0;
}
/* --- Mapmenulibrary --- */
body.pg-map-body .mapmenulibrary,
body:has(#map-container) .mapmenulibrary {
grid-area: menu !important;
width: 100% !important;
margin: 0 !important;
padding: 20px !important;
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
box-sizing: border-box !important;
}
body.pg-map-body .mapmenulibrary select,
body.pg-map-body .mapmenulibrary button,
body:has(#map-container) .mapmenulibrary select,
body:has(#map-container) .mapmenulibrary button {
width: 100% !important;
min-width: unset !important;
max-width: none !important;
}
/* --- Area info container --- */
body.pg-map-body #area-info-container,
body:has(#map-container) #area-info-container {
grid-area: area-info !important;
width: 100% !important;
margin: 0 !important;
padding: 20px !important;
box-sizing: border-box !important;
}
body.pg-map-body #area-info-container h3,
body:has(#map-container) #area-info-container h3 {
margin: 0 0 16px 0 !important;
font-size: 20px !important;
}
body.pg-map-body #area-info-container #area-bar-chart,
body:has(#map-container) #area-info-container #area-bar-chart {
width: 100% !important;
margin: 0 0 16px 0 !important;
padding: 20px !important;
background: #f8f9fa !important;
border-radius: 8px !important;
box-sizing: border-box !important;
}
body.pg-map-body #area-info-container p,
body:has(#map-container) #area-info-container p {
margin: 12px 0 !important;
line-height: 1.6 !important;
color: #333 !important;
}
body.pg-map-body #area-info-container p:last-child,
body:has(#map-container) #area-info-container p:last-child {
margin-bottom: 0 !important;
}
body.pg-map-body #area-bar-chart::after,
body:has(#map-container) #area-bar-chart::after {
content: "" !important;
display: table !important;
clear: both !important;
}
body.pg-map-body #area-bar-chart #area-title,
body:has(#map-container) #area-bar-chart #area-title {
font-size: 20px !important;
margin-bottom: 20px !important;
}
/* Visually hidden but accessible — used for area-title to avoid visual duplication */
.pg-sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Hint text in area-info-container */
.pg-hint-text {
font-size: 12px !important;
color: #6b7280;
line-height: 1.5;
}
body.pg-map-body #area-bars,
body:has(#map-container) #area-bars {
width: 100% !important;
min-height: 300px !important;
}
/* --- Polls container: 2-column grid --- */
body.pg-map-body #polls-container,
body:has(#map-container) #polls-container {
width: 100% !important;
max-width: 100% !important;
margin: 40px 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) !important;
gap: 24px !important;
grid-template-areas:
"timeline-title polls-title"
"timeline-chart polls-chart" !important;
}
body.pg-map-body .entry-content #polls-container,
body:has(#map-container) .entry-content #polls-container {
grid-column: 1 / -1 !important;
clear: both !important;
}
/* --- Polls h3 titles: grid areas --- */
body.pg-map-body #polls-container h3:nth-of-type(1),
body:has(#map-container) #polls-container h3:nth-of-type(1) {
grid-area: timeline-title !important;
margin: 0 0 16px 0 !important;
font-size: 20px !important;
}
body.pg-map-body #polls-container h3:nth-of-type(2),
body:has(#map-container) #polls-container h3:nth-of-type(2) {
grid-area: polls-title !important;
margin: 0 0 16px 0 !important;
font-size: 20px !important;
}
/* --- Timeline container --- */
body.pg-map-body #timeline-container,
body:has(#map-container) #timeline-container {
grid-area: timeline-chart !important;
width: 100% !important;
height: 100% !important;
min-height: 400px !important;
padding: 20px !important;
}
body.pg-map-body #timeline-canvas,
body:has(#map-container) #timeline-canvas {
display: block !important;
}
/* --- Polls bar chart --- */
body.pg-map-body #polls-bar-chart,
body:has(#map-container) #polls-bar-chart {
grid-area: polls-chart !important;
width: 100% !important;
height: 100% !important;
min-height: 400px !important;
padding: 20px !important;
}
/* --- Zoom controls positioning --- */
body.pg-map-body #controls,
body:has(#map-container) #controls {
position: absolute !important;
top: 20px !important;
right: 20px !important;
z-index: 100 !important;
}
/* --- Fieldset / radio button: hidden --- */
body.pg-map-body fieldset:has(#radio-external-mode),
body:has(#map-container) fieldset:has(#radio-external-mode) {
display: none !important;
visibility: hidden !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.pg-map-body #radio-external-mode,
body.pg-map-body .hidden-radio,
body:has(#map-container) #radio-external-mode,
body:has(#map-container) .hidden-radio {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important;
pointer-events: none !important;
}
/* Safari fallback for fieldset (no :has() support) */
body.pg-map-body fieldset.hidden-fieldset {
display: none !important;
visibility: hidden !important;
}
/* --- Clearfix after entry-content --- */
body.pg-map-body .entry-content::after,
body:has(#map-container) .entry-content::after {
content: "" !important;
display: table !important;
clear: both !important;
}
/* --- Responsive rules moved to consolidated breakpoint sections (§3.3) --- */
/* --- Safari vendor prefixes --- */
body.pg-map-body #svg-container,
body.pg-map-body #map-container,
body:has(#map-container) #svg-container,
body:has(#map-container) #map-container {
-webkit-box-sizing: border-box !important;
}
body.pg-map-body #controls,
body:has(#map-container) #controls {
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
}
body.pg-map-body .mapmenulibrary,
body:has(#map-container) .mapmenulibrary {
-webkit-flex-direction: column !important;
}
body.pg-map-body #svg-container,
body.pg-map-body #timeline-container,
body.pg-map-body #polls-bar-chart,
body.pg-map-body #area-bar-chart,
body.pg-map-body .mapmenulibrary,
body.pg-map-body #title-legend-container,
body.pg-map-body #area-info-container,
body:has(#map-container) #svg-container,
body:has(#map-container) #timeline-container,
body:has(#map-container) #polls-bar-chart,
body:has(#map-container) #area-bar-chart,
body:has(#map-container) .mapmenulibrary,
body:has(#map-container) #title-legend-container,
body:has(#map-container) #area-info-container {
-webkit-border-radius: 8px !important;
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
/* --- Safari flexbox gap fallback --- */
@supports not (gap: 1px) {
body.pg-map-body .mapmenulibrary,
body:has(#map-container) .mapmenulibrary {
gap: 0 !important;
}
body.pg-map-body .mapmenulibrary > *:not(:first-child),
body:has(#map-container) .mapmenulibrary > *:not(:first-child) {
margin-top: 16px !important;
}
body.pg-map-body #polls-container,
body:has(#map-container) #polls-container {
gap: 0 !important;
}
body.pg-map-body #polls-container > *,
body:has(#map-container) #polls-container > * {
margin-right: 24px !important;
}
body.pg-map-body #polls-container > *:last-child,
body:has(#map-container) #polls-container > *:last-child {
margin-right: 0 !important;
}
}
/* ============================================================
1. BUTTON: Premium "Karte laden" button
============================================================ */
.mapmenulibrary button#submitButton {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
letter-spacing: 0.02em;
}
.mapmenulibrary button#submitButton:hover {
background: linear-gradient(135deg, #7b8ff0 0%, #8a5fad 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}
.mapmenulibrary button#submitButton:active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: translateY(0px);
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}
/* ============================================================
2. SELECT: Better-styled dropdowns
============================================================ */
.mapmenulibrary select {
padding: 10px 14px;
min-height: 48px;
border: 1.5px solid #d1d5db;
border-radius: 8px;
font-size: 16px;
/* 16px prevents iOS zoom */
color: #1a1a1a;
background: #ffffff;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.mapmenulibrary select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
/* ============================================================
3. ZOOM CONTROLS: Better visibility
============================================================ */
#controls button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
border: none;
border-radius: 8px;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
}
#controls button:hover {
background: linear-gradient(135deg, #7b8ff0 0%, #8a5fad 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}
#controls button:active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: translateY(0px);
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}
/* ============================================================
3.1 CARD SYSTEM: Base cards and variants (Task 1.3.2)
============================================================ */
.pg-card,
#title-legend-container,
.mapmenulibrary,
#area-info-container,
#polls-container {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
}
.pg-card--elevated,
#polls-container,
#area-info-container {
box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
}
.pg-card--dark,
.pg-card--dark {
background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
border-radius: 12px;
}
/* Keep map container neutral (avoid heavy dark frame around SVG) */
body:has(#map-container) #map-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* ============================================================
3.2 SPACING RHYTHM: 8/16/24/32/48 (Task 1.3.4)
============================================================ */
.map-grid-wrapper {
gap: var(--pg-map-space-3);
}
#title-legend-container,
.mapmenulibrary,
#area-info-container,
#polls-container {
padding: var(--pg-map-space-3);
}
.mapmenulibrary {
margin-top: var(--pg-map-space-2);
}
#polls-container h3 {
margin-top: 0;
margin-bottom: var(--pg-map-space-2);
}
#polls-container h3 + #timeline-container {
margin-bottom: var(--pg-map-space-3);
}
#controls {
gap: var(--pg-map-space-1);
}
/* Ensure title/legend SVGs stay inside card on narrow screens */
body:has(#map-container) #title-container,
body:has(#map-container) #legend-container {
overflow: visible;
}
body:has(#map-container) .entry-content > *:first-child {
margin-top: 0 !important;
}
body:has(#map-container) .entry-content .wp-block-separator {
display: none !important;
}
/* --- 3.2b Explainer text: wrapped in card-like container --- */
/* Explanatory and
between the polls-container and area-overview
get card-like styling for visual coherence. The .wp-block-heading class
is applied to h3 by WordPress block editor. */
/* Explainer text wrapper: card styling */
body.pg-map-body .entry-content > .wp-block-heading,
body:has(#map-container) .entry-content > .wp-block-heading {
margin-top: var(--pg-map-space-3) !important;
margin-bottom: var(--pg-map-space-1) !important;
font-size: 18px !important;
line-height: 1.4;
font-family: var(--pg-font-heading);
}
body.pg-map-body .entry-content > p:not(:first-child),
body:has(#map-container) .entry-content > p:not(:first-child) {
line-height: 1.65 !important;
font-size: 15px;
max-width: 100% !important;
width: 100% !important;
}
/* Explainer text section: group p and h3 as visual card — full width
Uses CSS columns for balanced text flow across the full width.
Future: if separate info-cards are added, switch to CSS Grid. */
body.pg-map-body .pg-explainer-card,
body:has(#map-container) .pg-explainer-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(17, 24, 39, 0.06);
padding: 28px 32px;
margin: var(--pg-map-space-3) 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
clear: both;
columns: 2 360px;
column-gap: 32px;
}
body.pg-map-body .pg-explainer-card h3,
body:has(#map-container) .pg-explainer-card h3 {
font-family: var(--pg-font-heading);
font-size: 18px;
line-height: 1.4;
margin: 16px 0 8px 0;
color: #1f2937;
break-inside: avoid;
break-after: avoid;
}
/* First h3 in card: no top margin */
body.pg-map-body .pg-explainer-card h3:first-child,
body:has(#map-container) .pg-explainer-card h3:first-child {
margin-top: 0;
}
body.pg-map-body .pg-explainer-card p,
body:has(#map-container) .pg-explainer-card p {
font-size: 15px;
line-height: 1.65;
margin: 8px 0;
color: #374151;
break-inside: avoid;
}
body.pg-map-body .pg-explainer-card p:last-child,
body:has(#map-container) .pg-explainer-card p:last-child {
margin-bottom: 0;
}
/* Links in explainer/source: matching gradient start color */
body.pg-map-body .pg-explainer-card a,
body:has(#map-container) .pg-explainer-card a,
body.pg-map-body .pg-source-card a,
body:has(#map-container) .pg-source-card a {
color: #667eea;
text-decoration: underline;
text-decoration-color: rgba(102, 126, 234, 0.3);
text-underline-offset: 2px;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
body.pg-map-body .pg-explainer-card a:hover,
body:has(#map-container) .pg-explainer-card a:hover,
body.pg-map-body .pg-source-card a:hover,
body:has(#map-container) .pg-source-card a:hover {
color: #5a67d8;
text-decoration-color: rgba(90, 103, 216, 0.5);
}
/* Source/credit text: card wrapper */
body.pg-map-body .pg-source-card,
body:has(#map-container) .pg-source-card {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 20px 24px;
margin: var(--pg-map-space-2) 0;
width: 100%;
box-sizing: border-box;
}
body.pg-map-body .pg-source-card p,
body:has(#map-container) .pg-source-card p {
font-size: 12px !important;
color: #6b7280;
line-height: 1.5;
margin: 6px 0;
}
body.pg-map-body .pg-source-card p:first-child,
body:has(#map-container) .pg-source-card p:first-child {
margin-top: 0;
}
body.pg-map-body .pg-source-card p:last-child,
body:has(#map-container) .pg-source-card p:last-child {
margin-bottom: 0;
}
/* "Zurück zur Übersicht" as button */
body.pg-map-body .pg-back-link,
body:has(#map-container) .pg-back-link {
text-align: center;
margin: var(--pg-map-space-3) 0;
}
body.pg-map-body .pg-back-link a,
body:has(#map-container) .pg-back-link a {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 12px 28px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
letter-spacing: 0.02em;
}
body.pg-map-body .pg-back-link a:hover,
body:has(#map-container) .pg-back-link a:hover {
background: linear-gradient(135deg, #7b8ff0 0%, #8a5fad 100%);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
color: #ffffff;
}
body.pg-map-body .pg-back-link a:active,
body:has(#map-container) .pg-back-link a:active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: translateY(0px);
box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}
/* Source/credit text: subtle, smaller (legacy fallback) */
body.pg-map-body .entry-content > p.has-xs-font-size,
body:has(#map-container) .entry-content > p.has-xs-font-size {
font-size: 12px !important;
color: #6b7280;
line-height: 1.5;
}
/* Area overview heading: Source Serif 4 */
body.pg-map-body .pg-area-overview h1,
body:has(#map-container) .pg-area-overview h1,
body.pg-map-body .pg-overview-header h1,
body:has(#map-container) .pg-overview-header h1 {
font-family: var(--pg-font-heading);
}
body:has(#map-container) #title-container object,
body:has(#map-container) #legend-container object {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* ============================================================
3.3 RESPONSIVE LAYOUT — Consolidated Breakpoint Hierarchy
(Task 2.1.6 / Mini-Sprint 2.5.1)
All responsive rules for map pages are in this section,
ordered from largest to smallest breakpoint.
DO NOT add @media blocks for these breakpoints elsewhere.
1200px — Desktop narrow: tighter polls gap + entry padding
1180px — Tablet/iPad: 1-column grid + 1-column polls
900px — Mobile: controls above map, compact spacing, bottom sheet
768px — Small mobile: charts adapt, area cards 1-col
480px — Small phone: tight padding, smaller zoom controls
769px+ — Desktop-only: hide mobile-only elements
============================================================ */
/* --- 1200px: Desktop narrow — tighter gaps, reduced padding --- */
@media (max-width: 1200px) {
body.pg-map-body #polls-container,
body:has(#map-container) #polls-container {
gap: 24px !important;
}
body.pg-map-body .entry-content,
body:has(#map-container) .entry-content {
padding: 30px 16px !important;
}
}
/* --- 1180px: Tablet / iPad — force single-column everything --- */
@media (max-width: 1180px) {
/* Root-level overflow protection for tablets — use clip instead of hidden
to preserve sticky header on iOS Safari */
html {
overflow-x: clip !important;
}
body.pg-map-body,
body:has(#map-container) {
overflow-x: clip !important;
}
body.pg-map-body .entry-content,
body:has(#map-container) .entry-content {
max-width: 100% !important;
overflow-x: clip !important;
padding: 30px 16px !important;
}
body.pg-map-body .map-grid-wrapper,
body:has(#map-container) .map-grid-wrapper {
grid-template-columns: 1fr !important;
grid-template-areas:
"title-legend"
"menu"
"map"
"area-info" !important;
gap: 12px !important;
overflow: clip !important;
}
body.pg-map-body #polls-container,
body:has(#map-container) #polls-container {
grid-template-columns: 1fr !important;
grid-template-areas:
"timeline-title"
"timeline-chart"
"polls-title"
"polls-chart" !important;
gap: 12px !important;
overflow-x: clip !important;
}
body.pg-map-body .mapmenulibrary button#submitButton,
body:has(#map-container) .mapmenulibrary button#submitButton {
display: none !important;
}
/* Content width: prevent overflow on tablet */
body.pg-map-body .entry-content > p,
body.pg-map-body .entry-content > h3,
body:has(#map-container) .entry-content > p,
body:has(#map-container) .entry-content > h3 {
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Map container: full-width, no right offset */
body.pg-map-body #map-container,
body:has(#map-container) #map-container {
padding-right: 0 !important;
max-width: 100% !important;
}
/* SVG: constrain to viewport on tablet */
body.pg-map-body #svg-container,
body:has(#map-container) #svg-container {
max-width: 100% !important;
padding: 12px !important;
}
body.pg-map-body [id^="map-id-"],
body:has(#map-container) [id^="map-id-"] {
max-width: 100% !important;
}
/* Area cards: full width on tablet */
body.pg-map-body .pg-area-card,
body:has(#map-container) .pg-area-card {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Explainer: 1 column on tablet */
body.pg-map-body .pg-explainer-card,
body:has(#map-container) .pg-explainer-card {
columns: 1 !important;
}
}
/* --- 768px: Small mobile — charts adapt, area cards 1-col, tighter spacing --- */
@media (max-width: 768px) {
/* Polls: tighter gap for small screens (grid-template inherited from 1180px) */
body.pg-map-body #polls-container,
body:has(#map-container) #polls-container {
gap: 16px !important;
}
/* Explainer: 1 column on small screens */
body.pg-map-body .pg-explainer-card,
body:has(#map-container) .pg-explainer-card {
columns: 1 !important;
padding: 20px !important;
}
/* Timeline: horizontal scroll for wide chart canvas */
body.pg-map-body #timeline-container,
body:has(#map-container) #timeline-container {
min-height: 300px !important;
height: auto !important;
padding: 12px !important;
overflow-x: auto !important;
overflow-y: visible !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
/* Prevent container from collapsing when canvas is wider */
position: relative;
}
body.pg-map-body #polls-bar-chart,
body:has(#map-container) #polls-bar-chart {
min-height: 280px !important;
padding: 12px !important;
overflow-x: hidden !important;
overflow-y: visible !important;
}
body.pg-map-body #timeline-canvas,
body:has(#map-container) #timeline-canvas {
scroll-snap-align: start;
display: block !important;
touch-action: pan-x pinch-zoom;
}
/* Mobile-only legend below timeline (hidden on desktop via 769px+ rule) */
body.pg-map-body .timeline-legend-fixed,
body:has(#map-container) .timeline-legend-fixed {
display: flex !important;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: 8px;
padding: 8px 4px 0;
max-width: 100%;
box-sizing: border-box;
overflow: visible;
position: relative;
clear: both;
}
body.pg-map-body .timeline-legend-item,
body:has(#map-container) .timeline-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
line-height: 1.2;
color: #374151;
white-space: nowrap;
}
body.pg-map-body .timeline-legend-swatch,
body:has(#map-container) .timeline-legend-swatch {
width: 10px;
height: 10px;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.18);
flex-shrink: 0;
}
/* Constituency bar chart: readable grid on narrow screens */
body.pg-map-body #area-bars .poll-bar,
body:has(#map-container) #area-bars .poll-bar {
display: grid;
grid-template-columns: minmax(56px, 76px) 1fr minmax(42px, auto);
align-items: center;
gap: 8px;
height: auto;
margin-bottom: 10px;
}
body.pg-map-body #area-bars .poll-bar-label,
body:has(#map-container) #area-bars .poll-bar-label {
width: auto;
text-align: left;
padding-right: 0;
font-size: 12px;
}
body.pg-map-body #area-bars .poll-bar-container,
body:has(#map-container) #area-bars .poll-bar-container {
margin-right: 0;
height: 18px;
}
body.pg-map-body #area-bars .poll-bar-value,
body:has(#map-container) #area-bars .poll-bar-value {
width: auto;
text-align: right;
font-size: 12px;
}
/* Prevent text overflow in polls panel */
body.pg-map-body #poll-title,
body:has(#map-container) #poll-title,
body.pg-map-body #poll-bars,
body:has(#map-container) #poll-bars,
body.pg-map-body #polls-bar-chart *,
body:has(#map-container) #polls-bar-chart * {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Polls instruction text: readable on small screens */
body.pg-map-body #poll-bars > div,
body:has(#map-container) #poll-bars > div {
padding: 20px !important;
font-size: 14px !important;
}
}
/* --- 480px: Small phone — tighter padding, smaller zoom controls --- */
@media (max-width: 480px) {
body.pg-map-body .entry-content,
body:has(#map-container) .entry-content {
padding: 20px 12px !important;
}
body.pg-map-body #timeline-container,
body.pg-map-body #polls-bar-chart,
body.pg-map-body #area-bar-chart,
body:has(#map-container) #timeline-container,
body:has(#map-container) #polls-bar-chart,
body:has(#map-container) #area-bar-chart {
padding: 16px !important;
}
body.pg-map-body #controls,
body:has(#map-container) #controls {
top: 8px !important;
right: 8px !important;
}
body.pg-map-body #controls button,
body:has(#map-container) #controls button {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
font-size: 16px;
}
}
/* --- 769px+: Desktop-only — hide mobile-only elements --- */
@media (min-width: 769px) {
.timeline-legend-fixed,
body.pg-map-body .timeline-legend-fixed,
body:has(#map-container) .timeline-legend-fixed {
display: none !important;
}
/* Bottom sheet header/summary: mobile-only, hide on desktop */
.pg-sheet-header,
.pg-sheet-handle,
.pg-sheet-summary {
display: none !important;
}
}
/* --- Bottom sheet rules: moved to consolidated §7 (900px) --- */
/* ============================================================
4. AREA CARDS: Constituency overview grid
Uses auto-fill for responsive column count without
media-query breakpoints. Cards fill available space evenly.
Min 220px prevents text wrapping; max 1fr fills remaining space.
At 1200px+ container: 4–5 cards per row
At ~900px container: 3 cards per row
Tablet/mobile breakpoints override to 1 column.
============================================================ */
/* Area-overview container: maps context uses same layout as standalone pages */
/* Desktop: hide mobile-only timeline legend — moved to §3.3 (769px+) */
/* ============================================================
5. LOADING STATE: map container feedback
============================================================ */
#map-container {
position: relative;
transition: opacity 0.2s ease, filter 0.2s ease;
}
#map-container.pg-loading {
opacity: 0.78;
filter: blur(0.6px);
}
#map-container.pg-loading::after {
content: "Karte lädt …";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.01em;
color: #1f2937;
background: rgba(255, 255, 255, 0.82);
border: 2px solid rgba(102, 126, 234, 0.35);
border-radius: 8px;
backdrop-filter: blur(2px);
z-index: 99;
pointer-events: none;
}
/* ============================================================
6. SKELETON: subtle shimmer placeholders (Task 1.3.3)
============================================================ */
.pg-skeleton {
position: relative;
overflow: hidden;
background: #e5e7eb;
border-radius: 10px;
}
.pg-skeleton::before,
#map-container.pg-loading #svg-container::before,
#polls-container.pg-skeleton-active #timeline-container::before,
#polls-container.pg-skeleton-active #polls-bar-chart::before,
#polls-container.pg-skeleton-active #poll-title::before,
#polls-container.pg-skeleton-active #poll-bars::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateX(-100%);
animation: pg-shimmer 1.3s ease-in-out infinite;
}
#map-container.pg-loading #svg-container,
#polls-container.pg-skeleton-active #timeline-container,
#polls-container.pg-skeleton-active #polls-bar-chart,
#polls-container.pg-skeleton-active #poll-title,
#polls-container.pg-skeleton-active #poll-bars {
position: relative;
overflow: hidden;
}
#polls-container.pg-skeleton-active #timeline-container {
min-height: 220px;
background: #edf1f7;
border-radius: 10px;
}
#polls-container.pg-skeleton-active #polls-bar-chart {
min-height: 180px;
}
#polls-container.pg-skeleton-active #poll-title,
#polls-container.pg-skeleton-active #poll-bars {
min-height: 64px;
background: #edf1f7;
border-radius: 10px;
}
/* --- 6b. Initial-load skeletons (Task 3.4.1) --- */
/* Title/Legend skeleton: subtle background until SVG objects load */
#title-legend-container.pg-skeleton-active #title-container,
#title-legend-container.pg-skeleton-active #legend-container {
position: relative;
overflow: hidden;
min-height: 60px;
background: #edf1f7;
border-radius: 10px;
}
#title-legend-container.pg-skeleton-active #title-container::before,
#title-legend-container.pg-skeleton-active #legend-container::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateX(-100%);
animation: pg-shimmer 1.3s ease-in-out infinite;
}
/* Area info skeleton: constituency bar chart placeholder */
#area-info-container.pg-skeleton-active #area-bar-chart {
position: relative;
overflow: hidden;
min-height: 160px;
background: #edf1f7;
border-radius: 10px;
}
#area-info-container.pg-skeleton-active #area-bar-chart::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
transform: translateX(-100%);
animation: pg-shimmer 1.3s ease-in-out infinite;
}
@keyframes pg-shimmer {
100% {
transform: translateX(100%);
}
}
/* ============================================================
7. MOBILE: 900px — Consolidated mobile layout
(Merged Task 2.1 foundation + Task 2.1.5 hotfixes + Task 2.1.6 consolidation)
All 900px rules in ONE block. Do not add separate @media (max-width: 900px) elsewhere.
============================================================ */
@media (max-width: 900px) {
/* --- 7a. Root-level overflow protection --- */
body.pg-map-body .entry-content,
body:has(#map-container) .entry-content {
padding-top: 8px !important;
overflow-x: clip !important;
}
body.pg-map-body .entry-content > *:first-child,
body:has(#map-container) .entry-content > *:first-child {
margin-top: 0 !important;
}
/* --- 7b. Title/Legend card: compact mobile spacing --- */
body.pg-map-body #title-legend-container,
body:has(#map-container) #title-legend-container {
padding: 10px !important;
margin: 0 0 10px 0 !important;
}
body.pg-map-body #title-container,
body:has(#map-container) #title-container {
margin: 0 !important;
}
body.pg-map-body #legend-container,
body:has(#map-container) #legend-container {
margin: 8px 0 0 0 !important;
}
/* --- 7c. Controls: single-column grid for full dropdown text visibility --- */
body.pg-map-body .mapmenulibrary,
body:has(#map-container) .mapmenulibrary {
display: grid !important;
grid-template-columns: 1fr !important;
padding: 10px !important;
margin: 0 0 10px 0 !important;
gap: 8px !important;
align-items: stretch !important;
}
/* Consolidated: single rule for mobile select styling (was duplicate) */
body.pg-map-body .mapmenulibrary select,
body:has(#map-container) .mapmenulibrary select {
width: 100% !important;
padding: 8px 10px !important;
min-height: 48px;
margin: 0 !important;
font-size: 15px;
}
/* --- 7d. Map container: full width, centered SVG --- */
body.pg-map-body #map-container,
body:has(#map-container) #map-container {
padding-right: 0 !important;
margin: 0 !important;
}
body.pg-map-body #map-container,
body:has(#map-container) #map-container,
body.pg-map-body #svg-container,
body:has(#map-container) #svg-container,
body.pg-map-body [id^="map-id-"],
body:has(#map-container) [id^="map-id-"] {
width: 100% !important;
max-width: 100% !important;
}
body.pg-map-body #svg-container,
body:has(#map-container) #svg-container {
padding: 6px !important;
/* flex centering inherited from desktop base §0.2 */
}
/* --- 7e. Area info container: reset margins --- */
body.pg-map-body #area-info-container,
body:has(#map-container) #area-info-container {
margin: 0 !important;
}
/* --- 7f. Polls container: compact mobile layout --- */
body.pg-map-body #polls-container,
body:has(#map-container) #polls-container {
margin: 14px 0 !important;
padding: 10px !important;
gap: 10px !important;
position: relative;
}
/* Consolidated: single rule for timeline container (was duplicate) */
body.pg-map-body #timeline-container,
body:has(#map-container) #timeline-container {
min-height: 270px !important;
padding: 8px !important;
padding-bottom: 4px !important;
overflow-x: auto !important;
overflow-y: visible !important;
}
body.pg-map-body #polls-bar-chart,
body:has(#map-container) #polls-bar-chart {
min-height: 240px !important;
padding: 8px !important;
}
/* --- 7g. Separators: hidden (moved to card-based layout) --- */
body.pg-map-body .entry-content .wp-block-separator,
body:has(#map-container) .entry-content .wp-block-separator {
display: none !important;
}
/* Explainer: 1 column on mobile landscape */
body.pg-map-body .pg-explainer-card,
body:has(#map-container) .pg-explainer-card {
columns: 1 !important;
padding: 20px !important;
}
/* --- 7i. Bottom Sheet: constituency info panel (Task 2.1.2 + 2.5.2 polish) --- */
body.pg-map-sheet-active:has(#area-info-container.pg-mobile-sheet-ready) #area-info-container {
position: fixed !important;
left: 0;
right: 0;
bottom: 0;
z-index: 110;
margin: 0 !important;
border-radius: 16px 16px 0 0;
background: #ffffff;
box-shadow: 0 -8px 26px rgba(17, 24, 39, 0.18);
max-height: 70vh;
overflow: hidden;
transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.28s ease;
will-change: max-height;
}
body.pg-map-sheet-active:has(#area-info-container.pg-mobile-sheet-ready) #area-info-container.pg-sheet-collapsed {
max-height: 120px;
box-shadow: 0 -4px 16px rgba(17, 24, 39, 0.12);
}
body.pg-map-sheet-active:has(#area-info-container.pg-mobile-sheet-ready) #area-info-container.pg-sheet-expanded {
max-height: 70vh;
box-shadow: 0 -12px 40px rgba(17, 24, 39, 0.22);
}
body.pg-map-sheet-active #area-info-container .pg-sheet-header {
position: sticky;
top: 0;
z-index: 2;
background: #ffffff;
padding: 10px 16px 12px;
border-bottom: 1px solid #eef2f7;
/* Larger touch target: full header is tappable */
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
body.pg-map-sheet-active #area-info-container .pg-sheet-handle {
width: 52px;
height: 6px;
border: 0;
border-radius: 999px;
background: #cbd5e1;
display: block;
margin: 0 auto 10px;
padding: 0;
cursor: pointer;
transition: transform 0.15s ease, background-color 0.15s ease;
/* Invisible larger touch target via padding */
box-sizing: content-box;
padding: 10px 20px;
background-clip: content-box;
}
body.pg-map-sheet-active #area-info-container .pg-sheet-handle:active {
background: #94a3b8;
}
body.pg-map-sheet-active #area-info-container .pg-sheet-summary {
display: flex;
flex-direction: column;
gap: 2px;
}
body.pg-map-sheet-active #area-info-container .pg-sheet-area {
font-size: 14px;
line-height: 1.25;
color: #111827;
font-weight: 700;
}
body.pg-map-sheet-active #area-info-container .pg-sheet-top-party {
font-size: 13px;
line-height: 1.3;
color: #4b5563;
}
body.pg-map-sheet-active #area-info-container #area-bar-chart,
body.pg-map-sheet-active #area-info-container p {
transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
body.pg-map-sheet-active #area-info-container.pg-sheet-collapsed #area-bar-chart,
body.pg-map-sheet-active #area-info-container.pg-sheet-collapsed p {
opacity: 0;
pointer-events: none;
transform: translateY(8px);
}
body.pg-map-sheet-active #area-info-container.pg-sheet-expanded #area-bar-chart,
body.pg-map-sheet-active #area-info-container.pg-sheet-expanded p {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
body.pg-map-sheet-active #area-info-container #area-bar-chart {
max-height: calc(70vh - 150px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
body.pg-map-sheet-active:has(#area-info-container.pg-mobile-sheet-ready) #polls-container,
body.pg-map-sheet-active:has(#area-info-container.pg-mobile-sheet-ready) .pg-area-overview {
margin-bottom: 132px !important;
}
}
/* --- 7j. Bottom Sheet Backdrop (outside @media to ensure it renders at any size) --- */
.pg-sheet-backdrop {
position: fixed;
inset: 0;
z-index: 105;
background: rgba(17, 24, 39, 0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-tap-highlight-color: transparent;
}
.pg-sheet-backdrop--visible {
opacity: 1;
pointer-events: auto;
}
/* ============================================================
8. DARK MODE: Map page elements — DEAKTIVIERT (v2.28.72)
Vollständiger Dark Mode auf später verschoben.
Siehe FEATURE_ROADMAP.md
============================================================ */
/* DISABLED: Map page dark mode (v2.28.72) — gesamter Block auskommentiert
@media (prefers-color-scheme: dark) {
--- 8a. Card system: dark card backgrounds ---
body.pg-map-body .pg-card,
body:has(#map-container) .pg-card,
body.pg-map-body .mapmenulibrary,
body:has(#map-container) .mapmenulibrary,
body.pg-map-body #area-info-container,
body:has(#map-container) #area-info-container,
body.pg-map-body #polls-container,
body:has(#map-container) #polls-container {
background: #1e293b !important;
border-color: #334155 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}
[* Title-Legend: same dark card as other containers.
SVGs are