/* ===== MAP-STYLES.CSS ===== */
/* Alle Map- und Leaflet-bezogenen Styles */

/* ===== MAP CONTAINER & LAYOUT ===== */
.map-container-block {
    background: white;
    border-radius: 12px;
    padding: 10px 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.map-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    aspect-ratio: 1/1;
}

.map-placeholder {
    height: 400px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.map-placeholder-content {
    text-align: center;
    color: white;
}

.map-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.9;
}

.map-text {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
}

.map-subtext {
    font-size: 16px;
    opacity: 0.8;
    max-width: 300px;
}

#actualMap {
    width: 100%;
    height: 400px;
    border-radius: 8px;
}

/* ===== MAP CONTROLS ===== */
.map-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    overflow: visible;
    position: relative;
    z-index: 1000;
}

.map-control-btn {
    padding: 10px 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-control-btn:hover {
    background: #e9ecef;
    transform: translateY(-1px);
}

.primary-btn {
    background: #007bff;
    color: white;
    border-color: #007bff;
}

.primary-btn:hover {
    background: #0056b3;
}

/* ===== DROPDOWN MENU ===== */
.map-dropdown {
    position: relative;
    display: inline-block;
    z-index: 10001 !important;
}

.dropdown-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
}

.dropdown-arrow {
    font-size: 10px;
    transition: transform 0.2s;
    transform: rotate(180deg);
}

.map-dropdown.open .dropdown-arrow {
    transform: rotate(0deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 99999 !important;
    min-width: 160px;
    margin-bottom: 4px;
    overflow: hidden;
}

.dropdown-item {
    width: 100%;
    padding: 10px 16px;
    background: white;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f1f3f4;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: #f8f9fa;
}

/* ===== CUSTOM MARKERS ===== */
.user-location-marker {
    position: relative;
    width: 30px;
    height: 30px;
}

.user-location-marker .center {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #2196f3;
    border: 3px solid white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.user-location-marker .pulse {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(33, 150, 243, 0.3);
    border-radius: 50%;
    animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.poi-marker {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.poi-marker:hover {
    transform: rotate(-45deg) scale(1.1);
}

.poi-marker .poi-icon {
    transform: rotate(45deg);
    font-size: 18px;
}

.poi-marker-numbered {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    border: 2px solid white;
    cursor: pointer;
    transition: transform 0.2s;
}

.poi-marker-numbered:hover {
    transform: scale(1.1);
}

/* ===== CATEGORY COLORS ===== */
:root {
    --color-sehenswuerdigkeiten: #e74c3c;
    --color-essen-trinken: #f39c12;
    --color-natur-parks: #27ae60;
    --color-sport-freizeit: #3498db;
    --color-familie-kinder: #9b59b6;
    --color-einkaufen: #1abc9c;
}

.poi-marker.sehenswuerdigkeiten { background: var(--color-sehenswuerdigkeiten); }
.poi-marker.essen_trinken { background: var(--color-essen-trinken); }
.poi-marker.natur_parks { background: var(--color-natur-parks); }
.poi-marker.sport_freizeit { background: var(--color-sport-freizeit); }
.poi-marker.familie_kinder { background: var(--color-familie-kinder); }
.poi-marker.einkaufen { background: var(--color-einkaufen); }

/* ===== ROUTING STYLES ===== */
.destination-marker {
    position: relative;
    text-align: center;
}

.marker-pin {
    width: 30px;
    height: 30px;
    background: #ff5252;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    margin: 0 auto;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.marker-label {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ===== MAP INTERACTION INDICATORS ===== */
.map-interaction-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 11px;
    z-index: 1000;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 180px;
}

.map-interaction-indicator.enabled {
    background: rgba(76, 175, 80, 0.95);
    color: white;
    border-color: #4CAF50;
}

.map-interaction-indicator.routing {
    background: rgba(255, 152, 0, 0.95);
    color: white;
    border-color: #FF9800;
}

.indicator-content {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.indicator-text {
    font-weight: 500;
}

/* ===== FULLSCREEN MODE ===== */
.fullscreen .map-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
}

.fullscreen #actualMap {
    height: 100vh;
    border-radius: 0;
}

.fullscreen .map-controls {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    .map-controls {
        gap: 6px;
        padding: 6px;
    }

    .map-control-btn {
        padding: 8px 10px;
        font-size: 14px;
        min-width: 40px;
    }

    .dropdown-btn {
        padding: 8px 12px;
    }

    .dropdown-menu {
        min-width: 140px;
        font-size: 13px;
    }

    .dropdown-item {
        padding: 8px 12px;
    }

    .map-interaction-indicator {
        font-size: 10px;
        padding: 6px 10px;
        max-width: 160px;
    }

    .map-icon {
        font-size: 48px;
    }

    .map-text {
        font-size: 20px;
    }

    .map-subtext {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .map-controls {
        gap: 4px;
        padding: 4px;
    }

    .map-control-btn {
        padding: 6px 8px;
        font-size: 13px;
        min-width: 36px;
    }

    .dropdown-btn {
        padding: 6px 10px;
    }

    .dropdown-menu {
        left: -10px;
        min-width: 120px;
    }
}

/* ===== ACCESSIBILITY ===== */
.map-control-btn:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.dropdown-item:focus {
    background: #e9ecef;
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .poi-marker,
    .poi-marker-numbered,
    .map-control-btn {
        transition: none !important;
    }
    
    .user-location-marker .pulse {
        animation: none !important;
    }
}

/* ===== VERBESSERTE TOGGLE INTERACTION BUTTON STYLES ===== */
/* Basis Toggle Button */
#toggleInteractionBtn {
    position: relative;
    transition: all 0.3s ease;
    font-weight: 600;
    border: 2px solid transparent;
}

/* INAKTIV - Navigation ausgeschaltet (🔒) */
#toggleInteractionBtn.inactive {
    background: #6c757d;
    color: white;
    border-color: #6c757d;
    box-shadow: 0 2px 4px rgba(108, 117, 125, 0.3);
}

#toggleInteractionBtn.inactive:hover {
    background: #5a6268;
    border-color: #5a6268;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.4);
}

/* AKTIV - Navigation eingeschaltet (🔓) */
#toggleInteractionBtn.active {
    background: #28a745;
    color: white;
    border-color: #28a745;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    animation: subtle-glow 2s ease-in-out infinite alternate;
}

#toggleInteractionBtn.active:hover {
    background: #218838;
    border-color: #218838;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
}

/* ROUTING AKTIV - Spezialzustand (🚶) */
#toggleInteractionBtn.routing {
    background: linear-gradient(45deg, #ff6b35, #ff8c42);
    color: white;
    border-color: #ff6b35;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
    animation: routing-pulse 1.5s ease-in-out infinite;
}

#toggleInteractionBtn.routing:hover {
    background: linear-gradient(45deg, #e55a2b, #e67d37);
    border-color: #e55a2b;
}

/* Subtle Glow Animation für aktiven Zustand */
@keyframes subtle-glow {
    0% {
        box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    }
    100% {
        box-shadow: 0 2px 8px rgba(40, 167, 69, 0.5), 0 0 12px rgba(40, 167, 69, 0.2);
    }
}

/* Routing Pulse Animation */
@keyframes routing-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 6px rgba(255, 107, 53, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(255, 107, 53, 0.6), 0 0 16px rgba(255, 107, 53, 0.3);
    }
}

/* Status-Indikator (kleiner Punkt) */
#toggleInteractionBtn::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid white;
    transition: all 0.3s ease;
}

#toggleInteractionBtn.inactive::after {
    background: #dc3545; /* Rot für inaktiv */
}

#toggleInteractionBtn.active::after {
    background: #28a745; /* Grün für aktiv */
}

#toggleInteractionBtn.routing::after {
    background: #ff6b35; /* Orange für routing */
    animation: status-blink 1s ease-in-out infinite alternate;
}

@keyframes status-blink {
    0% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    #toggleInteractionBtn::after {
        width: 6px;
        height: 6px;
        top: -2px;
        right: -2px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    #toggleInteractionBtn {
        animation: none !important;
    }
    
    #toggleInteractionBtn::after {
        animation: none !important;
    }
    
    @keyframes subtle-glow,
    @keyframes routing-pulse,
    @keyframes status-blink {
        0%, 100% { 
            /* Statische Styles für reduced motion */
        }
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    #toggleInteractionBtn.inactive {
        background: #000;
        border: 3px solid #666;
        color: #fff;
    }
    
    #toggleInteractionBtn.active {
        background: #000;
        border: 3px solid #0f0;
        color: #fff;
    }
    
    #toggleInteractionBtn.routing {
        background: #000;
        border: 3px solid #f60;
        color: #fff;
    }
}

/* ===== ECHTE VOLLBILD HÖHE FÜR MOBILE ===== */
.fullscreen .map-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border-radius: 0;
    
    /* NEUE LÖSUNG: Dynamic Viewport Height */
    height: 100dvh; /* Moderne Browser - echte verfügbare Höhe */
    height: 100vh;  /* Fallback für ältere Browser */
    
    /* WebKit Mobile Fix */
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

.fullscreen #actualMap {
    /* ECHTE VOLLBILD HÖHE */
    height: 100dvh !important; /* Moderne Browser */
    height: 100vh !important;  /* Fallback */
    
    /* WebKit Mobile Fix */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    
    border-radius: 0;
    width: 100vw;
    
    /* Sicherstellen dass es wirklich die ganze Höhe nutzt */
    max-height: none;
}

/* HTML/Body Basis für Mobile Viewport Fix */
html {
    height: -webkit-fill-available;
}

body.fullscreen-active {
    height: -webkit-fill-available;
    overflow: hidden; /* Scrollen verhindern im Vollbild */
}

/* ===== SAFE AREA SUPPORT (iPhone Notch etc.) ===== */
.fullscreen .map-wrapper {
    /* iPhone Safe Area berücksichtigen */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.fullscreen #actualMap {
    /* Map füllt den verfügbaren Platz nach Safe Area */
    height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); /* Fallback */
}

/* ===== CONTROLS ANPASSUNG FÜR MOBILE VOLLBILD ===== */
.fullscreen .map-controls {
    position: fixed;
    bottom: env(safe-area-inset-bottom, 20px); /* Safe Area oder 20px */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    
    /* Besser sichtbar auf verschiedenen Hintergründen */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===== MOBILE OPTIMIERUNGEN ===== */
@media (max-width: 768px) {
    .fullscreen .map-controls {
        bottom: calc(env(safe-area-inset-bottom, 10px) + 10px);
        padding: 6px 10px;
        gap: 6px;
    }
    
    .fullscreen .map-control-btn {
        padding: 8px 10px;
        font-size: 14px;
        min-width: 40px;
    }
    
    /* Vollbild Button Text anpassen - wird per JavaScript gesteuert */
    .fullscreen .map-control-btn[data-fullscreen="true"] {
        background: #dc3545; /* Rot für "Verlassen" */
        color: white;
        border-color: #dc3545;
    }
}

/* ===== LANDSCAPE MOBILE OPTIMIERUNG ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .fullscreen .map-controls {
        bottom: calc(env(safe-area-inset-bottom, 5px) + 5px);
        padding: 4px 8px;
    }
    
    .fullscreen .map-control-btn {
        padding: 6px 8px;
        font-size: 12px;
        min-width: 36px;
    }
}

/* ===== JAVASCRIPT VIEWPORT HEIGHT FIX (FALLBACK) ===== */
/* Für Browser die dvh noch nicht unterstützen */
.js-viewport-fix .fullscreen .map-wrapper,
.js-viewport-fix .fullscreen #actualMap {
    height: var(--vh-mobile, 100vh);
}

/* ===== ANDROID CHROME SPEZIAL-FIX ===== */
@supports (height: 100dvh) {
    /* Wenn dvh unterstützt wird, verwende es bevorzugt */
    .fullscreen .map-wrapper,
    .fullscreen #actualMap {
        height: 100dvh !important;
        min-height: unset;
    }
}

/* ===== IOS SAFARI SPEZIAL-FIX ===== */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari spezifische Anpassungen */
    .fullscreen .map-wrapper {
        height: -webkit-fill-available;
    }
    
    .fullscreen #actualMap {
        height: -webkit-fill-available;
    }
}

/* ===== VERHINDERT ZOOM BEI DOUBLE-TAP ===== */
.fullscreen #actualMap {
    touch-action: pan-x pan-y;
}

/* ===== IMPROVED TRANSITION ===== */
.map-wrapper {
    transition: all 0.3s ease-in-out;
}

.fullscreen .map-wrapper {
    transition: all 0.3s ease-in-out;
}

/* Hauptindikator für Position Tracking */
.map-tracking-indicator {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(76, 175, 80, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    z-index: 1000;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
    min-width: 140px;
    justify-content: center;
}

.map-tracking-indicator.active {
    display: flex;
    animation: slideInFromLeft 0.4s ease-out;
}

.map-tracking-indicator .tracking-icon {
    font-size: 14px;
    animation: pulse-icon 2s ease-in-out infinite;
}

.map-tracking-indicator .tracking-text {
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Mode-spezifische Farben */
.map-tracking-indicator.routing {
    background: rgba(255, 152, 0, 0.95);
    border-color: rgba(255, 152, 0, 0.3);
}

.map-tracking-indicator.auto-search {
    background: rgba(33, 150, 243, 0.95);
    border-color: rgba(33, 150, 243, 0.3);
}

.map-tracking-indicator.tracking {
    background: rgba(76, 175, 80, 0.95);
    border-color: rgba(76, 175, 80, 0.3);
}

/* Animations */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pulse-icon {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.15);
        opacity: 0.8;
    }
}

/* Enhanced User Location Marker */
.user-location-marker {
    position: relative;
    width: 30px;
    height: 30px;
}

.user-location-marker .pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.3);
    transform: translate(-50%, -50%);
    animation: user-pulse 2s ease-out infinite;
}

.user-location-marker .center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    background: #2196F3;
    border: 3px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 2;
    transition: all 0.3s ease;
}

/* Enhanced tracking states for user marker */
.user-location-marker.tracking .pulse {
    animation: user-pulse-tracking 1.8s ease-out infinite;
}

.user-location-marker.tracking .center {
    background: #4CAF50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 0 rgba(76, 175, 80, 0.7);
    animation: center-glow-tracking 1.8s ease-in-out infinite;
}

.user-location-marker.routing .pulse {
    animation: user-pulse-routing 1.5s ease-out infinite;
}

.user-location-marker.routing .center {
    background: #FF9800;
    animation: center-glow-routing 1.5s ease-in-out infinite;
}

.user-location-marker.auto-search .pulse {
    animation: user-pulse-auto-search 2.2s ease-out infinite;
}

.user-location-marker.auto-search .center {
    background: #2196F3;
    animation: center-glow-auto-search 2.2s ease-in-out infinite;
}

/* Pulse animations for different modes */
@keyframes user-pulse {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

@keyframes user-pulse-tracking {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.4);
        background: rgba(76, 175, 80, 0.4);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
        background: rgba(76, 175, 80, 0.1);
    }
}

@keyframes user-pulse-routing {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
        background: rgba(255, 152, 0, 0.5);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.2);
        background: rgba(255, 152, 0, 0.1);
    }
}

@keyframes user-pulse-auto-search {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
        background: rgba(33, 150, 243, 0.4);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.8);
        background: rgba(33, 150, 243, 0.1);
    }
}

/* Center glow animations */
@keyframes center-glow-tracking {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    50% { 
        box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 8px rgba(76, 175, 80, 0);
    }
}

@keyframes center-glow-routing {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 0 rgba(255, 152, 0, 0.7);
    }
    50% { 
        box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 6px rgba(255, 152, 0, 0);
    }
}

@keyframes center-glow-auto-search {
    0%, 100% { 
        box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 0 rgba(33, 150, 243, 0.7);
    }
    50% { 
        box-shadow: 0 2px 8px rgba(0,0,0,0.3), 0 0 0 10px rgba(33, 150, 243, 0);
    }
}

/* Map Container Enhanced States */
.map-container-block {
    transition: all 0.3s ease;
    position: relative;
}

.map-container-block.tracking {
    border-left: 4px solid #4CAF50;
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.05) 0%, transparent 100%);
}

.map-container-block.routing {
    border-left: 4px solid #FF9800;
    background: linear-gradient(90deg, rgba(255, 152, 0, 0.05) 0%, transparent 100%);
}

.map-container-block.auto-search {
    border-left: 4px solid #2196F3;
    background: linear-gradient(90deg, rgba(33, 150, 243, 0.05) 0%, transparent 100%);
}

/* Section title indicators */
.map-container-block.tracking .section-title::after {
    content: " 📍";
    color: #4CAF50;
    animation: title-pulse 2s ease-in-out infinite;
}

.map-container-block.routing .section-title::after {
    content: " 🚶";
    color: #FF9800;
    animation: title-pulse 1.5s ease-in-out infinite;
}

.map-container-block.auto-search .section-title::after {
    content: " 🔄";
    color: #2196F3;
    animation: title-pulse 2.2s ease-in-out infinite;
}

@keyframes title-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Map Controls Enhanced */
.map-controls {
    position: relative;
    transition: all 0.3s ease;
}

.map-controls[data-tracking-mode]::before {
    position: absolute;
    top: -30px;
    left: 0;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.95);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    white-space: nowrap;
    z-index: 100;
}

.map-controls[data-tracking-mode="tracking"]::before {
    content: "📍 Live-Tracking aktiv";
    color: #2E7D32;
    border-color: rgba(76, 175, 80, 0.3);
}

/*
.map-controls[data-tracking-mode="routing"]::before {
    content: "🚶 Navigation aktiv";
    color: #F57700;
    border-color: rgba(255, 152, 0, 0.3);
}
*/

.map-controls[data-tracking-mode="auto-search"]::before {
    content: "🔄 Auto-Suche aktiv";
    color: #1976D2;
    border-color: rgba(33, 150, 243, 0.3);
}

/* Manual Location Indicator */
.map-container-block.manual-location {
    border-left: 4px solid #9C27B0;
    background: linear-gradient(90deg, rgba(156, 39, 176, 0.05) 0%, transparent 100%);
}

.map-container-block.manual-location .section-title::after {
    content: " 📌";
    color: #9C27B0;
}

/* Responsive Design */
@media (max-width: 480px) {
    .map-tracking-indicator {
        font-size: 10px;
        padding: 6px 10px;
        top: 5px;
        left: 5px;
        min-width: 120px;
        gap: 6px;
    }
    
    .map-tracking-indicator .tracking-icon {
        font-size: 12px;
    }
    
    .map-controls[data-tracking-mode]::before {
        font-size: 9px;
        top: -25px;
        padding: 3px 8px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .map-tracking-indicator {
        border-width: 3px;
        font-weight: 700;
    }
    
    .user-location-marker .center {
        border-width: 4px;
    }
    
    .map-container-block.tracking,
    .map-container-block.routing,
    .map-container-block.auto-search {
        border-left-width: 6px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .map-tracking-indicator,
    .user-location-marker .pulse,
    .user-location-marker .center {
        animation: none;
    }
    
    .map-tracking-indicator.active {
        animation: none;
        transform: translateX(0);
    }
}