diff --git a/VBB-Live-Maps-BG/app.js b/VBB-Live-Maps-BG/app.js
new file mode 100644
index 0000000..ecfbce4
--- /dev/null
+++ b/VBB-Live-Maps-BG/app.js
@@ -0,0 +1,207 @@
+// ====================
+// Leaflet-Karte Setup
+// ====================
+const map = L.map('map').setView([52.52, 13.405], 13);
+
+L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ maxZoom: 19,
+ attribution: '© OpenStreetMap contributors'
+}).addTo(map);
+
+const vehiclesLayer = L.layerGroup().addTo(map);
+const vehicleMarkers = {};
+
+const lineColors = {
+ 'S45': '#CD9C53', 'S46': '#CD9C53', 'S47': '#CD9C53', 'S6': '#CD9C53', 'S65': '#CD9C53', 'S66': '#CD9C53',
+ 'S42': '#CB6418',
+ 'S4': '#AD5937', 'S41': '#AD5937',
+ 'U5': '#7E5330', 'U55': '#7E5330',
+ 'S9': '#992746', 'S95': '#992746', 'S96': '#992746',
+ 'U12': ['#7DAD4C', '#DA421E'],
+ 'U2': '#DA421E',
+ 'S3': '#EB7405', 'S5': '#EB7405', 'S55': '#EB7405', 'S56': '#EB7405',
+ 'U9': '#F3791D',
+ 'S3-wannsee': '#F0D722', 'U4': '#F0D722',
+ 'U1': '#7DAD4C', 'U15': '#7DAD4C',
+ 'S8': '#66AA22', 'S85': '#66AA22', 'S86': '#66AA22',
+ 'S2': '#007734', 'S21': '#007734', 'S25': '#007734', 'S26': '#007734',
+ 'U3': '#16683D', 'U35': '#16683D',
+ 'S3-charlottenburg': '#009BD5', 'U7': '#009BD5',
+ 'S10': '#0082C4', 'S19': '#0082C4',
+ 'S3-berlin-schoenefeld': '#0066AD', 'S35': '#0066AD', 'S36': '#0066AD',
+ 'U8': '#224F86',
+ 'S7': '#816DA6', 'S75': '#816DA6', 'S76': '#816DA6',
+ 'U6': '#8C6DAB',
+ 'S1': '#DA6BA2', 'S15': '#DA6BA2', 'S16': '#DA6BA2', 'U0': '#DA6BA2',
+ 'U10': '#808080', 'U11': '#808080'
+};
+
+const symbols = {
+ bus: '🚌',
+ tram: '🚎',
+ subway: '🚉',
+ suburban: '🚋',
+ regional: '🚆',
+ express: '🚄',
+ longDistance: '🚅'
+};
+
+function getLineColor(lineName, product) {
+ if(lineName === 'U12') return null;
+
+ if(lineName.startsWith('S3 ')) {
+ if(lineName.toLowerCase().includes('wannsee')) return lineColors['S3-wannsee'];
+ if(lineName.toLowerCase().includes('charlottenburg') || lineName.toLowerCase().includes('schönefeld')) return lineColors['S3-berlin-schoenefeld'];
+ return lineColors['S3'];
+ }
+
+ if(lineColors[lineName]) return lineColors[lineName];
+ if(product === 'suburban') return '#CD9C53';
+ if(product === 'subway') return '#7DAD4C';
+ return '#666';
+}
+
+function createDivIcon(vehicle) {
+ const product = vehicle.line?.product;
+ const lineName = vehicle.line?.name || '?';
+ const symbol = symbols[product] || '❓';
+
+ if(lineName === 'U12') {
+ const iconHtml = `
+
+
+
+ ${symbol}
+
+
+ U12
+
+
+
${symbol}
+
${lineName}
+
+ Typ: ${vehicle.line?.product || 'unbekannt'}
+ Richtung: ${vehicle.direction || 'unbekannt'}
+ `)
+ .addTo(vehiclesLayer);
+ vehicleMarkers[id] = marker;
+ }
+ });
+
+ Object.keys(vehicleMarkers).forEach(id => {
+ if (!newIds.has(id)) {
+ vehiclesLayer.removeLayer(vehicleMarkers[id]);
+ delete vehicleMarkers[id];
+ }
+ });
+ } catch (e) {
+ console.error('Fehler beim Laden der Fahrzeuge:', e);
+ }
+}
+
+function locateAndLoad() {
+ if (!navigator.geolocation) {
+ alert('Geolocation nicht unterstützt');
+ loadVehicles();
+ return;
+ }
+ navigator.geolocation.getCurrentPosition(pos => {
+ const { latitude, longitude } = pos.coords;
+ map.setView([latitude, longitude], 14);
+
+ const locationIcon = L.divIcon({
+ className: 'user-location-icon',
+ iconSize: [12, 12],
+ iconAnchor: [6, 6]
+ });
+
+ L.marker([latitude, longitude], { icon: locationIcon }).addTo(map);
+ loadVehicles();
+ }, () => {
+ map.setView([52.52, 13.405], 13);
+ loadVehicles();
+ });
+}
+
+locateAndLoad();
+setInterval(loadVehicles, 610);
+map.on('moveend', loadVehicles);
+
+// ====================
+// Uhr unten rechts
+// ====================
+const ssTimeEl = document.getElementById('ss-time');
+const ssDateEl = document.getElementById('ss-date');
+
+function updateClock() {
+ const now = new Date();
+ ssTimeEl.textContent = now.toLocaleTimeString('de-DE', { hour12: false });
+ ssDateEl.textContent = now.toLocaleDateString('de-DE', {
+ weekday: 'long',
+ year: 'numeric',
+ month: 'long',
+ day: '2-digit'
+ });
+}
+
+updateClock();
+setInterval(updateClock, 1000);
diff --git a/VBB-Live-Maps-BG/index.html b/VBB-Live-Maps-BG/index.html
new file mode 100644
index 0000000..5e7fd13
--- /dev/null
+++ b/VBB-Live-Maps-BG/index.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+ VBB Live Tracker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/VBB-Live-Maps-BG/style.css b/VBB-Live-Maps-BG/style.css
new file mode 100644
index 0000000..1fad88e
--- /dev/null
+++ b/VBB-Live-Maps-BG/style.css
@@ -0,0 +1,67 @@
+/* ==================== */
+/* Grundlayout */
+/* ==================== */
+html, body, #map {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+.leaflet-marker-icon {
+ transition: transform 1s linear;
+}
+
+.line-label {
+ padding: 2px 6px;
+ border-radius: 3px;
+ font-weight: bold;
+ font-size: 10px;
+ display: inline-block;
+ color: white;
+ margin-top: 2px;
+ user-select: none;
+ font-family: Arial, sans-serif;
+}
+
+.user-location-icon {
+ background-color: #007bff;
+ border: 2px solid white;
+ border-radius: 50%;
+ width: 12px;
+ height: 12px;
+ box-shadow: 0 0 6px rgba(0, 123, 255, 0.6);
+}
+
+/* ==================== */
+/* Uhr unten rechts */
+/* ==================== */
+#clock {
+ position: fixed;
+ right: 40px;
+ bottom: 40px;
+ z-index: 9999; /* immer über der Karte */
+ text-align: right;
+ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
+ color: #ffffff;
+ text-shadow: 0 0 8px rgba(0,0,0,0.7);
+ user-select: none;
+
+ /* Hintergrund-Box */
+ background: rgba(0, 0, 0, 0.6); /* dunkel + durchsichtig */
+ padding: 16px 24px; /* Innenabstand */
+ border-radius: 12px; /* abgerundete Ecken */
+ backdrop-filter: blur(4px); /* leichter Glas-Effekt (falls Browser unterstützt) */
+}
+
+
+#clock .time {
+ font-size: clamp(42px, 6vw, 72px);
+ line-height: 1.1;
+ font-weight: 700;
+}
+
+#clock .date {
+ font-size: clamp(18px, 3vw, 28px);
+ line-height: 1.2;
+ opacity: 0.9;
+}