UI: Add native inline back buttons to subviews (Lernen, Scan, IServ) instead of floating pill

index.html

@@ -51,7 +51,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.2.2</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.2.3</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/app.js

@@ -465,29 +465,6 @@ const initApp = async () => {
       }
     }
     
-    // Add back button for sub-views
-    if (isSubView) {
-      const backBtn = document.createElement('button');
-      backBtn.innerHTML = '<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none"><polyline points="15 18 9 12 15 6"></polyline></svg> Zurück zum Hub';
-      backBtn.style.position = 'fixed';
-      backBtn.style.top = 'env(safe-area-inset-top, 20px)';
-      backBtn.style.left = '20px';
-      backBtn.style.zIndex = '999999';
-      backBtn.style.display = 'flex';
-      backBtn.style.alignItems = 'center';
-      backBtn.style.gap = '4px';
-      backBtn.style.padding = '8px 16px';
-      backBtn.style.background = 'rgba(0,0,0,0.5)';
-      backBtn.style.color = '#fff';
-      backBtn.style.border = '1px solid rgba(255,255,255,0.2)';
-      backBtn.style.borderRadius = '20px';
-      backBtn.style.backdropFilter = 'blur(10px)';
-      backBtn.style.fontWeight = '600';
-      backBtn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.5)';
-      backBtn.onclick = () => window.openView('Hub');
-      routerView.appendChild(backBtn);
-    }
-    
     routerView.classList.remove('view-exit-anim');
     routerView.classList.add('view-enter-anim');
   };

src/views/iserv/iserv-view.js

@@ -175,7 +175,10 @@ export class IServView {
   renderLogin() {
     this.container.innerHTML = `
       <div class="iserv-container">
-        <div class="iserv-header">
+        <div class="iserv-header" style="display: flex; align-items: center; gap: 12px;">
+          <button onclick="window.openView('Hub')" class="icon-btn" style="background: transparent; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);">
+            <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+          </button>
           <h1>IServ Anbindung</h1>
         </div>
         <div class="iserv-login-card">
@@ -305,8 +308,13 @@ export class IServView {
     this.container.innerHTML = `
       <div class="iserv-container">
         ${!this.isLoading ? `
-        <div class="iserv-header">
-          <h1>Deine Aufgaben</h1>
+        <div class="iserv-header" style="display: flex; justify-content: space-between; align-items: center;">
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <button onclick="window.openView('Hub')" class="icon-btn" style="background: transparent; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);">
+              <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+            </button>
+            <h1 style="margin: 0;">Deine Aufgaben</h1>
+          </div>
           <button class="icon-btn" id="iserv-logout-btn" title="Abmelden" style="width: 40px; height: 40px; background: rgba(255,255,255,0.05); color: var(--text-primary); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;">
             ${getIconSvg('log-out')}
           </button>

src/views/learn/learn-view.js

@@ -77,7 +77,12 @@ export class LearnView {
     this.container.innerHTML = `
       <div class="learn-view">
         <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-          <h2 style="margin: 0; font-size: 28px; color: var(--text-primary);">Lernen</h2>
+          <div style="display: flex; align-items: center; gap: 12px;">
+            <button onclick="window.openView('Hub')" class="icon-btn" style="background: transparent; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);">
+              <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+            </button>
+            <h2 style="margin: 0; font-size: 28px; color: var(--text-primary);">Lernen</h2>
+          </div>
           <button id="add-deck-btn" class="icon-btn gpu-accelerated" style="background: rgba(255,255,255,0.05); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.05); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
           </button>

src/views/scan/scan-view.js

@@ -36,9 +36,13 @@ export class ScanView {
       <div style="padding: 24px; max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; height: 100%; box-sizing: border-box; position: relative;">
         
         <!-- Header -->
-        <div style="position: relative; text-align: center; margin-bottom: 16px;">
-
-          <h2 style="font-size: 24px; font-weight: 600; margin-bottom: 8px;">Arbeitsblatt Scan</h2>
+        <div style="position: relative; margin-bottom: 16px;">
+          <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;">
+            <button onclick="window.openView('Hub')" class="icon-btn" style="background: transparent; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);">
+              <svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
+            </button>
+            <h2 style="font-size: 24px; font-weight: 600; margin: 0;">Arbeitsblatt Scan</h2>
+          </div>
           <p style="color: var(--text-secondary); font-size: 14px;">Mache ein Foto deines leeren Arbeitsblattes. Die KI löst die Aufgaben und füllt es in Handschrift für dich aus.</p>
         </div>