/* Eulektro Ladestandort-Karte - eigenstaendiges, unter .eulektro-map-plugin
   gescoptes Stylesheet (kein Build-System, kein Tailwind). Farben/Fonts an
   packages/eulektro_site/Resources/Public/css/custom.css angelehnt
   (Primaerfarbe #21697c, Montserrat fuer Headlines/Buttons). */

/* Variablen auch auf .eulektro-map-overlay: die Modals werden per JS an
   document.body angehaengt und liegen damit AUSSERHALB von
   .eulektro-map-plugin — ohne diese Doppel-Definition sind alle var(--em-*)
   im Modal ungueltig und die betroffenen Deklarationen fallen komplett weg. */
.eulektro-map-plugin,
.eulektro-map-overlay {
    --em-primary: #21697c;
    --em-primary-dark: #14434f;
    --em-existing: #21697c;
    --em-planned: #7a7974;
    --em-suggestion: #f59e0b;
    --em-denied: #dc2626;
    /* Statusfarben der Standort-Pins (identisch zu Icons/pin-{available,busy,
       unavailable}.svg). Bewusst NICHT --em-suggestion (#f59e0b) fuer "busy":
       die Vorschlags-Pins sind bereits hell-amber, "busy" ist dunkler. */
    --em-status-available: #1a7f37;
    --em-status-busy: #b45309;
    --em-status-unavailable: #b3261e;
    /* Ring-Segmente der Standort-Pins (map.js PIN_COLORS, "Variante A Ring").
       Legende nutzt dieselben Werte. */
    --em-ring-available: #2e8b57;
    --em-ring-busy: #2f6fd0;
    --em-ring-unavailable: #d23b32;
    --em-ring-unknown: #9a9893;
    --em-border: #d9dde0;
    --em-bg: #f7f8f8;
    font-family: "Source Sans 3", sans-serif;
    color: #1a1a1a;
}

.eulektro-map-plugin {
    /* Go-Live Welle 1 (2026-09-25): 16-px-Seitenrand, das Plugin liegt ohne
       .container direkt auf der Seite - bei 375 px klebten Filter-Buttons,
       "Alle Standorte" und Filterbox an x=0. Inhaltsbreite am Desktop bleibt
       1280 px (max-width inkl. Rand). Oben/unten Luft zum Seitenkopf (H1-
       Sektion der Pipeline) und zum Footer. */
    max-width: calc(1280px + 2rem);
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.eulektro-map-plugin *,
.eulektro-map-overlay * {
    box-sizing: border-box;
}

/* --- Toolbar / Filter --- */
.eulektro-map-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.eulektro-map-filter,
.eulektro-map-btn {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--em-border);
    background: #fff;
    color: #333;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.eulektro-map-filter:hover,
.eulektro-map-btn:hover {
    background: #eef2f3;
}

.eulektro-map-filter.is-active {
    background: var(--em-primary);
    color: #fff;
    border-color: var(--em-primary);
}

.eulektro-map-filter:not(.is-active) .eulektro-map-filter__dot {
    opacity: 0.45;
}

.eulektro-map-filter__dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
}

.eulektro-map-filter__dot--existing { background: var(--em-existing); }
.eulektro-map-filter__dot--planned { background: var(--em-planned); }
.eulektro-map-filter__dot--suggestion { background: var(--em-suggestion); }
.eulektro-map-filter__dot--denied { background: var(--em-denied); }
.eulektro-map-filter__dot--available { background: var(--em-status-available); }
.eulektro-map-filter__dot--busy { background: var(--em-status-busy); }
.eulektro-map-filter__dot--unavailable { background: var(--em-status-unavailable); }

.eulektro-map-btn--propose {
    margin-left: auto;
    background: var(--em-primary);
    color: #fff;
    border-color: var(--em-primary);
}

.eulektro-map-btn--propose:hover {
    background: var(--em-primary-dark);
}

.eulektro-map-btn--propose.is-active {
    background: var(--em-suggestion);
    border-color: var(--em-suggestion);
}

.eulektro-map-hint {
    background: #fff7e6;
    border: 1px solid #f5d78e;
    color: #6b4b00;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 3px;
    margin: 0 0 0.75rem;
}

/* --- Karte --- */
.eulektro-map-canvas-wrap {
    position: relative;
}

.eulektro-map-canvas {
    width: 100%;
    height: min(70vh, 640px);
    min-height: 320px;
    background: var(--em-bg);
    border: 1px solid var(--em-border);
}

.eulektro-map-canvas.is-placing {
    cursor: crosshair;
}

.eulektro-map-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 248, 248, 0.92);
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 1rem;
}

/* --- Stats-Zeile (auch fuer eulektromap:mapStats-ViewHelper nutzbar) --- */
.eulektro-map-stats {
    margin: 0.75rem 0;
    font-size: 0.9rem;
    color: #444;
}

/* --- Standortliste (Suche / Filter / Sortierung) --- */
.eulektro-map-list {
    margin-top: 1.5rem;
}

.eulektro-map-list__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.eulektro-map-list__title {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--em-primary);
    margin: 0;
}

.eulektro-map-list__count {
    margin: 0;
    font-size: 0.85rem;
    color: #5a6166;
}

.eulektro-map-list__controls {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 0.6rem;
    align-items: end;
    padding: 0.9rem 1rem;
    background: var(--em-bg);
    border: 1px solid var(--em-border);
    border-radius: 4px;
}

.eulektro-map-list__field {
    display: block;
    min-width: 0;
}

.eulektro-map-list__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 0.25rem;
}

/* !important: gleiche Odoo-Reset-Problematik wie bei .eulektro-map-form
   (input/select global auf border:0/background:transparent gesetzt). */
.eulektro-map-list__field input[type="search"],
.eulektro-map-list__field select {
    display: block !important;
    width: 100% !important;
    height: 2.5rem !important;
    padding: 0.45rem 0.65rem !important;
    border: 1px solid var(--em-border) !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.eulektro-map-list__field select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 2rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a5257' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 12px 10px !important;
    cursor: pointer;
}

.eulektro-map-list__field input[type="search"]:focus,
.eulektro-map-list__field select:focus {
    outline: 2px solid var(--em-primary) !important;
    outline-offset: -1px;
}

.eulektro-map-list__reset {
    height: 2.5rem;
    white-space: nowrap;
}

.eulektro-map-list__hint,
.eulektro-map-list__message {
    font-size: 0.8rem;
    color: #5a6166;
    margin: 0.5rem 0 0;
}

.eulektro-map-list__message {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #333;
}

/* Fehlerzustand (API nicht erreichbar): gestalteter Hinweis + "Erneut
   versuchen" statt Roh-Fehlertext (Go-Live Welle 1, 2026-09-25). */
.eulektro-map-list__message--error:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: #eaf3f6;
    border: 1px solid #b7dbe4;
    border-left: 4px solid var(--em-primary);
    border-radius: 4px;
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #14434f;
}

.eulektro-map-list__retry {
    margin-left: auto;
    min-height: 44px;
}

.eulektro-map-list__items {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    border: 1px solid var(--em-border);
    border-radius: 4px;
    overflow: hidden;
}

.eulektro-map-list__more {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 0.75rem 0 0;
    padding: 0.6rem 1rem;
    border: 1.5px solid var(--em-primary);
    border-radius: 4px;
    background: #fff;
    color: var(--em-primary-dark);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.eulektro-map-list__more:hover {
    background: var(--em-bg);
}

.eulektro-map-list__more:focus-visible {
    outline: 3px solid var(--em-primary);
    outline-offset: 2px;
}

.eulektro-map-list__more[hidden] {
    display: none;
}

.eulektro-map-list__item {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--em-border);
    background: #fff;
}

.eulektro-map-list__item:last-child {
    border-bottom: none;
}

/* Kategorie-Streifen links, Farbe wie die Pins/Filter-Punkte. */
.eulektro-map-list__item--location { box-shadow: inset 4px 0 0 var(--em-existing); }
.eulektro-map-list__item--planned { box-shadow: inset 4px 0 0 var(--em-planned); }
.eulektro-map-list__item--suggestion { box-shadow: inset 4px 0 0 var(--em-suggestion); }
/* Standort im Bau: Orange des Bau-Pins (#c46a12). */
.eulektro-map-list__item--construction { box-shadow: inset 4px 0 0 #c46a12; }

.eulektro-map-list__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
    padding: 0.75rem 1rem 0.75rem 1.25rem !important;
    border: none !important;
    background: transparent !important;
    color: #1a1a1a !important;
    font: inherit !important;
    cursor: pointer;
    opacity: 1 !important;
}

.eulektro-map-list__main:hover {
    background: #eef2f3 !important;
}

.eulektro-map-list__main:focus-visible,
.eulektro-map-list__locate:focus-visible {
    outline: 2px solid var(--em-primary);
    outline-offset: -2px;
}

.eulektro-map-list__name {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--em-primary);
}

.eulektro-map-list__address {
    font-size: 0.85rem;
    color: #444;
}

.eulektro-map-list__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: #5a6166;
    margin-top: 0.15rem;
}

.eulektro-map-list__locate {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0.75rem 0 0 !important;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem !important;
    letter-spacing: 0.02em;
    padding: 0.45rem 0.7rem !important;
    border: 1px solid var(--em-primary) !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: var(--em-primary) !important;
    opacity: 1 !important;
    cursor: pointer;
    white-space: nowrap;
}

.eulektro-map-list__locate:hover {
    background: var(--em-primary) !important;
    color: #fff !important;
}

.eulektro-map-list__empty {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
    color: #5a6166;
    background: #fff;
}

@media (max-width: 900px) {
    .eulektro-map-list__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eulektro-map-list__field--search,
    .eulektro-map-list__reset {
        grid-column: 1 / -1;
    }
}

/* --- Legende --- */
.eulektro-map-legend {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--em-bg);
    border: 1px solid var(--em-border);
    border-radius: 4px;
}

.eulektro-map-legend__title {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1rem;
    color: var(--em-primary);
    margin: 0 0 0.5rem;
}

.eulektro-map-legend__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #444;
}

.eulektro-map-legend__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.eulektro-map-legend__list .eulektro-map-filter__dot {
    margin-top: 0.15rem;
}

/* Untergeordnete Legenden-Zeilen (Statusfarben der bestehenden Standorte). */
.eulektro-map-legend__sub {
    padding-left: 1.2rem;
}

/* --- Modal (Detail / Vorschlag / Verify-Banner) --- */
.eulektro-map-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.eulektro-map-modal {
    background: #fff;
    border-radius: 6px;
    max-width: 720px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: relative;
}

.eulektro-map-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #666;
}

.eulektro-map-modal h2 {
    font-family: "Montserrat", sans-serif;
    color: var(--em-primary);
    font-size: 1.4rem;
    margin: 0 0 0.75rem;
    padding-right: 2rem;
}

.eulektro-map-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #555;
}

.eulektro-map-availability {
    font-weight: 700;
}

.eulektro-map-availability--ok { color: #1a7f37; }
.eulektro-map-availability--none { color: var(--em-denied); }

/* Status-Badge im Detail-Modal (statusLabel der Public-Map-API).
   Aufbau wie .eulektro-map-alert--*: getoente Flaeche + dunkler Text derselben
   Farbfamilie, damit es sich neben Petrol (#21697c) nicht grell abhebt.
   Kontrast Text/Flaeche jeweils > 7:1 (WCAG AA verlangt 4.5:1).
   'unknown' ist bewusst neutral grau - es heisst "keine Aussage moeglich",
   NICHT "frei", und darf deshalb nie gruen wirken. */
.eulektro-map-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 0.2rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
}

.eulektro-map-status-badge::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.eulektro-map-status-badge--available    { background: #e9f7ef; border-color: #a8dfc0; color: #14532d; }
/* busy in der Blau-Familie des Pin-Rings (#2f6fd0), Text #1d4580 auf #eaf1fc ~ 8,9:1 */
.eulektro-map-status-badge--busy         { background: #eaf1fc; border-color: #b5cdf3; color: #1d4580; }
.eulektro-map-status-badge--unavailable  { background: #fdeceb; border-color: #f2b8b5; color: #7a1f1a; }
.eulektro-map-status-badge--unknown      { background: #f1f3f4; border-color: #d9dde0; color: #4a5257; }
/* Typ-Badges der Liste fuer geplante Standorte/Vorschlaege - gleiche
   Farbfamilien wie die Pins (grau / amber). */
.eulektro-map-status-badge--planned      { background: #f1f3f4; border-color: #d9dde0; color: #374151; }
.eulektro-map-status-badge--suggestion   { background: #fff7e6; border-color: #f5d78e; color: #6b4b00; }
/* "Im Bau": Orange-Familie des Bau-Pins, Text #7a3e06 auf #fff4e6 ~ 8:1 */
.eulektro-map-status-badge--construction { background: #fff4e6; border-color: #f0c08a; color: #7a3e06; }

/* Info-Modal fuer geplante Standorte / Standorte im Bau */
.eulektro-map-site-note {
    margin: 0.75rem 0 0;
    color: #374151;
}

/* Frischehinweis "Stand vor X Minuten" - dezent unter der Karte. */
.eulektro-map-freshness {
    font-size: 0.8rem;
    color: #5a6166;
    margin: 0.5rem 0 0;
}

.eulektro-map-freshness--map {
    margin: 0.5rem 0 0;
}

/* Betreiber-Kachel im Detail-Modal (Logo, optional als externer Link). */
.eulektro-map-operator {
    margin: 0 0 0.75rem;
}

.eulektro-map-operator img {
    display: block;
    max-width: min(220px, 100%);
    max-height: 52px;
    width: auto;
    height: auto;
}

.eulektro-map-operator__link {
    display: inline-block;
    border-radius: 3px;
}

.eulektro-map-operator__link:focus-visible {
    outline: 2px solid var(--em-primary);
    outline-offset: 2px;
}

/* Der Screenreader-Hinweis am externen Link muss auch im Modal greifen: die
   Modals haengen an document.body, also ausserhalb von .eulektro-map-plugin.
   Bootstrap liefert .visually-hidden global mit - diese Regel ist die
   Absicherung, falls das globale CSS mal nicht geladen ist. */
.eulektro-map-plugin .visually-hidden,
.eulektro-map-overlay .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Bilder-Carousel */
.eulektro-map-carousel {
    position: relative;
    margin-bottom: 1rem;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.eulektro-map-carousel__track {
    display: flex;
    transition: transform 0.25s ease;
}

.eulektro-map-carousel__slide {
    flex: 0 0 100%;
    height: 280px;
}

.eulektro-map-carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.eulektro-map-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
    border: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
}

.eulektro-map-carousel__nav--prev { left: 0.5rem; }
.eulektro-map-carousel__nav--next { right: 0.5rem; }

/* Key-Facts / Beschreibung */
.eulektro-map-keyfacts {
    background: var(--em-bg);
    border: 1px solid var(--em-border);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

.eulektro-map-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    white-space: pre-wrap;
}

/* Voting */
.eulektro-map-votes {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.eulektro-map-vote-btn {
    border: 1px solid var(--em-border);
    background: #fff;
    border-radius: 3px;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
}

.eulektro-map-vote-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.eulektro-map-vote-btn--positive:hover:not([disabled]) { border-color: #1a7f37; }
.eulektro-map-vote-btn--negative:hover:not([disabled]) { border-color: var(--em-denied); }

/* Kommentare */
.eulektro-map-comments h3,
.eulektro-map-modal h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    color: #333;
    margin: 1.25rem 0 0.5rem;
}

.eulektro-map-comment-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.eulektro-map-comment-list li {
    border-bottom: 1px solid var(--em-border);
    padding-bottom: 0.5rem;
}

.eulektro-map-comment-list .eulektro-map-comment__author {
    font-weight: 700;
    font-size: 0.9rem;
}

.eulektro-map-comment-list .eulektro-map-comment__date {
    color: #888;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.eulektro-map-comment-list .eulektro-map-comment__text {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
}

/* Formulare (Kommentar / Vorschlag).
   !important noetig: das Altsystem-CSS (web.assets_frontend.min.css, Odoo)
   resettet input/button global (border:0, background:transparent) und wuerde
   die Felder sonst unsichtbar machen. */
.eulektro-map-form {
    display: grid;
    gap: 0.75rem;
}

.eulektro-map-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #1a1a1a;
}

.eulektro-map-form input[type="text"],
.eulektro-map-form input[type="email"],
.eulektro-map-form textarea,
.eulektro-map-form input[type="file"] {
    display: block !important;
    width: 100% !important;
    padding: 0.55rem 0.65rem !important;
    border: 1px solid var(--em-border) !important;
    border-radius: 3px !important;
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    opacity: 1 !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
}

.eulektro-map-form input[type="text"]:focus,
.eulektro-map-form input[type="email"]:focus,
.eulektro-map-form textarea:focus {
    outline: 2px solid var(--em-primary) !important;
    outline-offset: -1px;
}

.eulektro-map-form textarea {
    resize: vertical;
    min-height: 5rem !important;
}

.eulektro-map-form .eulektro-map-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 400;
}

.eulektro-map-form .eulektro-map-privacy input {
    margin-top: 0.2rem;
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 auto;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    opacity: 1 !important;
    position: static !important;
}

.eulektro-map-form-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .eulektro-map-form-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.eulektro-map-submit {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem !important;
    display: inline-block !important;
    background: var(--em-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 3px !important;
    padding: 0.7rem 1.25rem !important;
    opacity: 1 !important;
    cursor: pointer;
    justify-self: start;
}

.eulektro-map-submit:hover {
    background: var(--em-primary-dark) !important;
    color: #fff !important;
}

.eulektro-map-submit[disabled] {
    opacity: 0.6 !important;
    cursor: not-allowed;
}

.eulektro-map-alert {
    padding: 0.6rem 0.85rem;
    border-radius: 3px;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.eulektro-map-alert--error {
    background: #fdeceb;
    border: 1px solid #f2b8b5;
    color: #7a1f1a;
}

.eulektro-map-alert--success {
    background: #e9f7ef;
    border: 1px solid #a8dfc0;
    color: #14532d;
}

.eulektro-map-alert--info {
    background: #eaf3f6;
    border: 1px solid #b7dbe4;
    color: #14434f;
}

.eulektro-map-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.eulektro-map-image-preview__item {
    position: relative;
    width: 84px;
    height: 84px;
}

.eulektro-map-image-preview__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.eulektro-map-image-preview__remove {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--em-denied);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

/* --- Ad-hoc-Preisvorschau im Standort-Modal (map.js "Ad-hoc-Preisvorschau") ---
   Farben: Blau-Familie der Legende (#2f6fd0 = aktuelle Stunde, #1d4580 =
   ausgewaehlt), Texte #4a5257/#1a1a1a (> 7:1). Die hellen Balken (#6d95dc)
   sind bewusst zurueckhaltend; jeder Wert steht zusaetzlich als Text in der
   Ablesezeile und im aria-label des Balkens. */
.eulektro-map-prices {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem 0.75rem;
    border: 1px solid var(--em-border);
    border-radius: 6px;
    background: #fff;
}

.eulektro-map-modal .eulektro-map-prices h3 {
    margin: 0 0 0.6rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.eulektro-map-prices__type {
    font-family: "Source Sans 3", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a5257;
}

.eulektro-map-prices__switch {
    display: inline-flex;
    border: 1px solid #b5cdf3;
    border-radius: 999px;
    padding: 2px;
    margin-bottom: 0.6rem;
    background: #f5f8fd;
}

.eulektro-map-prices__switch-btn {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    min-height: 2rem;
    font: 600 0.85rem/1.2 "Source Sans 3", sans-serif;
    color: #1d4580;
    cursor: pointer;
}

.eulektro-map-prices__switch-btn[aria-pressed="true"] {
    background: #2f6fd0;
    color: #fff;
}

.eulektro-map-prices__switch-btn:focus-visible,
.eulektro-map-prices__daybtn:focus-visible,
.eulektro-map-prices__bar:focus-visible {
    outline: 2px solid #1d4580;
    outline-offset: 2px;
}

.eulektro-map-prices__rows {
    margin: 0;
    display: grid;
    gap: 0.35rem;
}

.eulektro-map-prices__rows + .eulektro-map-prices__rows,
.eulektro-map-prices__epex + .eulektro-map-prices__rows {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #edf0f1;
}

.eulektro-map-prices__row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.1rem 1rem;
}

.eulektro-map-prices__row dt {
    font-size: 0.9rem;
    color: #4a5257;
    font-weight: 400;
}

.eulektro-map-prices__row dd {
    margin: 0;
    text-align: right;
}

.eulektro-map-prices__value {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1a1a1a;
}

/* Zusatzangaben (Zeitfenster, Deckel) ueber die volle Breite - mobil
   linksbuendig, damit lange Zeilen nicht rechts zerfasern. */
.eulektro-map-prices__row .eulektro-map-prices__detail {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    color: #4a5257;
}

@media (max-width: 640px) {
    .eulektro-map-prices__row .eulektro-map-prices__detail {
        text-align: left;
    }
}

.eulektro-map-prices__vat {
    font-weight: 400;
    font-size: 0.8rem;
    color: #4a5257;
}

/* Tagesnavigation + Diagramm (nur EPEX-Tarife) */
.eulektro-map-prices__epex {
    margin-top: 0.5rem;
}

.eulektro-map-prices__daynav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.eulektro-map-prices__daybtn {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--em-border);
    border-radius: 50%;
    background: #fff;
    color: #1d4580;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.eulektro-map-prices__daybtn:disabled {
    color: #9aa1a6;
    border-color: #edf0f1;
    cursor: not-allowed;
}

.eulektro-map-prices__day {
    font-weight: 700;
    font-size: 0.95rem;
}

.eulektro-map-prices__chart {
    position: relative;
    padding-top: 1rem;
}

.eulektro-map-prices__unit {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 0.7rem;
    color: #5a6166;
}

.eulektro-map-prices__plot {
    display: flex;
}

.eulektro-map-prices__yaxis {
    width: 2.4rem;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-right: 0.35rem;
    text-align: right;
    font-size: 0.7rem;
    line-height: 1;
    color: #5a6166;
}

.eulektro-map-prices__bars {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: 1px;
    border-bottom: 1px solid #5a6166;
}

.eulektro-map-prices__avg {
    position: absolute;
    left: 0;
    right: 0;
    border-bottom: 1px dashed #2f6fd0;
    opacity: 0.6;
    pointer-events: none;
}

.eulektro-map-prices__bar {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
    position: relative;
}

/* 96 Viertelstunden-Balken (Preis-Stream): ohne Luecke, sonst bleibt auf
   Mobilbreite kaum Balken uebrig. */
.eulektro-map-prices__bars.is-fine {
    gap: 0;
}

.eulektro-map-prices__bars.is-fine .eulektro-map-prices__bar-fill {
    border-radius: 1px 1px 0 0;
}

.eulektro-map-prices__bar-fill {
    display: block;
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: #6d95dc;
    transition: background-color 0.12s ease;
}

.eulektro-map-prices__bar.is-fallback .eulektro-map-prices__bar-fill {
    background: repeating-linear-gradient(135deg, #6d95dc 0 3px, #d6e3f8 3px 6px);
}

.eulektro-map-prices__bar.is-empty .eulektro-map-prices__bar-fill {
    background: transparent;
    border: 1px dashed #b5cdf3;
}

.eulektro-map-prices__bar.is-current .eulektro-map-prices__bar-fill {
    background: #2f6fd0;
}

/* "Jetzt"-Markierung ueber dem aktuellen Balken - nicht nur Farbe. */
.eulektro-map-prices__bar.is-current::before {
    content: "";
    position: absolute;
    top: -0.6rem;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top: 5px solid #2f6fd0;
}

.eulektro-map-prices__bar.is-selected .eulektro-map-prices__bar-fill,
.eulektro-map-prices__bar:hover .eulektro-map-prices__bar-fill {
    background: #1d4580;
}

.eulektro-map-prices__xaxis {
    display: flex;
    justify-content: space-between;
    margin-left: 2.4rem;
    padding-top: 0.25rem;
    font-size: 0.7rem;
    color: #5a6166;
}

.eulektro-map-prices__readout {
    margin: 0.5rem 0 0;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    background: var(--em-bg);
    font-size: 0.85rem;
    color: #4a5257;
}

.eulektro-map-prices__readout.is-active {
    justify-content: space-between;
    background: #eaf1fc;
    color: #1a1a1a;
}

.eulektro-map-prices__now {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.4rem;
    border-radius: 3px;
    background: #2f6fd0;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: 1px;
}

.eulektro-map-prices__note {
    margin: 0.5rem 0 0;
    padding: 1.25rem 1rem;
    border-radius: 4px;
    background: #eaf1fc;
    color: #1d4580;
    font-size: 0.85rem;
    text-align: center;
}

.eulektro-map-prices__skeleton {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 120px;
    margin: 1rem 0 0 2.4rem;
}

.eulektro-map-prices__skeleton span {
    flex: 1 1 0;
    background: #eaf1fc;
    border-radius: 2px 2px 0 0;
    animation: eulektro-map-prices-pulse 1.2s ease-in-out infinite;
}

.eulektro-map-prices__skeleton span:nth-child(3n)   { height: 55%; }
.eulektro-map-prices__skeleton span:nth-child(3n+1) { height: 75%; }
.eulektro-map-prices__skeleton span:nth-child(3n+2) { height: 40%; }

@keyframes eulektro-map-prices-pulse {
    50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .eulektro-map-prices__skeleton span { animation: none; }
    .eulektro-map-prices__bar-fill { transition: none; }
}

.eulektro-map-prices__disclaimer {
    margin: 0.75rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #4a5257;
}

/* --- Verify-Banner (Suggestion/Comment-Bestaetigung) --- */
.eulektro-map-verify-banner {
    margin-bottom: 0.75rem;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .eulektro-map-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .eulektro-map-btn--propose {
        margin-left: 0;
    }

    .eulektro-map-filter,
    .eulektro-map-btn {
        justify-content: center;
    }

    .eulektro-map-canvas {
        height: 60vh;
        height: 60dvh;
    }

    .eulektro-map-list__controls {
        grid-template-columns: 1fr;
    }

    /* 16px verhindert den automatischen iOS-Zoom beim Fokussieren */
    .eulektro-map-list__field input[type="search"],
    .eulektro-map-list__field select {
        font-size: 16px !important;
    }

    .eulektro-map-list__item {
        flex-direction: column;
    }

    .eulektro-map-list__locate {
        align-self: flex-start;
        margin: 0 0 0.75rem 1.25rem !important;
    }

    /* Modal mobil: fast Vollbild, innen scrollbar */
    .eulektro-map-overlay {
        padding: 0.5rem;
    }

    .eulektro-map-modal {
        padding: 1rem;
        max-height: 94vh;
        max-height: 94dvh;
    }

    .eulektro-map-modal h2 {
        font-size: 1.2rem;
    }

    /* 16px verhindert den automatischen iOS-Zoom beim Fokussieren */
    .eulektro-map-form input[type="text"],
    .eulektro-map-form input[type="email"],
    .eulektro-map-form textarea {
        font-size: 16px !important;
    }

    .eulektro-map-submit {
        width: 100% !important;
        text-align: center;
    }
}

/* Zwei-Klick-Einwilligung: Overlay ueber der (noch leeren) Kartenflaeche,
   bis der Besucher "Karte laden" klickt (map.js gateGoogleMaps). */
.eulektro-map-consent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--em-bg);
}
.eulektro-map-consent__box {
    max-width: 34rem;
    padding: 1.5rem;
    text-align: center;
    background: #fff;
    border: 1px solid var(--em-border);
    border-radius: 6px;
}
.eulektro-map-consent__title {
    margin: 0 0 .5rem;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--em-primary);
}
.eulektro-map-consent__note {
    margin: .75rem 0 0;
    font-size: .875rem;
    color: #555;
}

/* ===========================================================================
   Ux2-Angleichung (UX-Audit 2026-10)
   ===========================================================================
   Die Karte stammt aus der Zeit vor dem Ux2-System: Versal-Buttons in 11px,
   Versal-Ueberschriften in Petrol, Tap-Ziele um 30px. Hier auf die Werte
   des Sitepackages (Tokens --eul-* aus site.css, global auf :root) gebracht:
   Buttons wie eul-btn (Satzschrift, normal geschrieben, 44px hoch, eckig),
   Ueberschriften wie die H2 der Seiten. Filter: aktiv gefuellt, inaktiv als
   Outline - der Zustand ist ohne Farbsehen am Fuellgrad erkennbar und per
   aria-pressed (map.js) vorlesbar. */
.eulektro-map-filter,
.eulektro-map-btn,
.eulektro-map-submit,
.eulektro-map-list__locate {
    font-family: var(--eul-font-body);
    font-weight: var(--eul-weight-normal);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--eul-text-base) !important;
    line-height: var(--eul-leading-tight);
    min-height: var(--eul-tap-min);
    padding: 0.45rem 1.1rem !important;
    border-radius: var(--eul-radius-button) !important;
}
.eulektro-map-filter {
    background: var(--eul-surface);
    border: var(--eul-border) solid var(--eul-brand);
    color: var(--eul-brand);
}
.eulektro-map-filter:hover {
    background: var(--eul-surface-sand-50);
}
.eulektro-map-filter.is-active {
    background: var(--eul-brand);
    border-color: var(--eul-brand);
    color: var(--eul-on-brand);
}
.eulektro-map-filter.is-active:hover {
    background: var(--eul-brand-hover);
}
/* Haekchen vor aktiven Filtern: Zustand nicht nur ueber die Flaeche. */
.eulektro-map-filter.is-active::before {
    content: "";
    inline-size: 0.35rem;
    block-size: 0.7rem;
    margin-inline-end: 0.15rem;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translateY(-2px) rotate(45deg);
}
.eulektro-map-filter:not(.is-active) .eulektro-map-filter__dot {
    opacity: 1;
}
.eulektro-map-filter.is-active .eulektro-map-filter__dot {
    box-shadow: 0 0 0 2px var(--eul-on-brand);
}
.eulektro-map-btn {
    background: var(--eul-surface);
    border: var(--eul-border) solid var(--eul-brand);
    color: var(--eul-brand);
}
.eulektro-map-btn:hover {
    background: var(--eul-brand);
    color: var(--eul-on-brand);
}
.eulektro-map-btn--propose {
    background: var(--eul-brand);
    border-color: var(--eul-brand);
    color: var(--eul-on-brand);
}
.eulektro-map-btn--propose:hover {
    background: var(--eul-brand-hover);
}
.eulektro-map-list__locate {
    padding: 0.35rem 0.9rem !important;
}

.eulektro-map-list__title,
.eulektro-map-legend__title {
    font-family: var(--eul-font-heading);
    font-weight: var(--eul-weight-bold);
    text-transform: none;
    color: var(--eul-ink);
    line-height: var(--eul-leading-tight);
}
.eulektro-map-list__title {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2rem);
}

/* Legende kompakter: kleinerer Titel, engere Zeilen. */
.eulektro-map-legend {
    padding: 0.75rem 1rem;
    background: var(--eul-surface-sand-50);
    border-color: var(--eul-line);
    border-radius: var(--eul-radius);
}
.eulektro-map-legend__title {
    font-size: var(--eul-text-md);
    margin: 0 0 0.4rem;
}
.eulektro-map-legend__list {
    gap: 0.25rem 1.5rem;
    color: var(--eul-ink);
}

/* ===========================================================================
   Legende unter der Karte (Pin-Redesign "Variante A Ring", 2026-10)
   ===========================================================================
   Zwei Gruppen: Ring-Farben (Status je Ladepunkt) und Pin-Typen (eigener
   Standort / Partner / geplant / im Bau). Die Pin-Symbole setzt map.js aus
   demselben Generator wie die Karte ein. Text in --eul-ink auf Weiss/Sand-50
   (> 12:1); die Farbflaechen sind Zusatz, die Bedeutung steht immer im Text. */
.eulektro-map-key {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--eul-line, #d9dde0);
    border-radius: var(--eul-radius, 4px);
    background: var(--eul-surface, #fff);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.5rem;
    font-size: 0.875rem;
    color: var(--eul-ink, #1a1a1a);
}
.eulektro-map-key__title {
    /* Ueberschrift fuer Screenreader/Struktur, optisch klein als Label. */
    font-family: var(--eul-font-body, inherit);
    font-size: 0.875rem;
    font-weight: var(--eul-weight-bold, 700);
    text-transform: none;
    color: var(--eul-ink, #1a1a1a);
    margin: 0;
}
.eulektro-map-key__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}
.eulektro-map-key__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
}
.eulektro-map-key__list li[hidden] {
    display: none;
}
.eulektro-map-key__swatch {
    inline-size: 1.1rem;
    block-size: 0.35rem;
    border-radius: 2px;
    flex: 0 0 auto;
}
.eulektro-map-key__swatch--available { background: var(--em-ring-available); }
.eulektro-map-key__swatch--busy { background: var(--em-ring-busy); }
.eulektro-map-key__swatch--unavailable { background: var(--em-ring-unavailable); }
.eulektro-map-key__swatch--unknown { background: var(--em-ring-unknown); }
.eulektro-map-key__icon {
    display: inline-flex;
    inline-size: 22px;
    block-size: 22px;
    flex: 0 0 auto;
}
.eulektro-map-key__icon img {
    display: block;
    inline-size: 22px;
    block-size: 22px;
}
/* Parkplatz-Legende (nur sichtbar, solange die Parkplatzkarte gezeigt wird).
   Mini-Kacheln mit derselben Fuellung/Randart wie die Plaetze auf der Karte. */
.eulektro-map-key__list[hidden] {
    display: none;
}
.eulektro-map-key__group {
    font-weight: var(--eul-weight-bold, 700);
}
.eulektro-map-key__tile {
    inline-size: 1.1rem;
    block-size: 0.8rem;
    border-radius: 3px;
    border: 1.5px solid transparent;
    box-sizing: border-box;
    flex: 0 0 auto;
}
.eulektro-map-key__tile--available { background: rgba(46, 139, 87, 0.42); border-color: #2e8b57; }
.eulektro-map-key__tile--charging { background: rgba(47, 111, 208, 0.3); border-color: #2f6fd0; }
.eulektro-map-key__tile--suspended { background: rgba(217, 154, 11, 0.3); border-color: #d99a0b; }
.eulektro-map-key__tile--unavailable { background: rgba(210, 59, 50, 0.38); border-color: #d23b32; }
.eulektro-map-key__tile--unassigned { background: transparent; border: 1.5px dashed #9a9893; }

.eulektro-map-key__note {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.8rem;
    color: #5a6166; /* 6,4:1 auf Weiss */
}

/* ===========================================================================
   CTA "Flaeche anbieten" unter der Standortliste
   ===========================================================================
   Nutzt eul-cta / eul-btn aus dem Sitepackage; hier nur der Kasten. */
.eulektro-map-cta {
    margin-top: 2.5rem;
    padding: 2rem 1rem;
    border-radius: var(--eul-radius, 4px);
}
.eulektro-map-cta .eul-cta p {
    margin: 0;
}
.eulektro-map-cta__title {
    font-family: var(--eul-font-heading, "Montserrat", sans-serif);
    font-weight: var(--eul-weight-bold, 700);
    font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.75rem);
    line-height: var(--eul-leading-tight, 1.2);
    color: var(--eul-ink, #1a1a1a);
    margin: 0;
}

/* Suchraum E (Konzessionsvergabe Bremen, Los E) - violett, um nicht mit
   "belegt" (blau) zu kollidieren. */
.eulektro-map-filter__dot--suchraum {
    background: rgba(122, 79, 196, 0.25);
    border: 2px solid #5b34a3;
}

.eulektro-map-key__area {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 0.4rem;
    vertical-align: -3px;
    border-radius: 50%;
    background: rgba(122, 79, 196, 0.25);
    border: 2px solid #5b34a3;
}

.eulektro-map-suchraum-info {
    max-width: 240px;
    font-size: 14px;
    line-height: 1.4;
    color: #1a1a1a;
}

/* Filter-Chips (Variante A, 2026-10-13): Pin-Symbol wie auf der Karte, Name,
   Anzahl. Aktiv = hell gefuellt mit Petrol-Rand, inaktiv = grau. */
.eulektro-map-filter {
    font-family: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    min-height: 44px;
    padding: 0.4rem 0.9rem 0.4rem 0.55rem;
    border: 1.5px solid #c9cdc6;
    border-radius: 999px;
    background: #fff;
    color: #4a4f4c;
    gap: 0.5rem;
}

.eulektro-map-filter:hover {
    background: #f1f4f4;
}

.eulektro-map-filter.is-active {
    background: #e3eff2;
    border-color: var(--em-primary);
    color: #17424e;
}

.eulektro-map-filter:focus-visible {
    outline: 3px solid var(--em-primary);
    outline-offset: 2px;
}

.eulektro-map-filter__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.eulektro-map-filter__icon img {
    width: 24px;
    height: 24px;
    display: block;
}

.eulektro-map-filter__icon--area {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(122, 79, 196, 0.25);
    border: 2px solid #5b34a3;
}

.eulektro-map-filter:not(.is-active) .eulektro-map-filter__icon {
    opacity: 0.45;
    filter: grayscale(1);
}

.eulektro-map-filter__count {
    min-width: 1.6rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--em-primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.eulektro-map-filter:not(.is-active) .eulektro-map-filter__count {
    background: #c9cdc6;
    color: #2c2c2a;
}

.eulektro-map-filter__count[hidden] {
    display: none;
}

@media (max-width: 600px) {
    .eulektro-map-filter {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

/* ===========================================================================
   Parkplatzkarte (ab Zoom 19): Overlay-Elemente ueber den Platz-Polygonen
   ===========================================================================
   Position/Groesse/Drehung setzt map.js (ParkingOverlay.draw) in Pixeln. */
.eulektro-map-parking {
    position: absolute;
    left: 0;
    top: 0;
}
.eulektro-map-parking [hidden] {
    display: none !important;
}
.eulektro-map-parking__car {
    position: absolute;
    display: block;
    max-width: none;
    margin: 0;
    pointer-events: none;
    user-select: none;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.45));
}
.eulektro-map-parking__car--toggle {
    pointer-events: auto;
    cursor: pointer;
}
.eulektro-map-parking__soc {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    border: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    transform: translate(-50%, -50%);
    padding: 0.15em 0.4em;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.82);
    color: #fff;
    font-family: var(--eul-font-body, system-ui, sans-serif);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    pointer-events: auto;
    user-select: none;
}
.eulektro-map-parking__label {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--eul-font-body, system-ui, sans-serif);
    font-weight: 700;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 0 2px rgba(15, 23, 42, 0.9), 0 0 4px rgba(15, 23, 42, 0.65);
}
.eulektro-map-parking__charger {
    position: absolute;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    margin: 0;
    padding: 2px;
    min-width: 0;
    min-height: 0;
    line-height: 0;
    appearance: none;
    border: 2px solid #21697c;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.eulektro-map-parking__charger:hover {
    transform: scale(1.12);
}
.eulektro-map-parking__charger:focus-visible {
    outline: 3px solid #f59e0b;
    outline-offset: 2px;
}