chore: update build artifacts for v1.6.25

REQUIREMENTS.md

@@ -39,7 +39,7 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
 | FR-032 | Nach Bestellschluss (Cutoff-Zeit) dürfen keine neuen Bestellungen oder Stornierungen für diesen Tag möglich sein. | Hoch | v1.0.1 |
 | FR-033 | Es muss möglich sein, dasselbe Menü mehrfach zu bestellen. Bei Mehrfachbestellungen muss die Anzahl angezeigt werden. | Niedrig | v1.0.1 |
 | **Kostentransparenz & Bestellhistorie** | | | |
-| FR-040 | Das System muss die Gesamtkosten aller Bestellungen einer Woche automatisch berechnen und anzeigen. | Mittel | v1.1.0 |
+| ~~FR-040~~ | ~~Das System muss die Gesamtkosten aller Bestellungen einer Woche automatisch berechnen und anzeigen.~~ | ~~Mittel~~ | ~~v1.1.0~~ (Obsolet: Display entfernt auf User-Wunsch) |
 | FR-041 | Das System muss dem Benutzer eine Bestellhistorie (gruppiert nach Monat und KW) mit Fortschrittsanzeige auf Abruf in einem Modal bereitstellen. Die Historie muss über ein lokales Delta-Caching verfügen, um Ladezeiten zu minimieren. | Mittel | v1.4.0 (Update v1.4.7) |
 | **Bestell-Countdown** | | | |
 | FR-050 | Das System muss vor Bestellschluss einen visuell hervorgehobenen Countdown anzeigen. | Mittel | v1.1.0 |
@@ -63,7 +63,7 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
 | FR-092 | Solange bestellbare Menüs für nächste Woche vorhanden sind, aber noch keine Bestellungen getätigt wurden (Prüfung Montag–Donnerstag; Freitag ist ausgenommen), muss der entsprechende Navigation-Button animiert und farblich hervorgehoben werden. Nach der ersten Bestellung muss die Hervorhebung erlöschen. Zusätzlich muss beim erstmaligen Erscheinen der Daten ein einmaliger Toast-Hinweis angezeigt werden. | Mittel | v1.6.0 (Update v1.7.0) |
 | FR-093 | Das System muss dem Benutzer ermöglichen, durch Klicken auf das Alarm-Icon im Header eine manuelle Prüfung der geflaggten Menüs auszulösen. Während der Prüfung muss das Icon visuell animiert sein (Rotation). Nach Abschluss der Prüfung muss eine Toast-Nachricht mit der Anzahl der geprüften Menüs angezeigt werden. | Mittel | v1.6.13 |
 | **Sprachfilter** | | | |
-| FR-120 | Das System muss zweisprachige Menübeschreibungen (Deutsch/Englisch) erkennen und dem Benutzer erlauben, via UI-Toggle zwischen DE, EN und ALL (beide Sprachen) zu wechseln. Die Sprachpräferenz muss persistent gespeichert werden. Allergen-Codes müssen in allen Modi angezeigt werden. | Mittel | v1.6.0 |
+| FR-120 | Das System muss zweisprachige Menübeschreibungen (Deutsch/Englisch) erkennen und dem Benutzer erlauben, via UI-Dropdown (Icon mit Label) zwischen DE, EN und ALL (beide Sprachen) zu wechseln. Die Sprachpräferenz muss persistent gespeichert werden. Allergen-Codes müssen in allen Modi angezeigt werden. | Mittel | v1.6.0 (Update v1.6.21) |
 | FR-121 | Das System muss bei fehlenden Übersetzungen in zweisprachigen Menüs robust reagieren. Wenn ein Gang nur in einer Sprache vorliegt, muss dieser Teil für beide Sprachansichten herangezogen werden, um die Konsistenz der Ganganzahl zu gewährleisten. | Mittel | v1.6.10 |
 | FR-122 | Bei Auswahl von EN muss die gesamte Benutzeroberfläche (Buttons, Tooltips, Modale, Status-Badges) auf Englisch umgestellt werden. Bei DE oder ALL verbleibt die GUI auf Deutsch. | Mittel | v1.7.0 |
 | **Benutzer-Feedback** | | | |

changelog.md

@@ -1,4 +1,37 @@
-## v1.6.17 (2026-03-11)
+## v1.6.25 (2026-03-12)
+- ⚡ **Performance**: Debounced Resize-Listener hinzugefügt. Die Höhen-Synchronisierung der Menü-Karten wird nun auch bei Viewport-Änderungen (z.B. Fenster-Skalierung oder Orientierungswechsel) automatisch und effizient ausgeführt.
+- 🧹 **Tech**: `debounce` Utility-Funktion in `utils.js` ergänzt.
+
+## v1.6.24 (2026-03-12)
+- ⚡ **Performance**: Layout Thrashing in `syncMenuItemHeights` behoben. Durch Batch-Verarbeitung von DOM-Lese- und Schreibvorgängen wurde die Rendering-Effizienz beim Wochenwechsel verbessert.
+
+## v1.6.23 (2026-03-12)
+- 🎨 **UI**: Umfassende UI-Verbesserungen umgesetzt:
+  - **Glassmorphism**: Header-Hintergrundtransparenz auf 72% reduziert (war 90%) – der Blur-Effekt ist nun beim Scrollen sichtbar.
+  - **Dark-Mode Kontrast**: `--bg-card` abgedunkelt (`#283548`), `--border-color` leicht aufgehellt (`#526377`) – bessere Trennung zwischen Body und Card.
+  - **Accent-Color**: Im Light-Mode von Slate-900 (fast schwarz) auf Blue-600 (`#2563eb`) geändert – klarer sichtbarer Akzent.
+  - **Typography**: `.item-desc` `line-height` auf 1.5 (body-konsistent), `.day-date` kleiner und dezenter (0.8rem, opacity 0.75), `.item-name` leicht reduziert (0.95rem).
+  - **Item-Separator**: Subtile Trennlinie zwischen Menü-Items in der Tageskarte.
+  - **Badge-Konsistenz**: Alle Badges (`badge`, `tag-badge-small`) auf `border-radius: 6px` vereinheitlicht.
+  - **A11y – Reduced Motion**: `@media (prefers-reduced-motion: reduce)` deaktiviert alle dekorativen Puls-/Glow-Animationen für Motion-sensitive Nutzer.
+  - **A11y – Focus-Visible**: Globaler `:focus-visible` Outline-Ring (2px, accent-color) für Tastaturnavigation.
+  - **Active-States**: `:active` Feedback (`scale(0.97)`) für Bestell-, Storno- und Flag-Buttons.
+  - **Mobile Breakpoint**: Von 600px auf 768px erweitert (deckt Tablets ab); Grid-Deklaration explizit gesetzt um Browser-Override-Bug zu vermeiden.
+
+## v1.6.22 (2026-03-12)
+- 🧹 **UX Cleanup**: Text-Label am Sprachumschalter entfernt. Der Button zeigt nun nur noch das `translate`-Icon an, was die Controls-Bar ruhiger macht.
+
+## v1.6.21 (2026-03-12)
+- ✨ **Feature**: Sprachumschaltung Redesign – Die Sprachwahl (DE/EN/ALL) wurde von der Header-Mitte in den rechten Controls-Bereich verschoben. Sie ist nun als Icon-Dropdown mit aktueller Status-Anzeige (z.B. "DE") verfügbar. Für die deutsche Sprache wird die 🇦🇹 Flagge verwendet.
+
+## v1.6.20 (2026-03-12)
+- 🧹 **Cleanup**: Wochenkosten-Anzeige entfernt (Weekly Cost Display) – Auf User-Wunsch wurde die Anzeige der wöchentlichen Gesamtkosten im Header entfernt, um die UI zu entschlacken. FR-040 als obsolet markiert.
+
+## v1.6.19 (2026-03-11)
+- 🎨 **UX**: Grid-Layout & Glow Overlap Fix – Die Karten-Inhalte wurden auf ein sauberes Grid-Gap-Modell umgestellt (`row-gap: 1.5rem`). Dies verhindert technische Überlappungen von Menü-Items und stellt sicher, dass Glow-Effekte (Bestellt, Highlight) alle Inhalte korrekt umschließen. Manuelle Abstände wurden bereinigt.
+
+- 🎨 **UX**: Glow-Styling angepasst – Die farblichen Hervorhebungen (Bestellt, Highlight, Flagged) wurden so korrigiert, dass sie nicht mehr bis an den Kartenrand reichen, sondern innerhalb des Karten-Bodys mit entsprechendem Seitenabstand angezeigt werden.
+
 - 🎨 **UX**: Fix Card Content Overflow – In der 5-Tage-Ansicht (Landscape) auf schmalen Bildschirmen umbrechen die Status-Badges und Buttons jetzt korrekt in eine neue Zeile, statt über den Kartenrand hinauszuragen. Das Karten-Padding wurde für Desktop-Ansichten optimiert.
 
 - 🧹 **Wartbarkeit**: Alle verbliebenen hardcodierten deutschen UI-Strings in `actions.js` via `t()` übersetzt (Progress-Texte, Fehler-Labels, 'Angemeldet', 'Hintergrund-Synchronisation').

dist/kantine.bundle.js

@@ -1136,7 +1136,7 @@ const API_BASE = 'https://api.bessa.app/v1';
 const GUEST_TOKEN = 'c3418725e95a9f90e3645cbc846b4d67c7c66131';
 
 /** The client version injected into every API request header. */
-const CLIENT_VERSION = 'v1.6.17';
+const CLIENT_VERSION = 'v1.6.19';
 
 /** Bessa venue ID for Knapp-Kantine. */
 const VENUE_ID = 591;
@@ -1292,7 +1292,6 @@ const TRANSLATIONS = {
         noMenuDataHint: 'Versuchen Sie eine andere Woche oder schauen Sie später vorbei.',
 
         // Weekly cost
-        costLabel: 'Gesamt',
 
         // Countdown
         orderDeadline: 'Bestellschluss',
@@ -1428,7 +1427,6 @@ const TRANSLATIONS = {
         noMenuDataHint: 'Try another week or check back later.',
 
         // Weekly cost
-        costLabel: 'Total',
 
         // Countdown
         orderDeadline: 'Order deadline',
@@ -1580,9 +1578,10 @@ function setLangMode(lang) {
 /* harmony export */   OR: () => (/* binding */ renderVisibleWeeks),
 /* harmony export */   Ux: () => (/* binding */ checkForUpdates),
 /* harmony export */   gJ: () => (/* binding */ updateNextWeekBadge),
-/* harmony export */   showErrorModal: () => (/* binding */ showErrorModal)
+/* harmony export */   showErrorModal: () => (/* binding */ showErrorModal),
+/* harmony export */   wy: () => (/* binding */ syncMenuItemHeights)
 /* harmony export */ });
-/* unused harmony exports updateWeeklyCost, syncMenuItemHeights, createDayCard, fetchVersions, updateCountdown, removeCountdown */
+/* unused harmony exports createDayCard, fetchVersions, updateCountdown, removeCountdown */
 /* harmony import */ var _state_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(901);
 /* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(413);
 /* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(521);
@@ -1681,29 +1680,6 @@ function updateNextWeekBadge() {
     }
 }
 
-function updateWeeklyCost(days) {
-    let totalCost = 0;
-    if (days && days.length > 0) {
-        days.forEach(day => {
-            if (day.items) {
-                day.items.forEach(item => {
-                    const articleId = item.articleId || parseInt(item.id.split('_')[1]);
-                    const key = `${day.date}_${articleId}`;
-                    const orders = _state_js__WEBPACK_IMPORTED_MODULE_0__/* .orderMap */ .L.get(key) || [];
-                    if (orders.length > 0) totalCost += item.price * orders.length;
-                });
-            }
-        });
-    }
-
-    const costDisplay = document.getElementById('weekly-cost-display');
-    if (totalCost > 0) {
-        costDisplay.innerHTML = `<span class="material-icons-round">shopping_bag</span> <span>${(0,_i18n_js__WEBPACK_IMPORTED_MODULE_5__.t)('costLabel')}: ${totalCost.toFixed(2).replace('.', ',')} €</span>`;
-        costDisplay.classList.remove('hidden');
-    } else {
-        costDisplay.classList.add('hidden');
-    }
-}
 
 function renderVisibleWeeks() {
     const menuContainer = document.getElementById('menu-container');
@@ -1730,11 +1706,9 @@ function renderVisibleWeeks() {
                 <p>${(0,_i18n_js__WEBPACK_IMPORTED_MODULE_5__.t)('noMenuData')} ${targetWeek} (${targetYear}).</p>
                 <small>${(0,_i18n_js__WEBPACK_IMPORTED_MODULE_5__.t)('noMenuDataHint')}</small>
             </div>`;
-        document.getElementById('weekly-cost-display').classList.add('hidden');
         return;
     }
 
-    updateWeeklyCost(daysInTargetWeek);
 
     const headerWeekInfo = document.getElementById('header-week-info');
     const weekTitle = _state_js__WEBPACK_IMPORTED_MODULE_0__/* .displayMode */ .sw === 'this-week' ? (0,_i18n_js__WEBPACK_IMPORTED_MODULE_5__.t)('thisWeek') : (0,_i18n_js__WEBPACK_IMPORTED_MODULE_5__.t)('nextWeek');
@@ -1765,23 +1739,39 @@ function renderVisibleWeeks() {
 function syncMenuItemHeights(grid) {
     const cards = grid.querySelectorAll('.menu-card');
     if (cards.length === 0) return;
+
+    // 1. Gather all menu-item groups (rows) across cards
+    const itemRows = [];
     let maxItems = 0;
-    cards.forEach(card => {
-        maxItems = Math.max(maxItems, card.querySelectorAll('.menu-item').length);
+
+    const cardItems = Array.from(cards).map(card => {
+        const items = Array.from(card.querySelectorAll('.menu-item'));
+        maxItems = Math.max(maxItems, items.length);
+        return items;
     });
+
     for (let i = 0; i < maxItems; i++) {
-        let maxHeight = 0;
-        const itemsAtPos = [];
-        cards.forEach(card => {
-            const items = card.querySelectorAll('.menu-item');
-            if (items[i]) {
-                items[i].style.height = 'auto';
-                maxHeight = Math.max(maxHeight, items[i].offsetHeight);
-                itemsAtPos.push(items[i]);
-            }
-        });
-        itemsAtPos.forEach(item => { item.style.height = `${maxHeight}px`; });
+        // Collect i-th item from each card (forming a "row")
+        itemRows[i] = cardItems.map(items => items[i]).filter(item => !!item);
     }
+
+    // 2. Batch Reset (Write phase) - clear old heights to let them flow naturally
+    itemRows.flat().forEach(item => {
+        item.style.height = 'auto';
+    });
+
+    // 3. Batch Read (Read phase) - measure all heights in one pass to avoid layout thrashing
+    const rowMaxHeights = itemRows.map(row => {
+        return Math.max(...row.map(item => item.offsetHeight));
+    });
+
+    // 4. Batch Apply (Write phase) - set synchronized heights
+    itemRows.forEach((row, i) => {
+        const height = `${rowMaxHeights[i]}px`;
+        row.forEach(item => {
+            item.style.height = height;
+        });
+    });
 }
 
 function createDayCard(day) {
@@ -2356,6 +2346,7 @@ function updateAlarmBell() {
 /* harmony export */   U4: () => (/* binding */ isNewer),
 /* harmony export */   ZD: () => (/* binding */ escapeHtml),
 /* harmony export */   gs: () => (/* binding */ getRelativeTime),
+/* harmony export */   sg: () => (/* binding */ debounce),
 /* harmony export */   sn: () => (/* binding */ getISOWeek)
 /* harmony export */ });
 /* unused harmony export splitLanguage */
@@ -2609,6 +2600,18 @@ function getLocalizedText(text) {
     return split.de || split.raw;
 }
 
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
 
 /***/ }
 
@@ -2718,13 +2721,7 @@ function injectUI() {
                     </button>
                 </div>
                 <div class="header-center-wrapper">
-                    <div id="lang-toggle" class="lang-toggle" title="Sprache der Menübeschreibung">
-                        <button class="lang-btn${state/* langMode */.Kl === 'de' ? ' active' : ''}" data-lang="de">DE</button>
-                        <button class="lang-btn${state/* langMode */.Kl === 'en' ? ' active' : ''}" data-lang="en">EN</button>
-                        <button class="lang-btn${state/* langMode */.Kl === 'all' ? ' active' : ''}" data-lang="all">ALL</button>
-                    </div>
                     <div id="header-week-info" class="header-week-info"></div>
-                    <div id="weekly-cost-display" class="weekly-cost hidden"></div>
                 </div>
                 <div class="controls">
                     <button id="btn-refresh" class="icon-btn" aria-label="Menüdaten aktualisieren" title="Menüdaten neu laden">
@@ -2739,6 +2736,16 @@ function injectUI() {
                     <button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme" title="Erscheinungsbild (Hell/Dunkel) wechseln">
                         <span class="material-icons-round theme-icon">light_mode</span>
                     </button>
+                    <div id="lang-toggle" class="lang-toggle-dropdown" title="Sprache der Menübeschreibung">
+                        <button id="btn-lang-toggle" class="icon-btn" aria-label="Sprache wählen" title="Sprache der Menübeschreibung">
+                            <span class="material-icons-round">translate</span>
+                        </button>
+                        <div id="lang-dropdown" class="lang-dropdown-menu hidden">
+                            <button class="lang-btn${state/* langMode */.Kl === 'de' ? ' active' : ''}" data-lang="de">🇦🇹 DE</button>
+                            <button class="lang-btn${state/* langMode */.Kl === 'en' ? ' active' : ''}" data-lang="en">🇬🇧 EN</button>
+                            <button class="lang-btn${state/* langMode */.Kl === 'all' ? ' active' : ''}" data-lang="all">🌐 ALL</button>
+                        </div>
+                    </div>
                     <button id="btn-login-open" class="user-badge-btn icon-btn-small" title="Mit Bessa.app Account anmelden">
                         <span class="material-icons-round">login</span>
                         <span>Anmelden</span>
@@ -2907,6 +2914,8 @@ var constants = __webpack_require__(521);
 var api = __webpack_require__(672);
 // EXTERNAL MODULE: ./src/i18n.js
 var i18n = __webpack_require__(646);
+// EXTERNAL MODULE: ./src/utils.js
+var utils = __webpack_require__(413);
 ;// ./src/events.js
 
 
@@ -2915,6 +2924,7 @@ var i18n = __webpack_require__(646);
 
 
 
+
 /**
  * Updates all static UI labels/tooltips to match the current language.
  * Called when the user switches the language toggle.
@@ -3030,12 +3040,22 @@ function bindEvents() {
     const historyModal = document.getElementById('history-modal');
     const btnHistoryClose = document.getElementById('btn-history-close');
 
+    const btnLangToggle = document.getElementById('btn-lang-toggle');
+    const langDropdown = document.getElementById('lang-dropdown');
+    if (btnLangToggle && langDropdown) {
+        btnLangToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            langDropdown.classList.toggle('hidden');
+        });
+    }
+
     document.querySelectorAll('.lang-btn').forEach(btn => {
         btn.addEventListener('click', () => {
             (0,state/* setLangMode */.UD)(btn.dataset.lang);
             localStorage.setItem(constants.LS.LANG, btn.dataset.lang);
             document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
             btn.classList.add('active');
+            if (langDropdown) langDropdown.classList.add('hidden');
             updateUILanguage();
         });
     });
@@ -3069,6 +3089,9 @@ function bindEvents() {
     window.addEventListener('click', (e) => {
         if (e.target === historyModal) historyModal.classList.add('hidden');
         if (e.target === highlightsModal) highlightsModal.classList.add('hidden');
+        if (langDropdown && !langDropdown.classList.contains('hidden') && !e.target.closest('#lang-toggle')) {
+            langDropdown.classList.add('hidden');
+        }
     });
 
     const versionTag = document.querySelector('.version-tag');
@@ -3261,6 +3284,12 @@ function bindEvents() {
         (0,actions/* updateAuthUI */.i_)();
         (0,ui_helpers/* renderVisibleWeeks */.OR)();
     });
+
+    // Sync heights on window resize (FR-Performance)
+    window.addEventListener('resize', (0,utils/* debounce */.sg)(() => {
+        const grid = document.querySelector('.days-grid');
+        if (grid) (0,ui_helpers/* syncMenuItemHeights */.wy)(grid);
+    }, 150));
 }
 
 ;// ./src/index.js

src/constants.js

@@ -11,7 +11,7 @@ export const API_BASE = 'https://api.bessa.app/v1';
 export const GUEST_TOKEN = 'c3418725e95a9f90e3645cbc846b4d67c7c66131';
 
 /** The client version injected into every API request header. */
-export const CLIENT_VERSION = 'v1.6.17';
+export const CLIENT_VERSION = 'v1.6.19';
 
 /** Bessa venue ID for Knapp-Kantine. */
 export const VENUE_ID = 591;

src/events.js

@@ -1,9 +1,10 @@
 import { displayMode, langMode, authToken, currentUser, orderMap, userFlags, pollIntervalId, setLangMode, setDisplayMode, setAuthToken, setCurrentUser, setOrderMap } from './state.js';
 import { updateAuthUI, loadMenuDataFromAPI, fetchOrders, startPolling, stopPolling, fetchFullOrderHistory, addHighlightTag, renderTagsList, refreshFlaggedItems } from './actions.js';
-import { renderVisibleWeeks, openVersionMenu, updateNextWeekBadge, updateAlarmBell } from './ui_helpers.js';
+import { renderVisibleWeeks, openVersionMenu, updateNextWeekBadge, updateAlarmBell, syncMenuItemHeights } from './ui_helpers.js';
 import { API_BASE, GUEST_TOKEN, LS } from './constants.js';
 import { apiHeaders } from './api.js';
 import { t } from './i18n.js';
+import { debounce } from './utils.js';
 
 /**
  * Updates all static UI labels/tooltips to match the current language.
@@ -120,12 +121,22 @@ export function bindEvents() {
     const historyModal = document.getElementById('history-modal');
     const btnHistoryClose = document.getElementById('btn-history-close');
 
+    const btnLangToggle = document.getElementById('btn-lang-toggle');
+    const langDropdown = document.getElementById('lang-dropdown');
+    if (btnLangToggle && langDropdown) {
+        btnLangToggle.addEventListener('click', (e) => {
+            e.stopPropagation();
+            langDropdown.classList.toggle('hidden');
+        });
+    }
+
     document.querySelectorAll('.lang-btn').forEach(btn => {
         btn.addEventListener('click', () => {
             setLangMode(btn.dataset.lang);
             localStorage.setItem(LS.LANG, btn.dataset.lang);
             document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
             btn.classList.add('active');
+            if (langDropdown) langDropdown.classList.add('hidden');
             updateUILanguage();
         });
     });
@@ -159,6 +170,9 @@ export function bindEvents() {
     window.addEventListener('click', (e) => {
         if (e.target === historyModal) historyModal.classList.add('hidden');
         if (e.target === highlightsModal) highlightsModal.classList.add('hidden');
+        if (langDropdown && !langDropdown.classList.contains('hidden') && !e.target.closest('#lang-toggle')) {
+            langDropdown.classList.add('hidden');
+        }
     });
 
     const versionTag = document.querySelector('.version-tag');
@@ -351,4 +365,10 @@ export function bindEvents() {
         updateAuthUI();
         renderVisibleWeeks();
     });
+
+    // Sync heights on window resize (FR-Performance)
+    window.addEventListener('resize', debounce(() => {
+        const grid = document.querySelector('.days-grid');
+        if (grid) syncMenuItemHeights(grid);
+    }, 150));
 }

src/i18n.js

@@ -100,7 +100,6 @@ const TRANSLATIONS = {
         noMenuDataHint: 'Versuchen Sie eine andere Woche oder schauen Sie später vorbei.',
 
         // Weekly cost
-        costLabel: 'Gesamt',
 
         // Countdown
         orderDeadline: 'Bestellschluss',
@@ -236,7 +235,6 @@ const TRANSLATIONS = {
         noMenuDataHint: 'Try another week or check back later.',
 
         // Weekly cost
-        costLabel: 'Total',
 
         // Countdown
         orderDeadline: 'Order deadline',

src/ui.js

@@ -54,13 +54,7 @@ export function injectUI() {
                     </button>
                 </div>
                 <div class="header-center-wrapper">
-                    <div id="lang-toggle" class="lang-toggle" title="Sprache der Menübeschreibung">
-                        <button class="lang-btn${langMode === 'de' ? ' active' : ''}" data-lang="de">DE</button>
-                        <button class="lang-btn${langMode === 'en' ? ' active' : ''}" data-lang="en">EN</button>
-                        <button class="lang-btn${langMode === 'all' ? ' active' : ''}" data-lang="all">ALL</button>
-                    </div>
                     <div id="header-week-info" class="header-week-info"></div>
-                    <div id="weekly-cost-display" class="weekly-cost hidden"></div>
                 </div>
                 <div class="controls">
                     <button id="btn-refresh" class="icon-btn" aria-label="Menüdaten aktualisieren" title="Menüdaten neu laden">
@@ -75,6 +69,16 @@ export function injectUI() {
                     <button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme" title="Erscheinungsbild (Hell/Dunkel) wechseln">
                         <span class="material-icons-round theme-icon">light_mode</span>
                     </button>
+                    <div id="lang-toggle" class="lang-toggle-dropdown" title="Sprache der Menübeschreibung">
+                        <button id="btn-lang-toggle" class="icon-btn" aria-label="Sprache wählen" title="Sprache der Menübeschreibung">
+                            <span class="material-icons-round">translate</span>
+                        </button>
+                        <div id="lang-dropdown" class="lang-dropdown-menu hidden">
+                            <button class="lang-btn${langMode === 'de' ? ' active' : ''}" data-lang="de">🇦🇹 DE</button>
+                            <button class="lang-btn${langMode === 'en' ? ' active' : ''}" data-lang="en">🇬🇧 EN</button>
+                            <button class="lang-btn${langMode === 'all' ? ' active' : ''}" data-lang="all">🌐 ALL</button>
+                        </div>
+                    </div>
                     <button id="btn-login-open" class="user-badge-btn icon-btn-small" title="Mit Bessa.app Account anmelden">
                         <span class="material-icons-round">login</span>
                         <span>Anmelden</span>

src/ui_helpers.js

@@ -90,29 +90,6 @@ export function updateNextWeekBadge() {
     }
 }
 
-export function updateWeeklyCost(days) {
-    let totalCost = 0;
-    if (days && days.length > 0) {
-        days.forEach(day => {
-            if (day.items) {
-                day.items.forEach(item => {
-                    const articleId = item.articleId || parseInt(item.id.split('_')[1]);
-                    const key = `${day.date}_${articleId}`;
-                    const orders = orderMap.get(key) || [];
-                    if (orders.length > 0) totalCost += item.price * orders.length;
-                });
-            }
-        });
-    }
-
-    const costDisplay = document.getElementById('weekly-cost-display');
-    if (totalCost > 0) {
-        costDisplay.innerHTML = `<span class="material-icons-round">shopping_bag</span> <span>${t('costLabel')}: ${totalCost.toFixed(2).replace('.', ',')} €</span>`;
-        costDisplay.classList.remove('hidden');
-    } else {
-        costDisplay.classList.add('hidden');
-    }
-}
 
 export function renderVisibleWeeks() {
     const menuContainer = document.getElementById('menu-container');
@@ -139,11 +116,9 @@ export function renderVisibleWeeks() {
                 <p>${t('noMenuData')} ${targetWeek} (${targetYear}).</p>
                 <small>${t('noMenuDataHint')}</small>
             </div>`;
-        document.getElementById('weekly-cost-display').classList.add('hidden');
         return;
     }
 
-    updateWeeklyCost(daysInTargetWeek);
 
     const headerWeekInfo = document.getElementById('header-week-info');
     const weekTitle = displayMode === 'this-week' ? t('thisWeek') : t('nextWeek');
@@ -174,23 +149,39 @@ export function renderVisibleWeeks() {
 export function syncMenuItemHeights(grid) {
     const cards = grid.querySelectorAll('.menu-card');
     if (cards.length === 0) return;
+
+    // 1. Gather all menu-item groups (rows) across cards
+    const itemRows = [];
     let maxItems = 0;
-    cards.forEach(card => {
-        maxItems = Math.max(maxItems, card.querySelectorAll('.menu-item').length);
+
+    const cardItems = Array.from(cards).map(card => {
+        const items = Array.from(card.querySelectorAll('.menu-item'));
+        maxItems = Math.max(maxItems, items.length);
+        return items;
     });
+
     for (let i = 0; i < maxItems; i++) {
-        let maxHeight = 0;
-        const itemsAtPos = [];
-        cards.forEach(card => {
-            const items = card.querySelectorAll('.menu-item');
-            if (items[i]) {
-                items[i].style.height = 'auto';
-                maxHeight = Math.max(maxHeight, items[i].offsetHeight);
-                itemsAtPos.push(items[i]);
-            }
-        });
-        itemsAtPos.forEach(item => { item.style.height = `${maxHeight}px`; });
+        // Collect i-th item from each card (forming a "row")
+        itemRows[i] = cardItems.map(items => items[i]).filter(item => !!item);
     }
+
+    // 2. Batch Reset (Write phase) - clear old heights to let them flow naturally
+    itemRows.flat().forEach(item => {
+        item.style.height = 'auto';
+    });
+
+    // 3. Batch Read (Read phase) - measure all heights in one pass to avoid layout thrashing
+    const rowMaxHeights = itemRows.map(row => {
+        return Math.max(...row.map(item => item.offsetHeight));
+    });
+
+    // 4. Batch Apply (Write phase) - set synchronized heights
+    itemRows.forEach((row, i) => {
+        const height = `${rowMaxHeights[i]}px`;
+        row.forEach(item => {
+            item.style.height = height;
+        });
+    });
 }
 
 export function createDayCard(day) {

src/utils.js

@@ -246,3 +246,15 @@ export function getLocalizedText(text) {
     if (langMode === 'en') return split.en || split.raw;
     return split.de || split.raw;
 }
+
+export function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}

style.css

@@ -6,8 +6,8 @@
     --text-primary: #334155;
     /* Slate 700 */
     --text-secondary: #64748b;
-    --accent-color: #0f172a;
-    /* Slate 900 (High contrast) */
+    --accent-color: #2563eb;
+    /* Blue 600 – visible accent, distinguishable from text */
     --border-color: #cbd5e1;
     /* Slate 300 */
     --banner-bg: #e2e8f0;
@@ -15,7 +15,8 @@
     --success-color: #059669;
     --error-color: #dc2626;
     --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
-    --header-bg: rgba(255, 255, 255, 0.9);
+    /* Reduced opacity for visible glassmorphism blur effect */
+    --header-bg: rgba(255, 255, 255, 0.72);
     --header-border: 1px solid rgba(203, 213, 225, 0.6);
 }
 
@@ -23,19 +24,20 @@
     /* Premium Slate/Gray-Blue Palette - Dark Mode */
     --bg-body: #1e293b;
     /* Deep Slate Gray (Requested) */
-    --bg-card: #334155;
-    /* Slate 700 */
+    --bg-card: #283548;
+    /* Darker than Slate 700 → more layer contrast vs bg-body */
     --text-primary: #f8fafc;
     /* Slate 50 */
     --text-secondary: #cbd5e1;
     /* Slate 300 */
     --accent-color: #60a5fa;
     /* Blue 400 */
-    --border-color: #475569;
-    /* Slate 600 */
+    --border-color: #526377;
+    /* Slightly lighter → visible border on darker card bg */
     --banner-bg: #475569;
     --banner-text: #e2e8f0;
-    --header-bg: rgba(30, 41, 59, 0.9);
+    /* Reduced opacity for visible glassmorphism blur effect */
+    --header-bg: rgba(30, 41, 59, 0.72);
     --header-border: 1px solid rgba(71, 85, 105, 0.6);
     --card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.4);
 }
@@ -404,23 +406,6 @@ body {
     font-weight: 500;
 }
 
-.weekly-cost {
-    background-color: rgba(59, 130, 246, 0.1);
-    /* Blue tint */
-    color: var(--accent-color);
-    padding: 0.4rem 0.8rem;
-    border-radius: 8px;
-    font-weight: 600;
-    font-size: 0.9rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    border: 1px solid rgba(59, 130, 246, 0.2);
-}
-
-.weekly-cost .material-icons-round {
-    font-size: 18px;
-}
 
 /* Container - flex column, full width so child scrollbar is at edge */
 .container {
@@ -470,6 +455,64 @@ body {
     font-weight: 500;
 }
 
+/* Language Toggle */
+.lang-toggle-dropdown {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+#btn-lang-toggle {
+    padding: 0;
+    min-width: 42px;
+}
+
+.lang-dropdown-menu {
+    position: absolute;
+    top: calc(100% + 8px);
+    right: 0;
+    background: var(--bg-card);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    z-index: 1001;
+    min-width: 120px;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    animation: modalSlide 0.2s ease-out;
+}
+
+.lang-dropdown-menu .lang-btn {
+    background: none;
+    border: none;
+    padding: 10px 14px;
+    border-radius: 8px;
+    color: var(--text-primary);
+    font-size: 0.9rem;
+    font-weight: 500;
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+}
+
+.lang-dropdown-menu .lang-btn:hover {
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--accent-color);
+}
+
+.lang-dropdown-menu .lang-btn.active {
+    background: rgba(59, 130, 246, 0.15);
+    color: var(--accent-color);
+    font-weight: 700;
+}
+
 .icon-btn-small {
     background: none;
     border: none;
@@ -829,7 +872,7 @@ body {
 
 .days-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 0.5rem;
     flex: 1;
     overflow-y: auto;
@@ -883,7 +926,9 @@ body {
     box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
     border-radius: 8px;
     padding: 1rem;
-    margin: 0 -1rem 1.5rem -1rem;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
     background: var(--bg-card);
     position: relative;
     z-index: 5;
@@ -930,7 +975,8 @@ body {
 .card-body {
     padding: 1.25rem;
     display: grid;
-    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+    row-gap: 1.5rem;
     align-content: start;
 }
 
@@ -940,8 +986,11 @@ body {
 }
 
 .day-date {
-    font-size: 0.875rem;
+    font-size: 0.8rem;
+    font-weight: 400;
     color: var(--text-secondary);
+    opacity: 0.75;
+    /* Visually subordinate to day-name */
 }
 
 
@@ -954,9 +1003,12 @@ body {
 
 /* Menu Items */
 .menu-item {
-    margin-bottom: 1.5rem;
-    padding-bottom: 1.5rem;
+    /* Spacing now handled by .card-body grid gap */
+    display: flex;
+    flex-direction: column;
+    /* Subtle separator between items */
     border-bottom: 1px solid var(--border-color);
+    padding-bottom: 0.25rem;
 }
 
 .menu-item:last-child {
@@ -976,7 +1028,8 @@ body {
 .item-name {
     font-weight: 600;
     color: var(--text-primary);
-    font-size: 1rem;
+    font-size: 0.95rem;
+    /* Slightly smaller to reduce visual competition with day header */
 }
 
 .item-price {
@@ -988,7 +1041,8 @@ body {
 .item-desc {
     font-size: 0.875rem;
     color: var(--text-secondary);
-    line-height: 1.6;
+    line-height: 1.5;
+    /* Consistent with body line-height */
     margin-bottom: 0.75rem;
     white-space: pre-wrap;
 }
@@ -1015,7 +1069,8 @@ body {
     height: 24px;
     font-size: 0.75rem;
     padding: 0 10px;
-    border-radius: 4px;
+    border-radius: 6px;
+    /* Unified radius matching buttons and tag-badge-small */
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -1109,6 +1164,11 @@ body {
     transform: translateY(-1px);
 }
 
+.btn-order:active:not(:disabled) {
+    transform: scale(0.97);
+    filter: brightness(0.95);
+}
+
 .btn-order:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -1152,6 +1212,11 @@ body {
     transform: translateY(-1px);
 }
 
+.btn-cancel:active:not(:disabled) {
+    transform: scale(0.97);
+    filter: brightness(0.95);
+}
+
 .btn-cancel:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -1231,9 +1296,12 @@ body {
 }
 
 /* === Mobile Responsiveness === */
-@media (max-width: 600px) {
+/* 768px covers tablets (e.g. iPad Mini); 600px was too narrow-only */
+@media (max-width: 768px) {
     .header-content {
-        flex-direction: column;
+        display: grid;
+        /* Ensure grid is active, prevents flex-only fallback */
+        grid-template-columns: 1fr;
         gap: 1rem;
         padding: 0.75rem;
     }
@@ -1256,8 +1324,9 @@ body {
     }
 
     .days-grid {
+        display: grid;
+        /* Explicit grid declaration to prevent flex-context override */
         grid-template-columns: 1fr;
-        /* Force single column */
     }
 
     .main-content {
@@ -1287,11 +1356,38 @@ body {
     .card-body {
         padding: 1rem 0.75rem;
     }
+
     .item-header {
         gap: 0.5rem;
     }
 }
 
+/* === Accessibility: Respect prefers-reduced-motion === */
+@media (prefers-reduced-motion: reduce) {
+    /* Disable all decorative pulse/glow animations */
+    .menu-item.today-ordered,
+    .menu-item.flagged-sold-out,
+    .menu-item.flagged-available,
+    .menu-item.highlight-glow,
+    .nav-btn.new-week-available,
+    .update-icon,
+    #order-countdown.urgent {
+        animation: none;
+    }
+
+    /* Keep functional animations (modal slide, spinner) */
+    .toast {
+        transition: none;
+    }
+}
+
+/* === Focus Visibility (A11y: Keyboard Navigation) === */
+:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: 2px;
+    border-radius: 4px;
+}
+
 /* === Flagging & Notification Styles === */
 
 .btn-flag {
@@ -1323,6 +1419,10 @@ body {
     border-color: #eab308;
 }
 
+.btn-flag:active {
+    transform: scale(0.97);
+}
+
 .btn-flag .material-icons-round {
     font-size: 1.1rem;
 }
@@ -1333,7 +1433,9 @@ body {
     box-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
     border-radius: 8px;
     padding: 1rem;
-    margin: 0 -1rem 1.5rem -1rem;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
     background: var(--bg-card);
     position: relative;
     z-index: 5;
@@ -1360,7 +1462,9 @@ body {
     box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
     border-radius: 8px;
     padding: 1rem;
-    margin: 0 -1rem 1.5rem -1rem;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
     background: var(--bg-card);
     position: relative;
     z-index: 5;
@@ -1531,7 +1635,9 @@ body {
     box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
     border-radius: 8px;
     padding: 1rem;
-    margin: 0 -1rem 1.5rem -1rem;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
     background: var(--bg-card);
     position: relative;
     z-index: 5;
@@ -1665,7 +1771,8 @@ body {
     align-items: center;
     font-size: 0.7rem;
     padding: 2px 8px;
-    border-radius: 4px;
+    border-radius: 6px;
+    /* Unified with .badge and button border-radius */
     background: rgba(59, 130, 246, 0.15);
     color: #60a5fa;
     border: 1px solid rgba(59, 130, 246, 0.3);

tests/test_dom.js

@@ -63,9 +63,14 @@ const html = `
     <button id="btn-next-week">Next Week</button>
 
     <!-- Mocks for Language Toggle -->
-    <button class="lang-btn" data-lang="de">DE</button>
-    <button class="lang-btn" data-lang="en">EN</button>
-    <button class="lang-btn" data-lang="all">ALL</button>
+    <div id="lang-toggle">
+        <button id="btn-lang-toggle"><span class="material-icons-round">translate</span></button>
+        <div id="lang-dropdown" class="hidden">
+            <button class="lang-btn" data-lang="de">🇦🇹 DE</button>
+            <button class="lang-btn" data-lang="en">🇬🇧 EN</button>
+            <button class="lang-btn" data-lang="all">🌐 ALL</button>
+        </div>
+    </div>
     
     <button id="btn-refresh">Refresh</button>
     <button id="btn-logout">Logout</button>

version.txt

@@ -1 +1 @@
-v1.6.17
+v1.6.25