From c16ef5415fedae53bb871fee963aa1465b1078b3 Mon Sep 17 00:00:00 2001
From: team3 <team3@mitho-media.de>
Date: Mon, 13 Jul 2026 19:36:57 +0200
Subject: [PATCH] update

---
 frontend/src/components/Lesemodus.vue | 9 ++++++++-
 frontend/src/style.css                | 3 ++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Lesemodus.vue b/frontend/src/components/Lesemodus.vue
index fbfa5ca..6996109 100644
--- a/frontend/src/components/Lesemodus.vue
+++ b/frontend/src/components/Lesemodus.vue
@@ -56,9 +56,16 @@ const gesperrt = computed(() =>
   && !fertig.value.has(screen.value.baustein))
 function vor() { if (!gesperrt.value && pos.value < screens.value.length - 1) pos.value++ }
 function zurueck() { if (pos.value > 0) pos.value-- }
+const buehne = ref(null)
 function taste(e) {
   if (e.key === 'ArrowRight') vor()
   else if (e.key === 'ArrowLeft') zurueck()
+  // Pfeil hoch/runter scrollen die Bühne — der innere Scroller hat nie Fokus,
+  // ohne das hier bewegen die Tasten also gar nichts
+  else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    e.preventDefault()
+    buehne.value?.scrollBy({ top: e.key === 'ArrowDown' ? 140 : -140, behavior: 'smooth' })
+  }
 }
 
 // Wisch-Navigation (mobil): klar horizontal + kurz genug = blättern.
@@ -185,7 +192,7 @@ onUnmounted(() => {
       <button class="lm-x" title="Schließen" @click="schliessen">✕</button>
     </header>
 
-    <main class="lm-buehne">
+    <main ref="buehne" class="lm-buehne">
       <section v-if="screen.typ === 'intro'" class="lm-screen lm-intro">
         <div class="lm-kapnr">Kapitel {{ screen.nr }} / {{ screen.von }}</div>
         <h1>{{ screen.kap.titel }}</h1>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 64212b7..537c9dd 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -302,7 +302,8 @@ table.kennzahlen th { color: var(--dim); }
   background: var(--karte); color: var(--text); cursor: pointer; font-size: 14px;
 }
 .lm-fuss button:disabled { opacity: 0.4; cursor: default; }
-.lm-buehne { flex: 1; overflow-y: auto; }   /* Block-Scroll: Padding am Ende bleibt erhalten */
+.lm-buehne { flex: 1; overflow-y: auto; scrollbar-width: none; }   /* Block-Scroll: Padding am Ende bleibt erhalten */
+.lm-buehne::-webkit-scrollbar { display: none; }  /* Scrollbalken unsichtbar, Scrollen bleibt */
 .lm-screen {
   width: 100%; max-width: 760px; margin: 0 auto; padding: 40px 24px 96px;
   font-family: 'Inter Variable', system-ui, sans-serif;   /* Lesetypografie wie im Guide */