From 05bae700ecd9a29f6abbaa1c24636340f102ad89 Mon Sep 17 00:00:00 2001
From: Serverlele30 <46974281+Serverlele30@users.noreply.github.com>
Date: Mon, 31 Aug 2026 11:52:20 +0200
Subject: [PATCH] Add files via upload

---
 js/tripalarm.js | 29 +++++++++++++++++++++++++++++
 styles.css      | 27 ++++++++++++++++++++++-----
 2 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/js/tripalarm.js b/js/tripalarm.js
index 39270ab..446bf7c 100644
--- a/js/tripalarm.js
+++ b/js/tripalarm.js
@@ -198,9 +198,37 @@ const TripAlarm = (() => {
     `;
     document.body.appendChild(banner);
     banner.querySelector('#trip-alarm-banner__cancel').addEventListener('click', clear);
+
+    // Position hängt vom tatsächlich gerenderten Header ab (unterscheidet
+    // sich zwischen Mobile/Desktop und wird nicht über CSS-Breakpoint-Werte
+    // geraten, sondern - wie schon bei der Live-Karte - direkt gemessen),
+    // damit das Banner den Header/die Suche nie verdeckt, egal auf welcher
+    // Displaygröße oder welchem Tab (z.B. auch über der jetzt display-breiten
+    // Live-Karte) es gerade erscheint.
+    window.addEventListener('resize', schedulePositionBanner);
+    window.addEventListener('orientationchange', schedulePositionBanner);
+
     return banner;
   }
 
+  let positionScheduled = false;
+  function schedulePositionBanner() {
+    if (positionScheduled) return;
+    positionScheduled = true;
+    requestAnimationFrame(() => {
+      positionScheduled = false;
+      positionBanner();
+    });
+  }
+
+  function positionBanner() {
+    const banner = document.getElementById('trip-alarm-banner');
+    if (!banner) return;
+    const header = document.querySelector('.app-header');
+    const headerBottom = header ? header.getBoundingClientRect().bottom : 0;
+    banner.style.top = `${Math.max(12, Math.round(headerBottom + 8))}px`;
+  }
+
   function renderBanner(stopsRemaining) {
     if (!alarm) return;
     const banner = ensureBanner();
@@ -209,6 +237,7 @@ const TripAlarm = (() => {
     textEl.textContent = stopsRemaining == null
       ? `Fahrtalarm gesetzt für ${alarm.targetName}`
       : `${line}Fahrtalarm: noch ${stopsRemaining} Station${stopsRemaining === 1 ? '' : 'en'} bis ${alarm.targetName}`;
+    positionBanner();
     banner.classList.add('is-visible');
   }
 
diff --git a/styles.css b/styles.css
index 70819d5..ab42240 100644
--- a/styles.css
+++ b/styles.css
@@ -34,6 +34,10 @@ html, body {
   color: var(--ink);
   font-family: var(--font-body);
   min-height: 100vh;
+  /* Verhindert eine horizontale Scrollbar durch den Full-Bleed-Trick der
+     Live-Karte (100vw kann inkl. Scrollbar-Breite minimal über die
+     tatsächliche Fensterbreite hinausschießen). */
+  overflow-x: hidden;
 }
 
 button {
@@ -433,14 +437,27 @@ button {
    livemap.js die Höhe zur Laufzeit anhand des tatsächlich verfügbaren
    Platzes exakt nachjustiert (siehe resizeToViewport() in livemap.js).
    dvh (dynamische Viewport-Höhe) berücksichtigt ein-/ausblendende mobile
-   Adressleisten korrekt; vh davor dient als Fallback für ältere Browser. */
+   Adressleisten korrekt; vh davor dient als Fallback für ältere Browser.
+
+   Die Karte selbst durchbricht bewusst die Innenabstände/Maximalbreite von
+   .app-main ("Full-Bleed"-Technik: left:50% + negativer Margin von -50vw
+   zieht sie auf volle Viewport-Breite) - Bedienelemente (map-controls,
+   Isolations-Banner) bleiben normal eingerückt, nur die Kartenfläche selbst
+   nutzt den kompletten Displayplatz. Funktioniert identisch auf jeder
+   Bildschirmgröße, ohne pro Breakpoint unterschiedliche Werte nachpflegen zu
+   müssen. */
 .live-map {
   height: min(70vh, 560px);
   height: min(70dvh, 560px);
   min-height: 320px;
-  border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid var(--line);
+  border-left: 0;
+  border-right: 0;
+  position: relative;
+  left: 50%;
+  width: 100vw;
+  margin-left: -50vw;
 }
 
 .vehicle-marker span {
@@ -1323,10 +1340,10 @@ button:active { transform: translateY(1px); }
   align-items: center;
   gap: 10px;
   position: fixed;
-  top: 12px;
+  top: 12px; /* Fallback, bevor JS die reale Header-Höhe gemessen hat */
   left: 50%;
   transform: translateX(-50%);
-  z-index: 190;
+  z-index: 1200; /* über Leaflets eigenen Steuerelementen (z.B. Zoom-Buttons ~1000) */
   background: var(--panel-raised);
   border: 1px solid var(--signal-amber);
   border-radius: var(--radius);
@@ -1354,7 +1371,7 @@ button:active { transform: translateY(1px); }
 .trip-alarm-overlay {
   position: fixed;
   inset: 0;
-  z-index: 300;
+  z-index: 1300;
   display: flex;
   align-items: center;
   justify-content: center;