update

frontend/src/App.vue

@@ -259,7 +259,7 @@ function handlePreview(guide) {
 function handleOpenElements() {
   if (!selectedTopic.value) return
   elementsView.value = true
-  elementsOpen.value = true
+  // Rechte Sidebar bleibt zu — sie öffnet erst beim Klick auf ein Element.
 }
 
 function handleOpenElementDetail(el) {
@@ -398,6 +398,11 @@ onUnmounted(() => {
     <div v-else class="empty-main">
       <p>Thema in der Sidebar anlegen oder auswählen.</p>
     </div>
+    <div
+      v-if="elementsOpen && selectedTopic"
+      class="elements-backdrop"
+      @click="elementsOpen = false"
+    ></div>
     <ElementsSidebar
       v-if="elementsOpen && selectedTopic"
       :topic="selectedTopic"
@@ -490,7 +495,7 @@ textarea::placeholder {
 
 .layout {
   display: flex;
-  height: 100vh;
+  height: 100dvh;
   overflow: hidden;
   position: relative;
 }
@@ -500,7 +505,7 @@ textarea::placeholder {
   left: 0;
   top: 0;
   width: 50px;
-  height: 100vh;
+  height: 100dvh;
   z-index: 5;
   cursor: pointer;
 }
@@ -518,7 +523,7 @@ textarea::placeholder {
   position: fixed;
   left: 0;
   top: 0;
-  height: 100vh;
+  height: 100dvh;
   transform: translateX(-100%);
   transition: transform 0.2s ease;
   z-index: 10;
@@ -539,4 +544,20 @@ textarea::placeholder {
   color: var(--text-muted);
   font-size: 1rem;
 }
+
+/* Nur sichtbar, wenn die Elemente-Sidebar mobil als Overlay liegt.
+   Tipp daneben schließt sie. */
+.elements-backdrop {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .elements-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 29;
+    background: var(--shadow);
+  }
+}
 </style>