feat(v8.2): UX — Guide-Tabs, Begriffe oben, Mobile, Download-Links

- GuidesPanel: "Begriffe kurz erklärt" jetzt ganz oben (vor Guide-Karten)
- GuidesPanel: Tab-Navigation mit Kategorie-Chips + Active-Highlighting;
  Klick scrollt zur jeweiligen Guide-Gruppe
- ConnectPanel: Download-Links für Zed (zed.dev) und Cline (VS Code +
  JetBrains Marketplace) ergänzt
- base.css: Mobile-Breakpoint ≤520px — Sidebar wird zur Bottom-Nav,
  Content-Padding reduziert, Touch-freundliche Button-Höhen (min 40px),
  Topbar kompaktiert, Guide-Tabs horizontal scrollbar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/panels/ConnectPanel.svelte

@@ -270,6 +270,7 @@
       </div>
       <p style="margin-top:12px"><b>API-Key:</b> Öffne den Agent-Panel → Anbieter <b>bosgame</b> → trag irgendeinen Wert ein (z.B. <code>local</code>).</p>
       <div class="hint">Danach im Agent-Panel das Modell <b>bosgame / {firstModel}</b> auswählen.</div>
+      <div class="hint" style="margin-top:4px">Zed herunterladen: <a href="https://zed.dev" target="_blank" rel="noopener">zed.dev</a> — kostenlos, native Performance, Windows/macOS/Linux.</div>
     {:else if selectedTool === 'opencode'}
       {@const block = openCodeBlock(url, activeIds)}
       <p>Datei anlegen oder öffnen (OpenCode Desktop nutzt <b>.jsonc</b> — JSON mit Kommentaren):</p>
@@ -294,6 +295,7 @@
         <button class="ghost" onclick={e => copyVal((e.currentTarget as HTMLElement).previousElementSibling as HTMLInputElement)}>Kopieren</button>
       </div>
       <div class="hint">API-Key: ein beliebiger Wert (z.B. <code>local</code>).</div>
+      <div class="hint" style="margin-top:4px">Cline für VS Code: <a href="https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev" target="_blank" rel="noopener">VS Code Marketplace</a> · für JetBrains: <a href="https://plugins.jetbrains.com/plugin/24604-cline" target="_blank" rel="noopener">JetBrains Marketplace</a></div>
     {:else if selectedTool === 'openwebui'}
       <p>Settings → Admin Panel → Connections → neue OpenAI-Verbindung:</p>
       <label>Basis-URL</label>

frontend/src/panels/GuidesPanel.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
   import { GUIDE_GROUPS, CONCEPTS } from './guides-data.js'
+
+  let activeGroup = $state(0)
+
+  function scrollTo(gi: number) {
+    activeGroup = gi
+    document.getElementById(`guide-group-${gi}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  }
 </script>
 
 <div class="pagehead">
@@ -9,8 +16,33 @@
   </div>
 </div>
 
+<!-- Begriffe oben -->
+<div class="card">
+  <div class="card-h"><h3>Begriffe kurz erklärt</h3></div>
+  <div class="concept-grid" style="margin-top:8px">
+    {#each CONCEPTS as [term, text]}
+      <div class="concept">
+        <h4>{term}</h4>
+        <p>{text}</p>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<!-- Tab-Navigation -->
+<div class="guide-tabs">
   {#each GUIDE_GROUPS as group, gi}
-  <div class="card guide-card">
+    <button
+      class="guide-tab{activeGroup === gi ? ' active' : ''}"
+      onclick={() => scrollTo(gi)}>
+      {group.label}
+    </button>
+  {/each}
+</div>
+
+<!-- Guide-Karten -->
+{#each GUIDE_GROUPS as group, gi}
+  <div class="card guide-card" id="guide-group-{gi}">
     <div class="guide-group-hd">{group.label}</div>
     {#each group.tutorials as [title, body], i}
       <details class="guide-acc" open={gi === 0 && i === 0}>
@@ -21,21 +53,36 @@
   </div>
 {/each}
 
-<div class="card-h" style="margin-top:8px"><h3>Begriffe kurz erklärt</h3></div>
-<div class="concept-grid">
-  {#each CONCEPTS as [term, text]}
-    <div class="concept">
-      <h4>{term}</h4>
-      <p>{text}</p>
-    </div>
-  {/each}
-</div>
-
 <style>
+  .guide-tabs {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin: -6px 0 2px;
+  }
+
+  .guide-tab {
+    font-size: 12px;
+    padding: 5px 13px;
+    border-radius: 999px;
+    background: var(--tile);
+    border: 1px solid var(--line);
+    color: var(--mut);
+    cursor: pointer;
+    transition: .13s;
+    font-family: var(--sans);
+  }
+  .guide-tab:hover { color: var(--tx); border-color: var(--line2); }
+  .guide-tab.active {
+    background: rgba(45,212,191,.12);
+    border-color: rgba(45,212,191,.30);
+    color: var(--accent);
+  }
+
   .guide-card {
     padding: 0;
     overflow: hidden;
-    margin-bottom: 8px;
+    margin-bottom: 0;
   }
 
   .guide-group-hd {

static/css/base.css

@@ -130,10 +130,60 @@ a{color:var(--accent);text-decoration:none}
 .split{display:grid;gap:var(--sp-4);grid-template-columns:1.05fr 1fr}
 @media(max-width:1180px){.grid-3{grid-template-columns:1fr 1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
 @media(max-width:900px){.split{grid-template-columns:1fr}}
-@media(max-width:760px){.grid-3,.grid-2,.kpis{grid-template-columns:1fr}
+@media(max-width:760px){
+  .grid-3,.grid-2,.kpis{grid-template-columns:1fr}
   .sidebar{width:60px;flex-basis:60px}
   .ni-tx,.brand-tx{display:none}
-  .nav-item{justify-content:center}.brand{justify-content:center}}
+  .nav-item{justify-content:center}.brand{justify-content:center}
+}
+
+/* ---- Mobile (≤ 520px): Bottom-Nav, kompaktes Layout ---- */
+@media(max-width:520px){
+  :root{ --side:0px }
+
+  /* Sidebar → unsichtbar, Navigation nach unten */
+  .sidebar{
+    position:fixed;bottom:0;left:0;right:0;top:auto;
+    width:100%;height:56px;flex-basis:auto;z-index:30;
+    flex-direction:row;padding:0;
+    border-right:none;border-top:1px solid var(--line);
+    background:var(--bg2);
+    overflow-x:auto;gap:0;
+  }
+  .brand{display:none}
+  .side-nav{flex-direction:row;gap:0;flex:1;overflow-x:auto}
+  .nav-cap,.side-foot{display:none}
+  .nav-item{
+    flex-direction:column;gap:2px;padding:6px 8px;
+    font-size:9px;min-width:52px;flex:1;border-radius:0;
+    justify-content:center;align-items:center;border:none;
+  }
+  .ni-tx{display:block;font-size:9px;line-height:1;color:inherit}
+  .ni-ic svg{width:20px;height:20px}
+
+  /* Main-Bereich: Bottom-Padding für die Nav */
+  .main{ padding-bottom:56px }
+
+  /* Topbar kompakter */
+  .topbar{padding:var(--sp-2) var(--sp-3);gap:var(--sp-2)}
+  .top-clock,.sec-chip{display:none}
+  #update-badges .upd-badge{font-size:10px;padding:3px 7px}
+
+  /* Content-Padding reduzieren */
+  .content{padding:var(--sp-3) var(--sp-3) var(--sp-6)}
+
+  /* Karten kompakter */
+  .card{padding:var(--sp-3) var(--sp-3)}
+  .modal-card{padding:var(--sp-4)}
+  .modal-overlay{padding:12px}
+
+  /* Buttons: mindestens 44px Höhe für Touch */
+  button{min-height:40px}
+  button.ghost{min-height:34px}
+
+  /* Tabs in Guides horizontal scrollbar */
+  .guide-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
+}
 
 /* Alert-Banner */
 .alert{

static/dist/main.css

@@ -1 +1 @@
-.guide-card.svelte-112sh7i{padding:0;overflow:hidden;margin-bottom:8px}.guide-group-hd.svelte-112sh7i{padding:9px 18px 7px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:#2dd4bf0f;border-bottom:1px solid var(--line)}.tut-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:8px;font-size:12.5px}.tut-row{display:grid;grid-template-columns:1fr 2fr;border-bottom:1px solid var(--line)}.tut-row:last-child{border-bottom:none}.tut-cell-hd{padding:10px 14px;font-weight:500;border-right:1px solid var(--line);background:#ffffff06;line-height:1.5}.tut-cell-hd.bad{color:var(--mut);text-decoration:line-through;font-style:italic}.tut-cell-bd{padding:10px 14px;line-height:1.6;color:var(--fg)}.tut-sources{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut)}.tut-sources a{color:var(--accent);text-decoration:none}.tut-sources a:hover{text-decoration:underline}.tut-code{display:block;background:var(--bg, #0d0d0d);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:monospace;font-size:11.5px;line-height:1.65;white-space:pre;overflow-x:auto;margin:10px 0;color:var(--fg)}@keyframes svelte-h40163-pulse{0%,to{opacity:1}50%{opacity:.4}}
+.guide-tabs.svelte-112sh7i{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 2px}.guide-tab.svelte-112sh7i{font-size:12px;padding:5px 13px;border-radius:999px;background:var(--tile);border:1px solid var(--line);color:var(--mut);cursor:pointer;transition:.13s;font-family:var(--sans)}.guide-tab.svelte-112sh7i:hover{color:var(--tx);border-color:var(--line2)}.guide-tab.active.svelte-112sh7i{background:#2dd4bf1f;border-color:#2dd4bf4d;color:var(--accent)}.guide-card.svelte-112sh7i{padding:0;overflow:hidden;margin-bottom:0}.guide-group-hd.svelte-112sh7i{padding:9px 18px 7px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);background:#2dd4bf0f;border-bottom:1px solid var(--line)}.tut-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:8px;font-size:12.5px}.tut-row{display:grid;grid-template-columns:1fr 2fr;border-bottom:1px solid var(--line)}.tut-row:last-child{border-bottom:none}.tut-cell-hd{padding:10px 14px;font-weight:500;border-right:1px solid var(--line);background:#ffffff06;line-height:1.5}.tut-cell-hd.bad{color:var(--mut);text-decoration:line-through;font-style:italic}.tut-cell-bd{padding:10px 14px;line-height:1.6;color:var(--fg)}.tut-sources{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut)}.tut-sources a{color:var(--accent);text-decoration:none}.tut-sources a:hover{text-decoration:underline}.tut-code{display:block;background:var(--bg, #0d0d0d);border:1px solid var(--line);border-radius:6px;padding:12px 14px;font-family:monospace;font-size:11.5px;line-height:1.65;white-space:pre;overflow-x:auto;margin:10px 0;color:var(--fg)}@keyframes svelte-h40163-pulse{0%,to{opacity:1}50%{opacity:.4}}