/* Stile für Startplatz-Ampel Karte (integriert) */
.spa-map-wrapper {
    position: relative;
    margin-bottom: 1rem;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
    overflow: hidden;
}
.spa-map-container {
    width: 100%;
    height: 450px; /* Höhe der Karte */
    min-height: 360px;
    z-index: 1;
}

/* Such-UI (über der Karte positioniert) */
.spa-map-searchbar {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 280px; /* Kompakte fixe Breite */
    z-index: 10;
    display: flex;
    align-items: center;
    pointer-events: none; 
}

/* Wrapper-Trick: Input als Container */
.spa-map-search-input {
    pointer-events: auto;
    width: 100%; 
    padding: 0.4rem 2.5rem 0.4rem 1rem; /* Platz rechts für Button */
    border: 1px solid rgba(0,0,0,0.15);
    /* WICHTIG: !important erzwingt die Rundung gegen das Theme */
    border-radius: 30px !important; 
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-size: 0.9rem;
    outline: none;
    transition: box-shadow 0.2s;
    height: 40px; /* Etwas höher für bessere Touch-Targets */
    box-sizing: border-box;
    /* Reset möglicher Theme-Styles */
    margin: 0;
    line-height: normal;
}
.spa-map-search-input:focus {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    border-color: #0ea5e9;
}

/* Button Reset - Aggressiv gegen Theme-Styles */
.spa-map-search-btn {
    pointer-events: auto;
    position: absolute;
    right: 0; 
    top: 0;
    width: 40px; /* Passend zur Input-Höhe */
    height: 40px;
    
    /* WICHTIG: Überschreibt Theme-Button-Styles */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0; /* Text verstecken */
    z-index: 20; /* Über dem Input */
}

/* Hover-Status komplett neutralisieren */
.spa-map-search-btn:hover,
.spa-map-search-btn:focus,
.spa-map-search-btn:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

/* Lupe via ::after */
.spa-map-search-btn::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    /* Robustes SVG Encoding */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.7;
}

/* Suchergebnisse (unter der Suchleiste) */
.spa-map-results {
    position: absolute;
    top: calc(10px + 3.8rem); /* Dynamisch passend zur neuen Höhe */
    left: 10px;
    z-index: 10;
    max-height: 180px;
    overflow: auto;
    background: #fff;
    border: 1px solid #eee;
    border-radius: .5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    width: 280px; 
    max-width: 100%;
}
.spa-map-search-item {
    padding: .5rem .75rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.spa-map-search-item:hover,
.spa-map-search-item:focus {
    background: #f5f5f5;
    outline: none;
}
}

/* =========================================
   Neue Styles für Wind-Pfeil Erweiterung
   ========================================= */

/* WICHTIG: Selektoren mit .spa-map-container gescoped, 
   damit die Detail-Ansicht (die die gleichen Klassen nutzt) nicht beeinflusst wird.
*/

/* Container für das Icon (Positionierungs-Kontext nur in der Karte) */
.spa-map-container .spa-map-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Das bestehende Sektor-Icon (rotiert) */
.spa-map-container .spa-sector-icon {
transform: none !important;
transform-origin: center center;
    position: relative;
    z-index: 2; /* Über dem Pfeil */
    pointer-events: none;
}

/* Der neue Wind-Pfeil (rotiert unabhängig) */
.spa-map-container .spa-wind-arrow {
    position: absolute;
    /* Zentrierung als Startbasis */
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    
    /* Transformations-Logik:
       1. translate(-50%, -50%): Zentriert den Pfeil exakt mittig über dem Marker
       2. rotate(var(--spa-wind-rot)): Dreht das Koordinatensystem in Windrichtung
       3. translateY(-18px): Schiebt den Pfeil im rotierten System nach "Oben" (Außen auf den Rand)
       4. rotate(180deg): Dreht den Pfeil selbst um, damit er zur Mitte zeigt (statt nach außen)
    */
    transform: translate(-50%, -50%) rotate(var(--spa-wind-rot, 0deg)) translateY(-18px) rotate(180deg);
    
    transform-origin: center center;
    z-index: 1; /* Unter dem Kreis */
    pointer-events: none;
}



/* =========================================
   Neue Styles für Wind-Pfeil Erweiterung (Gescoped auf Map)
   ========================================= */

/* Container für das Icon (Positionierungs-Kontext nur in der Karte) */
.spa-map-container .spa-map-icon {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Das bestehende Sektor-Icon (rotiert) */
.spa-map-container .spa-sector-icon {
    transform: rotate(var(--spa-rot, 0deg));
    transform-origin: center center;
    z-index: 2; /* Über dem Pfeil */
}

/* Der neue Wind-Pfeil (rotiert unabhängig) */
/* Der neue Wind-Pfeil */
.spa-map-container .spa-wind-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    
    /* Entkoppelungs-Logik:
       1. translate: Zentrieren
       2. rotate(...): Wir nehmen die Windrichtung (--spa-wind-rot) und ZIEHEN die Startplatz-Rotation (--spa-rot) ab.
          Dadurch wird die Drehung des Eltern-Containers neutralisiert.
       3. translateY(-18px): Nach außen schieben (Orbit)
       4. rotate(180deg): Pfeilspitze zur Mitte drehen
    */
    transform: translate(-50%, -50%) rotate(calc(var(--spa-wind-rot, 0deg) - var(--spa-rot, 0deg))) translateY(-18px) rotate(180deg);
    
    transform-origin: center center;
    z-index: 1;
    pointer-events: none;
}
}

/* =========================================
   Farbmodifikatoren für Wind-Pfeile
   ========================================= */

/* Default Farbe (Slate) */
.spa-map-container .spa-wind-arrow path,
.spa-map-container .spa-wind-arrow polygon {
    fill: #334155;
}

/* Alert (Rot) */
.spa-map-container .spa-wind-arrow.spa-alert path,
.spa-map-container .spa-wind-arrow.spa-alert polygon {
    fill: #dc2626;
}

/* Success (Grün) */
.spa-map-container .spa-wind-arrow.spa-success path,
.spa-map-container .spa-wind-arrow.spa-success polygon {
    fill: #16a34a;
}

/* Stile für Startplatz-Ampel Karte (integriert) */

/* Desktop-only: Karte füllt die restliche Viewport-Höhe bis zum unteren Rand
   - greift nur, wenn JS die Klasse .spa-is-desktop setzt (=> echtes 2-Spalten-Layout aktiv)
   - Mobile bleibt unverändert (weiterhin fixe Höhe aus .spa-map-container) */
.spa-wrap.spa-is-desktop .spa-map-wrapper {
    margin-bottom: 0; /* verhindert Extra-Scroll, wenn die Karte exakt bis unten reicht */
}

.spa-wrap.spa-is-desktop .spa-map-container {
    height: var(--spa-map-height, 450px);
    min-height: 0; /* erlaubt echtes "fill remaining height" */
}