feat: sticky headers (v1.6.2)

chore: update build artifacts for v1.6.1
chore: version bump
2026-03-05 11:34:19 +01:00 · 2026-03-04 14:46:17 +01:00 · 2026-03-04 14:46:11 +01:00 · 2026-03-04 14:45:25 +01:00 · 2026-03-04 14:45:13 +01:00 · 2026-03-04 13:29:25 +01:00
13 changed files with 773 additions and 108 deletions
--- a/.agent/rules/rules.md
+++ b/.agent/rules/rules.md
@@ -43,6 +43,7 @@ trigger: always_on
    - **Visuals**: Generate screenshots/mockups for UI changes.
    - **Evidence**: Log outputs for verification.
 3.  **Design**: Optimize code for AI readability (context efficiency).
+4. **Retry on Failure**: When an operation does not finish or does not work as expected, do not try endlessly to fix this. Try a few times and ask the user if no progress can be made.

 ## 6. Workspace Scopes
 - **Browser**: Allowed for documentation and safe browsing. No automated logins without permission.
--- a/REQUIREMENTS.md
+++ b/REQUIREMENTS.md
@@ -61,6 +61,8 @@ Das System umfasst die Darstellung von Menüplänen in einer Wochenübersicht, d
 | FR-090 | Die Hauptnavigation (Wochen-Toggles) muss linksbündig neben dem App-Titel positioniert sein. | Niedrig | v1.5.0 |
 | FR-091 | Ein dynamisches Alarm-Icon im Header muss den Überwachungsstatus geflaggter Menüs anzeigen (Gelb=Überwachung aktiv aber kein Menü verfügbar, Grün=Mindestens ein Menü verfügbar, Versteckt=keine Flags). Der Tooltip muss den Zeitpunkt der letzten Prüfung als relativen String (z.B. "vor 4 Min.") enthalten. | Mittel | v1.5.0 (Update v1.4.10) |
 | FR-092 | Solange Menüdaten für die Nächste Woche verfügbar sind, aber noch keine Bestellungen getätigt wurden, muss der entsprechende Navigation-Button animiert und farblich (Gelb) hervorgehoben werden. Nach der ersten Bestellung muss die Hervorhebung automatisch erlöschen. Zusätzlich muss beim erstmaligen Erscheinen der Daten ein einmaliger Toast-Hinweis angezeigt werden. | Mittel | v1.6.0 (Update v1.4.21) |
+| **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 |
 | **Benutzer-Feedback** | | | |
 | FR-095 | Alle benutzerrelevanten Aktionen (Bestellung, Stornierung, Fehler) müssen durch nicht-blockierende Benachrichtigungen (Toasts) bestätigt werden. | Mittel | v1.0.1 |
 | FR-096 | Bei einem Verbindungsfehler muss ein Fehlerdialog mit Fallback-Link zur Originalseite angezeigt werden. | Mittel | v1.0.1 |
--- a/build-bookmarklet.sh
+++ b/build-bookmarklet.sh
@@ -146,6 +146,19 @@ cat > "$DIST_DIR/install.html" << INSTALLEOF
    </style>
 </head>
 <body>
+    <!-- Banner Video: plays once, collapses after ending -->
+    <div id="banner-video-wrap" style="width: 100%; max-width: 600px; margin: 0 auto 20px auto; border-radius: 12px; overflow: hidden; pointer-events: none; user-select: none; max-height: 400px; opacity: 1; transition: max-height 0.8s ease-in-out, opacity 0.6s ease-in-out, margin 0.8s ease-in-out;">
+        <video id="banner-video" autoplay muted playsinline disablepictureinpicture style="width: 100%; display: block;" src="https://github.com/TauNeutrino/kantine-overview/raw/main/dist/Arrow_and_fork_fly_away_bd43310bea.mp4"></video>
+    </div>
+    <script>
+        document.getElementById('banner-video').addEventListener('ended', function() {
+            var w = document.getElementById('banner-video-wrap');
+            w.style.maxHeight = '0';
+            w.style.opacity = '0';
+            w.style.marginBottom = '0';
+        });
+    </script>
+
    <div style="text-align: center; margin-bottom: 30px;">
        <h1 style="margin-bottom: 5px; display: flex; align-items: center; justify-content: center; gap: 10px;">
            <img src="$FAVICON_URL" alt="Logo" style="width: 38px; height: 38px;"> 
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,12 @@
+## v1.6.2 (2026-03-05)
+- ✨ **Feature**: Wochentags-Header (Montag, Dienstag etc.) scrollen nun als "Sticky Header" mit und bleiben am oberen Bildschirmrand haften.
+  - Das Layout clippt scrollende Speisen ordentlich darunter weg.
+  - Vollständiges Viewport-Scrolling: Das Layout nutzt nun die ganze Höhe aus (`100dvh`), wodurch Scrollbalken sauber am Rand positioniert sind.
+- 🐛 **Bugfix**: Probleme mit Bessa's default `overflow` Verhalten behoben, das `position: sticky` auf iOS/WebKit-Browsern blockierte.
+
+## v1.6.0 (2026-03-04)
+- ✨ **Feature**: Sprachfilter für zweisprachige Menübeschreibungen. Neuer DE/EN/ALL Toggle im Header ermöglicht das Umschalten zwischen Deutsch, Englisch und dem vollen Originaltext. Allergen-Codes werden in allen Modi angezeigt. Einstellung wird persistent gespeichert.
+
 ## v1.5.1 (2026-03-04)
 - 🐛 **Bugfix**: Freitagsbestellungen schlugen fehl ("Onlinebestellung sind nicht verfügbar"). Ursache: Der Order-Payload verwendete `preorder: false` und eine falsche Uhrzeit (`T10:00:00.000Z` statt `T10:30:00Z`). Beides wurde anhand der originalen Bessa-API korrigiert.

--- a/dist/bookmarklet-payload.js
+++ b/dist/bookmarklet-payload.js
--- a/dist/bookmarklet.txt
+++ b/dist/bookmarklet.txt
--- a/dist/install.html
+++ b/dist/install.html
--- a/dist/kantine-standalone.html
+++ b/dist/kantine-standalone.html
@@ -67,12 +67,22 @@ body {
 }

 /* Fix scrolling bug: Reset html/body styles from host page */
-html,
+/* IMPORTANT: html must NOT have overflow set, or it creates a scroll container that breaks position: sticky */
+html {
+    height: auto !important;
+    min-height: 100% !important;
+    overflow: visible !important;
+    position: static !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
 body {
    height: auto !important;
    min-height: 100% !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
+    overflow-x: clip !important;
+    /* clip prevents horizontal overflow without breaking sticky */
+    overflow-y: visible !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
@@ -80,8 +90,7 @@ body {

 /* Header */
 .app-header {
-    position: sticky;
-    top: 0;
+    flex-shrink: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    background-color: var(--header-bg);
@@ -164,6 +173,38 @@ body {
    color: var(--text-secondary);
 }

+/* Language Toggle (FR-100) */
+.lang-toggle {
+    display: inline-flex;
+    gap: 0;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    background: var(--bg-card);
+}
+
+.lang-btn {
+    padding: 3px 10px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    background: transparent;
+    color: var(--text-secondary);
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.lang-btn:hover {
+    color: var(--text-primary);
+    background: rgba(100, 116, 139, 0.1);
+}
+
+.lang-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
 .nav-group {
    display: flex;
    background-color: var(--bg-card);
@@ -391,13 +432,21 @@ body {
    font-size: 18px;
 }

-/* Container */
+/* Container - flex column, full width so child scrollbar is at edge */
 .container {
+    flex: 1;
    width: 100%;
-    /* Full width */
-    margin: 2rem auto;
-    padding: 0 2rem;
-    min-height: 80vh;
+    overflow: hidden;
+    padding: 2rem 0 0 0;
+    /* Only top padding, no horizontal so child fills width */
+    display: flex;
+    flex-direction: column;
+}
+
+/* Add horizontal padding to direct children of container to maintain layout */
+.container>*:not(.menu-grid) {
+    padding-left: 2rem;
+    padding-right: 2rem;
 }

 /* Banner */
@@ -746,14 +795,17 @@ body {
    display: none !important;
 }

-/* Menu Grid */
+/* Menu Grid Container */
 .menu-grid {
-    display: grid;
-    gap: 2rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    gap: 1rem;
 }

 .week-section {
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
 }

 .week-header {
@@ -775,10 +827,25 @@ body {
    margin-top: 0.25rem;
 }

+/* Full-viewport layout: header + scrollable content + footer */
+#kantine-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
+    /* Dynamic viewport height for mobile browsers */
+    overflow: hidden;
+}
+
 .days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
+    flex: 1;
+    overflow-y: auto;
+    /* This is the scroll container at the window edge */
+    align-content: start;
+    padding: 0 2rem 2rem 2rem;
 }

 /* Card */
@@ -787,21 +854,33 @@ body {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    overflow: clip;
+    /* Clips scrolling content behind sticky header */
+    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
 }

-/* Past Day Styling - Target specific elements so ordered items can remain visible */
-.menu-card.past-day .card-header,
+/* Past Day Styling - Target specific elements so ordered items can remain visible AND preserve sticky context */
+/* We MUST apply filter/opacity to children, not the parent .menu-card, or else position: sticky breaks */
+
+/* Header keeps fully opaque background to hide scrolling items, only grayscales */
+.menu-card.past-day .card-header {
+    filter: grayscale(0.8);
+    transition: filter 0.3s;
+}
+
+/* Items become semi-transparent */
 .menu-card.past-day .menu-item:not(.ordered) {
    opacity: 0.6;
    filter: grayscale(0.8);
    transition: opacity 0.3s, filter 0.3s;
 }

-.menu-card.past-day:hover .card-header,
+.menu-card.past-day:hover .card-header {
+    filter: grayscale(0.4);
+}
+
 .menu-card.past-day:hover .menu-item:not(.ordered) {
    opacity: 0.8;
    filter: grayscale(0.4);
@@ -848,7 +927,6 @@ body {


 .menu-card:hover {
-    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }

@@ -858,7 +936,23 @@ body {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
-    background-color: rgba(100, 116, 139, 0.05);
+    background-color: var(--bg-card);
+
+    /* Removed border-radius: 12px 12px 0 0;
+       .menu-card's overflow: clip will round the corners initially.
+       When sticky at the top, it will be square and perfectly hide scrolling content! */
+
+    /* Sticky within .container scroll area */
+    position: sticky;
+    top: 0;
+    z-index: 90;
+}
+
+.card-body {
+    padding: 1.25rem;
+    display: grid;
+    grid-template-rows: auto;
+    align-content: start;
 }

 .day-name {
@@ -871,13 +965,6 @@ body {
    color: var(--text-secondary);
 }

-.card-body {
-    padding: 1.25rem;
-    display: grid;
-    grid-template-rows: auto;
-    /* Each menu item gets its own row */
-    align-content: start;
-}

 .empty-state {
    color: var(--text-secondary);
@@ -924,6 +1011,7 @@ body {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
+    white-space: pre-wrap;
 }

 .badges {
@@ -1005,12 +1093,12 @@ body {

 /* Footer */
 .app-footer {
+    flex-shrink: 0;
    text-align: center;
-    padding: 2rem;
+    padding: 1rem 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-top: 1px solid var(--border-color);
-    margin-top: auto;
 }

 /* === Order / Cancel Buttons (inline in status row) === */
@@ -1341,17 +1429,20 @@ body {

 /* Day Header Status Colors (User Request) */
 .card-header.header-violet {
-    background-color: rgba(139, 92, 246, 0.15);
+    background-color: var(--bg-card);
+    background-image: linear-gradient(rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.15));
    border-bottom: 2px solid #8b5cf6;
 }

 .card-header.header-green {
-    background-color: rgba(16, 185, 129, 0.15);
+    background-color: var(--bg-card);
+    background-image: linear-gradient(rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.15));
    border-bottom: 2px solid var(--success-color);
 }

 .card-header.header-red {
-    background-color: rgba(239, 68, 68, 0.15);
+    background-color: var(--bg-card);
+    background-image: linear-gradient(rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.15));
    border-bottom: 2px solid var(--error-color);
 }

@@ -1984,6 +2075,7 @@ body {
    let orderMap = new Map();
    let userFlags = new Set(JSON.parse(localStorage.getItem('kantine_flags') || '[]'));
    let pollIntervalId = null;
+    let langMode = localStorage.getItem('kantine_lang') || 'de';

    // === API Helpers ===
    function apiHeaders(token) {
@@ -2031,18 +2123,23 @@ body {
                    <div class="brand">
                        <span class="material-icons-round logo-icon">restaurant_menu</span>
                        <div class="header-left">
-                            <h1>Kantinen Übersicht <small class="version-tag" style="font-size: 0.6em; opacity: 0.7; font-weight: 400; cursor: pointer;" title="Klick für Versionsmenü">v1.5.0</small></h1>
+                            <h1>Kantinen Übersicht <small class="version-tag" style="font-size: 0.6em; opacity: 0.7; font-weight: 400; cursor: pointer;" title="Klick für Versionsmenü">v1.6.2</small></h1>
                            <div id="last-updated-subtitle" class="subtitle"></div>
                        </div>
                        <div class="nav-group" style="margin-left: 1rem;">
-                            <button id="btn-this-week" class="nav-btn active">Diese Woche</button>
-                            <button id="btn-next-week" class="nav-btn">Nächste Woche</button>
+                            <button id="btn-this-week" class="nav-btn active" title="Menü dieser Woche anzeigen">Diese Woche</button>
+                            <button id="btn-next-week" class="nav-btn" title="Menü nächster Woche anzeigen">Nächste Woche</button>
                        </div>
                        <button id="alarm-bell" class="icon-btn hidden" aria-label="Benachrichtigungen" title="Keine beobachteten Menüs" style="margin-left: -0.5rem;">
                            <span class="material-icons-round" id="alarm-bell-icon" style="color:var(--text-secondary); transition: color 0.3s;">notifications</span>
                        </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>
@@ -2056,17 +2153,17 @@ body {
                        <button id="btn-highlights" class="icon-btn" aria-label="Persönliche Highlights verwalten" title="Persönliche Highlights verwalten">
                            <span class="material-icons-round">label</span>
                        </button>
-                        <button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
+                        <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>
-                        <button id="btn-login-open" class="user-badge-btn icon-btn-small">
+                        <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>
                        </button>
                        <div id="user-info" class="user-badge hidden">
                            <span class="material-icons-round">person</span>
                            <span id="user-id-display"></span>
-                            <button id="btn-logout" class="icon-btn-small" aria-label="Logout">
+                            <button id="btn-logout" class="icon-btn-small" aria-label="Logout" title="Von Bessa.app abmelden">
                                <span class="material-icons-round">logout</span>
                            </button>
                        </div>
@@ -2078,7 +2175,7 @@ body {
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Login</h2>
-                        <button id="btn-login-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-login-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
@@ -2122,7 +2219,7 @@ body {
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Meine Highlights</h2>
-                        <button id="btn-highlights-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-highlights-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
@@ -2131,8 +2228,8 @@ body {
                            Markiere Menüs automatisch, wenn sie diese Schlagwörter enthalten.
                        </p>
                        <div class="input-group">
-                            <input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch...">
-                            <button id="btn-add-tag" class="btn-primary">Hinzufügen</button>
+                            <input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch..." title="Neues Schlagwort zum Hervorheben eingeben">
+                            <button id="btn-add-tag" class="btn-primary" title="Schlagwort zur Liste hinzufügen">Hinzufügen</button>
                        </div>
                        <div id="tags-list"></div>
                    </div>
@@ -2143,7 +2240,7 @@ body {
                <div class="modal-content history-modal-content">
                    <div class="modal-header">
                        <h2>Bestellhistorie</h2>
-                        <button id="btn-history-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-history-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
@@ -2167,13 +2264,13 @@ body {
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>📦 Versionen</h2>
-                        <button id="btn-version-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-version-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div style="margin-bottom: 1rem;">
-                            <strong>Aktuell:</strong> <span id="version-current">v1.5.0</span>
+                            <strong>Aktuell:</strong> <span id="version-current">v1.6.2</span>
                        </div>
                        <div class="dev-toggle">
                            <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
@@ -2241,6 +2338,17 @@ body {
        const historyModal = document.getElementById('history-modal');
        const btnHistoryClose = document.getElementById('btn-history-close');

+        // Language Toggle
+        document.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                langMode = btn.dataset.lang;
+                localStorage.setItem('kantine_lang', langMode);
+                document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                renderVisibleWeeks();
+            });
+        });
+
        if (btnHighlights) {
            btnHighlights.addEventListener('click', () => {
                highlightsModal.classList.remove('hidden');
@@ -2750,7 +2858,7 @@ body {
                const monthGroup = yearGroup.months[mKey];

                html += `<div class="history-month-group">
-                    <div class="history-month-header" tabindex="0" role="button" aria-expanded="false">
+                    <div class="history-month-header" tabindex="0" role="button" aria-expanded="false" title="Klicken, um die Bestellungen für diesen Monat ein-/auszublenden">
                        <div style="display:flex; flex-direction:column; gap:4px;">
                            <span>${monthGroup.name}</span>
                            <div class="history-month-summary">
@@ -3196,7 +3304,7 @@ body {
        highlightTags.forEach(tag => {
            const badge = document.createElement('span');
            badge.className = 'tag-badge';
-            badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}">&times;</span>`;
+            badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}" title="Schlagwort entfernen">&times;</span>`;
            list.appendChild(badge);
        });

@@ -3938,7 +4046,7 @@ body {
                    <div class="badges">${statusBadge}</div>
                </div>
                ${tagsHtml}
-                <p class="item-desc">${escapeHtml(item.description)}</p>`;
+                <p class="item-desc">${escapeHtml(getLocalizedText(item.description))}</p>`;

            // Event: Order
            const orderBtn = itemEl.querySelector('.btn-order');
@@ -4030,7 +4138,7 @@ body {

    // Periodic update check (runs on init + every hour)
    async function checkForUpdates() {
-        const currentVersion = 'v1.5.0';
+        const currentVersion = 'v1.6.2';
        const devMode = localStorage.getItem('kantine_dev_mode') === 'true';

        try {
@@ -4071,7 +4179,7 @@ body {
        const modal = document.getElementById('version-modal');
        const container = document.getElementById('version-list-container');
        const devToggle = document.getElementById('dev-mode-toggle');
-        const currentVersion = 'v1.5.0';
+        const currentVersion = 'v1.6.2';

        if (!modal) return;
        modal.classList.remove('hidden');
@@ -4291,6 +4399,201 @@ body {
        return div.innerHTML;
    }

+    // === Language Filter (FR-100) ===
+    // DE stems for fallback language detection
+    const DE_STEMS = [
+        'mit', 'und', 'oder', 'für', 'vom', 'zum', 'zur', 'gebraten', 'kartoffel', 'gemüse', 'suppe',
+        'kuchen', 'schwein', 'rind', 'hähnchen', 'huhn', 'fisch', 'nudel', 'soße', 'sosse', 'wurst',
+        'kürbis', 'braten', 'sahne', 'apfel', 'käse', 'fleisch', 'pilz', 'kirsch', 'joghurt', 'spätzle',
+        'knödel', 'kraut', 'schnitzel', 'püree', 'rahm', 'erdbeer', 'schoko', 'vanille', 'tomate',
+        'gurke', 'salat', 'zwiebel', 'paprika', 'reis', 'bohne', 'erbse', 'karotte', 'möhre', 'lauch',
+        'knoblauch', 'chili', 'gewürz', 'kräuter', 'pfeffer', 'salz', 'butter', 'milch', 'eier',
+        'pfanne', 'auflauf', 'gratin', 'ragout', 'gulasch', 'eintopf', 'filet', 'steak', 'brust',
+        'salami', 'schinken', 'speck', 'brokkoli', 'blumenkohl', 'zucchini', 'aubergine',
+        'spinat', 'spargel', 'olive', 'mandel', 'nuss', 'honig', 'senf', 'essig', 'öl', 'brot',
+        'brötchen', 'pfannkuchen', 'eis', 'torte', 'dessert', 'kompott', 'obst', 'frucht', 'beere',
+        'plunder', 'dip', 'tofu', 'jambalaya'
+    ];
+    const EN_STEMS = [
+        'with', 'and', 'or', 'for', 'from', 'to', 'fried', 'potato', 'vegetable', 'soup', 'cake',
+        'pork', 'beef', 'chicken', 'fish', 'noodle', 'sauce', 'sausage', 'pumpkin', 'roast',
+        'cream', 'apple', 'cheese', 'meat', 'mushroom', 'cherry', 'yogurt', 'wedge', 'sweet',
+        'sour', 'dumpling', 'cabbage', 'mash', 'strawberr', 'choco', 'vanilla', 'tomat', 'cucumber',
+        'salad', 'onion', 'pepper', 'rice', 'bean', 'pea', 'carrot', 'leek', 'garlic', 'chili',
+        'spice', 'herb', 'salt', 'butter', 'milk', 'egg', 'pan', 'casserole', 'gratin', 'ragout',
+        'goulash', 'stew', 'filet', 'steak', 'breast', 'salami', 'ham', 'bacon', 'broccoli',
+        'cauliflower', 'zucchini', 'eggplant', 'spinach', 'asparagus', 'olive', 'almond', 'nut',
+        'honey', 'mustard', 'vinegar', 'oil', 'bread', 'bun', 'pancake', 'ice', 'tart', 'dessert',
+        'compote', 'fruit', 'berry', 'dip', 'danish', 'tofu', 'jambalaya'
+    ];
+
+    /**
+     * Splits bilingual menu text into DE and EN parts.
+     * Pattern per course: [DE] / [EN](ALLERGENS)
+     * Max 3 courses per menu item (sanity check).
+     * @param {string} text - The bilingual description text
+     * @returns {{ de: string, en: string, raw: string }}
+     */
+    function splitLanguage(text) {
+        if (!text) return { de: '', en: '', raw: '' };
+
+        const raw = text;
+        const formattedRaw = '• ' + text.replace(/\(([A-Z ]+)\)\s*(?=\S)/g, '($1)\n• ');
+
+        // Utility to compute DE/EN score for a subset of words
+        function scoreBlock(wordArray) {
+            let de = 0, en = 0;
+            wordArray.forEach(word => {
+                const w = word.toLowerCase().replace(/[^a-zäöüß]/g, '');
+                if (w) {
+                    let bestDeMatch = 0;
+                    let bestEnMatch = 0;
+                    // Full match is better than partial string match
+                    if (DE_STEMS.includes(w)) bestDeMatch = w.length;
+                    else DE_STEMS.forEach(s => { if (w.includes(s) && s.length > bestDeMatch) bestDeMatch = s.length; });
+
+                    if (EN_STEMS.includes(w)) bestEnMatch = w.length;
+                    else EN_STEMS.forEach(s => { if (w.includes(s) && s.length > bestEnMatch) bestEnMatch = s.length; });
+
+                    if (bestDeMatch > 0) de += (bestDeMatch / w.length);
+                    if (bestEnMatch > 0) en += (bestEnMatch / w.length);
+
+                    // Capitalized noun heuristic matches German text styles typically
+                    if (/^[A-ZÄÖÜ]/.test(word)) {
+                        de += 0.5;
+                    }
+                }
+            });
+            return { de, en };
+        }
+
+        // Heuristic sliding window to split a fragment containing "EN DE"
+        // E.g., "Bratwurst with pumpkin Kirschjoghurt" => enPart: "Bratwurst with pumpkin", dePart: "Kirschjoghurt"
+        function heuristicSplitEnDe(fragment) {
+            const words = fragment.trim().split(/\s+/);
+            if (words.length < 2) return { enPart: fragment, nextDe: '' };
+
+            let bestK = -1;
+            let maxScore = -9999;
+
+            for (let k = 1; k < words.length; k++) {
+                const left = words.slice(0, k);
+                const right = words.slice(k);
+
+                const leftScore = scoreBlock(left);
+                const rightScore = scoreBlock(right);
+
+                // left should be EN, right should be DE
+                // Metric = (EN votes in left - DE votes in left) + (DE votes in right - EN votes in right)
+                const score = (leftScore.en - leftScore.de) + (rightScore.de - rightScore.en);
+
+                // Extra penalty if the split puts a low-case word as the first word of the right (DE) part
+                // because a new German sentence usually starts with a capital noun.
+                const rightFirstWord = right[0];
+                let capitalBonus = 0;
+                if (/^[A-ZÄÖÜ]/.test(rightFirstWord)) {
+                    capitalBonus = 2.0;
+                }
+
+                const finalScore = score + capitalBonus;
+
+                if (finalScore > maxScore) {
+                    maxScore = finalScore;
+                    bestK = k;
+                }
+            }
+
+            if (bestK !== -1) {
+                return {
+                    enPart: words.slice(0, bestK).join(' '),
+                    nextDe: words.slice(bestK).join(' ')
+                };
+            }
+            return { enPart: fragment, nextDe: '' };
+        }
+
+        // Check if text contains the bilingual separator ' / '
+        if (!text.includes(' / ')) {
+            // Fallback: detect language via keyword scoring
+            const words = text.toLowerCase().split(/\s+/);
+            const score = scoreBlock(words);
+
+            // No split possible – return full text for detected language, empty for other
+            if (score.en > score.de) {
+                return { de: '', en: formattedRaw, raw: formattedRaw };
+            }
+            return { de: formattedRaw, en: '', raw: formattedRaw };
+        }
+
+        // Split by ' / ' – produces alternating DE/EN fragments
+        const parts = text.split(' / ');
+        // Sanity check: max 3 courses means max 3 slashes → max 4 parts
+        if (parts.length > 4) {
+            // Too many slashes – possibly not bilingual, return as-is
+            return { de: formattedRaw, en: '', raw: formattedRaw };
+        }
+
+        const deParts = [];
+        const enParts = [];
+
+        // First fragment is always DE (course 1)
+        deParts.push(parts[0].trim());
+
+        // Process remaining fragments: each contains "EN(ALLERGENS) next_DE"
+        // Allergen pattern: (LETTERS_AND_SPACES) at the boundary
+        const allergenRegex = /\(([A-Z ]+)\)\s*/;
+
+        for (let i = 1; i < parts.length; i++) {
+            const fragment = parts[i].trim();
+            const match = fragment.match(allergenRegex);
+
+            if (match) {
+                // Split: everything before allergen + allergen = EN, after = next DE
+                const allergenEnd = match.index + match[0].length;
+                const enPart = fragment.substring(0, match.index).trim();
+                const allergenCode = match[1];
+                const nextDe = fragment.substring(allergenEnd).trim();
+
+                enParts.push(enPart + '(' + allergenCode + ')');
+                // Also append allergen to the last DE part
+                if (deParts.length > 0) {
+                    deParts[deParts.length - 1] = deParts[deParts.length - 1] + '(' + allergenCode + ')';
+                }
+
+                if (nextDe) {
+                    deParts.push(nextDe);
+                }
+            } else {
+                // No allergen code found!
+                // If it's not the last part (or even if it is, but we highly suspect merged languages),
+                // we use the heuristic to find the hidden split-point.
+                const split = heuristicSplitEnDe(fragment);
+                enParts.push(split.enPart);
+                if (split.nextDe) {
+                    deParts.push(split.nextDe);
+                }
+            }
+        }
+
+        return {
+            de: deParts.map(p => '• ' + p).join('\n'),
+            en: enParts.map(p => '• ' + p).join('\n'),
+            raw: formattedRaw
+        };
+    }
+
+    /**
+     * Returns text filtered by the current language mode.
+     * @param {string} text - The bilingual text
+     * @returns {string}
+     */
+    function getLocalizedText(text) {
+        if (langMode === 'all') return text || '';
+        const split = splitLanguage(text);
+        if (langMode === 'en') return split.en || split.raw;
+        return split.de || split.raw; // 'de' is default
+    }
+
    // === Bootstrap ===
    injectUI();
    bindEvents();
--- a/kantine.js
+++ b/kantine.js
@@ -34,6 +34,7 @@
    let orderMap = new Map();
    let userFlags = new Set(JSON.parse(localStorage.getItem('kantine_flags') || '[]'));
    let pollIntervalId = null;
+    let langMode = localStorage.getItem('kantine_lang') || 'de';

    // === API Helpers ===
    function apiHeaders(token) {
@@ -85,14 +86,19 @@
                            <div id="last-updated-subtitle" class="subtitle"></div>
                        </div>
                        <div class="nav-group" style="margin-left: 1rem;">
-                            <button id="btn-this-week" class="nav-btn active">Diese Woche</button>
-                            <button id="btn-next-week" class="nav-btn">Nächste Woche</button>
+                            <button id="btn-this-week" class="nav-btn active" title="Menü dieser Woche anzeigen">Diese Woche</button>
+                            <button id="btn-next-week" class="nav-btn" title="Menü nächster Woche anzeigen">Nächste Woche</button>
                        </div>
                        <button id="alarm-bell" class="icon-btn hidden" aria-label="Benachrichtigungen" title="Keine beobachteten Menüs" style="margin-left: -0.5rem;">
                            <span class="material-icons-round" id="alarm-bell-icon" style="color:var(--text-secondary); transition: color 0.3s;">notifications</span>
                        </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>
@@ -106,17 +112,17 @@
                        <button id="btn-highlights" class="icon-btn" aria-label="Persönliche Highlights verwalten" title="Persönliche Highlights verwalten">
                            <span class="material-icons-round">label</span>
                        </button>
-                        <button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
+                        <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>
-                        <button id="btn-login-open" class="user-badge-btn icon-btn-small">
+                        <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>
                        </button>
                        <div id="user-info" class="user-badge hidden">
                            <span class="material-icons-round">person</span>
                            <span id="user-id-display"></span>
-                            <button id="btn-logout" class="icon-btn-small" aria-label="Logout">
+                            <button id="btn-logout" class="icon-btn-small" aria-label="Logout" title="Von Bessa.app abmelden">
                                <span class="material-icons-round">logout</span>
                            </button>
                        </div>
@@ -128,7 +134,7 @@
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Login</h2>
-                        <button id="btn-login-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-login-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
@@ -172,7 +178,7 @@
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>Meine Highlights</h2>
-                        <button id="btn-highlights-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-highlights-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
@@ -181,8 +187,8 @@
                            Markiere Menüs automatisch, wenn sie diese Schlagwörter enthalten.
                        </p>
                        <div class="input-group">
-                            <input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch...">
-                            <button id="btn-add-tag" class="btn-primary">Hinzufügen</button>
+                            <input type="text" id="tag-input" placeholder="z.B. Schnitzel, Vegetarisch..." title="Neues Schlagwort zum Hervorheben eingeben">
+                            <button id="btn-add-tag" class="btn-primary" title="Schlagwort zur Liste hinzufügen">Hinzufügen</button>
                        </div>
                        <div id="tags-list"></div>
                    </div>
@@ -193,7 +199,7 @@
                <div class="modal-content history-modal-content">
                    <div class="modal-header">
                        <h2>Bestellhistorie</h2>
-                        <button id="btn-history-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-history-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
@@ -217,7 +223,7 @@
                <div class="modal-content">
                    <div class="modal-header">
                        <h2>📦 Versionen</h2>
-                        <button id="btn-version-close" class="icon-btn" aria-label="Close">
+                        <button id="btn-version-close" class="icon-btn" aria-label="Close" title="Schließen">
                            <span class="material-icons-round">close</span>
                        </button>
                    </div>
@@ -291,6 +297,17 @@
        const historyModal = document.getElementById('history-modal');
        const btnHistoryClose = document.getElementById('btn-history-close');

+        // Language Toggle
+        document.querySelectorAll('.lang-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                langMode = btn.dataset.lang;
+                localStorage.setItem('kantine_lang', langMode);
+                document.querySelectorAll('.lang-btn').forEach(b => b.classList.remove('active'));
+                btn.classList.add('active');
+                renderVisibleWeeks();
+            });
+        });
+
        if (btnHighlights) {
            btnHighlights.addEventListener('click', () => {
                highlightsModal.classList.remove('hidden');
@@ -800,7 +817,7 @@
                const monthGroup = yearGroup.months[mKey];

                html += `<div class="history-month-group">
-                    <div class="history-month-header" tabindex="0" role="button" aria-expanded="false">
+                    <div class="history-month-header" tabindex="0" role="button" aria-expanded="false" title="Klicken, um die Bestellungen für diesen Monat ein-/auszublenden">
                        <div style="display:flex; flex-direction:column; gap:4px;">
                            <span>${monthGroup.name}</span>
                            <div class="history-month-summary">
@@ -1246,7 +1263,7 @@
        highlightTags.forEach(tag => {
            const badge = document.createElement('span');
            badge.className = 'tag-badge';
-            badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}">&times;</span>`;
+            badge.innerHTML = `${tag} <span class="tag-remove" data-tag="${tag}" title="Schlagwort entfernen">&times;</span>`;
            list.appendChild(badge);
        });

@@ -1988,7 +2005,7 @@
                    <div class="badges">${statusBadge}</div>
                </div>
                ${tagsHtml}
-                <p class="item-desc">${escapeHtml(item.description)}</p>`;
+                <p class="item-desc">${escapeHtml(getLocalizedText(item.description))}</p>`;

            // Event: Order
            const orderBtn = itemEl.querySelector('.btn-order');
@@ -2341,6 +2358,201 @@
        return div.innerHTML;
    }

+    // === Language Filter (FR-100) ===
+    // DE stems for fallback language detection
+    const DE_STEMS = [
+        'mit', 'und', 'oder', 'für', 'vom', 'zum', 'zur', 'gebraten', 'kartoffel', 'gemüse', 'suppe',
+        'kuchen', 'schwein', 'rind', 'hähnchen', 'huhn', 'fisch', 'nudel', 'soße', 'sosse', 'wurst',
+        'kürbis', 'braten', 'sahne', 'apfel', 'käse', 'fleisch', 'pilz', 'kirsch', 'joghurt', 'spätzle',
+        'knödel', 'kraut', 'schnitzel', 'püree', 'rahm', 'erdbeer', 'schoko', 'vanille', 'tomate',
+        'gurke', 'salat', 'zwiebel', 'paprika', 'reis', 'bohne', 'erbse', 'karotte', 'möhre', 'lauch',
+        'knoblauch', 'chili', 'gewürz', 'kräuter', 'pfeffer', 'salz', 'butter', 'milch', 'eier',
+        'pfanne', 'auflauf', 'gratin', 'ragout', 'gulasch', 'eintopf', 'filet', 'steak', 'brust',
+        'salami', 'schinken', 'speck', 'brokkoli', 'blumenkohl', 'zucchini', 'aubergine',
+        'spinat', 'spargel', 'olive', 'mandel', 'nuss', 'honig', 'senf', 'essig', 'öl', 'brot',
+        'brötchen', 'pfannkuchen', 'eis', 'torte', 'dessert', 'kompott', 'obst', 'frucht', 'beere',
+        'plunder', 'dip', 'tofu', 'jambalaya'
+    ];
+    const EN_STEMS = [
+        'with', 'and', 'or', 'for', 'from', 'to', 'fried', 'potato', 'vegetable', 'soup', 'cake',
+        'pork', 'beef', 'chicken', 'fish', 'noodle', 'sauce', 'sausage', 'pumpkin', 'roast',
+        'cream', 'apple', 'cheese', 'meat', 'mushroom', 'cherry', 'yogurt', 'wedge', 'sweet',
+        'sour', 'dumpling', 'cabbage', 'mash', 'strawberr', 'choco', 'vanilla', 'tomat', 'cucumber',
+        'salad', 'onion', 'pepper', 'rice', 'bean', 'pea', 'carrot', 'leek', 'garlic', 'chili',
+        'spice', 'herb', 'salt', 'butter', 'milk', 'egg', 'pan', 'casserole', 'gratin', 'ragout',
+        'goulash', 'stew', 'filet', 'steak', 'breast', 'salami', 'ham', 'bacon', 'broccoli',
+        'cauliflower', 'zucchini', 'eggplant', 'spinach', 'asparagus', 'olive', 'almond', 'nut',
+        'honey', 'mustard', 'vinegar', 'oil', 'bread', 'bun', 'pancake', 'ice', 'tart', 'dessert',
+        'compote', 'fruit', 'berry', 'dip', 'danish', 'tofu', 'jambalaya'
+    ];
+
+    /**
+     * Splits bilingual menu text into DE and EN parts.
+     * Pattern per course: [DE] / [EN](ALLERGENS)
+     * Max 3 courses per menu item (sanity check).
+     * @param {string} text - The bilingual description text
+     * @returns {{ de: string, en: string, raw: string }}
+     */
+    function splitLanguage(text) {
+        if (!text) return { de: '', en: '', raw: '' };
+
+        const raw = text;
+        const formattedRaw = '• ' + text.replace(/\(([A-Z ]+)\)\s*(?=\S)/g, '($1)\n• ');
+
+        // Utility to compute DE/EN score for a subset of words
+        function scoreBlock(wordArray) {
+            let de = 0, en = 0;
+            wordArray.forEach(word => {
+                const w = word.toLowerCase().replace(/[^a-zäöüß]/g, '');
+                if (w) {
+                    let bestDeMatch = 0;
+                    let bestEnMatch = 0;
+                    // Full match is better than partial string match
+                    if (DE_STEMS.includes(w)) bestDeMatch = w.length;
+                    else DE_STEMS.forEach(s => { if (w.includes(s) && s.length > bestDeMatch) bestDeMatch = s.length; });
+
+                    if (EN_STEMS.includes(w)) bestEnMatch = w.length;
+                    else EN_STEMS.forEach(s => { if (w.includes(s) && s.length > bestEnMatch) bestEnMatch = s.length; });
+
+                    if (bestDeMatch > 0) de += (bestDeMatch / w.length);
+                    if (bestEnMatch > 0) en += (bestEnMatch / w.length);
+
+                    // Capitalized noun heuristic matches German text styles typically
+                    if (/^[A-ZÄÖÜ]/.test(word)) {
+                        de += 0.5;
+                    }
+                }
+            });
+            return { de, en };
+        }
+
+        // Heuristic sliding window to split a fragment containing "EN DE"
+        // E.g., "Bratwurst with pumpkin Kirschjoghurt" => enPart: "Bratwurst with pumpkin", dePart: "Kirschjoghurt"
+        function heuristicSplitEnDe(fragment) {
+            const words = fragment.trim().split(/\s+/);
+            if (words.length < 2) return { enPart: fragment, nextDe: '' };
+
+            let bestK = -1;
+            let maxScore = -9999;
+
+            for (let k = 1; k < words.length; k++) {
+                const left = words.slice(0, k);
+                const right = words.slice(k);
+
+                const leftScore = scoreBlock(left);
+                const rightScore = scoreBlock(right);
+
+                // left should be EN, right should be DE
+                // Metric = (EN votes in left - DE votes in left) + (DE votes in right - EN votes in right)
+                const score = (leftScore.en - leftScore.de) + (rightScore.de - rightScore.en);
+
+                // Extra penalty if the split puts a low-case word as the first word of the right (DE) part
+                // because a new German sentence usually starts with a capital noun.
+                const rightFirstWord = right[0];
+                let capitalBonus = 0;
+                if (/^[A-ZÄÖÜ]/.test(rightFirstWord)) {
+                    capitalBonus = 2.0;
+                }
+
+                const finalScore = score + capitalBonus;
+
+                if (finalScore > maxScore) {
+                    maxScore = finalScore;
+                    bestK = k;
+                }
+            }
+
+            if (bestK !== -1) {
+                return {
+                    enPart: words.slice(0, bestK).join(' '),
+                    nextDe: words.slice(bestK).join(' ')
+                };
+            }
+            return { enPart: fragment, nextDe: '' };
+        }
+
+        // Check if text contains the bilingual separator ' / '
+        if (!text.includes(' / ')) {
+            // Fallback: detect language via keyword scoring
+            const words = text.toLowerCase().split(/\s+/);
+            const score = scoreBlock(words);
+
+            // No split possible – return full text for detected language, empty for other
+            if (score.en > score.de) {
+                return { de: '', en: formattedRaw, raw: formattedRaw };
+            }
+            return { de: formattedRaw, en: '', raw: formattedRaw };
+        }
+
+        // Split by ' / ' – produces alternating DE/EN fragments
+        const parts = text.split(' / ');
+        // Sanity check: max 3 courses means max 3 slashes → max 4 parts
+        if (parts.length > 4) {
+            // Too many slashes – possibly not bilingual, return as-is
+            return { de: formattedRaw, en: '', raw: formattedRaw };
+        }
+
+        const deParts = [];
+        const enParts = [];
+
+        // First fragment is always DE (course 1)
+        deParts.push(parts[0].trim());
+
+        // Process remaining fragments: each contains "EN(ALLERGENS) next_DE"
+        // Allergen pattern: (LETTERS_AND_SPACES) at the boundary
+        const allergenRegex = /\(([A-Z ]+)\)\s*/;
+
+        for (let i = 1; i < parts.length; i++) {
+            const fragment = parts[i].trim();
+            const match = fragment.match(allergenRegex);
+
+            if (match) {
+                // Split: everything before allergen + allergen = EN, after = next DE
+                const allergenEnd = match.index + match[0].length;
+                const enPart = fragment.substring(0, match.index).trim();
+                const allergenCode = match[1];
+                const nextDe = fragment.substring(allergenEnd).trim();
+
+                enParts.push(enPart + '(' + allergenCode + ')');
+                // Also append allergen to the last DE part
+                if (deParts.length > 0) {
+                    deParts[deParts.length - 1] = deParts[deParts.length - 1] + '(' + allergenCode + ')';
+                }
+
+                if (nextDe) {
+                    deParts.push(nextDe);
+                }
+            } else {
+                // No allergen code found!
+                // If it's not the last part (or even if it is, but we highly suspect merged languages),
+                // we use the heuristic to find the hidden split-point.
+                const split = heuristicSplitEnDe(fragment);
+                enParts.push(split.enPart);
+                if (split.nextDe) {
+                    deParts.push(split.nextDe);
+                }
+            }
+        }
+
+        return {
+            de: deParts.map(p => '• ' + p).join('\n'),
+            en: enParts.map(p => '• ' + p).join('\n'),
+            raw: formattedRaw
+        };
+    }
+
+    /**
+     * Returns text filtered by the current language mode.
+     * @param {string} text - The bilingual text
+     * @returns {string}
+     */
+    function getLocalizedText(text) {
+        if (langMode === 'all') return text || '';
+        const split = splitLanguage(text);
+        if (langMode === 'en') return split.en || split.raw;
+        return split.de || split.raw; // 'de' is default
+    }
+
    // === Bootstrap ===
    injectUI();
    bindEvents();
--- a/style.css
+++ b/style.css
@@ -56,12 +56,22 @@ body {
 }

 /* Fix scrolling bug: Reset html/body styles from host page */
-html,
+/* IMPORTANT: html must NOT have overflow set, or it creates a scroll container that breaks position: sticky */
+html {
+    height: auto !important;
+    min-height: 100% !important;
+    overflow: visible !important;
+    position: static !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
 body {
    height: auto !important;
    min-height: 100% !important;
-    overflow-y: auto !important;
-    overflow-x: hidden !important;
+    overflow-x: clip !important;
+    /* clip prevents horizontal overflow without breaking sticky */
+    overflow-y: visible !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
@@ -69,8 +79,7 @@ body {

 /* Header */
 .app-header {
-    position: sticky;
-    top: 0;
+    flex-shrink: 0;
    z-index: 100;
    backdrop-filter: blur(12px);
    background-color: var(--header-bg);
@@ -153,6 +162,38 @@ body {
    color: var(--text-secondary);
 }

+/* Language Toggle (FR-100) */
+.lang-toggle {
+    display: inline-flex;
+    gap: 0;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    background: var(--bg-card);
+}
+
+.lang-btn {
+    padding: 3px 10px;
+    font-size: 0.7rem;
+    font-weight: 600;
+    letter-spacing: 0.03em;
+    background: transparent;
+    color: var(--text-secondary);
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.lang-btn:hover {
+    color: var(--text-primary);
+    background: rgba(100, 116, 139, 0.1);
+}
+
+.lang-btn.active {
+    background: var(--accent-color);
+    color: white;
+}
+
 .nav-group {
    display: flex;
    background-color: var(--bg-card);
@@ -380,13 +421,21 @@ body {
    font-size: 18px;
 }

-/* Container */
+/* Container - flex column, full width so child scrollbar is at edge */
 .container {
+    flex: 1;
    width: 100%;
-    /* Full width */
-    margin: 2rem auto;
-    padding: 0 2rem;
-    min-height: 80vh;
+    overflow: hidden;
+    padding: 2rem 0 0 0;
+    /* Only top padding, no horizontal so child fills width */
+    display: flex;
+    flex-direction: column;
+}
+
+/* Add horizontal padding to direct children of container to maintain layout */
+.container>*:not(.menu-grid) {
+    padding-left: 2rem;
+    padding-right: 2rem;
 }

 /* Banner */
@@ -735,14 +784,17 @@ body {
    display: none !important;
 }

-/* Menu Grid */
+/* Menu Grid Container */
 .menu-grid {
-    display: grid;
-    gap: 2rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    gap: 1rem;
 }

 .week-section {
-    margin-bottom: 3rem;
+    margin-bottom: 2rem;
 }

 .week-header {
@@ -764,10 +816,25 @@ body {
    margin-top: 0.25rem;
 }

+/* Full-viewport layout: header + scrollable content + footer */
+#kantine-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    height: 100dvh;
+    /* Dynamic viewport height for mobile browsers */
+    overflow: hidden;
+}
+
 .days-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
+    flex: 1;
+    overflow-y: auto;
+    /* This is the scroll container at the window edge */
+    align-content: start;
+    padding: 0 2rem 2rem 2rem;
 }

 /* Card */
@@ -776,21 +843,33 @@ body {
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    overflow: clip;
+    /* Clips scrolling content behind sticky header */
+    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
 }

-/* Past Day Styling - Target specific elements so ordered items can remain visible */
-.menu-card.past-day .card-header,
+/* Past Day Styling - Target specific elements so ordered items can remain visible AND preserve sticky context */
+/* We MUST apply filter/opacity to children, not the parent .menu-card, or else position: sticky breaks */
+
+/* Header keeps fully opaque background to hide scrolling items, only grayscales */
+.menu-card.past-day .card-header {
+    filter: grayscale(0.8);
+    transition: filter 0.3s;
+}
+
+/* Items become semi-transparent */
 .menu-card.past-day .menu-item:not(.ordered) {
    opacity: 0.6;
    filter: grayscale(0.8);
    transition: opacity 0.3s, filter 0.3s;
 }

-.menu-card.past-day:hover .card-header,
+.menu-card.past-day:hover .card-header {
+    filter: grayscale(0.4);
+}
+
 .menu-card.past-day:hover .menu-item:not(.ordered) {
    opacity: 0.8;
    filter: grayscale(0.4);
@@ -837,7 +916,6 @@ body {


 .menu-card:hover {
-    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 }

@@ -847,7 +925,23 @@ body {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
-    background-color: rgba(100, 116, 139, 0.05);
+    background-color: var(--bg-card);
+
+    /* Removed border-radius: 12px 12px 0 0;
+       .menu-card's overflow: clip will round the corners initially.
+       When sticky at the top, it will be square and perfectly hide scrolling content! */
+
+    /* Sticky within .container scroll area */
+    position: sticky;
+    top: 0;
+    z-index: 90;
+}
+
+.card-body {
+    padding: 1.25rem;
+    display: grid;
+    grid-template-rows: auto;
+    align-content: start;
 }

 .day-name {
@@ -860,13 +954,6 @@ body {
    color: var(--text-secondary);
 }

-.card-body {
-    padding: 1.25rem;
-    display: grid;
-    grid-template-rows: auto;
-    /* Each menu item gets its own row */
-    align-content: start;
-}

 .empty-state {
    color: var(--text-secondary);
@@ -913,6 +1000,7 @@ body {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
+    white-space: pre-wrap;
 }

 .badges {
@@ -994,12 +1082,12 @@ body {

 /* Footer */
 .app-footer {
+    flex-shrink: 0;
    text-align: center;
-    padding: 2rem;
+    padding: 1rem 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    border-top: 1px solid var(--border-color);
-    margin-top: auto;
 }

 /* === Order / Cancel Buttons (inline in status row) === */
@@ -1330,17 +1418,20 @@ body {

 /* Day Header Status Colors (User Request) */
 .card-header.header-violet {
-    background-color: rgba(139, 92, 246, 0.15);
+    background-color: var(--bg-card);
+    background-image: linear-gradient(rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.15));
    border-bottom: 2px solid #8b5cf6;
 }

 .card-header.header-green {
-    background-color: rgba(16, 185, 129, 0.15);
+    background-color: var(--bg-card);
+    background-image: linear-gradient(rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.15));
    border-bottom: 2px solid var(--success-color);
 }

 .card-header.header-red {
-    background-color: rgba(239, 68, 68, 0.15);
+    background-color: var(--bg-card);
+    background-image: linear-gradient(rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.15));
    border-bottom: 2px solid var(--error-color);
 }

--- a/test_logic.js
+++ b/test_logic.js
@@ -62,6 +62,7 @@ const sandbox = {
            }
            return createMockElement('query-result');
        },
+        querySelectorAll: () => [createMockElement()],
        getElementById: (id) => createMockElement(id),
        documentElement: {
            setAttribute: () => { },
--- a/tests/test_dom.js
+++ b/tests/test_dom.js
@@ -62,6 +62,11 @@ const html = `
    <button id="btn-this-week" class="active">This Week</button>
    <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>
+    
    <button id="btn-refresh">Refresh</button>
    <button id="btn-logout">Logout</button>
    <div class="order-history-header">Header</div>
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-v1.5.1
+v1.6.2
Author	SHA1	Message	Date
Kantine Wrapper	6a70a5a5e8	feat: sticky headers (v1.6.2)	2026-03-05 11:34:19 +01:00
Kantine Wrapper	edec109552	chore: update build artifacts for v1.6.1	2026-03-04 14:46:17 +01:00
Kantine Wrapper	a7aea2ece3	chore: version bump	2026-03-04 14:46:11 +01:00
Kantine Wrapper	49dc1cc135	chore: update build artifacts for v1.6.0	2026-03-04 14:45:25 +01:00
Kantine Wrapper	90f1c0ed04	feat: Add descriptive German tooltips to various UI elements for improved usability	2026-03-04 14:45:13 +01:00
Kantine Wrapper	42978c6e7e	chore: update build artifacts for v1.6.0	2026-03-04 13:29:25 +01:00
Kantine Wrapper	6ad3498bcc	cleanup test file	2026-03-04 13:27:13 +01:00
Kantine Wrapper	b44ecb2ccf	v1.6.0: Language Filter	2026-03-04 13:26:46 +01:00
Kantine Wrapper	9e161e2907	chore: update build artifacts for v1.6.0	2026-03-04 13:11:43 +01:00
Kantine Wrapper	8b15760463	feat: Introduce language filter with DE/EN/ALL toggle for menu descriptions and update to version 1.6.0.	2026-03-04 13:11:34 +01:00
Kantine Wrapper	4aa67c9cbe	chore: update build artifacts for v1.5.1	2026-03-04 11:42:04 +01:00
Kantine Wrapper	12c55ef883	feat: Add a collapsing video banner to the installation page.	2026-03-04 11:41:58 +01:00
Kantine Wrapper	1e9dd9a3b5	chore: update build artifacts for v1.5.1	2026-03-04 11:39:19 +01:00
Kantine Wrapper	db8b2c5629	fix: Correct Friday order payload `preorder` and time, and update version to v1.5.1.	2026-03-04 11:39:09 +01:00