/* ============================================================
   FONT DECLARATIONS (Task 3.2.5)
   Self-hosted fonts for SVG context (loaded via <object> isolation)
   Paths are absolute because SVGs resolve relative URLs from their
   own location, not from this stylesheet's location.
   After shared/ migration (Task 3.2.6), these paths will point to:
   ../../fonts/
   ============================================================ */

@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;
}

/* ============================================================
   CSS VARIABLES (Design System) - v2.14.0 / updated Task 3.2.5
   Zentralisierte Design-Tokens für konsistentes Styling
   ============================================================ */
:root {
    /* Typography */
    --map-font-family: 'Source Sans 3', Arial, Helvetica, sans-serif;
    --map-font-heading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --map-font-size-title: 28px;
    --map-font-size-title-large: 280px;
    --map-font-size-subtitle: 20px;
    --map-font-size-subtitle-large: 200px;
    --map-font-size-legend-title: 14px;
    --map-font-size-legend-title-large: 140px;
    --map-font-size-legend-copyright: 10px;
    --map-font-size-legend-copyright-large: 100px;
    --map-font-size-area-label: 14px;
    --map-font-size-area-label-small: 12px;
    --map-font-size-poll-title: 18px;
    --map-font-size-poll-bar: 14px;

    /* Colors */
    --map-color-text: #000000;
    --map-color-border: #686868;
    --map-color-background: #ffffff;
    --map-color-canvas-bg: #f9f9f9;
    --map-color-border-light: #ddd;

    /* Stroke Widths */
    --map-stroke-width-thin: 0.5;
    --map-stroke-width-normal: 1;
    --map-stroke-width-legend: 1.75;
    --map-stroke-width-canvas: 2.5;
    --map-stroke-width-canvas-large: 12.5;
    --map-stroke-width-legend-large: 10;

    /* Border Radius */
    --map-radius-small: 4px;
    --map-radius-medium: 8px;
    --map-radius-large: 10px;

    /* Spacing */
    --map-space-xs: 8px;
    --map-space-sm: 10px;
    --map-space-md: 15px;
    --map-space-lg: 20px;
    --map-space-xl: 30px;
}

body {
    background-color: var(--map-color-background);
    font-family: var(--map-font-family);
    font-size: medium;

    justify-content: center;
    align-items: center;


}

form {
    text-align: center;
}

span {
    display: block;
}

table {
    table-layout: fixed;
    border: 1px solid;
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

th {
    background-color: lightgrey;
}

.firstcolumntop,
.firstcolumn {
    text-align: left;
}

.analysis {
    color: white;
    font-weight: bold;
}

.line-bottom {
    border-style: hidden hidden dashed hidden;
    border-width: 1px;
    border-color: black;
}

.line-left {
    border-style: hidden hidden dashed dashed;
    border-width: 1px;
    border-color: black;
}

.line-right {
    border-style: hidden dashed dashed hidden;
    border-width: 1px;
    border-color: black;
}

.line-solid-bottom {
    border-style: hidden hidden solid hidden;
    border-width: 1px;
    border-color: black;
}

.line-solid-top {
    border-style: solid hidden hidden hidden;
    border-width: 1px;
    border-color: black;
}

.line-solid-left {
    border-style: hidden hidden solid solid;
    border-width: 1px;
    border-color: black;
}

.line-solid-right {
    border-style: hidden solid solid hidden;
    border-width: 1px;
    border-color: black;
}

.top-bar {
    border-style: solid hidden solid hidden;
    border-width: 1px;
    border-color: black;
    background-color: darkgray;
}

.top-bar-left {
    border-style: solid hidden solid solid;
    border-width: 1px;
    border-color: black;
    background-color: darkgray;
}

.top-bar-right {
    border-style: solid solid solid hidden;
    border-width: 1px;
    border-color: black;
    background-color: darkgray;
}

.form-control {
    font-family: var(--map-font-family);
    font-size: medium;
    width: 100%;
    text-align: center;
    background-color: var(--map-color-background);
}

.canvas-background {
    fill: var(--map-color-background) !important;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-canvas);
}

.canvas-background-large {
    fill: var(--map-color-background) !important;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-canvas-large);
}

.legend-title {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-legend-title);
    fill: var(--map-color-text);
}

.legend-title-large {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-legend-title-large);
    fill: var(--map-color-text);
}

.legend-range-color-backgrounds {
    opacity: 0
}

.legend-range-colors {
    fill: none;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-legend);
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

.legend-range-colors-large {
    fill: none;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-legend-large);
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

.legend-range-secondary-colors {
    fill: none;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-legend);
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    opacity: 0.4;
}

.legend-range-colors-white {
    fill: white;
    stroke: none;
    opacity: 0.5
}

.legend-range-colors-white-0-to-25 {
    fill: white;
    stroke: none;
    opacity: 0.75
}

.legend-range-colors-white-25-to-50 {
    fill: white;
    stroke: none;
    opacity: 0.5
}

.legend-range-colors-white-50-to-75 {
    fill: white;
    stroke: none;
}

.legend-range-colors-white-1-to-30 {
    fill: white;
    stroke: none;
}

.legend-range-colors-boundary {
    fill: none;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-normal);
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

.legend-range-colors-boundary-large {
    fill: none;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-legend-large);
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

.legend-range-colors-hidden {
    visibility: hidden;
}


.legend-range-names {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-legend-title);
    fill: var(--map-color-text);
}

.legend-range-names-large {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-legend-title-large);
    fill: var(--map-color-text);
}

.legend-copyright {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-legend-copyright);
    fill: var(--map-color-text);
}

.legend-copyright-large {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-legend-copyright-large);
    fill: var(--map-color-text);
}

.legend-background {
    fill: white !important;
    stroke: none;
    stroke-width: 0;
}

.legend-background-large {
    fill: white !important;
    stroke: none;
    stroke-width: 0;
}

g.borders-mapareas {
    fill: none;
    stroke: var(--map-color-border);
    stroke-width: var(--map-stroke-width-thin);
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 1;
}

/* Path-Elemente mit areafill-Klassen innerhalb von borders-mapareas sollen ihre CSS-Farben verwenden */
g.borders-mapareas>path[class^="areafill"],
g.borders-mapareas>path[class*=" areafill"] {
    fill: initial;
}

.borders-mapareas :hover {
    fill: none;
    stroke: lawngreen;
    stroke-width: 5;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 4;
}

.borders-mapareas-small {
    fill: none;
    stroke: #686868;
    stroke-width: 0.2;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 1;
}

.borders-mapareas-small :hover {
    fill: none;
    stroke: lawngreen;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 4;
}


.borders-mapareas-large {
    fill: none;
    stroke: #686868;
    stroke-width: 5;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 1;
}

.borders-mapareas-large :hover {
    fill: none;
    stroke: lawngreen;
    stroke-width: 50;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 4;
}

.borders-intermediate {
    fill: none;
    stroke: #686868;
    stroke-width: 1.75;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 2;
}

.borders-intermediate-large {
    fill: none;
    stroke: #686868;
    stroke-width: 17.5;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 2;
}

.borders-external {
    fill: none;
    stroke: #686868;
    stroke-width: 2.5;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
    z-index: 3;
}

/* mapid0009: Umrisse der Nicht-EU-Staaten (Norwegen, Schweiz, Ukraine …). Ersetzt die
   Inline-Styles der Inkscape-Datei; ab map-id-0009-v11 hat die SVG keine style-Attribute. */
.borders-external-small {
    fill: none;
    stroke: #231f20;
    stroke-width: 0.6;
    stroke-linecap: butt;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}

/* mapid0009: Quadrate fuer Gebiete ohne Flaeche auf der Karte (Ueberseegebiete, kleine Inseln).
   Ueber den Elternselektor, weil das Kartenskript classList.value der Gebiete ueberschreibt. */
.borders-mapareas-small > rect {
    stroke: #000000;
    stroke-width: 1;
}

.mapareas-borders {
    fill: none;
    stroke: darkcyan;
    stroke-width: 1;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

.mapareas-borders-large {
    fill: none;
    stroke: indianred;
    stroke-width: 1;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

.mapareas-borders-large2 {
    fill: none;
    stroke: goldenrod;
    stroke-width: 1;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

/* Wie -large2, aber duenn: mapid0009 hat 1.113 NUTS3-Gebiete, bei Strichstaerke 1 deckt das Gold
   in Deutschland und Polen die Flaechenfarben zu (3.24.1). */
.mapareas-borders-small2 {
    fill: none;
    stroke: goldenrod;
    stroke-width: 0.25;
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}

.mapareas-borders-strokenone {
    stroke: none;
}

.mapareas-borders-none {
    fill: none;
    stroke: none;
}

.mapareas-borders-white {
    fill: white;
    stroke: none;
}

/* ------------------------------------------------------------------
   Einzelebenen-SVG (T4, docs/engineering/pipeline/EU_LAYERS_PLAN.md)

   Ohne -radio- und -borders-Kopie zeichnen die Datenflaechen ihre Grenze
   selbst. Alle Regeln haengen an Attributen, die nur der Renderer setzt
   (map-general-layers*.js); SVGs mit Kopien sehen aus wie bisher.
   - data-pg-border="<Klasse>": die Gruppe zeichnet die Grenze in der
     Klasse der frueheren Kopie; -on = eingeschaltet, -active = aktive Ebene.
   - Eine geteilte Kante streichen beide Nachbarn; die spaetere Fuellung
     deckt die halbe fruehere Linie, die spaetere Linie liegt ganz oben.
     Die Linie sitzt also, wo die der Kopie sass. Breiten unten nach
     Augenmass gewaehlt (render_compare, AT, 08.10.2026); sie gelten fuer
     jede umgestellte Karte.
   - Die Flaeche bleibt bei opacity 1, die Deckkraft der Daten geht auf
     fill-opacity: eine blasse Flaeche behaelt eine volle Linie.
   ------------------------------------------------------------------ */
g[data-pg-border-on] :is(path, polygon, polyline, rect),
g[data-pg-border-active] :is(path, polygon, polyline, rect):not(.areafill-none) {
    opacity: 1 !important;
}
g[data-pg-border-on] :is(path, polygon, polyline, rect) {
    stroke-linecap: square;
    stroke-linejoin: bevel;
    stroke-miterlimit: 10;
}
g[data-pg-border-on][data-pg-border~="mapareas-borders"] { --pg-bc: darkcyan; --pg-bw: 1px; }
g[data-pg-border-on][data-pg-border~="mapareas-borders-large"] { --pg-bc: indianred; --pg-bw: 1px; }
g[data-pg-border-on][data-pg-border~="mapareas-borders-large2"] { --pg-bc: goldenrod; --pg-bw: 1px; }
g[data-pg-border-on][data-pg-border~="mapareas-borders-small2"] { --pg-bc: goldenrod; --pg-bw: 0.25px; }
g[data-pg-border-on] :is(path, polygon, polyline, rect):not(:hover) {
    stroke: var(--pg-bc);
    stroke-width: calc(var(--pg-bw) * var(--pg-bk, 1));
}
/* Aktive Ebene auf der Uebersicht: die Fuellung des spaeteren Nachbarn deckt
   die halbe Linie des frueheren, die Linie wirkt einfach statt doppelt — daher
   x 1.25. Auf Einzelkarten sind die Fuellungen gedimmt und decken kaum, dort
   x 1. Inaktive Ebenen fuellen nicht und streichen jede Kante zweimal wie die
   Kopie, ebenfalls x 1. */
svg:not([data-pg-focus]) g[data-pg-border-on][data-pg-border-active] { --pg-bk: 1.25; }
/* inaktive Ebene: nur Linien, keine Mausereignisse */
g[data-pg-border-on]:not([data-pg-border-active]) :is(path, polygon, polyline, rect) {
    fill: none !important;
    pointer-events: none;
}

/* layer3 und andere Gruppen mit eigener Geometrie als Netz (data-pg-mesh, vom
   Builder geschrieben): jede Kante einmal statt zweimal, daher breiter */
g[data-pg-mesh] path {
    stroke-width: 1.5;
}

/* Einzelkarte ohne -radio-Kopie: das gewaehlte Gebiet traegt data-pg-focused,
   alle anderen werden x 0.1 gedimmt — dieselben Pixel wie die weisse
   Abdeckung der Kopie mit 0.9 auf weissem Grund. */
svg[data-pg-focus] g[id$="-mapareas"] [id*="-map-area-"]:not([data-pg-focused]) {
    fill-opacity: 0.1 !important;
    stroke-opacity: 0.1 !important;
}
/* Die Deckkraft der Flaeche (--pg-a) wird mit dem Fokus multipliziert, nicht ersetzt */
svg[data-pg-focus] g[data-pg-border-active] [id*="-map-area-"]:not([data-pg-focused]) {
    fill-opacity: calc(var(--pg-a, 1) * 0.1) !important;
}
/* Die Kopie lag ueber der Abdeckung: ihre Linien bleiben voll */
svg[data-pg-focus] g[data-pg-border-on] [id*="-map-area-"]:not([data-pg-focused]) {
    stroke-opacity: 1 !important;
}
/* Liniengruppen, die unter der Abdeckung lagen, verblassen wie bisher */
svg[data-pg-focus] g[data-pg-under-focus] {
    stroke-opacity: 0.1 !important;
}
/* mapid0009-Ansicht: dort lag die Abdeckung (mit #ccc-Rand) ueber den Grenzen */
svg[data-pg-focus="borders"] g[id$="-mapareas"] [id*="-map-area-"]:not([data-pg-focused]) {
    stroke: #ccc !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
}
svg[data-pg-focus="borders"] g[id$="-mapareas-borders"] {
    stroke-opacity: 0.1 !important;
}

/* ------------------------------------------------------------------
   mapid0020 (Saarland): Strichstärken für großes Koordinatensystem

   Die Saarland-Karte zeichnet in einem projizierten Koordinatensystem
   (viewBox 7937 x 6691), wird aber wie alle anderen Karten auf ~800px
   dargestellt - also mit 0.1 px pro Einheit statt 1.0 px wie sonst.
   Die gemeinsamen Border-Klassen schrumpfen dadurch auf 0.05-0.25 px
   und sind praktisch unsichtbar.

   Faktor 10 stellt dieselbe optische Strichstärke her wie bei allen
   anderen Karten und folgt der bestehenden -large-Konvention in dieser
   Datei (borders-mapareas 0.5 -> 5, borders-intermediate 1.75 -> 17.5).
   Bewusst auf #map-id-0020 begrenzt: .mapareas-borders-large2 wird von
   15 weiteren Karten bei Maßstab 1.0 verwendet und darf dort nicht
   dicker werden.
   ------------------------------------------------------------------ */
#map-id-0020 .borders-mapareas {
    stroke-width: 5;
}

#map-id-0020 .mapareas-borders-large2 {
    stroke-width: 25;
}

#map-id-0020 .borders-external {
    stroke-width: 40;
}


.descriptors-mapareas {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-area-label);
    fill: darkgrey;
}

.descriptors-mapareas-small {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-area-label-small);
    fill: darkgrey;
}

.descriptors-intermediate {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-title);
    font-weight: bold;
    fill: darkgrey;
}

.descriptors-outside {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-poll-title);
}

.descriptors-outside-small {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-area-label);
}

.descriptors-title {
    font-family: var(--map-font-heading);
    font-weight: 600;
    font-size: var(--map-font-size-title);
    fill: var(--map-color-text);
}

.descriptors-title-large {
    font-family: var(--map-font-heading);
    font-weight: 600;
    font-size: var(--map-font-size-title-large);
    fill: var(--map-color-text);
}

.descriptors-subtitle {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-subtitle);
    fill: var(--map-color-text);
}

.descriptors-subtitle-large {
    font-family: var(--map-font-family);
    font-size: var(--map-font-size-subtitle-large);
    fill: var(--map-color-text);
}

.descriptors-watermarktext {
    font-family: var(--map-font-family);
    font-size: 10px;
    fill: darkgrey;
}

.descriptors-watermarktext-large {
    font-family: var(--map-font-family);
    font-size: 100px;
    fill: darkgrey;
}

#map-container {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#controls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

#controls button {
    display: block;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #429ae2;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
}

#controls button:hover {
    background-color: #72b3e9;
}

#svg-container {
    position: relative;
    display: inline-block;
}

#title-container {
    margin-bottom: 20px;
    text-align: center;
}

#title-container object {
    display: block;
    width: 800px;
    height: 60px;
}

#legend-container {
    margin-top: 20px;
    text-align: center;
}

#legend-container object {
    display: block;
    width: 600px;
    height: 130px;
}

/* Spezifische Größen für verschiedene Legend-Ranges */
#map-legend-8-ranges {
    width: 600px;
    height: 130px;
}

#map-legend-9-ranges {
    width: 700px;
    height: 135px;
}

#map-legend-10-ranges {
    width: 600px;
    height: 130px;
}

/* Dritte Zeile (mapid0008: 14 Parteien mit EP-Mandat + Sonstige) */
#map-legend-15-ranges {
    width: 600px;
    height: 150px;
}

/* Vierte Zeile (3.32.0, mapid0054: 15 Listen der Knesset-Wahl 2026 + Sonstige) */
#map-legend-20-ranges {
    width: 600px;
    height: 170px;
}

/* Unterstützung für alle Map-IDs */
#map-id-0001,
#map-id-0002,
#map-id-0004,
#map-id-0005,
#map-id-0006,
#map-id-0008,
#map-id-0009,
#map-id-0010,
#map-id-0011,
#map-id-0012,
#map-id-0013,
#map-id-0014 {
    display: block;
}

.svg-map {
    width: 100%;
    height: 100%;
}

.mapmenulibrary {
    z-index: 1;
}

.mapmenulibrary button {
    display: block;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    background-color: #429ae2;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.mapmenulibrary button:hover {
    background-color: #72b3e9;
}

/* Colors */
.areafill-none {
    fill: none !important;
}

.areafill-0 {
    fill: rgb(255, 255, 255) !important;
}

.areafill-1 {
    fill: rgb(0, 0, 0) !important;
}

/* Black */
.areafill-2 {
    fill: rgb(0, 0, 128) !important;
}

/* Navy */
.areafill-3 {
    fill: rgb(0, 0, 139) !important;
}

/* DarkBlue */
.areafill-4 {
    fill: rgb(0, 0, 205) !important;
}

/* MediumBlue */
.areafill-5 {
    fill: rgb(0, 0, 255) !important;
}

/* Blue */
.areafill-6 {
    fill: rgb(0, 100, 0) !important;
}

/* DarkGreen */
.areafill-7 {
    fill: rgb(0, 128, 0) !important;
}

/* Green */
.areafill-8 {
    fill: rgb(0, 128, 128) !important;
}

/* Teal */
.areafill-9 {
    fill: rgb(0, 139, 139) !important;
}

/* DarkCyan */
.areafill-10 {
    fill: rgb(0, 191, 255) !important;
}

/* DeepSkyBlue */
.areafill-11 {
    fill: rgb(0, 206, 209) !important;
}

/* DarkTurquoise */
.areafill-12 {
    fill: rgb(0, 250, 154) !important;
}

/* MediumSpringGreen */
.areafill-13 {
    fill: rgb(0, 255, 0) !important;
}

/* Lime */
.areafill-14 {
    fill: rgb(0, 255, 127) !important;
}

/* SpringGreen */
.areafill-15 {
    fill: rgb(0, 255, 255) !important;
}

/* Cyan */
.areafill-16 {
    fill: rgb(25, 25, 112) !important;
}

/* MidnightBlue */
.areafill-17 {
    fill: rgb(30, 144, 255) !important;
}

/* DodgerBlue */
.areafill-18 {
    fill: rgb(32, 178, 170) !important;
}

/* LightSeaGreen */
.areafill-19 {
    fill: rgb(34, 139, 34) !important;
}

/* ForestGreen */
.areafill-20 {
    fill: rgb(46, 139, 87) !important;
}

/* SeaGreen */
.areafill-21 {
    fill: rgb(47, 79, 79) !important;
}

/* DarkSlateGrey */
.areafill-22 {
    fill: rgb(50, 205, 50) !important;
}

/* LimeGreen */
.areafill-23 {
    fill: rgb(60, 179, 113) !important;
}

/* MediumSeaGreen */
.areafill-24 {
    fill: rgb(64, 224, 208) !important;
}

/* Turquoise */
.areafill-25 {
    fill: rgb(65, 105, 225) !important;
}

/* RoyalBlue */
.areafill-26 {
    fill: rgb(70, 130, 180) !important;
}

/* SteelBlue */
.areafill-27 {
    fill: rgb(72, 61, 139) !important;
}

/* DarkSlateBlue */
.areafill-28 {
    fill: rgb(72, 209, 204) !important;
}

/* MediumTurquoise */
.areafill-29 {
    fill: rgb(75, 0, 130) !important;
}

/* Indigo  */
.areafill-30 {
    fill: rgb(85, 107, 47) !important;
}

/* DarkOliveGreen */
.areafill-31 {
    fill: rgb(95, 158, 160) !important;
}

/* CadetBlue */
.areafill-32 {
    fill: rgb(100, 149, 237) !important;
}

/* CornflowerBlue */
.areafill-33 {
    fill: rgb(102, 51, 153) !important;
}

/* RebeccaPurple */
.areafill-34 {
    fill: rgb(102, 205, 170) !important;
}

/* MediumAquaMarine */
.areafill-35 {
    fill: rgb(105, 105, 105) !important;
}

/* DimGrey */
.areafill-36 {
    fill: rgb(106, 90, 205) !important;
}

/* SlateBlue */
.areafill-37 {
    fill: rgb(107, 142, 35) !important;
}

/* OliveDrab */
.areafill-38 {
    fill: rgb(112, 128, 144) !important;
}

/* SlateGrey */
.areafill-39 {
    fill: rgb(119, 136, 153) !important;
}

/* LightSlateGrey */
.areafill-40 {
    fill: rgb(123, 104, 238) !important;
}

/* MediumSlateBlue */
.areafill-41 {
    fill: rgb(124, 252, 0) !important;
}

/* LawnGreen */
.areafill-42 {
    fill: rgb(127, 255, 0) !important;
}

/* Chartreuse */
.areafill-43 {
    fill: rgb(127, 255, 212) !important;
}

/* Aquamarine */
.areafill-44 {
    fill: rgb(128, 0, 0) !important;
}

/* Maroon */
.areafill-45 {
    fill: rgb(128, 0, 128) !important;
}

/* Purple */
.areafill-46 {
    fill: rgb(128, 128, 0) !important;
}

/* Olive */
.areafill-47 {
    fill: rgb(128, 128, 128) !important;
}

/* Grey */
.areafill-48 {
    fill: rgb(135, 206, 235) !important;
}

/* SkyBlue */
.areafill-49 {
    fill: rgb(135, 206, 250) !important;
}

/* LightSkyBlue */
.areafill-50 {
    fill: rgb(138, 43, 226) !important;
}

/* BlueViolet */
.areafill-51 {
    fill: rgb(139, 0, 0) !important;
}

/* DarkRed */
.areafill-52 {
    fill: rgb(139, 0, 139) !important;
}

/* DarkMagenta */
.areafill-53 {
    fill: rgb(139, 69, 19) !important;
}

/* SaddleBrown */
.areafill-54 {
    fill: rgb(143, 188, 143) !important;
}

/* DarkSeaGreen */
.areafill-55 {
    fill: rgb(144, 238, 144) !important;
}

/* LightGreen */
.areafill-56 {
    fill: rgb(147, 112, 219) !important;
}

/* MediumPurple */
.areafill-57 {
    fill: rgb(148, 0, 211) !important;
}

/* DarkViolet */
.areafill-58 {
    fill: rgb(152, 251, 152) !important;
}

/* PaleGreen */
.areafill-59 {
    fill: rgb(153, 50, 204) !important;
}

/* DarkOrchid */
.areafill-60 {
    fill: rgb(154, 205, 50) !important;
}

/* YellowGreen */
.areafill-61 {
    fill: rgb(160, 82, 45) !important;
}

/* Sienna */
.areafill-62 {
    fill: rgb(165, 42, 42) !important;
}

/* Brown */
.areafill-63 {
    fill: rgb(169, 169, 169) !important;
}

/* DarkGrey */
.areafill-64 {
    fill: rgb(173, 216, 230) !important;
}

/* LightBlue */
.areafill-65 {
    fill: rgb(173, 255, 47) !important;
}

/* GreenYellow */
.areafill-66 {
    fill: rgb(175, 238, 238) !important;
}

/* PaleTurquoise */
.areafill-67 {
    fill: rgb(176, 196, 222) !important;
}

/* LightSteelBlue */
.areafill-68 {
    fill: rgb(176, 224, 230) !important;
}

/* PowderBlue */
.areafill-69 {
    fill: rgb(178, 34, 34) !important;
}

/* FireBrick */
.areafill-70 {
    fill: rgb(184, 134, 11) !important;
}

/* DarkGoldenRod */
.areafill-71 {
    fill: rgb(186, 85, 211) !important;
}

/* MediumOrchid */
.areafill-72 {
    fill: rgb(188, 143, 143) !important;
}

/* RosyBrown */
.areafill-73 {
    fill: rgb(189, 183, 107) !important;
}

/* DarkKhaki */
.areafill-74 {
    fill: rgb(192, 192, 192) !important;
}

/* Silver */
.areafill-75 {
    fill: rgb(199, 21, 133) !important;
}

/* MediumVioletRed */
.areafill-76 {
    fill: rgb(205, 92, 92) !important;
}

/* IndianRed  */
.areafill-77 {
    fill: rgb(205, 133, 63) !important;
}

/* Peru */
.areafill-78 {
    fill: rgb(210, 105, 30) !important;
}

/* Chocolate */
.areafill-79 {
    fill: rgb(210, 180, 140) !important;
}

/* Tan */
.areafill-80 {
    fill: rgb(211, 211, 211) !important;
}

/* LightGrey */
.areafill-81 {
    fill: rgb(216, 191, 216) !important;
}

/* Thistle */
.areafill-82 {
    fill: rgb(218, 112, 214) !important;
}

/* Orchid */
.areafill-83 {
    fill: rgb(218, 165, 32) !important;
}

/* GoldenRod */
.areafill-84 {
    fill: rgb(219, 112, 147) !important;
}

/* PaleVioletRed */
.areafill-85 {
    fill: rgb(220, 20, 60) !important;
}

/* Crimson */
.areafill-86 {
    fill: rgb(220, 220, 220) !important;
}

/* Gainsboro */
.areafill-87 {
    fill: rgb(221, 160, 221) !important;
}

/* Plum */
.areafill-88 {
    fill: rgb(222, 184, 135) !important;
}

/* BurlyWood */
.areafill-89 {
    fill: rgb(224, 255, 255) !important;
}

/* LightCyan */
.areafill-90 {
    fill: rgb(230, 230, 250) !important;
}

/* Lavender */
.areafill-91 {
    fill: rgb(233, 150, 122) !important;
}

/* DarkSalmon */
.areafill-92 {
    fill: rgb(238, 130, 238) !important;
}

/* Violet */
.areafill-93 {
    fill: rgb(238, 232, 170) !important;
}

/* PaleGoldenRod */
.areafill-94 {
    fill: rgb(240, 128, 128) !important;
}

/* LightCoral */
.areafill-95 {
    fill: rgb(240, 230, 140) !important;
}

/* Khaki */
.areafill-96 {
    fill: rgb(240, 248, 255) !important;
}

/* AliceBlue */
.areafill-97 {
    fill: rgb(240, 255, 240) !important;
}

/* HoneyDew */
.areafill-98 {
    fill: rgb(240, 255, 255) !important;
}

/* Azure */
.areafill-99 {
    fill: rgb(244, 164, 96) !important;
}

/* SandyBrown */
.areafill-100 {
    fill: rgb(245, 222, 179) !important;
}

/* Wheat */
.areafill-101 {
    fill: rgb(245, 245, 220) !important;
}

/* Beige */
.areafill-102 {
    fill: rgb(245, 245, 245) !important;
}

/* WhiteSmoke */
.areafill-103 {
    fill: rgb(245, 255, 250) !important;
}

/* MintCream */
.areafill-104 {
    fill: rgb(248, 248, 255) !important;
}

/* GhostWhite */
.areafill-105 {
    fill: rgb(250, 128, 114) !important;
}

/* Salmon */
.areafill-106 {
    fill: rgb(250, 235, 215) !important;
}

/* AntiqueWhite */
.areafill-107 {
    fill: rgb(250, 240, 230) !important;
}

/* Linen */
.areafill-108 {
    fill: rgb(250, 250, 210) !important;
}

/* LightGoldenRodYellow */
.areafill-109 {
    fill: rgb(253, 245, 230) !important;
}

/* OldLace */
.areafill-110 {
    fill: rgb(255, 0, 0) !important;
}

/* Red */
.areafill-111 {
    fill: rgb(255, 0, 255) !important;
}

/* Magenta */
.areafill-112 {
    fill: rgb(255, 20, 147) !important;
}

/* DeepPink */
.areafill-113 {
    fill: rgb(255, 69, 0) !important;
}

/* OrangeRed */
.areafill-114 {
    fill: rgb(255, 99, 71) !important;
}

/* Tomato */
.areafill-115 {
    fill: rgb(255, 105, 180) !important;
}

/* HotPink */
.areafill-116 {
    fill: rgb(255, 127, 80) !important;
}

/* Coral */
.areafill-117 {
    fill: rgb(255, 140, 0) !important;
}

/* DarkOrange */
.areafill-118 {
    fill: rgb(255, 160, 122) !important;
}

/* LightSalmon */
.areafill-119 {
    fill: rgb(255, 165, 0) !important;
}

/* Orange */
.areafill-120 {
    fill: rgb(255, 182, 193) !important;
}

/* LightPink */
.areafill-121 {
    fill: rgb(255, 192, 203) !important;
}

/* Pink */
.areafill-122 {
    fill: rgb(255, 215, 0) !important;
}

/* Gold */
.areafill-123 {
    fill: rgb(255, 218, 185) !important;
}

/* PeachPuff */
.areafill-124 {
    fill: rgb(255, 222, 173) !important;
}

/* NavajoWhite */
.areafill-125 {
    fill: rgb(255, 228, 181) !important;
}

/* Moccasin */
.areafill-126 {
    fill: rgb(255, 228, 196) !important;
}

/* Bisque */
.areafill-127 {
    fill: rgb(255, 228, 225) !important;
}

/* MistyRose */
.areafill-128 {
    fill: rgb(255, 235, 205) !important;
}

/* BlanchedAlmond */
.areafill-129 {
    fill: rgb(255, 239, 213) !important;
}

/* PapayaWhip */
.areafill-130 {
    fill: rgb(255, 240, 245) !important;
}

/* LavenderBlush */
.areafill-131 {
    fill: rgb(255, 245, 238) !important;
}

/* SeaShell */
.areafill-132 {
    fill: rgb(255, 248, 220) !important;
}

/* Cornsilk */
.areafill-133 {
    fill: rgb(255, 250, 205) !important;
}

/* LemonChiffon */
.areafill-134 {
    fill: rgb(255, 250, 240) !important;
}

/* FloralWhite */
.areafill-135 {
    fill: rgb(255, 250, 250) !important;
}

/* Snow */
.areafill-136 {
    fill: rgb(255, 255, 0) !important;
}

/* Yellow */
.areafill-137 {
    fill: rgb(255, 255, 224) !important;
}

/* LightYellow */
.areafill-138 {
    fill: rgb(255, 255, 240) !important;
}

/* Ivory */
.areafill-139 {
    fill: rgb(255, 255, 255) !important;
}

/* White */

/* PollGraphics Brand Palette — Indigo-Purple Choropleth (non-partisan maps)
   Basis: UI-Gradient #667eea (Indigo) → #764ba2 (Purple)
   Tipp: Alternativ .areafill-145 mit fill-opacity (0.15 / 0.30 / 0.50 / 0.70 / 0.85 / 1.0)
   für eine einstufige Farbskala mit Opacity-Abstufung nutzen. */
.areafill-140 {
    fill: rgb(238, 240, 253) !important;
}

/* PG-Indigo-1 — sehr hell  #eef0fd */
.areafill-141 {
    fill: rgb(197, 203, 247) !important;
}

/* PG-Indigo-2 — hell       #c5cbf7 */
.areafill-142 {
    fill: rgb(155, 166, 241) !important;
}

/* PG-Indigo-3 — mittel-hell #9ba6f1 */
.areafill-143 {
    fill: rgb(102, 126, 234) !important;
}

/* PG-Indigo — UI-Primärfarbe #667eea */
.areafill-144 {
    fill: rgb(122, 106, 196) !important;
}

/* PG-Übergang — mittel-dunkel #7a6ac4 */
.areafill-145 {
    fill: rgb(118, 75, 162) !important;
}

/* PG-Purple — UI-Sekundärfarbe #764ba2 */
.areafill-146 {
    fill: rgb(74, 45, 107) !important;
}

/* PG-Purple-Dark — sehr dunkel #4a2d6b */

/* Fraktionen des Europaeischen Parlaments (mapid0009). Grundlage ist die Palette des EP
   (results.elections.europa.eu, Sitzverteilung 2024). Dort sind fuenf Fraktionen blau und zwei rot;
   auf der NUTS3-Karte grenzen sie aneinander. Seit 3.24.1 deshalb vier Farben aus dem Erscheinungsbild
   der Fraktion statt aus der EP-Grafik: Renew gelb (Markenfarbe, Wikipedia #FFD700), Die Linke
   dunkelrot (Wikipedia #B71C1C). S&D, EVP, Gruene/EFA, PfE (Logo #253082) und Fraktionslose bleiben.
   "Sonstige" bleibt areafill-86.
   3.25.0: ESN und EKR getauscht. Mit ESN schwarz und EVP blau stand Deutschland verkehrt herum da
   (CDU/CSU wird schwarz gezeigt, die AfD hellblau). ESN jetzt AfD-Hellblau #00A2DF (AfD-CD-Handbuch
   2021, wie parties/DE.json; die AfD stellt 15 der 25 ESN-Abgeordneten; das ESN-Logo selbst ist ein
   gedecktes Petrol #5394A7 und Navy #19345A). EKR jetzt schieferschwarz #212F3C (bis 3.24.1 die
   ESN-Farbe der EP-Ergebnisseite) — ohne Quelle im EKR-Erscheinungsbild: dessen Logoblau #1866A5
   ist von der EVP #0055A0 auf der Karte nicht zu unterscheiden (auch abgedunkelt #0F4C81 nicht,
   Vergleich in CHANGELOG 3.25.0). */
.areafill-147 {
    fill: rgb(255, 0, 0) !important;
}

/* EP S&D #ff0000 */
.areafill-148 {
    fill: rgb(0, 85, 160) !important;
}

/* EP EVP #0055a0 */
.areafill-149 {
    fill: rgb(0, 130, 0) !important;
}

/* EP Grüne/EFA #008200 */
.areafill-150 {
    fill: rgb(183, 28, 28) !important;
}

/* EP Die Linke #b71c1c */
.areafill-151 {
    fill: rgb(37, 48, 128) !important;
}

/* EP PfE #253080 */
.areafill-152 {
    fill: rgb(255, 215, 0) !important;
}

/* EP Renew #ffd700 */
.areafill-153 {
    fill: rgb(33, 47, 60) !important;
}

/* EP EKR #212f3c */
.areafill-154 {
    fill: rgb(0, 162, 223) !important;
}

/* EP ESN #00a2df */
.areafill-155 {
    fill: rgb(117, 117, 112) !important;
}

/* EP Fraktionslose #757570 */

/* Parteien in Österreich (mapid0031, Nationalratswahl 2024 und Europawahl 2024; EU_LAYERS_PLAN P-AT).
   Farben aus parties/display.json (Register parties/AT.json), nicht neu gewaehlt: OEVP aus dem CD der
   Partei, die uebrigen "legacy" (Parteifarbe der Wikipedia). Die Zuordnung Partei → Klasse steht in
   scripts/tools/eu_layers/countries/at.json ("plugin.css"); at_national.py und plugin_assets.py lesen sie. */
.areafill-156 {
    fill: rgb(99, 195, 208) !important;
}

/* AT:OVP ÖVP #63c3d0 */
.areafill-157 {
    fill: rgb(228, 39, 18) !important;
}

/* AT:SPO SPÖ #e42712 */
.areafill-158 {
    fill: rgb(0, 86, 162) !important;
}

/* AT:FPO FPÖ #0056a2 */
.areafill-159 {
    fill: rgb(135, 181, 41) !important;
}

/* AT:GRUNE GRÜNE #87b529 */
.areafill-160 {
    fill: rgb(203, 22, 103) !important;
}

/* AT:NEOS NEOS #cb1667 */
.areafill-161 {
    fill: rgb(170, 0, 0) !important;
}

/* AT:KPO KPÖ #aa0000 */
.areafill-162 {
    fill: rgb(255, 237, 0) !important;
}

/* AT:BIER BIER #ffed00 */
.areafill-163 {
    fill: rgb(44, 45, 132) !important;
}

/* AT:DNA DNA #2c2d84 */
.areafill-164 {
    fill: rgb(255, 88, 36) !important;
}

/* AT:MFG MFG #ff5824 */
.areafill-165 {
    fill: rgb(128, 128, 128) !important;
}

/* AT:BGE BGE #808080 */
.areafill-166 {
    fill: rgb(81, 24, 78) !important;
}

/* AT:LMP LMP #51184e */
.areafill-167 {
    fill: rgb(9, 84, 3) !important;
}

/* AT:GAZA GAZA #095403 */
.areafill-168 {
    fill: rgb(35, 31, 32) !important;
}

/* AT:KEINE KEINE #231f20 */

/* Parteien in Spanien (mapid0030, Congreso 2023 und Europawahl 2024; EU_LAYERS_PLAN P-ES). Farben aus
   parties/display.json (Register parties/ES.json), nicht neu gewaehlt. AR (Ahora Republicas) und CEUS sind die
   Koalitionen der Europawahl 2024. Zuordnung Partei → Klasse: scripts/tools/eu_layers/countries/es.json ("plugin.css"). */
.areafill-169 {
    fill: rgb(29, 132, 206) !important;
}

/* ES:PP PP #1d84ce */
.areafill-170 {
    fill: rgb(239, 28, 39) !important;
}

/* ES:PSOE PSOE #ef1c27 */
.areafill-171 {
    fill: rgb(99, 190, 33) !important;
}

/* ES:Vox Vox #63be21 */
.areafill-172 {
    fill: rgb(239, 75, 145) !important;
}

/* ES:Sumar Sumar #ef4b91 */
.areafill-173 {
    fill: rgb(90, 32, 90) !important;
}

/* ES:Podemos Podemos #5a205a */
.areafill-174 {
    fill: rgb(120, 90, 70) !important;
}

/* ES:SALF SALF #785a46 */
.areafill-175 {
    fill: rgb(255, 178, 50) !important;
}

/* ES:ERC ERC #ffb232 */
.areafill-176 {
    fill: rgb(0, 199, 174) !important;
}

/* ES:Junts Junts #00c7ae */
.areafill-177 {
    fill: rgb(0, 193, 159) !important;
}

/* ES:EHBildu EH Bildu #00c19f */
.areafill-178 {
    fill: rgb(74, 174, 74) !important;
}

/* ES:PNV EAJ-PNV #4aae4a */
.areafill-179 {
    fill: rgb(173, 207, 239) !important;
}

/* ES:BNG BNG #adcfef */
.areafill-180 {
    fill: rgb(255, 215, 0) !important;
}

/* ES:CCa CCa #ffd700 */
.areafill-181 {
    fill: rgb(0, 89, 155) !important;
}

/* ES:UPN UPN #00599b */
.areafill-182 {
    fill: rgb(252, 188, 67) !important;
}

/* ES:AR AR #fcbc43 */
.areafill-183 {
    fill: rgb(0, 48, 154) !important;
}

/* ES:CEUS CEUS #00309a */

/* Listen in Israel (mapid0054, Knesset-Wahl 2022; EU_LAYERS_PLAN P-IL). Farben aus parties/display.json
   (Register parties/IL.json, alle "legacy"), nicht neu gewaehlt. Zuordnung Liste → Klasse:
   scripts/tools/eu_layers/countries/il.json ("plugin.css"). */
.areafill-184 {
    fill: rgb(31, 90, 165) !important;
}

/* IL:LIKUD Likud #1f5aa5 */
.areafill-185 {
    fill: rgb(32, 56, 240) !important;
}

/* IL:YESH-ATID Yesh Atid #2038f0 */
.areafill-186 {
    fill: rgb(79, 146, 152) !important;
}

/* IL:RZ-OY RZ–Otzma #4f9298 */
.areafill-187 {
    fill: rgb(0, 187, 223) !important;
}

/* IL:NU National Unity #00bbdf */
.areafill-188 {
    fill: rgb(0, 0, 0) !important;
}

/* IL:SHAS Shas #000000 */
.areafill-189 {
    fill: rgb(0, 51, 102) !important;
}

/* IL:UTJ UTJ #003366 */
.areafill-190 {
    fill: rgb(35, 194, 235) !important;
}

/* IL:YB Yisrael Beiteinu #23c2eb */
.areafill-191 {
    fill: rgb(21, 121, 61) !important;
}

/* IL:RAAM Ra'am #15793d */
.areafill-192 {
    fill: rgb(212, 36, 54) !important;
}

/* IL:HADASH-TAAL Hadash–Ta'al #d42436 */
.areafill-193 {
    fill: rgb(238, 28, 37) !important;
}

/* IL:LABOR Labor #ee1c25 */
.areafill-194 {
    fill: rgb(64, 174, 73) !important;
}

/* IL:MERETZ Meretz #40ae49 */
.areafill-195 {
    fill: rgb(246, 96, 12) !important;
}

/* IL:BALAD Balad #f6600c */
.areafill-196 {
    fill: rgb(141, 198, 63) !important;
}

/* IL:JEWISH-HOME Jewish Home #8dc63f */

/* Listen der Knesset-Wahl 2026 (mapid0054, Umfragen und Nowcast; 3.32.0). Farben aus parties/display.json, dort die
   Spaltenfarben der Wikipedia-Tabelle "Opinion polling for the 2026 Israeli legislative election" (legacy). */
.areafill-197 {
    fill: rgb(42, 42, 120) !important;
}

/* IL:TOGETHER Together #2a2a78 */
.areafill-198 {
    fill: rgb(79, 146, 152) !important;
}

/* IL:RZP-ZEHUT RZP–Zehut #4f9298 */
.areafill-199 {
    fill: rgb(255, 69, 0) !important;
}

/* IL:OTZMA Otzma #ff4500 */
.areafill-200 {
    fill: rgb(13, 170, 255) !important;
}

/* IL:BW Blue & White #0daaff */
.areafill-201 {
    fill: rgb(98, 185, 242) !important;
}

/* IL:YASHAR Yashar #62b9f2 */
.areafill-202 {
    fill: rgb(42, 56, 215) !important;
}

/* IL:DEMS Democrats #2a38d7 */
.areafill-203 {
    fill: rgb(1, 178, 172) !important;
}

/* IL:JOINT-LIST Joint List #01b2ac */
.areafill-204 {
    fill: rgb(104, 105, 44) !important;
}

/* IL:RESERVISTS-NEP Reservists–NEP #68692c */
.areafill-205 {
    fill: rgb(131, 1, 210) !important;
}

/* IL:AMCHA Amcha Yisrael #8301d2 */
.areafill-206 {
    fill: rgb(245, 197, 24) !important;
}

/* IL:HAREDI-PUBLIC Haredi Public #f5c518 */

#parliament-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.parliament-svg {
    display: block;
    margin: 0 auto;
}

.parliament-legend {
    font-family: var(--map-font-family);
    font-size: 14px;
}

.poll-bar {
    display: flex;
    align-items: center;
    height: 30px;
    margin-bottom: 8px;
}

.poll-bar-label {
    font-family: var(--map-font-family);
    width: 100px;
    font-weight: bold;
    text-align: right;
    padding-right: var(--map-space-sm);
    font-size: var(--map-font-size-poll-bar);
}

.poll-bar-container {
    flex: 1;
    height: 20px;
    background: #f0f0f0;
    border-radius: var(--map-radius-large);
    position: relative;
    margin-right: var(--map-space-sm);
}

.poll-bar-fill {
    height: 100%;
    border-radius: var(--map-radius-large);
    transition: width 0.3s ease;
    position: relative;
}

.poll-bar-value {
    font-family: var(--map-font-family);
    width: 50px;
    text-align: left;
    font-weight: bold;
    font-size: var(--map-font-size-poll-bar);
}

.timeline-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    /* Zweite Absicherung neben der JS-seitigen Viewport-Begrenzung (showTooltip()):
       bricht auf sehr schmalen Mobile-Viewports auf mehrere Zeilen um, statt über den
       Bildschirmrand hinauszuragen und dadurch horizontales Scrollen der Seite auszulösen. */
    max-width: calc(100vw - 16px);
    overflow-wrap: break-word;
}

@media (max-width: 420px) {
    .timeline-tooltip {
        white-space: normal;
    }
}

#timeline-canvas {
    cursor: pointer;
}

#timeline-canvas:hover {
    cursor: crosshair;
}

/* Polls container styles */
#polls-container {
    width: 100%;
    max-width: 1200px;
    margin: 30px auto;
}

#polls-container h3 {
    font-family: var(--map-font-family);
    text-align: center;
}

#timeline-container {
    width: 100%;
    height: 480px;
    margin: var(--map-space-lg) 0;
    position: relative;
    border: 1px solid var(--map-color-border-light);
    border-radius: var(--map-radius-medium);
    background: var(--map-color-canvas-bg);
    padding: var(--map-space-sm);
    overflow: visible;
}

#timeline-canvas {
    /* Keine festen width/height hier - wird programmatisch gesetzt! */
    display: block;
    max-width: 100%;
}

#polls-bar-chart {
    width: 100%;
    margin: var(--map-space-lg) 0;
}

#poll-title {
    font-family: var(--map-font-family);
    text-align: center;
    margin-bottom: var(--map-space-md);
    min-height: 40px;
    font-size: var(--map-font-size-poll-title);
    font-weight: bold;
}

#poll-bars {
    display: flex;
    flex-direction: column;
    gap: var(--map-space-sm);
    padding: var(--map-space-lg);
    border: 1px solid var(--map-color-border-light);
    border-radius: var(--map-radius-medium);
    background: var(--map-color-canvas-bg);
}

.poll-bars-placeholder {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 16px;
}

.poll-bars-placeholder p:last-child {
    font-size: 14px;
    margin-top: 20px;
}

/* Parliament container styles */
#parliament-container {
    width: 100%;
    max-width: 800px;
    margin: 30px auto;
}

#parliament-container h3 {
    font-family: var(--map-font-family);
    text-align: center;
}

#parliament-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
    gap: 12px;
}

#parliament-total-seats {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}

/* Polygon-Navigation Styles */
.polygon-highlighted {
    filter: drop-shadow(2px 2px 6px rgba(100, 150, 255, 0.6)) !important;
    transition: all 0.2s ease-in-out !important;
}

.polygon-selected {
    filter: drop-shadow(0 0 8px rgba(255, 100, 100, 0.8)) !important;
    transition: all 0.3s ease-in-out !important;
}

/* Zentrale Konfiguration für Polygon-Navigation */
:root {
    --polygon-hover-color: lawngreen;
    --polygon-hover-width: 2px;
    --polygon-selected-color: #ff4444;
    --polygon-selected-width: 3px;
    --polygon-selected-opacity: 0.9;
}

/* Interaktive Polygone */
polygon,
path,
circle,
rect,
ellipse {
    cursor: pointer !important;
    transition: stroke-width 0.2s ease, stroke-opacity 0.2s ease, filter 0.2s ease !important;
}

polygon:hover,
path:hover,
circle:hover,
rect:hover,
ellipse:hover {
    cursor: pointer !important;
}

.hidden-radio {
    display: none;
}

/* ─── PNG Export Button — see-through icon, expands right on hover ─ */
.pg-export-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;

    /* Flex so icon + label sit side by side */
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;

    /* Resting width clips to icon only; same vertical padding as zoom controls */
    width: 40px;
    padding: 10px 0;
    font-size: 16px; /* same as zoom controls — no line-height override so height matches */

    cursor: pointer;
    color: #667eea;
    background: rgba(255, 255, 255, 0.75);
    border: 1.5px solid rgba(102, 126, 234, 0.45);
    border-radius: 5px;

    transition: width 0.25s ease, color 0.25s ease,
                background 0.25s ease, border-color 0.25s ease,
                box-shadow 0.25s ease;
}

.pg-export-btn:hover {
    width: 218px;
    color: #ffffff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.pg-export-btn:active {
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}

.pg-export-btn:disabled {
    width: 218px;
    opacity: 0.7;
    cursor: wait;
}

/* Icon span: fixed width = resting button width, centered via text-align (NOT display:block) */
.pg-export-icon {
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

/* Label span: hidden in resting state, fades in as button expands */
.pg-export-label {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    padding-right: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pg-export-btn:hover .pg-export-label,
.pg-export-btn:disabled .pg-export-label {
    opacity: 1;
    transition: opacity 0.2s ease 0.1s;
}