Mobile Darstellung: Header läuft über den Viewport, Cart-Drawer bricht das Layout

[MoritzWaldau]

Problem

Bei 390×844 px (iPhone-Breite) live bestätigt: Logo, Shop, Kategorien, Sprache, Währung, Design-Switcher, Warenkorb und „Anmelden" bleiben nebeneinander in einer Zeile, die Seite wird breiter als der Viewport. „Anmelden" wird rechts abgeschnitten; das CartDrawer blutet als weiße Spalte sichtbar in den rechten Bildrand ein, obwohl es geschlossen sein sollte.

Zusätzlich lädt OrderSphere.Web.styles.css (Razor-Component-scoped-CSS-Datei) bei jedem Seitenaufruf nicht — Konsolenfehler „Refused to apply style … MIME type ('') is not a supported stylesheet MIME type". Aktuell folgenlos (keine .razor.css-Dateien im Projekt), blockiert aber jedes künftig eingeführte component-scoped CSS stillschweigend.

Ursache

• src/Frontend/OrderSphere.Web/Components/AppHeader.razor besitzt keine Breakpoint-Logik/kein Burger-Menü für schmale Viewports.
• src/Frontend/OrderSphere.Web/Components/CartDrawer.razor:11 und Components/AdvisorDrawer.razor:12 haben Width="420px" fest codiert statt responsiv.
• Der MIME-Fehler kommt vermutlich aus einer falschen Content-Type-Behandlung im BFF-Static-File-Proxy (src/Gateways/OrderSphere.Bff) für diese eine generierte Datei.

Fix

• AppHeader unterhalb eines Breakpoints in ein Burger-Menü kollabieren lassen (Vorbild: die bereits responsive MudDrawer-Variante in Layout/AdminLayout.razor).
• CartDrawer/AdvisorDrawer auf Mobile 100 % Breite statt fix 420 px.
• BFF-Static-File-Handling für OrderSphere.Web.styles.css korrigieren, sodass der korrekte Content-Type: text/css gesetzt wird.