html, body {
    font-family: 'Inter', sans-serif !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    overflow-x: hidden !important;
}

* {
    font-family: 'Inter', sans-serif !important;
}

/* *
 *
 *  Navigation bar
 *
 * */
.navbar {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the links as a whole */
    padding: 10px 20px;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    top: 0;
    width: 100%;
    z-index: 1000;
    gap: 20px; /* Add spacing between the logo and other content */
    height: 75px; /* Ensure consistent height */
    box-sizing: border-box;
    position: relative; /* For absolute positioning of the logo */
}

/* Portal Header Logo Container */
.portal-header-logo-container {
    position: absolute; /* Remove from normal flow to prevent affecting centering */
    left: 20px; /* Align to the left */
    display: flex;
    align-items: center;
}

.portal-header-logo-container > a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding-left: 0; /* Removed padding-left since logo is absolutely positioned */
    color: #333333; /* gray-900 */
    transition: opacity 0.2s ease;
}

.portal-header-logo-container > a:hover {
    opacity: 0.8;
}

.portal-header-logo-container svg {
    width: 14.12px;
    height: 23.93px;
    color: #333333;
    fill: currentColor; /* Ensures paths use the svg's color */
}

.portal-header-divider {
    width: 1px;
    height: 30px;
    background-color: #333333;
    margin: 0 8px;
}

.portal-header-logo-container span {
    font-size: 24px;
    font-weight: bold;
    color: #333333;
}

/* Center links */
.navbar-links {
    display: flex;
    gap: 10px; /* Space between buttons */
    border: 1px solid #333333; /* Outer border color for all buttons */
    border-radius: 25px; /* Smooth rounded edges */
    padding: 5px; /* Add padding to create space between border and buttons */
    background-color: #fff; /* White background for the button group */
}

.navbar-links:hover {
    border-color: #079BCA;
}

/* Link styles */
.navbar-link {
    padding: 8px 12px;
    font-weight: bold;
    border-radius: 25px;
    color: #1e4557; /* Default font color */
    text-decoration: none;
    font-size: 20px; /* Larger font size */
    text-align: center;
    transition: all 0.3s ease;
}

/* Active link */
.navbar-link.active {
    background-color: #1e6d8b; /* Active background color */
    color: #fff; /* White font color for active link */
    pointer-events: none; /* Prevent hover on active links */
}

/* Hover effects for non-active links */
.navbar-link:not(.active):hover {
    color: #079BCA; /* Hover font color */
    background-color: transparent; /* Ensure background stays transparent unless active */
}
/* Hover effects for non-active links */
.navbar-link:not(.active):hover {
    color: #079BCA; /* Hover font color */
    background-color: transparent; /* Ensure background stays transparent unless active */
}

/* Responsive adjustments for devices smaller than 1210px */
@media (max-width: 1210px) {
    .portal-header-logo-container svg {
        width: 10.58px;
        height: 17.94px;
    }

    .portal-header-logo-container span {
        font-size: 18px; /* Adjust text size */
    }

    .navbar-link {
        font-size: 14px; /* Adjust navbar link font size */
    }
}

/* Responsive adjustments for devices smaller than 1024px */
@media (max-width: 1024px) {
    .navbar {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the left */
        gap: 10px; /* Add spacing between stacked elements */
        height: auto; /* Allow dynamic height based on content */
        padding: 20px 20px; /* Increase padding for spacing */
    }

    .portal-header-logo-container {
        position: relative; /* Ensure proper positioning in column layout */
        left: 0; /* Align to the left */
        width: 100%; /* Allow the logo container to fit within the navbar width */
        display: flex;
        align-items: center;
    }

    .portal-header-logo-container span {
        font-size: 16px; /* Adjust text size */
        flex-grow: 1; /* Ensure logo text stays aligned with the logo */
    }

    .navbar-links {
        justify-content: center; /* Center navbar links */
        width: auto; /* Prevent the navbar links from stretching */
        margin: 0 auto; /* Center align in the navbar */
        display: flex; /* Keep links in a row */
        gap: 10px; /* Adjust gap between links */
        border: 1px solid #333333; /* Retain border styling */
        border-radius: 25px; /* Smooth rounded edges */
        padding: 5px; /* Padding inside the links container */
        background-color: #fff; /* White background */
    }

    .navbar-link {
        font-size: 18px; /* Adjust navbar link font size */
        padding: 8px 12px; /* Add padding for better spacing */
        border-radius: 25px; /* Ensure buttons have rounded edges */
        text-align: center;
    }
}

/* Responsive adjustments to prevent wrapping */
@media (max-width: 768px) {
    .navbar-links {
        flex-wrap: wrap; /* Allow wrapping if space is insufficient */
        justify-content: center;
    }
}

/* Right-aligned container */
.navbar-action {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    .navbar-action {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        align-self: flex-end;
        margin-top: 10px;
    }
}

/* Action-style button */
.btn-action {
    display: inline-flex;
    align-items: center;
    background-color: #f5f7f8; /* Default background */
    border: 2px solid #5b6d73; /* Default border */
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}

/* Hover / focus / active */
.btn-action:hover,
.btn-action:focus,
.btn-action:active {
    background-color: #146C8B;
    color: white;
}

/* Disabled */
.btn-action:disabled {
    background-color: #ccc;
    border-color: #ccc;
    color: #777;
    cursor: not-allowed;
}

.btn-action img,
.btn-action svg {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    transition: transform 0.3s ease, filter 0.25s ease, color 0.25s ease, fill 0.25s ease;
    flex-shrink: 0;
    display: inline-block;
}

/* Ensure inline SVGs follow the button color */
.btn-action svg {
    fill: currentColor;
}

/* Hover: scale icon and make it white.
   For inline SVG this sets fill; for raster/external SVGs we use filter. */
.btn-action:hover img,
.btn-action:focus img,
.btn-action:active img {
    transform: scale(1.1);
    filter: invert(1) brightness(1.2) grayscale(1);
}

.btn-action:hover svg,
.btn-action:focus svg,
.btn-action:active svg {
    transform: scale(1.1);
    color: #fff;
    fill: #fff;
}

/* *
 *
 *  Charts
 *
 * */

/* LARGE (> 1210px) */
@media (min-width: 1211px) {
    #map,
    #yearly-charts,
    #hour-table,
    #hourly-charts,
    #weekly-table,
    #weekly-dtv-chart,
    #month-table,
    #monthly-charts {
        flex: 1 1 50%; /* Take half the container width */
    }
}

/* MEDIUM (768px to 1210px) */
@media (max-width: 1210px) and (min-width: 769px) {
    #map,
    #yearly-charts,
    #hour-table,
    #hourly-charts,
    #weekly-table,
    #weekly-dtv-chart,
    #month-table,
    #monthly-charts {
        flex: 1 1 100%; /* Take full width */
    }

    #hour-table,
    #month-table,
    #weekly-table {
        height: 400px; /* Set a fixed height for tables */
    }

    #hourly-dtv-chart,
    #hourly-donut-chart,
    #yearly-chart,
    #availability-chart,
    #monthly-dtv-chart,
    #monthly-weather-chart {
        flex: 1 1 50%; /* Half width for nested charts */
    }
}

/* SMALL (< 768px) */
@media (max-width: 768px) {
    #map,
    #yearly-charts,
    #hour-table,
    #hourly-charts,
    #weekly-table,
    #weekly-dtv-chart,
    #month-table,
    #monthly-charts {
        flex: 1 1 100%; /* Full width for all main charts */
    }

    #hour-table,
    #month-table,
    #weekly-table {
        height: 400px; /* Set a fixed height for tables */
    }

    #hourly-dtv-chart,
    #hourly-donut-chart,
    #yearly-chart,
    #availability-chart,
    #monthly-dtv-chart,
    #monthly-weather-chart {
        flex: 1 1 100%; /* Full width for nested charts */
    }
}

/* *
 *
 *  Filter buttons
 *
 * */

/* Flexbox layout for filter buttons container */
#filter-buttons,
#day-range-buttons,
#chart-toggle-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Add space between filter-groups */
    gap: 10px; /* Space between each filter-group */
    align-items: flex-start; /* Align items to the top */
    padding: 20px;
}

#chart-toggle-buttons {
    max-width: 800px;
}

/* Style for filter group headers */
.filter-group h3 {
    margin: 0; /* Remove default margins */
    font-size: 16px;
    color: #333;
    white-space: nowrap; /* Prevent the header from wrapping */
}

/* Adjust the filter group container if needed */
.filter-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* Space between items */
}

@media (max-width: 768px) {
    .filter-group {
        flex: 1 1 100%; /* Stack vertically on smaller screens */
    }
}

/* Hide inputs */
#filter-buttons input[type="radio"],
#day-range-buttons input[type="checkbox"],
#day-range-buttons input[type="radio"],
#chart-toggle-buttons input[type="radio"] {
    display: none;
}

/* General styling for labels */
#filter-buttons label,
#day-range-buttons label,
#chart-toggle-buttons label {
    display: inline-flex;
    align-items: center;
    background-color: #f5f7f8; /* Default background */
    border: 2px solid #5b6d73; /* Default border */
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px;
    margin: 0 5px 0 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
    position: relative; /* Required for pseudo-elements */
}

/* Checked state styling */
#filter-buttons input[type="radio"]:checked + label,
#day-range-buttons input[type="checkbox"]:checked + label,
#day-range-buttons input[type="radio"]:checked + label,
#chart-toggle-buttons input[type="radio"]:checked + label {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3); /* Violet glow effect */
}

/* Hover effect for all buttons */
#filter-buttons label:hover,
#day-range-buttons label:hover,
#chart-toggle-buttons label:hover {
    background-color: #e0e6e8; /* Slightly darker on hover */
}

/* Styles for date inputs */
#day-range-buttons input[type="date"] {
    background-color: #f5f7f8;
    border: 2px solid #5b6d73;
    border-radius: 20px;
    padding: 8px 12px;
    margin: 0 5px 0 0;
    font-size: 14px;
    color: #333;
    transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Focus effect for date inputs */
#day-range-buttons input[type="date"]:focus {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3); /* Violet glow effect */
}

/* Adjust labels for date inputs */
#day-range-buttons .filter-group label[for="start-date"],
#day-range-buttons .filter-group label[for="end-date"] {
    background: none;
    border: none;
    padding: 0;
    margin: 0 5px 0 0;
    cursor: default;
}

#day-range-buttons .filter-group label[for="start-date"]:hover,
#day-range-buttons .filter-group label[for="end-date"]:hover {
    background: none;
}

/* Ensure date inputs are inline */
#day-range-buttons .filter-group input[type="date"] {
    display: inline-block;
    width: auto;
}


/* Icon and color circle styling */
.filter-icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    transition: transform 0.3s ease;
    border-radius: 50%; /* For color circles */
}

#filter-buttons label:hover .filter-icon,
#chart-toggle-buttons label:hover .filter-icon {
    transform: scale(1.1); /* Slight scale-up effect on hover */
}

/* Flexbox for date-picker container */
.date-picker {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for small screens */
    gap: 10px; /* Space between date-item elements */
}

/* Flexbox for each date-item */
.date-item {
    display: flex;
    flex-direction: row; /* Keep label and input inline */
    align-items: center;
    gap: 5px; /* Space between label and input */
}

/* Force "Bis" to drop below on smaller screens */
@media (max-width: 768px) {
    .date-item {
        flex: 1 1 100%; /* Each pair takes full width on small screens */
    }
}

.filter-like-btn {
    display: inline-flex;
    align-items: center;
    background-color: #f5f7f8;
    border: 2px solid #5b6d73;
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.filter-like-btn.is-active {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3);
}

.filter-like-btn:hover {
    background-color: #e0e6e8;
}

/* panel show/hide */
.fzgtyp-panel.is-hidden { display: none; }
.fzgtyp-panel { padding: 0 20px 20px 20px; }

/* checkbox-buttons use same label styling */
#fzgtyp-panel input[type="checkbox"] { display: none; }

#fzgtyp-panel label {
    display: inline-flex;
    align-items: center;
    background-color: #f5f7f8;
    border: 2px solid #5b6d73;
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px;
    margin: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#fzgtyp-panel input[type="checkbox"]:checked + label {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3);
}

#fzgtyp-panel input[type="checkbox"]:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Speed panel - same styling as fzgtyp panel */
#speed-panel.is-hidden { display: none; }
#speed-panel { padding: 0 20px 20px 20px; }

/* checkbox-buttons use same label styling */
#speed-panel input[type="checkbox"] { display: none; }

#speed-panel label {
    display: inline-flex;
    align-items: center;
    background-color: #f5f7f8;
    border: 2px solid #5b6d73;
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px;
    margin: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

#speed-panel input[type="checkbox"]:checked + label {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3);
}

#speed-panel input[type="checkbox"]:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}


/* --- Info box / helper card --- */

.box {
    position: relative;
    margin: 30px 0;
    border-radius: 10px;
    padding: 20px 30px 20px 20px;
    color: #333333;
    background: #F2F7F3;
    max-width: 610px;
    font-size: 16px;
    line-height: 1.4;
}

.box__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-right: 30px;
    gap: 6px;
}

.box__title {
    font-size: 20px;
    line-height: 28px;
    color: #32834A;
    margin-right: 6px;
    font-weight: 700;
}

.box__addon {
    font-size: 16px;
    line-height: 22px;
    color: #32834A;
    font-weight: 400;
}

.box__content {
    margin-top: 15px;
    font-size: 16px;
    line-height: 22px;
    hyphens: auto;
}

.box__icon {
    position: absolute;
    right: 15px;
    top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.box__icon img,
.box__icon svg {
    width: 50px;
    height: 50px;
}

/* Warning box (red theme) */
#warning-box-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.box--warning {
    background: #fff1ef;
    color: #B81600;
    position: relative;
}

.box--warning .box__title {
    color: #B81600;
}

.box--warning .box__addon {
    color: #B81600;
}

.box--warning .box__content {
    color: #B81600;
}

.box--warning .box__content a {
    color: #B81600;
    text-decoration: underline;
}

.box--warning .box__content a:hover {
    color: #8B1000;
}

.box__close {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.box__close:hover {
    background-color: rgba(184, 22, 0, 0.1);
}

.box__close:focus-visible {
    outline: 2px solid #B81600;
    outline-offset: 2px;
}

.filter-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-info {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* icon button */
.chart-info__icon {
    border: 0;
    background: transparent;
    padding: 2px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.chart-info__icon img,
.chart-info__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* light blue hover */
.chart-info__icon:hover,
.chart-info__icon:focus-visible {
    background-color: #DDECDE;
    box-shadow: 0 0 0 2px #B8D6BE;
    outline: none;
}

/* Tooltip box next to icon (east) */
.chart-info__box {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(12px, -50%);
    z-index: 9999;

    display: none;
    width: 610px;
    max-width: min(610px, 80vw);
    filter: drop-shadow(0 10px 25px rgba(15, 23, 42, 0.18));
}

/* show on hover/focus */
.chart-info:hover .chart-info__box,
.chart-info:focus-within .chart-info__box {
    display: block;
}

/* Speed warning icon (similar to chart-info but for warning) */
.speed-warning {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* warning icon button */
.speed-warning__icon {
    border: 0;
    background: transparent;
    padding: 2px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.speed-warning__icon img,
.speed-warning__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* light blue hover */
.speed-warning__icon:hover,
.speed-warning__icon:focus-visible {
    background-color: #DDECDE;
    box-shadow: 0 0 0 2px #B8D6BE;
    outline: none;
}

/* Tooltip box next to icon (west, positioned near top) */
.speed-warning__box {
    position: fixed;
    z-index: 99999;
    display: none;
    width: 610px;
    max-width: min(610px, 80vw);
    filter: drop-shadow(0 10px 25px rgba(15, 23, 42, 0.18));
}

/* Tooltip visibility is now controlled by JavaScript in eventListeners.js */

/* Time range warning icon (similar to speed-warning but for time range) */
.time-range-warning {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* warning icon button */
.time-range-warning__icon {
    border: 0;
    background: transparent;
    padding: 2px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.time-range-warning__icon img,
.time-range-warning__icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* light blue hover */
.time-range-warning__icon:hover,
.time-range-warning__icon:focus-visible {
    background-color: #DDECDE;
    box-shadow: 0 0 0 2px #B8D6BE;
    outline: none;
}

/* Tooltip box next to icon (east, positioned to the right) */
.time-range-warning__box {
    position: fixed;
    z-index: 99999;
    display: none;
    width: 610px;
    max-width: min(610px, 80vw);
    filter: drop-shadow(0 10px 25px rgba(15, 23, 42, 0.18));
}

/* Tooltip visibility is now controlled by JavaScript in eventListeners.js */

/* Make sure dashboard cells allow overflow (prevents clipping) */
#filter-section-3,
#filter-section-3 .highcharts-dashboards-component,
#filter-section-3 .highcharts-dashboards-component-container,
#filter-section-3 .highcharts-dashboards-layout-row,
#filter-section-3 .highcharts-dashboards-layout-cell,
#filter-section-speed,
#filter-section-speed .highcharts-dashboards-component,
#filter-section-speed .highcharts-dashboards-component-container,
#filter-section-speed .highcharts-dashboards-layout-row,
#filter-section-speed .highcharts-dashboards-layout-cell {
    overflow: visible !important;
}

/* Full-width background for all filter sections using pseudo-element */
#filter-section,
#filter-section-fzgtyp,
#filter-section-speed,
#filter-section-2,
#filter-section-3 {
    position: relative !important;
    overflow: visible !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Green divider line above filter-section - full width */
#filter-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    height: 2px;
    background-color: #32834A; /* green-600 */
    z-index: 1;
    pointer-events: none;
}

/* Override margins for specific sections - these come after the general rule above */
/* Margin below filter-section-speed (Geschwindigkeitsklassen) - only in start view */
.view-start #filter-section-speed {
    margin-bottom: 20px !important;
}

/* Margin above time-range-selector (day-range-buttons) - only in start view */
.view-start #filter-section-2 {
    margin-top: 20px !important;
}

/* Margins above and below filter-section-3 - in all views where it appears */
#filter-section-3 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* Remove margins and gaps from rows containing filter sections */
.highcharts-dashboards-layout-row:has(#filter-section),
.highcharts-dashboards-layout-row:has(#filter-section-fzgtyp),
.highcharts-dashboards-layout-row:has(#filter-section-speed),
.highcharts-dashboards-layout-row:has(#filter-section-2),
.highcharts-dashboards-layout-row:has(#filter-section-3) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Also target the parent rows directly */
.highcharts-dashboards-layout-row > .highcharts-dashboards-layout-cell[id="filter-section"],
.highcharts-dashboards-layout-row > .highcharts-dashboards-layout-cell[id="filter-section-fzgtyp"],
.highcharts-dashboards-layout-row > .highcharts-dashboards-layout-cell[id="filter-section-speed"],
.highcharts-dashboards-layout-row > .highcharts-dashboards-layout-cell[id="filter-section-2"],
.highcharts-dashboards-layout-row > .highcharts-dashboards-layout-cell[id="filter-section-3"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#filter-section::before,
#filter-section-fzgtyp::before,
#filter-section-speed::before,
#filter-section-2::before,
#filter-section-3::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    height: 100%;
    min-height: 100%;
    background-color: #ddecde;
    z-index: 0;
    pointer-events: none;
}

/* Extend background to cover any gaps - use negative top to overlap with previous section */
#filter-section-fzgtyp::before,
#filter-section-speed::before,
#filter-section-2::before,
#filter-section-3::before {
    top: -10px;
    height: calc(100% + 20px);
    min-height: calc(100% + 20px);
}

/* First filter section extends down to connect with next */
#filter-section::before {
    height: calc(100% + 10px);
    min-height: calc(100% + 10px);
}

/* Ensure content inside filter sections maintains proper width and is visible */
#filter-section .highcharts-dashboards-layout-cell,
#filter-section-fzgtyp .highcharts-dashboards-layout-cell,
#filter-section-speed .highcharts-dashboards-layout-cell,
#filter-section-2 .highcharts-dashboards-layout-cell,
#filter-section-3 .highcharts-dashboards-layout-cell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
}

/* Ensure nested components are above the background and maintain their layout */
#filter-section .highcharts-dashboards-component,
#filter-section .highcharts-dashboards-component-container,
#filter-section .highcharts-dashboards-layout-row,
#filter-section .highcharts-dashboards-layout-cell,
#filter-section-fzgtyp .highcharts-dashboards-component,
#filter-section-fzgtyp .highcharts-dashboards-component-container,
#filter-section-fzgtyp .highcharts-dashboards-layout-row,
#filter-section-fzgtyp .highcharts-dashboards-layout-cell,
#filter-section-speed .highcharts-dashboards-component,
#filter-section-speed .highcharts-dashboards-component-container,
#filter-section-speed .highcharts-dashboards-layout-row,
#filter-section-speed .highcharts-dashboards-layout-cell,
#filter-section-2 .highcharts-dashboards-component,
#filter-section-2 .highcharts-dashboards-component-container,
#filter-section-2 .highcharts-dashboards-layout-row,
#filter-section-2 .highcharts-dashboards-layout-cell,
#filter-section-3 .highcharts-dashboards-component,
#filter-section-3 .highcharts-dashboards-component-container,
#filter-section-3 .highcharts-dashboards-layout-row,
#filter-section-3 .highcharts-dashboards-layout-cell {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

/* Ensure the dashboard wrapper prevents horizontal scroll */
#container.highcharts-light,
.highcharts-dashboards-wrapper {
    overflow-x: hidden !important;
}

/* Only allow overflow on rows containing filter sections for full-width backgrounds */
.highcharts-dashboards-layout-row:has(#filter-section),
.highcharts-dashboards-layout-row:has(#filter-section-fzgtyp),
.highcharts-dashboards-layout-row:has(#filter-section-speed),
.highcharts-dashboards-layout-row:has(#filter-section-2),
.highcharts-dashboards-layout-row:has(#filter-section-3) {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Also allow overflow on the row immediately following filter-section-speed to prevent clipping */
.highcharts-dashboards-layout-row:has(#filter-section-speed) + .highcharts-dashboards-layout-row {
    overflow-y: visible !important;
}

/* Ensure filter section layout cells allow overflow */
#filter-section.highcharts-dashboards-layout-cell,
#filter-section-fzgtyp.highcharts-dashboards-layout-cell,
#filter-section-speed.highcharts-dashboards-layout-cell,
#filter-section-2.highcharts-dashboards-layout-cell,
#filter-section-3.highcharts-dashboards-layout-cell {
    overflow: visible !important;
}

/* Ensure cells in rows following filter-section-speed also allow overflow to prevent tooltip clipping */
.highcharts-dashboards-layout-row:has(#filter-section-speed) ~ .highcharts-dashboards-layout-row .highcharts-dashboards-layout-cell {
    overflow-y: visible !important;
}

/* Mobile: center below icon */
@media (max-width: 768px) {
    .chart-info__box {
        left: 50%;
        top: 110%;
        width: auto;
        max-width: calc(100vw - 40px);
    }

    .speed-warning__box {
        left: 50%;
        top: 110%;
        right: auto;
        width: auto;
        max-width: calc(100vw - 40px);
        transform: translate(-50%, 0);
    }

    .box {
        max-width: 100%;
    }
}

/* *
 *
 *  Dropdown styles
 *
 * */

/* Style for the custom select container */
.custom-select {
    position: relative;
    display: inline-block;
    background-color: #f5f7f8;
    border: 2px solid #5b6d73;
    border-radius: 20px;
    padding: 0; /* Remove padding to avoid double spacing */
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
    width: 100%; /* Full width of the container */
}

/* Style for the select element inside custom-select */
.custom-select select {
    appearance: none;
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background: transparent;
    border: none;
    font-size: 14px;
    color: #333;
    padding: 12px 12px;
    border-radius: 20px; /* Match the container's border-radius */
    width: 100%;
    cursor: pointer;
    outline: none; /* Remove default outline */
}

/* Add a custom arrow using ::after */
.custom-select::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 0;
    height: 0;
    margin-top: -4px;
    border-top: 8px solid #333;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    pointer-events: none;
}

/* Hover effect for the custom select */
.custom-select:hover {
    background-color: #e0e6e8; /* Slightly darker on hover */
}

/* Focused state styling */
.custom-select:focus-within {
    border-color: #6A0DAD;
    box-shadow: 0 0 10px 3px rgba(106, 13, 173, 0.3); /* Violet glow effect */
}

/* Remove default arrow in IE */
.custom-select select::-ms-expand {
    display: none;
}

/* Optional: Style the options (Note: Styling options is limited) */
#zaehlstellen-dropdown option {
    background-color: #fff;
    color: #333;
}

/* Optional: Adjust font size and padding of options */
#zaehlstellen-dropdown option {
    padding: 10px;
    font-size: 14px;
}

/* *
 *
 *  Page Title and Description Styles
 *
 * */

/* Title styling */
.h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 34px;
    margin: 0;
}

@media (min-width: 1024px) {
    .h1 {
        font-size: 36px;
        line-height: 40px;
    }
}

@media (min-width: 1210px) {
    .h1 {
        font-size: 48px;
        line-height: 48px;
    }
}

.text-primary-600 {
    color: #32834A;
}

.text-balance {
    text-wrap: balance;
}

.hyphens-auto {
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Description/Lead text styling */
.lead {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin: 0;
}

@media (min-width: 1210px) {
    .lead {
        font-size: 24px;
        line-height: 32px;
    }
}

.mt-30 {
    margin-top: 30px;
}

.text-pretty {
    text-wrap: pretty;
}

@media (min-width: 1024px) {
    .lg-hyphens-none {
        -webkit-hyphens: none;
        hyphens: none;
    }
}

/* Page header container */
.page-header {
    padding: 30px 20px;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .page-header {
        padding: 40px 20px;
    }
}

/* *
 *
 *  Footer Styles
 *
 * */

.footer {
    background-color: #E3E3E3; /* gray-200 */
    border-top: 4px solid #32834A; /* green-600 */
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 12px; /* text-xs */
}

@media (min-width: 1024px) {
    .footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.footer.print-hidden {
    display: block;
}

@media print {
    .footer.print-hidden {
        display: none;
    }
}

.footer-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer .links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-weight: 500; /* font-medium */
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer .links.links--spaced {
    gap: 15px 10px; /* gap-x-15 gap-y-10 */
}

.footer .link {
    border-bottom: 1px solid #ffffff;
    color: #1E4557; /* blue-900 */
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.footer .link:hover {
    border-bottom-color: #146C8B; /* blue-700 */
    color: #146C8B; /* blue-700 */
}

.footer .link.link--tall {
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
}

.footer-copyright {
    font-size: 14px; /* text-sm */
    font-weight: 700; /* font-bold */
    color: #1E4557; /* blue-900 */
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Button Styles */
*, :after, :before {
    border: 0 solid;
    box-sizing: border-box;
}

a {
    color: inherit;
    text-decoration: inherit;
}

.button {
    --button-text: #1e4557;
    --button-bg: #f8f8f8;
    --button-border: #1e4557;
    background: var(--button-bg);
    border-color: var(--button-border);
    color: var(--button-text);
    align-items: center;
    border-radius: 20px;
    border-width: 1px;
    display: inline-grid;
    font-size: 16px;
    font-weight: 500;
    gap: 7px;
    grid-auto-flow: column;
    -webkit-hyphens: auto;
    hyphens: auto;
    justify-content: flex-start;
    line-height: 22px;
    max-width: fit-content;
    min-height: 40px;
    min-width: 40px;
    overflow: hidden;
    padding: .55em .75em .45em;
    position: relative;
    text-align: left;
    width: auto;
    border-style: solid;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.button.is-hover,
.button:hover,
.group\/button:hover .button {
    --button-text: #fff;
    --button-bg: #0e81a7;
    --button-border: #1e4557;
}

.button.is-active,
.button.is-focus,
.button:active,
.button:focus-visible,
.group\/button:active .button,
.group\/button:focus-visible .button {
    --button-text: #512e61;
    --button-bg: #e8daf4;
    --button-border: #512e61;
}

.button.is-sm {
    border-radius: 15px;
    font-size: 14px;
    gap: 5px;
    line-height: 20px;
    line-height: 1;
    min-height: 30px;
    min-width: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

.button svg,
.button img {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
}

.button.is-sm svg,
.button.is-sm img {
    width: 14px;
    height: 14px;
}

/* Make arrow icon visible - use filter to colorize the black SVG */
.button img[data-symbol="arrow-north-east"] {
    filter: brightness(0);
    opacity: 0.7;
    object-fit: contain;
    display: inline-block;
}

.button:hover img[data-symbol="arrow-north-east"],
.button.is-hover img[data-symbol="arrow-north-east"] {
    filter: brightness(0) invert(1); /* White on hover */
    opacity: 1;
}

.button:active img[data-symbol="arrow-north-east"],
.button.is-active img[data-symbol="arrow-north-east"],
.button:focus-visible img[data-symbol="arrow-north-east"],
.button.is-focus img[data-symbol="arrow-north-east"] {
    /* Convert to purple-ish for active state */
    filter: brightness(0) saturate(100%) invert(20%) sepia(95%) saturate(2000%) hue-rotate(270deg) brightness(0.7) contrast(1.3);
    opacity: 1;
}

/* Button Icon Animations */
:root {
    --wiggle-degrees: 13deg;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(var(--wiggle-degrees));
    }
    40% {
        transform: rotate(calc(-1 * var(--wiggle-degrees)));
    }
    60% {
        transform: rotate(var(--wiggle-degrees));
    }
    80% {
        transform: rotate(calc(-1 * var(--wiggle-degrees)));
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes bounce-right {
    0% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(4px);
    }
    70% {
        transform: translateX(-1px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes bounce-left {
    0% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(-4px);
    }
    70% {
        transform: translateX(1px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes bounce-down {
    0% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(4px);
    }
    70% {
        transform: translateY(-1px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bounce-up {
    0% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    70% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bounce-ne {
    0% {
        transform: translate(0, 0);
    }
    40% {
        transform: translate(4px, -4px);
    }
    70% {
        transform: translate(-1px, 1px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes mail-zoom {
    0% {
        transform: scale(1);
    }
    35% {
        transform: scale(1.08);
    }
    70% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1);
    }
}

svg[data-symbol="arrow-north-east"] {
    transition: transform 1000ms ease-out;
}

a:hover svg[data-symbol="arrow-north-east"],
button:hover svg[data-symbol="arrow-north-east"],
.button:hover svg[data-symbol="arrow-north-east"],
.link:hover svg[data-symbol="arrow-north-east"],
a:hover img[data-symbol="arrow-north-east"],
button:hover img[data-symbol="arrow-north-east"],
.button:hover img[data-symbol="arrow-north-east"],
.link:hover img[data-symbol="arrow-north-east"] {
    animation: bounce-ne 0.35s ease-out;
}

/* Footer metadata navigation styles */
.footer-metadata-nav {
    margin-top: 20px;
}

.footer-metadata-nav ul.flex {
    display: flex;
    flex-wrap: wrap;
    font-weight: 500;
    column-gap: 15px; /* gap-x-15 */
    row-gap: 10px; /* gap-y-10 */
    list-style: none;
    margin: 0;
    padding: 0;
}