From c98b7c22d43a2d6e09c0d0098b5297392b326aca Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 28 Sep 2026 12:29:52 +0200
Subject: [PATCH] Komplett neues Frontend-Design: Vintage-Reiseplakat statt
 Solari-Glas
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die letzten Politur-Runden waren dem Nutzer zu ähnlich zur alten
dunklen Glas-Optik ("beeindruckt mich jetzt nicht... muss keine
verwandschaft haben"). Statt weiterer Feinjustierung daher ein
komplett neues Theme ohne visuelle Verwandtschaft zum Vorgänger:

- Helles, cremefarbenes Papier statt dunklem "Bahnsteig bei Nacht"
  (--bg-void/--panel/--ink im Root komplett invertiert)
- Kräftiger Terrakotta-Akzent (#C1440E) statt hellem Signal-Amber -
  gleichzeitig kontraststärker als Fließtext auf hellem Grund
- Dicke 2px-Konturen (--border-w) statt dünner 1px-Linien
- Scharfe 2-4px-Radien statt runder 13-22px-Ecken; Pillen (999px)
  wurden zu rechteckigen Stempeln/Badges
- Harte, unscharfe Versatzschatten (z.B. 5px 5px 0 var(--line))
  statt weicher, geblurrter Schatten
- Kein backdrop-filter/Glassmorphismus mehr (Header, Toasts, mobile
  Navigationsleiste sind jetzt opake, flache Flächen) - passt zum
  bewusst plakativen, flachen Poster-Look
- Alle hartcodierten rgba()-Tints der alten Akzentfarben (Amber/Rot/
  Grün/Blau) auf die neuen, dunkleren (kontraststärkeren) Töne
  umgerechnet, damit kein Bruch zwischen Token- und Literal-Farben
  entsteht
- Feines Punktraster als Hintergrundtextur statt weicher Farbschein-
  Gradienten
- theme-color/manifest.json auf die neue helle Fläche abgestimmt

Named angelehnt an Bauhaus-Fahrplantafeln/Vintage-Reiseplakate -
passt inhaltlich zu einer Berlin-Verkehrs-App, ohne die bisherige
"Solari-Anzeigetafel"-Bildsprache fortzusetzen.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
---
 index.html    |   4 +-
 manifest.json |   4 +-
 styles.css    | 404 +++++++++++++++++++++++++-------------------------
 3 files changed, 207 insertions(+), 205 deletions(-)

diff --git a/index.html b/index.html
index dbcda79..f122360 100644
--- a/index.html
+++ b/index.html
@@ -6,9 +6,9 @@
   <title>ÖPNV Navi – Live-Abfahrten für Berlin &amp; Brandenburg</title>
   <meta name="description" content="Live-Abfahrten, Live-Karte und Routenplaner für den VBB-Verbund." />
   <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
   <meta name="apple-mobile-web-app-title" content="ÖPNV Navi" />
-  <meta name="theme-color" content="#0C1116" />
+  <meta name="theme-color" content="#F2ECDC" />
   <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" />
diff --git a/manifest.json b/manifest.json
index b2d2a86..9ca6008 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,8 +6,8 @@
   "scope": ".",
   "display": "standalone",
   "orientation": "portrait-primary",
-  "background_color": "#0C1116",
-  "theme_color": "#0C1116",
+  "background_color": "#F2ECDC",
+  "theme_color": "#F2ECDC",
   "lang": "de",
   "icons": [
     { "src": "icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
diff --git a/styles.css b/styles.css
index dbb1627..7d5c5ed 100644
--- a/styles.css
+++ b/styles.css
@@ -1,34 +1,39 @@
 /* ============================================================
    ÖPNV NAVI — Design-Tokens
-   Thema: Bahnsteig nach Sonnenuntergang, Solari-Anzeigetafel
+   Thema: Vintage-Reiseplakat / Bauhaus-Fahrplantafel
+   Cremefarbenes Papier, tiefschwarze Konturen, harte Versatz-
+   schatten, ein einziger kräftiger Terrakotta-Akzent. Bewusst
+   die komplette Abkehr von der vorherigen dunklen Glas-Optik.
    ============================================================ */
 
 :root {
-  --bg-void: #0C1116;
-  --panel: #171E26;
-  --panel-raised: #212A34;
-  --panel-overlay: #26303C;
-  --line: #2A323D;
-  --ink: #EDEFEC;
-  --ink-muted: #8E99A6;
-  --signal-amber: #F5A623;
-  --signal-amber-soft: rgba(245, 166, 35, 0.14);
-  --signal-green: #3DDC84;
-  --signal-red: #FF5D6C;
-  --signal-blue: #4FA8E8;
+  --bg-void: #F2ECDC;
+  --panel: #FFFDF6;
+  --panel-raised: #FBF4E2;
+  --panel-overlay: #EFE3C6;
+  --line: #17130E;
+  --ink: #17130E;
+  --ink-muted: #6B6151;
+  --signal-amber: #C1440E;
+  --signal-amber-soft: rgba(193, 68, 14, 0.12);
+  --signal-green: #2B6B4A;
+  --signal-red: #A32620;
+  --signal-blue: #1E5A78;
+  --on-amber: #FBF4E2;
 
   --font-display: 'IBM Plex Mono', 'SFMono-Regular', monospace;
   --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
   --font-label: 'IBM Plex Sans Condensed', sans-serif;
 
-  --radius: 13px;
-  --radius-lg: 22px;
+  --radius: 3px;
+  --radius-lg: 4px;
   --header-height: 68px;
+  --border-w: 2px;
 
-  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
-  --shadow-md: 0 10px 26px rgba(0, 0, 0, 0.32);
-  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5);
-  --shadow-glow-amber: 0 0 0 1px rgba(245, 166, 35, 0.25), 0 8px 24px rgba(245, 166, 35, 0.12);
+  --shadow-sm: 3px 3px 0 var(--line);
+  --shadow-md: 5px 5px 0 var(--line);
+  --shadow-lg: 8px 8px 0 var(--line);
+  --shadow-glow-amber: 4px 4px 0 var(--signal-amber);
 }
 
 * {
@@ -46,7 +51,7 @@ html {
 ::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb {
   background: var(--panel-overlay);
-  border-radius: 999px;
+  border-radius: var(--radius);
   border: 2px solid var(--bg-void);
 }
 ::-webkit-scrollbar-thumb:hover { background: var(--line); }
@@ -55,9 +60,12 @@ html, body {
   margin: 0;
   padding: 0;
   background: var(--bg-void);
+  /* Feines Punktraster statt weicher Farbschein - passt zur bewusst
+     flachen, plakativen Papier-Optik (kein Blur/Glow mehr im Theme). */
   background-image:
-    radial-gradient(ellipse 1000px 500px at 20% -8%, rgba(245, 166, 35, 0.05), transparent 60%),
-    radial-gradient(ellipse 800px 500px at 100% 0%, rgba(79, 168, 232, 0.04), transparent 55%);
+    radial-gradient(rgba(23, 19, 14, 0.14) 1.5px, transparent 1.5px);
+  background-size: 22px 22px;
+  background-position: -11px -11px;
   background-attachment: fixed;
   color: var(--ink);
   font-family: var(--font-body);
@@ -115,10 +123,10 @@ button {
   left: 12px;
   z-index: 2000;
   background: var(--signal-amber);
-  color: #17110a;
+  color: var(--on-amber);
   font-weight: 600;
   padding: 10px 16px;
-  border-radius: 8px;
+  border-radius: var(--radius);
   transition: top 0.15s ease;
 }
 .skip-link:focus {
@@ -142,11 +150,9 @@ button {
   align-items: center;
   gap: 20px;
   padding: 0 20px;
-  background: rgba(23, 30, 38, 0.85);
-  backdrop-filter: blur(14px) saturate(1.4);
-  -webkit-backdrop-filter: blur(14px) saturate(1.4);
-  border-bottom: 1px solid var(--line);
-  box-shadow: var(--shadow-sm), 0 1px 0 rgba(245, 166, 35, 0.15);
+  background: var(--panel);
+  border-bottom: var(--border-w) solid var(--line);
+  box-shadow: var(--shadow-sm);
   position: sticky;
   top: 0;
   z-index: 20;
@@ -170,10 +176,10 @@ button {
   justify-content: center;
   width: 30px;
   height: 30px;
-  border-radius: 9px;
+  border-radius: var(--radius);
   flex-shrink: 0;
   font-size: 15px;
-  background: linear-gradient(155deg, #ffc158, var(--signal-amber) 65%);
+  background: linear-gradient(155deg, #E8894F, var(--signal-amber) 65%);
   box-shadow: var(--shadow-glow-amber);
 }
 
@@ -194,7 +200,7 @@ button {
 .search-box input {
   width: 100%;
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
   font-family: var(--font-body);
   font-size: 15px;
@@ -212,7 +218,7 @@ button {
   left: 0;
   right: 0;
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-radius: var(--radius);
   list-style: none;
   margin: 0;
@@ -220,12 +226,12 @@ button {
   max-height: 260px;
   overflow-y: auto;
   z-index: 30;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  box-shadow: var(--shadow-md);
 }
 
 .search-result {
   padding: 10px 12px;
-  border-radius: 6px;
+  border-radius: var(--radius);
   font-size: 14px;
   transition: background .12s ease, transform .12s ease;
 }
@@ -250,7 +256,7 @@ button {
 
 .favorites-bar {
   padding: 12px 20px;
-  border-bottom: 1px solid var(--line);
+  border-bottom: var(--border-w) solid var(--line);
   display: flex;
   align-items: center;
   gap: 12px;
@@ -264,9 +270,9 @@ button {
 
 .chip {
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
-  border-radius: 999px;
+  border-radius: var(--radius);
   padding: 6px 14px;
   font-size: 13px;
   white-space: nowrap;
@@ -293,7 +299,7 @@ button {
   color: var(--ink-muted);
   font-size: 11.5px;
   padding: 18px 16px 28px;
-  border-top: 1px solid var(--line);
+  border-top: var(--border-w) solid var(--line);
   margin-top: 8px;
 }
 
@@ -312,7 +318,7 @@ button {
   font-size: 10px;
   font-weight: 700;
   font-style: normal;
-  background: rgba(79, 168, 232, 0.16);
+  background: rgba(30, 90, 120, 0.16);
   color: var(--signal-blue);
 }
 
@@ -323,8 +329,8 @@ button {
   display: flex;
   align-items: center;
   gap: 14px;
-  background: rgba(245,166,35,.08);
-  border: 1px solid rgba(245,166,35,.35);
+  background: rgba(193, 68, 14,.08);
+  border: 1px solid rgba(193, 68, 14,.35);
   border-radius: var(--radius);
   padding: 14px 16px;
   margin-bottom: 18px;
@@ -335,11 +341,11 @@ button {
 .notify-callout__text small { display: block; color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
 .notify-callout__btn {
   flex-shrink: 0;
-  background: linear-gradient(155deg, #ffc158, var(--signal-amber) 60%);
-  color: #1a1206;
+  background: linear-gradient(155deg, #E8894F, var(--signal-amber) 60%);
+  color: var(--on-amber);
   font-weight: 600;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--radius);
   padding: 10px 18px;
   font-size: 13px;
 }
@@ -347,17 +353,17 @@ button {
 .notify-callout__btn:disabled { cursor: default; }
 
 .notify-callout--active {
-  background: rgba(61,220,132,.08);
-  border-color: rgba(61,220,132,.35);
+  background: rgba(43, 107, 74,.08);
+  border-color: rgba(43, 107, 74,.35);
 }
 .notify-callout--active .notify-callout__btn {
   background: var(--signal-green);
-  color: #06301b;
+  color: var(--on-amber);
 }
 
 .notify-callout--blocked {
-  background: rgba(255,93,108,.08);
-  border-color: rgba(255,93,108,.35);
+  background: rgba(163, 38, 32,.08);
+  border-color: rgba(163, 38, 32,.35);
 }
 .notify-callout--blocked .notify-callout__btn {
   background: var(--panel-raised);
@@ -370,7 +376,7 @@ button {
 
 .tab-nav {
   padding: 0 20px;
-  border-bottom: 1px solid var(--line);
+  border-bottom: var(--border-w) solid var(--line);
 }
 
 .tab-nav__list {
@@ -394,7 +400,7 @@ button {
 .tab-button.is-active {
   color: var(--signal-amber);
   border-bottom-color: var(--signal-amber);
-  box-shadow: 0 2px 12px -2px rgba(245, 166, 35, 0.6);
+  box-shadow: 0 2px 12px -2px rgba(193, 68, 14, 0.6);
 }
 
 .app-main {
@@ -433,7 +439,7 @@ button {
 
 .favorite-toggle {
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
   border-radius: var(--radius);
   padding: 8px 14px;
@@ -446,7 +452,7 @@ button {
   color: var(--signal-amber);
   border-color: var(--signal-amber);
   background: var(--signal-amber-soft);
-  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.15);
+  box-shadow: 0 0 0 1px rgba(193, 68, 14, 0.15);
 }
 
 @keyframes favorite-pop {
@@ -466,7 +472,7 @@ button {
   text-align: center;
   background: var(--panel);
   border-radius: var(--radius);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
 }
 
 .board-error {
@@ -488,11 +494,11 @@ button {
 }
 .board-error .text-button {
   border: 1px solid var(--signal-red);
-  border-radius: 999px;
+  border-radius: var(--radius);
   padding: 6px 16px;
   color: var(--signal-red);
 }
-.board-error .text-button:hover { background: rgba(255,93,108,.1); }
+.board-error .text-button:hover { background: rgba(163, 38, 32,.1); }
 
 .departure-board {
   display: flex;
@@ -505,13 +511,13 @@ button {
   grid-template-columns: 82px minmax(0, 1fr) 82px 112px;
   gap: 18px;
   align-items: center;
-  background: linear-gradient(180deg, var(--panel-overlay), var(--panel) 60%);
-  border: 1px solid var(--line);
-  border-left: 4px solid var(--line-color, var(--line));
+  background: var(--panel);
+  border: var(--border-w) solid var(--line);
+  border-left: 5px solid var(--line-color, var(--line));
   border-radius: var(--radius);
   padding: 14px 16px 14px 13px;
   font-family: var(--font-display);
-  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.03);
+  box-shadow: var(--shadow-sm);
   animation: flap-row-in .25s ease both;
   animation-delay: calc(var(--row-index, 0) * 25ms);
   transition: box-shadow .15s ease, transform .15s ease;
@@ -519,8 +525,8 @@ button {
 
 .flap-row--clickable:hover,
 .flap-row--clickable:focus-visible {
-  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+  transform: translate(-2px, -2px);
 }
 
 @keyframes flap-row-in {
@@ -580,12 +586,12 @@ button {
   max-width: 100%;
   min-width: 38px;
   font-weight: 700;
-  color: var(--line-text-color, var(--signal-amber));
-  background: var(--line-color, transparent);
+  color: var(--line-text-color, var(--on-amber));
+  background: var(--line-color, var(--signal-amber));
   padding: 5px 9px;
-  border-radius: 4px;
+  border-radius: 2px;
   font-size: 16px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
+  box-shadow: 2px 2px 0 var(--line);
   /* Lange Zugbezeichnungen (z.B. "ICE 940") sprengen die feste Spaltenbreite
      nicht mehr - stattdessen läuft der Text von selbst wie ein Ticker durch
      (siehe .flap-cell--line--scrollable unten), kein manuelles Scrollen nötig. */
@@ -676,7 +682,7 @@ button {
   font-size: 12px;
   letter-spacing: 0.02em;
   padding: 3px 7px;
-  border-radius: 4px;
+  border-radius: var(--radius);
   width: fit-content;
   animation: platform-changed-pulse 1s ease-out 2;
 }
@@ -690,14 +696,14 @@ button {
 }
 
 @keyframes platform-changed-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 108, 0.55); }
-  50% { box-shadow: 0 0 0 6px rgba(255, 93, 108, 0); }
+  0%, 100% { box-shadow: 0 0 0 0 rgba(163, 38, 32, 0.55); }
+  50% { box-shadow: 0 0 0 6px rgba(163, 38, 32, 0); }
 }
 
 .flap-field--line {
   align-items: flex-start;
   padding-right: 18px;
-  border-right: 1px solid var(--line);
+  border-right: var(--border-w) solid var(--line);
 }
 
 .flap-field--direction {
@@ -707,7 +713,7 @@ button {
 .flap-field--time {
   align-items: flex-end;
   padding-left: 14px;
-  border-left: 1px solid var(--line);
+  border-left: var(--border-w) solid var(--line);
 }
 
 .flap-char {
@@ -741,7 +747,7 @@ button {
   height: min(70dvh, 560px);
   min-height: 320px;
   overflow: hidden;
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-left: 0;
   border-right: 0;
   position: relative;
@@ -761,7 +767,7 @@ button {
   font-weight: 700;
   font-size: 10px;
   padding: 2px 6px;
-  border-radius: 4px;
+  border-radius: var(--radius);
   white-space: nowrap;
   box-shadow: 0 0 0 2px var(--bg-void);
 }
@@ -790,20 +796,20 @@ button {
 }
 
 .journey-submit {
-  background: linear-gradient(155deg, #ffc158, var(--signal-amber) 60%);
-  color: #1a1206;
+  background: linear-gradient(155deg, #E8894F, var(--signal-amber) 60%);
+  color: var(--on-amber);
   border: none;
   border-radius: var(--radius);
   padding: 10px 18px;
   font-weight: 600;
   font-size: 14px;
-  box-shadow: var(--shadow-glow-amber);
+  box-shadow: var(--shadow-md);
 }
 .journey-submit:hover { filter: brightness(1.05); }
 
 .journey-card {
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-radius: var(--radius);
   padding: 14px;
   margin-bottom: 10px;
@@ -811,7 +817,7 @@ button {
   transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
 }
 .journey-card:hover {
-  border-color: rgba(245, 166, 35, 0.35);
+  border-color: rgba(193, 68, 14, 0.35);
   box-shadow: var(--shadow-md);
 }
 
@@ -821,7 +827,7 @@ button {
   gap: 10px;
   align-items: center;
   padding: 8px 0;
-  border-bottom: 1px solid var(--line);
+  border-bottom: var(--border-w) solid var(--line);
   font-size: 13px;
 }
 
@@ -833,7 +839,7 @@ button {
   font-family: var(--font-display);
   font-weight: 700;
   padding: 2px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius);
   display: inline-block;
 }
 
@@ -867,9 +873,9 @@ button {
 
 .mode-chip {
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink-muted);
-  border-radius: 999px;
+  border-radius: var(--radius);
   padding: 5px 12px;
   font-size: 12px;
   font-family: var(--font-label);
@@ -884,7 +890,7 @@ button {
   color: var(--signal-amber);
   border-color: var(--signal-amber);
   background: var(--signal-amber-soft);
-  box-shadow: 0 0 0 1px rgba(245, 166, 35, 0.15);
+  box-shadow: 0 0 0 1px rgba(193, 68, 14, 0.15);
 }
 .mode-chip.is-active:hover { border-color: var(--signal-amber); color: var(--signal-amber); }
 
@@ -894,7 +900,7 @@ button {
 
 .location-btn {
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
   border-radius: var(--radius);
   padding: 10px 14px;
@@ -928,7 +934,7 @@ button {
   justify-content: space-between;
   align-items: center;
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-radius: var(--radius);
   padding: 12px 14px;
   color: var(--ink);
@@ -960,7 +966,7 @@ button {
 
 .remark-card {
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-left: 3px solid var(--signal-red);
   border-radius: var(--radius);
   padding: 14px;
@@ -991,7 +997,7 @@ button {
   font-size: 12px;
   font-weight: 700;
   margin-top: 1px;
-  background: rgba(255, 93, 108, 0.14);
+  background: rgba(163, 38, 32, 0.14);
   color: var(--signal-red);
 }
 
@@ -1044,8 +1050,8 @@ button {
   font-size: 10px;
   color: var(--ink-muted);
   background: var(--panel-raised);
-  border: 1px solid var(--line);
-  border-radius: 999px;
+  border: var(--border-w) solid var(--line);
+  border-radius: var(--radius);
   padding: 2px 8px;
   font-family: var(--font-label);
   letter-spacing: 0.02em;
@@ -1069,9 +1075,9 @@ button {
   justify-self: start;
   margin-top: 4px;
   background: none;
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--signal-amber);
-  border-radius: 6px;
+  border-radius: var(--radius);
   padding: 4px 10px;
   font-size: 11px;
   font-family: var(--font-label);
@@ -1085,9 +1091,9 @@ button {
   width: 100%;
   margin-top: 8px;
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
-  border-radius: 8px;
+  border-radius: var(--radius);
   padding: 8px;
   font-size: 12px;
   font-family: var(--font-label);
@@ -1119,7 +1125,7 @@ button {
 .journey-select,
 .journey-datetime {
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
   border-radius: var(--radius);
   padding: 8px 10px;
@@ -1203,7 +1209,7 @@ button:active { transform: translateY(1px); }
 
 .header-icon-btn {
   flex-shrink: 0;
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   background: var(--panel-raised);
   color: var(--signal-amber);
   font-size: 18px;
@@ -1228,8 +1234,8 @@ button:active { transform: translateY(1px); }
   animation: badge-pulse 2s ease-in-out infinite;
 }
 @keyframes badge-pulse {
-  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 93, 108, 0.45); }
-  50% { box-shadow: 0 0 0 4px rgba(255, 93, 108, 0); }
+  0%, 100% { box-shadow: 0 0 0 0 rgba(163, 38, 32, 0.45); }
+  50% { box-shadow: 0 0 0 4px rgba(163, 38, 32, 0); }
 }
 
 .favorites-bar { display: none; }
@@ -1247,8 +1253,8 @@ button:active { transform: translateY(1px); }
   display: inline-flex;
   gap: 2px;
   background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 999px;
+  border: var(--border-w) solid var(--line);
+  border-radius: var(--radius);
   padding: 4px;
 }
 .tab-button {
@@ -1256,16 +1262,16 @@ button:active { transform: translateY(1px); }
   display: inline-flex;
   gap: 8px;
   align-items: center;
-  border-radius: 999px;
+  border-radius: var(--radius);
   border-bottom: none;
   transition: background .18s ease, color .18s ease, box-shadow .18s ease;
 }
 .tab-button__icon { filter: grayscale(.35); transition: filter .18s ease; }
 .tab-button:hover:not(.is-active) { color: var(--ink); }
 .tab-button.is-active {
-  background: linear-gradient(155deg, #ffc158, var(--signal-amber) 65%);
-  color: #1a1206;
-  box-shadow: var(--shadow-glow-amber);
+  background: linear-gradient(155deg, #E8894F, var(--signal-amber) 65%);
+  color: var(--on-amber);
+  box-shadow: var(--shadow-md);
 }
 .tab-button.is-active .tab-button__icon { filter: none; }
 
@@ -1274,7 +1280,7 @@ button:active { transform: translateY(1px); }
 .welcome-panel {
   padding: 28px;
   background: linear-gradient(135deg, var(--panel), var(--panel-raised));
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-radius: var(--radius-lg);
   margin-bottom: 24px;
   box-shadow: var(--shadow-md);
@@ -1288,7 +1294,7 @@ button:active { transform: translateY(1px); }
   right: -20%;
   width: 320px;
   height: 320px;
-  background: radial-gradient(circle, rgba(245, 166, 35, 0.12), transparent 70%);
+  background: radial-gradient(circle, rgba(193, 68, 14, 0.12), transparent 70%);
   pointer-events: none;
 }
 .welcome-panel > * { position: relative; }
@@ -1306,7 +1312,7 @@ button:active { transform: translateY(1px); }
 .welcome-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 24px; }
 .action-card {
   display: flex; align-items: center; gap: 14px; text-align: left;
-  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 16px;
+  background: var(--panel); color: var(--ink); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 16px;
 }
 .action-card:hover { border-color: var(--signal-amber); background: var(--panel-raised); }
 
@@ -1325,13 +1331,13 @@ button:active { transform: translateY(1px); }
   box-shadow: var(--shadow-md);
 }
 .action-card--primary {
-  border-color: rgba(245, 166, 35, .45);
-  background: linear-gradient(155deg, rgba(245,166,35,.16), rgba(245,166,35,.04) 65%), var(--panel);
-  box-shadow: var(--shadow-glow-amber);
+  border-color: rgba(193, 68, 14, .45);
+  background: linear-gradient(155deg, rgba(193, 68, 14,.16), rgba(193, 68, 14,.04) 65%), var(--panel);
+  box-shadow: var(--shadow-md);
 }
 .action-card--primary:hover {
   border-color: var(--signal-amber);
-  background: linear-gradient(155deg, rgba(245,166,35,.22), rgba(245,166,35,.06) 65%), var(--panel-raised);
+  background: linear-gradient(155deg, rgba(193, 68, 14,.22), rgba(193, 68, 14,.06) 65%), var(--panel-raised);
 }
 .action-card--primary .action-card__icon { color: var(--signal-amber); }
 .action-card__icon { font-size: 23px; }
@@ -1347,7 +1353,7 @@ button:active { transform: translateY(1px); }
 .favorite-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
 .favorite-card {
   display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: left;
-  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 14px;
+  background: var(--panel); color: var(--ink); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 14px;
 }
 .favorite-card:hover { border-color: var(--signal-amber); }
 .favorite-card__star { color: var(--signal-amber); font-size: 18px; }
@@ -1357,7 +1363,7 @@ button:active { transform: translateY(1px); }
 .favorite-card__arrow { color: var(--ink-muted); font-size: 18px; }
 
 /* Störungs-Hinweis auf Favoriten-Karten ("Störungs-Push") */
-.favorite-card--disrupted { border-color: rgba(255,93,108,.5); }
+.favorite-card--disrupted { border-color: rgba(163, 38, 32,.5); }
 .favorite-card__disruption {
   color: var(--signal-red) !important;
   font-weight: 600;
@@ -1386,13 +1392,12 @@ button:active { transform: translateY(1px); }
 }
 
 .toast {
-  background: rgba(33, 42, 52, 0.88);
-  backdrop-filter: blur(12px) saturate(1.3);
-  -webkit-backdrop-filter: blur(12px) saturate(1.3);
-  border: 1px solid var(--line);
-  border-left: 3px solid var(--signal-amber);
+  background: var(--panel);
+  border: var(--border-w) solid var(--line);
+  border-left: 4px solid var(--signal-amber);
   color: var(--ink);
   border-radius: var(--radius);
+  box-shadow: var(--shadow-sm);
   padding: 12px 14px;
   font-size: 13px;
   line-height: 1.4;
@@ -1427,9 +1432,9 @@ button:active { transform: translateY(1px); }
   background: var(--panel-raised);
   color: var(--signal-amber);
 }
-.toast--warning .toast__icon { color: var(--signal-red); background: rgba(255,93,108,.12); }
-.toast--info .toast__icon { color: var(--signal-amber); background: rgba(245,166,35,.12); }
-.toast--success .toast__icon { color: var(--signal-green); background: rgba(61,220,132,.12); }
+.toast--warning .toast__icon { color: var(--signal-red); background: rgba(163, 38, 32,.12); }
+.toast--info .toast__icon { color: var(--signal-amber); background: rgba(193, 68, 14,.12); }
+.toast--success .toast__icon { color: var(--signal-green); background: rgba(43, 107, 74,.12); }
 
 .toast__message {
   flex: 1;
@@ -1468,7 +1473,7 @@ button:active { transform: translateY(1px); }
 .nearby-preview { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
 .nearby-preview__item {
   display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left;
-  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px;
+  background: var(--panel); color: var(--ink); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 12px;
 }
 .nearby-preview__item:hover { border-color: var(--signal-amber); }
 .nearby-preview__item strong, .nearby-preview__item small { display: block; }
@@ -1481,7 +1486,7 @@ button:active { transform: translateY(1px); }
 .status-dot {
   display: inline-block;
   width: 7px; height: 7px; border-radius: 50%; background: var(--signal-green);
-  box-shadow: 0 0 0 3px rgba(61,220,132,.12);
+  box-shadow: 0 0 0 3px rgba(43, 107, 74,.12);
 }
 .favorite-toggle { padding: 8px 12px; }
 
@@ -1490,13 +1495,13 @@ button:active { transform: translateY(1px); }
 .flap-cell--line { font-size: 17px; padding: 6px 10px; }
 .flap-cell--direction { font-size: 15px; font-weight: 600; }
 .flap-cell--platform { font-size: 14px; }
-.station-disruption { background: rgba(255,93,108,.08); border: 1px solid rgba(255,93,108,.3); color: var(--ink); border-radius: 9px; padding: 12px; margin-top: 14px; font-size: 12px; }
-.station-disruption .notice-item + .notice-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,93,108,.25); }
+.station-disruption { background: rgba(163, 38, 32,.08); border: 1px solid rgba(163, 38, 32,.3); color: var(--ink); border-radius: var(--radius); padding: 12px; margin-top: 14px; font-size: 12px; }
+.station-disruption .notice-item + .notice-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(163, 38, 32,.25); }
 
 /* Aufzugsstatus - eigener, ruhigerer Ton (Info, nicht "akute Störung") */
-.elevator-status { background: rgba(79,168,232,.08); border: 1px solid rgba(79,168,232,.3); color: var(--ink); border-radius: 9px; padding: 12px; margin-top: 14px; font-size: 12px; }
-.elevator-status .notice-item + .notice-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(79,168,232,.25); }
-.elevator-status .notice-item__icon { background: rgba(79,168,232,.16); color: var(--signal-blue); }
+.elevator-status { background: rgba(30, 90, 120,.08); border: 1px solid rgba(30, 90, 120,.3); color: var(--ink); border-radius: var(--radius); padding: 12px; margin-top: 14px; font-size: 12px; }
+.elevator-status .notice-item + .notice-item { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(30, 90, 120,.25); }
+.elevator-status .notice-item__icon { background: rgba(30, 90, 120,.16); color: var(--signal-blue); }
 .elevator-status .notice-item__body strong { color: var(--signal-blue); }
 
 .panel-heading { margin-bottom: 22px; position: relative; padding-left: 14px; }
@@ -1515,7 +1520,7 @@ button:active { transform: translateY(1px); }
 .live-map { height: min(680px, calc(100vh - 220px)); min-height: 460px; }
 
 .journey-card-form {
-  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
+  background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 14px 16px;
 }
 .journey-input-row { display: flex; align-items: center; gap: 10px; }
 .journey-input-row .search-box { flex: 1; max-width: none; }
@@ -1523,7 +1528,7 @@ button:active { transform: translateY(1px); }
 .journey-input-marker { width: 22px; text-align: center; font-size: 12px; }
 .journey-input-marker--start { color: var(--signal-green); }
 .journey-input-marker--end { color: var(--signal-red); }
-.journey-connector { height: 13px; border-left: 1px solid var(--line); margin-left: 10px; }
+.journey-connector { height: 13px; border-left: var(--border-w) solid var(--line); margin-left: 10px; }
 .journey-when { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
 
 .wheelchair-toggle {
@@ -1537,8 +1542,8 @@ button:active { transform: translateY(1px); }
   width: fit-content;
 }
 .wheelchair-toggle input { accent-color: var(--signal-amber); width: 16px; height: 16px; }
-.when-choice { background: var(--panel); color: var(--ink-muted); border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; font-size: 12px; }
-.when-choice.is-active { color: var(--signal-amber); border-color: var(--signal-amber); background: rgba(245,166,35,.08); }
+.when-choice { background: var(--panel); color: var(--ink-muted); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 7px 11px; font-size: 12px; }
+.when-choice.is-active { color: var(--signal-amber); border-color: var(--signal-amber); background: rgba(193, 68, 14,.08); }
 .journey-options-row { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
 .journey-options-row .mode-filter { margin-bottom: 0; }
 
@@ -1561,7 +1566,7 @@ button:active { transform: translateY(1px); }
 .journey-via-row__search input {
   width: 100%;
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
   font-family: var(--font-body);
   font-size: 14px;
@@ -1572,17 +1577,17 @@ button:active { transform: translateY(1px); }
 .journey-via-wait select {
   background: var(--panel);
   color: var(--ink);
-  border: 1px solid var(--line);
-  border-radius: 8px;
+  border: var(--border-w) solid var(--line);
+  border-radius: var(--radius);
   padding: 6px 8px;
   font-family: inherit;
   font-size: 12px;
 }
 .journey-via-remove {
   background: transparent;
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink-muted);
-  border-radius: 999px;
+  border-radius: var(--radius);
   width: 30px;
   height: 30px;
   flex-shrink: 0;
@@ -1605,8 +1610,8 @@ button:active { transform: translateY(1px); }
   flex: 1;
   background: var(--panel);
   color: var(--ink);
-  border: 1px solid var(--line);
-  border-radius: 999px;
+  border: var(--border-w) solid var(--line);
+  border-radius: var(--radius);
   padding: 9px 12px;
   font-size: 13px;
   cursor: pointer;
@@ -1621,7 +1626,7 @@ button:active { transform: translateY(1px); }
 
 .location-btn--wide { min-height: 46px; }
 .more-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
-.more-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; text-align: left; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 11px; padding: 16px; }
+.more-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; text-align: left; background: var(--panel); color: var(--ink); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 16px; }
 .more-card > span { grid-row: span 2; font-size: 23px; }
 .more-card small { color: var(--ink-muted); font-size: 12px; }
 .more-card:hover { border-color: var(--signal-amber); }
@@ -1640,7 +1645,7 @@ button:active { transform: translateY(1px); }
 .recent-searches { display: flex; flex-wrap: wrap; gap: 8px; }
 .recent-item {
   display: inline-flex; align-items: center; gap: 2px;
-  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
+  background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius);
   padding: 2px 4px 2px 2px; font-size: 12px;
 }
 .recent-item:hover { border-color: var(--signal-amber); }
@@ -1670,7 +1675,7 @@ button:active { transform: translateY(1px); }
 }
 
 .connection-check {
-  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+  background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius);
   padding: 12px 14px 12px 18px; display: flex; flex-direction: column; gap: 8px;
 }
 .connection-check__row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
@@ -1679,7 +1684,7 @@ button:active { transform: translateY(1px); }
 .connection-status--error { color: var(--signal-red); }
 
 .settings-section {
-  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
+  background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius);
   padding: 14px 16px 14px 20px; margin-bottom: 16px;
 }
 .settings-section .section-heading { margin-bottom: 10px; }
@@ -1692,8 +1697,8 @@ button:active { transform: translateY(1px); }
 .settings-toggle__text small { color: var(--ink-muted); font-size: 12px; }
 .settings-toggle input[type="checkbox"] {
   appearance: none; -webkit-appearance: none; flex-shrink: 0;
-  width: 44px; height: 26px; border-radius: 999px;
-  background: var(--panel-raised); border: 1px solid var(--line);
+  width: 44px; height: 26px; border-radius: var(--radius);
+  background: var(--panel-raised); border: var(--border-w) solid var(--line);
   position: relative; cursor: pointer;
 }
 .settings-toggle input[type="checkbox"]::before {
@@ -1701,19 +1706,19 @@ button:active { transform: translateY(1px); }
   width: 20px; height: 20px; border-radius: 50%;
   background: var(--ink-muted); transition: transform .15s ease, background .15s ease;
 }
-.settings-toggle input[type="checkbox"]:checked { border-color: var(--signal-amber); background: rgba(245,166,35,.18); }
+.settings-toggle input[type="checkbox"]:checked { border-color: var(--signal-amber); background: rgba(193, 68, 14,.18); }
 .settings-toggle input[type="checkbox"]:checked::before { background: var(--signal-amber); transform: translateX(18px); }
 
 .notifications-list { display: flex; flex-direction: column; gap: 8px; }
 .notification-item {
   display: flex; align-items: flex-start; gap: 10px;
-  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
+  background: var(--panel); border: var(--border-w) solid var(--line); border-radius: var(--radius);
   padding: 12px 14px;
   box-shadow: var(--shadow-sm);
   transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
   animation: flap-row-in .25s ease both;
 }
-.notification-item:hover { border-color: rgba(245, 166, 35, 0.35); box-shadow: var(--shadow-md); transform: translateY(-1px); }
+.notification-item:hover { border-color: rgba(193, 68, 14, 0.35); box-shadow: var(--shadow-md); transform: translateY(-1px); }
 .notification-item__icon { font-size: 18px; flex-shrink: 0; }
 .notification-item__body { flex: 1; min-width: 0; }
 .notification-item__body strong { display: block; font-size: 13px; }
@@ -1737,11 +1742,11 @@ html.simple-mode .when-choice { min-height: 46px; }
 
 .lang-switch { display: flex; gap: 8px; }
 .lang-switch__btn {
-  background: var(--panel); color: var(--ink-muted); border: 1px solid var(--line);
-  border-radius: 999px; padding: 8px 16px; font-size: 13px;
+  background: var(--panel); color: var(--ink-muted); border: var(--border-w) solid var(--line);
+  border-radius: var(--radius); padding: 8px 16px; font-size: 13px;
 }
 .lang-switch__btn:hover { border-color: var(--signal-amber); }
-.lang-switch__btn.is-active { color: var(--signal-amber); border-color: var(--signal-amber); background: rgba(245,166,35,.08); }
+.lang-switch__btn.is-active { color: var(--signal-amber); border-color: var(--signal-amber); background: rgba(193, 68, 14,.08); }
 
 .search-result-heading {
   padding: 8px 12px 4px;
@@ -1779,8 +1784,8 @@ html.simple-mode .when-choice { min-height: 46px; }
 
 .trip-modal {
   background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 16px 16px 0 0;
+  border: var(--border-w) solid var(--line);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
   width: 100%;
   max-width: 560px;
   max-height: 88vh;
@@ -1790,7 +1795,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 
 @media (min-width: 701px) {
   .trip-modal-backdrop { align-items: center; }
-  .trip-modal { border-radius: 16px; max-height: 80vh; }
+  .trip-modal { border-radius: var(--radius); max-height: 80vh; }
 }
 
 .trip-modal__header {
@@ -1798,7 +1803,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   align-items: center;
   gap: 12px;
   padding: 18px 18px 14px;
-  border-bottom: 1px solid var(--line);
+  border-bottom: var(--border-w) solid var(--line);
   position: sticky;
   top: 0;
   background: var(--panel);
@@ -1810,7 +1815,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   font-weight: 700;
   font-size: 16px;
   padding: 5px 10px;
-  border-radius: 6px;
+  border-radius: var(--radius);
   flex-shrink: 0;
 }
 
@@ -1831,7 +1836,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 
 .trip-modal__close {
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
   width: 32px;
   height: 32px;
@@ -1850,12 +1855,12 @@ html.simple-mode .when-choice { min-height: 46px; }
   font-size: 12px;
   color: var(--ink-muted);
   background: var(--panel-raised);
-  border-bottom: 1px solid var(--line);
+  border-bottom: var(--border-w) solid var(--line);
 }
 
 .trip-modal__map {
   height: 220px;
-  border-bottom: 1px solid var(--line);
+  border-bottom: var(--border-w) solid var(--line);
 }
 
 .trip-modal__body {
@@ -1901,7 +1906,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 .trip-stopover--current::before {
   background: var(--signal-amber);
   border-color: var(--signal-amber);
-  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.2);
+  box-shadow: 0 0 0 4px rgba(193, 68, 14, 0.2);
 }
 
 .trip-stopover--cancelled {
@@ -1947,7 +1952,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   gap: 8px;
   flex-wrap: wrap;
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-radius: var(--radius);
   padding: 10px 12px;
   margin-bottom: 12px;
@@ -1957,8 +1962,8 @@ html.simple-mode .when-choice { min-height: 46px; }
 .trip-alarm-offset-row select {
   background: var(--panel);
   color: var(--ink);
-  border: 1px solid var(--line);
-  border-radius: 6px;
+  border: var(--border-w) solid var(--line);
+  border-radius: var(--radius);
   padding: 4px 8px;
   font-family: inherit;
   font-size: 12px;
@@ -1979,7 +1984,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 }
 
 .trip-stopover__alarm-btn:hover { opacity: 1; }
-.trip-stopover__alarm-btn.is-active { opacity: 1; filter: drop-shadow(0 0 4px rgba(245,166,35,.6)); }
+.trip-stopover__alarm-btn.is-active { opacity: 1; filter: drop-shadow(0 0 4px rgba(193, 68, 14,.6)); }
 
 .trip-alarm-banner {
   display: none;
@@ -1996,7 +2001,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   padding: 10px 14px;
   font-size: 13px;
   width: min(480px, calc(100vw - 32px));
-  box-shadow: 0 8px 24px rgba(0,0,0,.35);
+  box-shadow: var(--shadow-md);
 }
 
 .trip-alarm-banner.is-visible { display: flex; }
@@ -2004,9 +2009,9 @@ html.simple-mode .when-choice { min-height: 46px; }
 
 .trip-alarm-banner button {
   background: none;
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
-  border-radius: 6px;
+  border-radius: var(--radius);
   padding: 5px 10px;
   font-size: 12px;
   white-space: nowrap;
@@ -2031,10 +2036,10 @@ html.simple-mode .when-choice { min-height: 46px; }
   text-align: center;
   background: var(--panel);
   border: 1px solid var(--signal-amber);
-  border-radius: 16px;
+  border-radius: var(--radius);
   padding: 36px 28px;
   max-width: 340px;
-  box-shadow: 0 20px 60px rgba(0,0,0,.5);
+  box-shadow: var(--shadow-lg);
 }
 
 .trip-alarm-overlay__icon {
@@ -2062,9 +2067,9 @@ html.simple-mode .when-choice { min-height: 46px; }
 
 .trip-alarm-overlay__card button {
   background: var(--signal-amber);
-  color: #17110a;
+  color: var(--on-amber);
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--radius);
   padding: 12px 24px;
   font-weight: 600;
   font-size: 14px;
@@ -2089,7 +2094,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 
 .map-locate-btn {
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
   border-radius: var(--radius);
   padding: 8px 14px;
@@ -2122,14 +2127,14 @@ html.simple-mode .when-choice { min-height: 46px; }
   font-family: var(--font-display);
   font-weight: 700;
   padding: 3px 8px;
-  border-radius: 4px;
+  border-radius: var(--radius);
 }
 
 .map-isolation-banner button {
   background: none;
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
-  border-radius: 6px;
+  border-radius: var(--radius);
   padding: 5px 10px;
   font-size: 12px;
 }
@@ -2155,9 +2160,9 @@ html.simple-mode .when-choice { min-height: 46px; }
   width: 100%;
   margin-top: 8px;
   background: var(--panel-raised);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   color: var(--ink);
-  border-radius: 8px;
+  border-radius: var(--radius);
   padding: 8px;
   font-size: 12px;
   font-family: var(--font-label);
@@ -2171,7 +2176,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 .journey-mini-map {
   height: 0;
   overflow: hidden;
-  border-radius: 8px;
+  border-radius: var(--radius);
   margin-top: 0;
   transition: height 0.2s ease;
 }
@@ -2179,7 +2184,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 .journey-mini-map.is-open {
   height: 160px;
   margin-top: 8px;
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
 }
 
 /* ============================================================
@@ -2190,7 +2195,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   display: inline-block;
   width: 14px;
   height: 14px;
-  border: 2px solid rgba(255, 255, 255, 0.25);
+  border: 2px solid rgba(23, 19, 14, 0.18);
   border-top-color: var(--signal-amber);
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
@@ -2224,8 +2229,8 @@ html.simple-mode .when-choice { min-height: 46px; }
   align-items: center;
   gap: 6px;
   background: var(--panel);
-  border: 1px solid var(--line);
-  border-radius: 999px;
+  border: var(--border-w) solid var(--line);
+  border-radius: var(--radius);
   padding: 6px 14px;
   font-size: 13px;
   color: var(--ink);
@@ -2236,7 +2241,7 @@ html.simple-mode .when-choice { min-height: 46px; }
 .toggle-chip:has(input:checked) {
   border-color: var(--signal-amber);
   color: var(--signal-amber);
-  background: rgba(245, 166, 35, 0.1);
+  background: rgba(193, 68, 14, 0.1);
 }
 
 .toggle-chip input {
@@ -2251,7 +2256,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   margin-top: 10px;
   padding: 8px 10px;
   background: var(--panel-raised);
-  border-radius: 8px;
+  border-radius: var(--radius);
   font-size: 13px;
   font-weight: 600;
   color: var(--ink);
@@ -2289,7 +2294,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   display: flex;
   align-items: flex-start;
   gap: 10px;
-  background: rgba(255, 93, 108, 0.1);
+  background: rgba(163, 38, 32, 0.1);
   border: 1px solid var(--signal-red);
   color: var(--signal-red);
   border-radius: var(--radius);
@@ -2309,7 +2314,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   font-size: 12px;
   font-weight: 700;
   margin-top: 1px;
-  background: rgba(255, 93, 108, 0.16);
+  background: rgba(163, 38, 32, 0.16);
 }
 .disclaimer-banner__text { flex: 1; }
 
@@ -2338,7 +2343,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   align-items: center;
   gap: 12px;
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-radius: var(--radius);
   padding: 10px 14px;
 }
@@ -2376,7 +2381,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   justify-content: space-between;
   align-items: center;
   background: var(--panel);
-  border: 1px solid var(--line);
+  border: var(--border-w) solid var(--line);
   border-radius: var(--radius);
   padding: 12px 14px;
   color: var(--ink);
@@ -2409,7 +2414,7 @@ html.simple-mode .when-choice { min-height: 46px; }
   body { padding-bottom: 84px; }
   .app-header { height: auto; min-height: 64px; padding: 10px 12px; gap: 8px; }
   .brand { font-size: 15px; gap: 7px; }
-  .brand::before { width: 24px; height: 24px; border-radius: 7px; font-size: 12px; }
+  .brand::before { width: 24px; height: 24px; border-radius: var(--radius); font-size: 12px; }
   .search-box--global { min-width: 0; }
   .search-box--global input { font-size: 14px; padding: 10px 38px; }
   .header-icon-btn { width: 34px; height: 34px; font-size: 15px; }
@@ -2431,10 +2436,9 @@ html.simple-mode .when-choice { min-height: 46px; }
   .journey-options-row .mode-filter { margin-bottom: 8px; }
   .journey-via-row__fields { flex-direction: column; align-items: stretch; }
   .journey-via-wait select { width: 100%; }
-  /* Freischwebende Glas-Leiste statt einer am Rand klebenden Balken -
-     abgesetzt vom Bildschirmrand, mit Weichzeichner-Hintergrund wie der
-     Header/die Toasts, damit sie wie eine eigene Ebene über dem Inhalt
-     wirkt statt wie ein angeklebtes Steuerelement. */
+  /* Fest angedockte, flache Signage-Leiste statt einer schwebenden Glas-
+     Pille - opake Papierfläche, dicke Kontur, harter Versatzschatten wie
+     der Rest der Oberfläche. Bewusst kein Blur mehr im Theme. */
   .mobile-nav {
     display: block; position: fixed; left: 10px; right: 10px;
     bottom: calc(10px + env(safe-area-inset-bottom));
@@ -2443,12 +2447,10 @@ html.simple-mode .when-choice { min-height: 46px; }
        Werte bis ~1000, das HUD/die Navigation soll aber immer sichtbar und
        bedienbar bleiben, unabhängig von der Karte. */
     z-index: 1100;
-    background: rgba(20, 26, 33, 0.82);
-    backdrop-filter: blur(18px) saturate(1.4);
-    -webkit-backdrop-filter: blur(18px) saturate(1.4);
-    border: 1px solid var(--line);
-    border-radius: 20px;
-    box-shadow: var(--shadow-lg);
+    background: var(--panel);
+    border: var(--border-w) solid var(--line);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
     padding: 6px 4px;
   }
   .mobile-nav__list { display: grid; grid-template-columns: repeat(6, 1fr); }
@@ -2456,12 +2458,12 @@ html.simple-mode .when-choice { min-height: 46px; }
     position: relative;
     border: 0; background: transparent; color: var(--ink-muted);
     padding: 7px 1px; display: flex; flex-direction: column; align-items: center; gap: 2px;
-    border-radius: 14px;
+    border-radius: 2px;
     transition: color .15s ease, background .15s ease;
   }
   .mobile-nav__item span { font-size: 16px; line-height: 1.1; }
   .mobile-nav__item small { font-size: 8.5px; }
-  .mobile-nav__item.is-active { color: var(--signal-amber); background: var(--signal-amber-soft); }
+  .mobile-nav__item.is-active { color: var(--on-amber); background: var(--signal-amber); }
   .toast-container { bottom: calc(66px + env(safe-area-inset-bottom) + 20px); }
   .global-disclaimer { padding-bottom: calc(28px + 66px + env(safe-area-inset-bottom) + 20px); }
 }