/* css/style.css */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1a1a1a; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #ffd700; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #e6c200; }

body, html {
    margin: 0; padding: 0; height: 100%;
    font-family: -apple-system, sans-serif;
    background: #e0e0e0; overflow-x: hidden; position: relative;
}
#map { height: 100vh; width: 100%; z-index: 1; }

.leaflet-container { cursor: default !important; }
.leaflet-interactive { cursor: pointer !important; }
.leaflet-tile-pane { filter: grayscale(100%) brightness(1.05) contrast(0.9); }
.leaflet-top { top: 60px !important; }

.asphlt-user-pin {
    background: #ffd700; border: 3px solid #1a1a1a; border-radius: 50%;
    color: #1a1a1a; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6);
}
.asphlt-user-pin svg { width: 18px; height: 18px; fill: currentColor; }

.clean-pin {
    width: 34px; height: 34px; background: #1a1a1a; border: 2px solid #ffd700;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.clean-pin svg {
    width: 18px; height: 18px; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

.pin-tuner svg { stroke: #ccc; }
.pin-wash svg { fill: #4ca3ff; stroke: none; }
.pin-spot svg { stroke: #ff4c4c; }
.pin-meetup svg { stroke: #ff9800; }

#top-nav {
    position: absolute; top: 0; left: 0; width: 100%;
    background: rgba(26,26,26,0.95); border-bottom: 2px solid #ffd700;
    z-index: 1001; text-align: center; padding: 12px 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
#top-nav span { color: #ffd700; font-size: 24px; font-weight: 900; letter-spacing: 2px; text-transform: lowercase; }

#hamburger-menu { position: absolute; left: 15px; top: 12px; font-size: 28px; color: #ffd700; cursor: pointer; line-height: 1; }
#sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 10002; }
#sidebar {
    position: fixed; top: 0; left: -260px; width: 260px; height: 100%;
    background: #1a1a1a; z-index: 10003; transition: 0.3s ease;
    border-right: 2px solid #ffd700; padding-top: 60px; box-sizing: border-box;
    box-shadow: 5px 0 25px rgba(0,0,0,0.8);
}
.sidebar-open { left: 0 !important; }
.close-sidebar { position: absolute; top: 10px; right: 15px; color: #888; font-size: 35px; cursor: pointer; line-height: 1; transition: 0.2s; }
.close-sidebar:hover { color: #ffd700; }
#sidebar h2 { color: #888; margin-top: 0; padding: 0 20px; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.sidebar-link { padding: 15px 20px; color: #eee; font-size: 15px; font-weight: bold; cursor: pointer; border-bottom: 1px solid #222; transition: 0.2s; display: flex; align-items: center; gap: 10px; }
.sidebar-link:hover { background: #222; color: #ffd700; }

#stats-panel { position: absolute; top: 60px; left: 15px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; }
.stat-box { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; background: rgba(26,26,26,0.85); padding: 6px 10px; border-radius: 4px; border: 1px solid #444; width: fit-content; display: flex; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); pointer-events: auto; }
.stat-box .hl { color: #ffd700; font-weight: bold; font-size: 12px; margin-left: 5px; margin-right: 3px; }

@media (max-width: 768px) {
    #stats-panel { background: rgba(26,26,26,0.85); padding: 8px 12px; border-radius: 6px; border: 1px solid #444; box-shadow: 0 4px 10px rgba(0,0,0,0.3); gap: 4px; }
    .stat-box { background: transparent; padding: 0; border: none; box-shadow: none; }
}

#bottom-dock { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; width: 90%; max-width: 500px; display: flex; flex-direction: column; gap: 8px; }
.action-row { display: flex; gap: 8px; justify-content: center; }

.bar-btn { background: #1a1a1a; color: white; border: 1px solid #333; padding: 10px 15px; border-radius: 30px; font-size: 13px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.4); font-weight: bold; flex: 1; text-align: center; }
.bar-btn:hover { border-color: #ffd700; color: #ffd700; }
.bar-btn.primary { background: #ffd700; color: #000; border-color: #ffd700; }
.bar-btn.primary:hover { background: #e6c200; color: #000; }

.notification-badge { position: absolute; top: -5px; right: -5px; background: #ff4c4c; color: white; font-size: 10px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 2px solid #1a1a1a; box-shadow: 0 2px 5px rgba(0,0,0,0.5); pointer-events: none; }

.filter-box { background: #1a1a1a; padding: 10px 15px; border-radius: 12px; border: 1px solid #333; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); box-sizing: border-box; width: 100%; }
.filter-title { color: #ffd700; font-size: 12px; font-weight: bold; text-align: center; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; }
.search-row { display: flex; gap: 10px; align-items: center; }
.search-row input[type="text"] { background: transparent; border: none; color: white; width: 100%; font-size: 14px; outline: none; }

.search-btn-small { background: transparent; color: #888; border: 1px solid #444; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.search-btn-small:hover { border-color: #ffd700; color: #ffd700; }
.search-btn-small svg { width: 16px; height: 16px; fill: currentColor; }

.brand-model-row { display: flex; gap: 8px; }
.brand-model-row select { flex: 1; background: #222; color: white; border: 1px solid #444; border-radius: 6px; padding: 6px; font-size: 12px; outline: none; }

.modal { display: none; position: fixed; top: 48%; left: 50%; transform: translate(-50%, -50%); background: #1a1a1a; padding: 20px; border-radius: 12px; border: 1px solid #ffd700; z-index: 2000; box-shadow: 0 10px 40px rgba(0,0,0,0.8); width: 92%; max-width: 420px; max-height: calc(100dvh - 160px); box-sizing: border-box; color: white; flex-direction: column; overflow: hidden; }
.modal form { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; margin: 0; width: 100%; }

.close-btn { position: absolute; top: 12px; right: 12px; color: #888; font-size: 24px; cursor: pointer; line-height: 28px; z-index: 9999; background: #222; border-radius: 50%; width: 30px; height: 30px; text-align: center; border: 1px solid #444; transition: 0.2s; flex-shrink: 0; }
.close-btn:hover { color: #ffd700; border-color: #ffd700; background: #333; }
.modal h2 { margin-top: 0; font-size: 18px; color: #ffd700; text-transform: uppercase; text-align: center; margin-bottom: 15px; padding: 0 25px; border-bottom: 1px solid #333; padding-bottom: 10px; flex-shrink: 0; }

.modal-body-scroll { overflow-y: auto; overflow-x: hidden; padding-right: 5px; margin-bottom: 10px; flex-grow: 1; min-height: 0; width: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; }

.input-field { width: 100%; margin-bottom: 10px; padding: 10px; box-sizing: border-box; background: #222; color: white; border: 1px solid #444; border-radius: 8px; font-size: 13px; flex-shrink: 0;}
.input-field:focus { border-color: #ffd700; outline: none; }

input[type="file"] { background: #333; padding: 8px; cursor: pointer; border: 1px dashed #ffd700; color: #aaa; flex-shrink: 0; }
input[type="file"]::file-selector-button { background: #ffd700; border: none; padding: 5px 10px; border-radius: 4px; font-weight: bold; cursor: pointer; margin-right: 10px; }

.row-2 { display: flex; gap: 8px; flex-shrink: 0; width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.row-2 > * { flex: 1; min-width: 0; margin-bottom: 0; }

select.input-field { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px; }

.btn-submit { width: 100%; padding: 12px; background: #ffd700; color: #000; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; font-size: 14px; flex-shrink: 0; }

.btn-delete { width: 80%; margin: 15px auto 0 auto; padding: 8px; background: transparent; color: #ff4c4c; border: 1px solid #ff4c4c; border-radius: 6px; font-weight: bold; font-size: 12px; cursor: pointer; text-align: center; box-sizing: border-box; flex-shrink: 0; transition: 0.2s; }
.btn-delete:hover { background: rgba(255, 76, 76, 0.1); color: #ff4c4c; }

.plz-search-box { display: flex; gap: 5px; margin-bottom: 15px; background: #333; padding: 10px; border-radius: 8px; flex-shrink: 0; }
.plz-search-box input { flex: 1; padding: 8px; background: #222; border: 1px solid #444; color: white; border-radius: 4px; font-size: 13px; }
.plz-search-box button { background: #444; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; }

.leaflet-popup-content-wrapper { background: #1a1a1a; color: #ccc; border: 1px solid #333; border-radius: 8px; font-size: 13px; }
.leaflet-popup-tip { background: #1a1a1a; }
.leaflet-control-zoom { border: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important; }

.result-item { background: #222; border: 1px solid #333; border-radius: 8px; padding: 12px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; }
.result-item:hover { border-color: #ffd700; background: #2a2a2a; }
.result-name { font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.result-dist { color: #ffd700; font-size: 12px; font-weight: bold; }
.result-cars { font-size: 12px; color: #aaa; }

.popup-btn { background:#ffd700; border:none; color:#000; padding:8px 12px; border-radius:6px; font-weight:bold; cursor:pointer; width:100%; transition:0.2s; margin-top: 10px; }
.popup-btn:hover { background:#e6c200; }

.modal-bg { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9998; }

.custom-dialog { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #1a1a1a; padding: 25px; border-radius: 12px; border: 1px solid #ffd700; z-index: 10010; width: 85%; max-width: 320px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.9); }
.custom-dialog h3 { color: #ffd700; margin-top: 0; font-size: 18px; text-transform: uppercase; }
.custom-dialog p { color: #ccc; font-size: 14px; margin-bottom: 20px; line-height: 1.5; }
.dialog-buttons { display: flex; gap: 10px; justify-content: center; }
.dialog-btn { flex: 1; padding: 10px; border-radius: 8px; font-weight: bold; cursor: pointer; border: none; font-size: 14px; }
.btn-yes { background: #ffd700; color: #000; }
.btn-no { background: transparent; border: 1px solid #ff4c4c; color: #ff4c4c; }

.lightbox-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 100%; max-width: 800px; text-align: center; flex-direction: column; align-items: center;}
.lightbox-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.lightbox-modal img { max-width: 90%; max-height: 80vh; object-fit: contain; border-radius: 12px; border: 2px solid #ffd700; background: #111; box-shadow: 0 10px 40px rgba(0,0,0,0.9); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 35px; color: #ffd700; cursor: pointer; user-select: none; padding: 15px; font-weight: bold; text-shadow: 0 2px 10px rgba(0,0,0,0.9); transition: 0.2s; z-index: 10001; }
.lightbox-nav:hover { color: #fff; transform: translateY(-50%) scale(1.1); }
.lightbox-prev { left: 0px; }
.lightbox-next { right: 0px; }
.lightbox-close { position: absolute; top: -45px; right: 20px; color: #ffd700; font-size: 40px; cursor: pointer; font-weight: bold; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.9); z-index: 10002;}

/* CI ANIMIERTE SANDUHR FÜR BILDER */
@keyframes ci-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.ci-spinner { width: 24px; height: 24px; border: 3px solid rgba(255, 215, 0, 0.2); border-top: 3px solid #ffd700; border-radius: 50%; animation: ci-spin 1s linear infinite; margin-bottom: 5px; }

#welcome-banner { display:none; position:absolute; top:15px; left:50%; transform:translateX(-50%); background:#ffd700; color:#000; padding:12px 20px; border-radius:8px; font-weight:bold; font-size:13px; z-index:9999; box-shadow:0 5px 15px rgba(0,0,0,0.5); text-align:center; width:80%; max-width:400px; }