diff --git a/index.html b/index.html
index dbcda79..f122360 100644
--- a/index.html
+++ b/index.html
@@ -6,9 +6,9 @@
ÖPNV Navi – Live-Abfahrten für Berlin & Brandenburg
-
+
-
+
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); }
}