/* Widget iframe Styles */

/* CSS-Variablen für Farbschemas */
:root {
    --widget-title: #667eea; /* Rückwärtskompatibilität */
    --widget-list-title: #667eea; /* Titel in der Liste */
    --widget-map-title: #667eea; /* Titel im Map-Popup */
    --widget-text: #333333;
    --widget-link: #667eea;
    --widget-list-bg: #ffffff;
    --widget-map-bg: #ffffff;
    --widget-active-bg: #e7f3ff;
    --widget-search-button: #667eea;
    --widget-border: #ddd;
    --widget-header-bg: #f8f9fa;
    
    /* Neue erweiterte Farben */
    --widget-item-normal: #ffffff;
    --widget-item-hover: #f0f2ff;
    --widget-popup-text: #333333;
    --widget-popup-link: #667eea;
}

/* Dark Theme */
body[data-color-scheme="dark"] {
    --widget-title: #60a5fa;
    --widget-text: #ffffff;
    --widget-link: #60a5fa;
    --widget-list-bg: #1f2937;
    --widget-map-bg: #1f2937;
    --widget-active-bg: #374151;
    --widget-search-button: #4f46e5;
    --widget-border: #374151;
    --widget-header-bg: #111827;
}

/* High Contrast Theme */
body[data-color-scheme="highcontrast"] {
    --widget-title: #000000;
    --widget-text: #000000;
    --widget-link: #000000;
    --widget-list-bg: #ffffff;
    --widget-map-bg: #ffffff;
    --widget-active-bg: #f0f0f0;
    --widget-search-button: #000000;
    --widget-border: #000000;
    --widget-header-bg: #ffffff;
}

/* Barrierefreiheit-Modus - Hohe Kontraste und bessere Lesbarkeit */
body.accessibility-mode {
    font-size: 18px;
    /* Diese Variablen werden per JavaScript gesetzt, aber als Fallback auch hier */
    --widget-title: #000000 !important;
    --widget-text: #000000 !important;
    --widget-link: #0000EE !important;
    --widget-list-bg: #FFFFFF !important;
    --widget-map-bg: #FFFFFF !important;
    --widget-active-bg: #FFFF00 !important;
    --widget-search-button: #000000 !important;
    --widget-border: #000000 !important;
    --widget-header-bg: #FFFFFF !important;
}

/* Erzwinge Farben für alle Elemente im Barrierefreiheit-Modus */
body.accessibility-mode * {
    background-color: transparent !important;
}

body.accessibility-mode .maplocator-widget {
    background: #FFFFFF !important;
}

/* Verstärkte Rahmen und Abstände */
body.accessibility-mode .maplocator-location {
    padding: 15px;
    border: 2px solid #000000 !important;
    margin-bottom: 8px;
    background: #FFFFFF !important;
}

body.accessibility-mode .maplocator-location:hover {
    background: #F0F0F0 !important;
    border-width: 3px !important;
}

body.accessibility-mode .maplocator-location.active {
    background: #FFFF00 !important; /* Gelber Hintergrund für aktive Elemente */
    border: 3px solid #000000 !important;
}

/* Titel und Text in Schwarz für maximalen Kontrast */
body.accessibility-mode .maplocator-location h4 {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 20px !important;
}

body.accessibility-mode .maplocator-location p {
    color: #000000 !important;
    font-weight: 500 !important;
}

/* Links in Standard-Blau mit Unterstreichung */
body.accessibility-mode .maplocator-location a {
    color: #0000EE !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

body.accessibility-mode .maplocator-location a:visited {
    color: #551A8B !important; /* Standard-Lila für besuchte Links */
}

body.accessibility-mode .maplocator-location a:hover {
    background: #FFFF00 !important;
    color: #000000 !important;
    padding: 2px 4px;
}

/* Buttons mit hohem Kontrast */
body.accessibility-mode button {
    font-size: 16px;
    padding: 12px 16px;
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    font-weight: 600 !important;

}

body.accessibility-mode button:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
}

body.accessibility-mode button:focus {
    outline: 3px solid #FF0000 !important;
    outline-offset: 2px !important;
}

/* Input-Felder bleiben weiß */
body.accessibility-mode input {
    font-size: 16px;
    padding: 12px;
    background: #FFFFFF !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

/* Liste bleibt weiß */
body.accessibility-mode .maplocator-list {
    background: #FFFFFF !important;
}

body.accessibility-mode input:focus {
    outline: 3px solid #FF0000 !important;
    outline-offset: 2px !important;
}

/* Header mit hohem Kontrast */
body.accessibility-mode .maplocator-header {
    
    background: #FFFFFF !important;
    border-bottom: 3px solid #000000 !important;
}

/* Map-Popups mit hohem Kontrast */
body.accessibility-mode .leaflet-popup-content-wrapper {
    background: #FFFFFF !important;
    border: 2px solid #000000 !important;
}

body.accessibility-mode .leaflet-popup-content-wrapper h4 {
    color: #000000 !important;
}

body.accessibility-mode .leaflet-popup-content-wrapper p {
    color: #000000 !important;
}

body.accessibility-mode .leaflet-popup-content-wrapper a {
    color: #0000EE !important;
    text-decoration: underline !important;
}

/* Fokus-Indikatoren verstärken */
body.accessibility-mode *:focus {
    outline: 3px solid #FF0000 !important;
    outline-offset: 2px !important;
}

/* Barrierefreiheit-Toggle Button - IMMER sichtbar */
.accessibility-toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--widget-search-button);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    display: flex !important; /* Immer sichtbar */
    align-items: center;
    gap: 5px;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.accessibility-toggle-btn:hover {
    background: var(--widget-search-hover);
    transform: scale(1.05);
    color: #000000 !important;
}

.accessibility-toggle-btn:hover span,
.accessibility-toggle-btn:hover i {
    color: #000000 !important;
}

.accessibility-toggle-btn:focus {
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* Barrierefreiheit-Toggle im aktiven Modus */
body.accessibility-mode .accessibility-toggle-btn {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    font-weight: bold;
}

body.accessibility-mode .accessibility-toggle-btn:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
    border-color: #000000 !important;
}

/* DEBUG: CSS-Variablen Test */
.debug-css-vars {
    --test-list-title: var(--widget-list-title);
    --test-text: var(--widget-text);
    --test-link: var(--widget-link);
}

div#mlw-list i.fas.fa-phone {font-size: 14px;}





/* Basis-Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    height: 100vh;
    overflow: hidden;
    background: #f8f9fa;
    margin: 0;
    padding: 8px;
    box-sizing: border-box;
}

.maplocator-widget {
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--widget-list-bg);
}

.maplocator-header {
    padding: 15px 30px 15px 10px;
    background: var(--widget-header-bg);
    border-bottom: 1px solid var(--widget-border);
    flex-shrink: 0;
    position: relative;
}

.maplocator-header input,
.maplocator-header button {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var(--widget-border);
    margin-right: 5px;
}

.maplocator-header input {
    background: var(--widget-list-bg);
    color: var(--widget-text);
}

.maplocator-header button {
    margin-top: 5px;
    background: var(--widget-search-button);
    color: white;
    cursor: pointer;
}

.maplocator-header button:hover {
    background: var(--widget-search-button) !important;
    opacity: 0.9;
}

.maplocator-header button:active {
    background: var(--widget-search-button) !important;
    opacity: 0.8;
}

.maplocator-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.maplocator-list {
    width: 35%;
    overflow-y: auto;
    padding: 10px;
    background: var(--widget-list-bg);
    border-right: 1px solid var(--widget-border);
}

.maplocator-map {
    width: 65%;
    height: 100%;
    background: #eee;
}

.maplocator-location {
    width: 100%;
    word-wrap: break-word;
    overflow-x: hidden;
    padding: 10px;
    border-bottom: 1px solid var(--widget-border);
    cursor: pointer;
    transition: background-color 0.2s;
    background: var(--widget-item-normal);
}

.maplocator-location:hover {
    background: var(--widget-item-hover);
}

.maplocator-location.active {
    background: var(--widget-active-bg);
}

.maplocator-location h4 {
    color: var(--widget-list-title, var(--widget-title)) !important;
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 600;
}

.maplocator-location p {
    color: var(--widget-text) !important;
    margin: 0;

}

.maplocator-location a {
    color: var(--widget-link) !important;
    text-decoration: none;
    font-weight: 500;
}

/* Neue Klassen für Widget-Elemente ohne Inline-Styles */
.mlw-address {
    font-size: 14px;
    margin: 0;
    color: var(--widget-text) !important;
}

.mlw-description {
    font-size: 13px;
    margin: 8px 0 0 0;
    color: var(--widget-text) !important;
    
}

.mlw-phone {
    margin-left: 10px;
}

.maplocator-load-more {
    text-align: center;
    padding: 10px;
}

/* Map Popup Styles mit spezifischen Klassen */
.leaflet-popup-content-wrapper {
    background: var(--widget-map-bg) !important;
    border-radius: 8px;
    max-width: 300px;
}

.mlw-popup-content {
    min-width: 250px;
    max-width: 300px;
    
}

.mlw-popup-title {
    font-size: 16px;
    color: var(--widget-map-title, var(--widget-title)) !important;
    margin: 0 0 4px 0 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1;
}

.mlw-popup-address {
    color: var(--widget-popup-text, var(--widget-text, #333333)) !important;
    margin: 0 0 4px 0 !important;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.mlw-popup-description {
    color: var(--widget-popup-text, var(--widget-text, #333333)) !important;
    margin: 0 0 8px 0 !important;
    font-size: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    white-space: pre-wrap;
    
}

.mlw-popup-links {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    align-items: center;
}

.mlw-popup-link {
    color: var(--widget-popup-link, var(--widget-link, #667eea)) !important;
    font-size: 12px;
    text-decoration: underline;
    font-weight: bold;
    white-space: nowrap;
}

.mlw-popup-link:hover {
    text-decoration: underline !important;
}

.mlw-popup-phone i {
    margin-right: 4px;
}

.maplocator-load-more button {
    background: var(--widget-search-button);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
}

.maplocator-load-more button:hover {
    background: var(--widget-search-button);
    opacity: 0.9;
}

/* Barrierefreiheit für "Mehr laden" Button */
body.accessibility-mode .maplocator-load-more button {
    background: #000000 !important;
    color: #FFFFFF !important;
    border: 2px solid #000000 !important;
    font-weight: 600 !important;
    padding: 12px 24px;
}

body.accessibility-mode .maplocator-load-more button:hover {
    background: #FFFFFF !important;
    color: #000000 !important;
}

a.mlw-phone i {
    margin-right: 5px;
}

p.mlw-description {
    padding-bottom: 5px;
}



/* Responsive Design */
@media (max-width: 768px) {
    .maplocator-body {
        flex-direction: column;
    }
    
    .maplocator-list {
        width: 100%;
        max-height: 300px;
        padding: 0px!important;
    }
    
    .maplocator-map {
        width: 100%;
        min-height: 300px;
    }
    
    /* Kompakter Barrierefreiheit-Button auf Mobilgeräten */
    .accessibility-toggle-btn {
        padding: 6px 10px;
        font-size: 20px;
    }
    
    .accessibility-toggle-btn span {
        display: none; /* Text ausblenden, nur Icon */
    }
.maplocator-header input,
.maplocator-header button { 
    margin-right: 2px;
}

.accessibility-toggle-btn {
 
    border-radius: 5px;
    padding: 5px 5px;
}

}
@media (max-width: 460px) {
input#mlw-search {
    width: 63%!important;
}
/* body.accessibility-mode button {
    width: fit-content;
    left: 3%;
    position: sticky;
} */

button#accessibility-toggle
 {
    position: fixed;
    right: 3%;
    top: 2%;
}
body.accessibility-mode .maplocator-header {
    padding-top: 50px;
}


}