Ein langes Label ("Meine Haltestellen") ist in der 6-spaltigen mobilen
Navigationsleiste auf zwei Zeilen umgebrochen und hat dadurch die ganze
Leiste höher gemacht, als die reservierte body-padding-bottom (84px)
vorgesehen hat - die Leiste hat sich sichtbar über die letzte Abfahrts-
zeile gelegt.
- Labels in der mobilen Navi-Leiste sind jetzt zwangsweise einzeilig
(nowrap + ellipsis) statt umzubrechen, damit alle 6 Items exakt
gleich hoch bleiben
- Sicherheitsabstand unten leicht erhöht (84px -> 92px), inkl. der
abhängigen Toast-/Disclaimer-Offsets
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Zwei konkrete Punkte aus dem Feedback zum neuen Design:
- Die segmentierte Pillen-Navigation (schwebende Karte mit rundem
Amber-Button) passte stilistisch nicht zum sonst flachen, scharf-
kantigen Brutalist-Look. Ersetzt durch eine randlose Signage-Leiste
direkt unter dem Header: Reiter liegen flach auf der Fläche, der
aktive Reiter bekommt nur eine dezente Amber-Unterlinie plus
sanften Flächenton statt eines separaten schwebenden Verlaufs-
Buttons - wirkt mehr wie eine Zugtafel mit Reitern, weniger wie
ein UI-Widget.
- Auf dem Handy hatte die Suche praktisch keinen Platz mehr: Marke
(Icon + "ÖPNV NAVI"-Schriftzug) + Suchfeld + 3 Icon-Buttons mussten
sich eine Zeile teilen, und die Wortmarke trug durch einen bisher
nur ab 701px zurückgesetzten Button-Rahmen zusätzlich nativen
Browser-Rahmen/-Innenabstand. Behoben: Wortmarke ab 700px Breite
ausgeblendet (nur das Icon bleibt als Home-Button), Button-Reset
gilt jetzt für alle Breiten, Icon-Buttons und Abstände auf dem
Handy weiter verkleinert - die Sucheingabe bekommt dadurch wieder
echten Platz statt auf ein paar Pixel zusammengequetscht zu sein.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
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
Die letzten beiden Commits waren zu zaghaft, um wirklich aufzufallen - unter
anderem, weil zwei der Änderungen durch spätere, unconditioneller stehende
Regeln in der Cascade wieder überschrieben wurden (die Desktop-Breite von
.app-main und die Raster-Spalten von .favorite-cards/.more-grid/
.nearby-preview haben durch die Reihenfolge in der Datei praktisch nichts
bewirkt). Diesmal echte strukturelle Änderungen statt nur zusätzlicher
Schatten, an den tatsächlich wirksamen Stellen im Stylesheet:
- Navigation umgestellt von Unterstrichen-Tabs auf eine segmentierte
Pill-Leiste (Desktop) - aktiver Tab bekommt den vollen Amber-Verlauf als
Hintergrund statt nur eine andere Textfarbe.
- Mobile Bottom-Nav ist jetzt eine freischwebende Glas-Leiste (abgesetzt vom
Rand, abgerundet, Weichzeichner-Hintergrund wie Header/Toasts) statt eines
am Bildschirmrand klebenden Balkens. Aktiver Eintrag bekommt eine
Hintergrund-Pille statt nur Textfarbe. Bottom-Offsets von Toast/Footer
entsprechend angepasst.
- Abfahrtstafel: Uhrzeit deutlich größer/fetter (Kernaussage der Zeile),
Linien-Badge etwas kräftiger, dickerer farbiger Rand pro Zeile.
- Logo/Marke: kleines Icon-Badge davor, größer und fetter - dabei einen
echten Bug gefunden und behoben (eine spätere `.brand { font: inherit }`
-Regel hat die Typografie der Marke bisher komplett überschrieben, sie lief
also die ganze Zeit in der Browser-Standardschrift statt der eigentlich
vorgesehenen).
- Eckenradius global etwas großzügiger (10→13px / 18→22px).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Zweite Polish-Runde nach dem letzten Commit, wieder additiv:
- Primäre Aktion auf der Startseite ("In meiner Nähe") hebt sich jetzt mit
Amber-Verlauf + Glow von der sekundären ab, statt nur per Rahmenfarbe -
klarere visuelle Hierarchie auf den ersten Blick.
- Glocken-Badge pulsiert dezent, solange ungelesene Benachrichtigungen
vorliegen, statt ein statischer Punkt zu sein.
- Favoriten-Stern-Button: aktiver Zustand jetzt mit Hintergrund-Tönung statt
nur Rahmenfarbe, plus Hover für den inaktiven Zustand.
- Such-Ergebniszeilen mit sanftem Hover-Verschieben statt hartem Wechsel.
- Einstellungen/Verbindungstest-Karten bekommen denselben Amber-Akzentbalken
wie die Panel-Überschriften - konsistent mit dem Rest der App statt wie
ein Fremdkörper aus der letzten Runde.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Baut auf dem vorhandenen Design (dunkles "Solari-Anzeigetafel"-Theme) auf,
statt es zu ersetzen - die Grundlage war schon gut, es fehlte vor allem die
Nutzung des Platzes auf breiten Bildschirmen:
- Neuer Breakpoint ab 960px: Karten-Raster (Favoriten, Mehr, In der Nähe)
bekommen mehr Spalten statt als eine schmale Spalte in der Bildschirmmitte
zu wirken, Content-Bereich und Formulare etwas großzügiger gepolstert.
- Hover-/Elevation-Effekte für journey-card, notification-item und
remark-card ergänzt (nutzt dieselben --shadow-Tokens wie die bereits
vorhandenen Favoriten-/Mehr-Karten) - macht die Maus-Bedienung auf dem
Desktop greifbarer, ohne Mobile/Touch zu beeinträchtigen.
- Mode-Filter-Chips bekommen jetzt auch im inaktiven Zustand ein Hover.
- Dezentes Fade-in beim Tab-Wechsel statt hartem Springen (respektiert
prefers-reduced-motion wie der Rest der App).
- Themenfarbener Scrollbalken (Chrome/Firefox) statt Browser-Standardgrau,
scroll-behavior: smooth für Anker-/Fokussprünge.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Phase 2-4 der WebApp-Angleichung an die iOS-App:
- Navigation: Favoriten und Störungen sind jetzt eigene Top-Level-Tabs
(Desktop-Tableiste + mobile Bottom-Nav) statt nur über das Mehr-Grid bzw.
den Stern im Header erreichbar. Neue Header-Icons für Einstellungen (⚙)
und Benachrichtigungen (🔔, mit rotem Punkt bei ungelesenen Einträgen).
"Mehr" ist jetzt schlanker (In der Nähe, Tickets, Verlauf, App-Info mit
Verbindungstest gegen /health/full) und die Sprachauswahl in einen neuen
eigenen "Einstellungen"-Tab umgezogen.
- Benachrichtigungscenter (js/notifications.js, neu): persistenter
Verlauf über IndexedDB, sowohl vom Service Worker (eingehende Web-Push-
Nachrichten, auch bei geschlossenem Tab) als auch von der Seite selbst
(Störungs-Matches bei Favoriten, Fahrtalarm) beschrieben. Neuer
"Benachrichtigungen"-Tab zeigt den Verlauf, Badge am Glocken-Icon zeigt
ungelesene Einträge, per postMessage vom Service Worker live aktualisiert.
- Einfacher Modus: neuer Toggle im Einstellungen-Tab, persistiert in
localStorage, setzt eine .simple-mode-Klasse auf <html> - moderat
größere Schrift plus Ausblenden von Verkehrsmittel-Filter/Fahrrad-Option/
"Zwischenhalt hinzufügen" im Routenplaner, analog zur iOS-App (bewusst
keine Accessibility-Schriftgrößenstufe, die ist für Screenreader gedacht).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Löst die WebApp aus der eigenen OTP2-Instanz heraus und nutzt dieselbe
HAFAS-Anbindung (VBB + Deutsche Bahn) wie die iOS-App, damit beide Clients
gegen dasselbe Backend-Feature-Set laufen:
- js/api.js: getJourneys() ruft jetzt /journeys statt /otp/journeys auf,
inkl. via0-2 (Lat/Lon/Name/WaitMinutes), modes, bike, earlierRef/laterRef.
Gibt die volle Antwort zurück statt nur { journeys }.
- js/app.js: bis zu 3 Zwischenhalte mit eigener Ortssuche und Aufenthaltszeit,
Verkehrsmittel-Filter (ModeFilter-Komponente wiederverwendet), Fahrrad-
Toggle, Früher/Später-Buttons zum Nachladen. Share-Link-Format um
Vias/Modes/Bike erweitert, alter Umstiegszeit-Puffer entfernt (von HAFAS
nicht unterstützt).
- index.html/styles.css: neue Formularelemente für Zwischenhalte, Filter
und Paginierung.
- js/i18n.js: neue Übersetzungsschlüssel in DE/EN, alten sourceNote-String
korrigiert (& wurde per textContent gesetzt und wäre literal
angezeigt worden statt als &).
- README.md: Feature-Beschreibung aktualisiert.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01De7H8hR1Q9DdgyuS2ukN6y
Claude