Add files via upload

index.html

@@ -10,6 +10,10 @@
   <meta name="apple-mobile-web-app-title" content="ÖPNV Navi" />
   <meta name="theme-color" content="#0C1116" />
   <link rel="manifest" href="manifest.json" />
+  <link rel="icon" href="icons/favicon.ico" sizes="any" />
+  <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16.png" />
+  <link rel="apple-touch-icon" href="icons/icon-180.png" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@600&display=swap" rel="stylesheet" />
@@ -190,7 +194,10 @@
 
     <section class="tab-panel" data-tab-panel="fares" hidden>
       <div class="panel-heading"><div><span class="section-heading__eyebrow" data-i18n="fares.eyebrow">PREISE</span><h1 data-i18n="fares.title">Tickets</h1><p data-i18n="fares.text">Übliche VBB-Fahrpreise auf einen Blick.</p></div></div>
-      <div class="disclaimer-banner"><span aria-hidden="true">⚠</span> <span data-i18n="fares.disclaimer">Angaben ohne Gewähr – Preise können sich ändern.</span> <span id="fares-stand"></span></div>
+      <div class="disclaimer-banner">
+        <span class="disclaimer-banner__icon" aria-hidden="true">⚠</span>
+        <span class="disclaimer-banner__text"><span data-i18n="fares.disclaimer">Angaben ohne Gewähr – Preise können sich ändern.</span> <span id="fares-stand"></span></span>
+      </div>
       <div id="fares-content"><div class="board-empty-state" data-i18n="fares.loading">Lade Fahrpreise…</div></div>
       <div class="section-heading"><div><h2 data-i18n="fares.buyTitle">Tickets kaufen</h2></div></div>
       <div id="fares-companies" class="company-links"></div>
@@ -218,7 +225,10 @@
     </section>
   </main>
 
-  <div class="global-disclaimer" data-i18n="common.footer">ℹ Live-Daten von VBB · Angaben ohne Gewähr</div>
+  <div class="global-disclaimer">
+    <span class="global-disclaimer__icon" aria-hidden="true">ℹ</span>
+    <span data-i18n="common.footer">Live-Daten von VBB · Angaben ohne Gewähr</span>
+  </div>
 
   <nav class="mobile-nav" aria-label="Hauptnavigation mobil">
     <div role="tablist" aria-label="Hauptnavigation mobil" class="mobile-nav__list">

js/i18n.js

@@ -29,7 +29,7 @@ const I18N = (() => {
       'common.current': 'AKTUELL',
       'common.clear': 'Leeren',
       'common.retry': 'Erneut versuchen',
-      'common.footer': 'ℹ Live-Daten von VBB · Angaben ohne Gewähr',
+      'common.footer': 'Live-Daten von VBB · Angaben ohne Gewähr',
       'welcome.title': 'Was fährt jetzt?',
       'welcome.text': 'Suche eine Haltestelle oder nutze deinen Standort, um die nächsten Abfahrten zu sehen.',
       'welcome.nearbyTitle': 'In meiner Nähe',
@@ -144,7 +144,7 @@ const I18N = (() => {
       'common.current': 'CURRENT',
       'common.clear': 'Clear',
       'common.retry': 'Try again',
-      'common.footer': 'ℹ Live data from VBB · No guarantee of accuracy',
+      'common.footer': 'Live data from VBB · No guarantee of accuracy',
       'welcome.title': 'What\u2019s leaving now?',
       'welcome.text': 'Search for a stop or use your location to see the next departures.',
       'welcome.nearbyTitle': 'Nearby',

manifest.json

@@ -1,9 +1,18 @@
-{
+{
-  "name": "ÖPNV Navi",
+  "name": "ÖPNV Navi",
-  "short_name": "ÖPNV Navi",
+  "short_name": "ÖPNV Navi",
-  "start_url": "./index.html",
+  "description": "Live-Abfahrten, Live-Karte und Routenplaner für den VBB-Verbund.",
-  "display": "standalone",
+  "start_url": ".",
-  "background_color": "#0C1116",
+  "scope": ".",
-  "theme_color": "#0C1116",
+  "display": "standalone",
-  "icons": []
+  "orientation": "portrait-primary",
-}
+  "background_color": "#0C1116",
+  "theme_color": "#0C1116",
+  "lang": "de",
+  "icons": [
+    { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "icons/icon-192-maskable.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" },
+    { "src": "icons/icon-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ]
+}

styles.css

@@ -233,6 +233,40 @@ button {
   margin: 0;
 }
 
+/* Der Footer-Hinweis ganz unten unter der App hatte bisher gar kein Styling -
+   erschien als unformatierter Fließtext direkt am Seitenende. */
+.global-disclaimer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-align: center;
+  color: var(--ink-muted);
+  font-size: 11.5px;
+  padding: 18px 16px 28px;
+  border-top: 1px solid var(--line);
+  margin-top: 8px;
+}
+
+/* Neutrales Info-Icon (blau) - eigene Variante neben dem roten Warn-Icon
+   (.disclaimer-banner__icon/.notice-item__icon), für Hinweise, die keine
+   Warnung sind, sondern reine Sachinformation ("Daten von VBB", etc.). */
+.global-disclaimer__icon,
+.info-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 700;
+  font-style: normal;
+  background: rgba(79, 168, 232, 0.16);
+  color: var(--signal-blue);
+}
+
 /* Störungsbenachrichtigungen-Karte auf dem Favoriten-Tab - bewusst als
    eigenständige, einladende Karte statt eines unauffälligen Text-Links,
    da das eine der nützlichsten Funktionen der App ist. */
@@ -1973,6 +2007,9 @@ button:active { transform: translateY(1px); }
    ============================================================ */
 
 .disclaimer-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
   background: rgba(255, 93, 108, 0.1);
   border: 1px solid var(--signal-red);
   color: var(--signal-red);
@@ -1982,6 +2019,20 @@ button:active { transform: translateY(1px); }
   margin-bottom: 18px;
   line-height: 1.4;
 }
+.disclaimer-banner__icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  margin-top: 1px;
+  background: rgba(255, 93, 108, 0.16);
+}
+.disclaimer-banner__text { flex: 1; }
 
 .fare-group {
   margin-bottom: 20px;
@@ -2111,6 +2162,7 @@ button:active { transform: translateY(1px); }
   .mobile-nav__item small { font-size: 10px; }
   .mobile-nav__item.is-active { color: var(--signal-amber); }
   .toast-container { bottom: calc(64px + env(safe-area-inset-bottom) + 12px); }
+  .global-disclaimer { padding-bottom: calc(28px + 64px + env(safe-area-inset-bottom)); }
 }
 
 @media (max-width: 430px) {