/* ============================================================
   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;
}

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

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

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

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


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

/* 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 */

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

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