fix: ABS API key auth + mobile bottom-nav Hörbücher button

- Replace username/password login with API key (Bearer token) auth
  - New absVerifyApiKey() verifies via GET /api/me instead of POST /login
  - Settings shows single API Key field with hint (Profil → API Token in ABS)
  - API key never pre-filled in settings for security
- Add "Bücher" button to mobile bottom-nav (bnav-library), hidden until connected
- _showAbsNavItem() helper keeps sidebar + bnav in sync on connect/disconnect

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

index.html

@@ -531,9 +531,15 @@
           <span style="width:24px;height:24px;border-radius:6px;background:var(--green-dim);display:inline-flex;align-items:center;justify-content:center;font-size:12px">📚</span>
           Audiobookshelf
         </h3>
-        <div class="field"><label>Server URL</label><input id="abs-s-url" type="url" placeholder="https://books.example.com"></div>
-        <div class="field"><label>Benutzername</label><input id="abs-s-user" type="text" placeholder="admin"></div>
-        <div class="field"><label>Passwort</label><input id="abs-s-pass" type="password" placeholder="••••••••"></div>
+        <div class="field">
+          <label>Server URL</label>
+          <input id="abs-s-url" type="url" placeholder="https://books.example.com">
+        </div>
+        <div class="field">
+          <label>API Key</label>
+          <input id="abs-s-apikey" type="password" placeholder="Aus ABS: Profil → API Token">
+          <div class="hint">Einstellungen → Profil → API Token in Audiobookshelf</div>
+        </div>
         <div id="abs-lib-picker" style="display:none" class="field">
           <label>Bibliothek</label>
           <select id="abs-lib-select" onchange="absSetLibrary(this.value)" style="width:100%;padding:10px 12px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:14px;outline:none"></select>
@@ -895,6 +901,10 @@
         <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
         Favoriten
       </button>
+      <button class="bnav-item" id="bnav-audiobooks" onclick="navigate('audiobooks')" data-page="audiobooks" style="display:none">
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
+        Bücher
+      </button>
     </div>
     <div class="bnav-pages" id="bnav-discover" style="display:none">
       <button class="bnav-item" onclick="navigate('discover')" data-page="discover">

src/abs.js

@@ -20,13 +20,13 @@ const absPost  = (p, b)  => absRequest('POST',  p, b);
 const absPatch = (p, b)  => absRequest('PATCH', p, b);
 
 // ─── AUTH ───
-export async function absLogin(url, user, pass) {
+export async function absVerifyApiKey(url, apiKey) {
   S.abs.url   = url.replace(/\/$/, '');
-  const data = await absPost('/login', { username: user, password: pass });
-  if (!data.token) throw new Error('Kein Token in der Antwort');
-  S.abs.token = data.token;
-  S.abs.userId = data.user?.id || null;
-  return data;
+  S.abs.token = apiKey;
+  // Verify by fetching current user — throws if token is invalid
+  const me = await absGet('/api/me');
+  S.abs.userId = me.id || null;
+  return me;
 }
 
 // ─── LIBRARIES ───
@@ -543,7 +543,6 @@ export function absInitFromStorage() {
     const d = JSON.parse(localStorage.getItem('ns_abs') || 'null');
     if (d?.url && d?.token) {
       S.abs.url    = d.url;
-      S.abs.user   = d.user   || '';
       S.abs.token  = d.token;
       S.abs.userId = d.userId || null;
       S.abs.currentLibraryId = d.libId || null;
@@ -553,38 +552,43 @@ export function absInitFromStorage() {
 
 function absSaveToStorage() {
   localStorage.setItem('ns_abs', JSON.stringify({
-    url: S.abs.url, user: S.abs.user, token: S.abs.token,
+    url: S.abs.url, token: S.abs.token,
     userId: S.abs.userId, libId: S.abs.currentLibraryId,
   }));
 }
 
+function _showAbsNavItem(show) {
+  document.getElementById('nav-abs-section')?.style && (document.getElementById('nav-abs-section').style.display = show ? '' : 'none');
+  const bnav = document.getElementById('bnav-audiobooks');
+  if (bnav) bnav.style.display = show ? '' : 'none';
+}
+
 export function absOpenSettings() {
-  const url  = document.getElementById('abs-s-url');
-  const user = document.getElementById('abs-s-user');
-  if (url)  url.value  = S.abs.url  || '';
-  if (user) user.value = S.abs.user || '';
+  const urlEl = document.getElementById('abs-s-url');
+  if (urlEl) urlEl.value = S.abs.url || '';
+  // Never pre-fill the API key field for security — just show connection status
   const statusEl = document.getElementById('abs-s-status');
   if (statusEl) statusEl.textContent = S.abs.token ? '✅ Verbunden' : '';
 }
 
 export async function absConnectSettings() {
   const url    = document.getElementById('abs-s-url')?.value.trim().replace(/\/$/, '');
-  const user = document.getElementById('abs-s-user')?.value.trim();
-  const pass = document.getElementById('abs-s-pass')?.value;
-  if (!url || !user || !pass) { toast('❌ URL, Benutzer und Passwort ausfüllen'); return; }
+  const apiKey = document.getElementById('abs-s-apikey')?.value.trim();
+  if (!url || !apiKey) { toast('❌ URL und API Key ausfüllen'); return; }
   const btn = document.getElementById('abs-s-connect-btn');
   if (btn) { btn.disabled = true; btn.textContent = 'Verbinde…'; }
   try {
-    await absLogin(url, user, pass);
+    await absVerifyApiKey(url, apiKey);
     const libs = await absGetLibraries();
     if (!S.abs.currentLibraryId) S.abs.currentLibraryId = libs[0]?.id || null;
     absSaveToStorage();
     _renderLibPicker(libs);
-    document.getElementById('nav-abs-section').style.display = '';
+    _showAbsNavItem(true);
     toast('✅ Audiobookshelf verbunden');
     const statusEl = document.getElementById('abs-s-status');
     if (statusEl) statusEl.textContent = '✅ Verbunden';
   } catch (e) {
+    S.abs.token = null;
     toast(`❌ ABS Verbindung fehlgeschlagen: ${e.message}`);
   } finally {
     if (btn) { btn.disabled = false; btn.textContent = 'Verbinden'; }
@@ -617,9 +621,10 @@ export async function absLoadSettingsLibraries() {
 }
 
 export function absDisconnect() {
-  S.abs.url = ''; S.abs.user = ''; S.abs.token = null;
+  S.abs.url = ''; S.abs.token = null;
   S.abs.userId = null; S.abs.currentLibraryId = null;
   localStorage.removeItem('ns_abs');
+  _showAbsNavItem(false);
   toast('Audiobookshelf getrennt');
   const statusEl = document.getElementById('abs-s-status');
   if (statusEl) statusEl.textContent = '';

src/main.js

@@ -19,7 +19,7 @@ import {
 } from './views.js';
 import { loadSpotifyImporter, resolveSpotifyLink, clearSpotifyPreview, spotifyDlAll } from './spotify.js';
 import {
-  absInitFromStorage, absOpenSettings, absConnectSettings, absSetLibrary, absDisconnect,
+  absInitFromStorage, absOpenSettings, absConnectSettings, absSetLibrary, absDisconnect, absVerifyApiKey,
   absPlayItem, absTogglePlay, absSeek, absSkipSecs, absNextChapter, absPrevChapter,
   absSetSpeed, absSleepIn, absOpenPlayer, absClosePlayer, absToggleChapters,
   absToggleSpeedPicker, absToggleSleepPicker, absSeekToChapter, absProgDown, absProgMove,
@@ -85,6 +85,8 @@ async function startApp() {
   absInitFromStorage();
   if (S.abs.token) {
     document.getElementById('nav-abs-section').style.display = '';
+    const bnav = document.getElementById('bnav-audiobooks');
+    if (bnav) bnav.style.display = '';
     absLoadSettingsLibraries();
   }
   if(_navLoad() && S._navCursor >= 0 && S._navStack[S._navCursor]) {

src/state.js

@@ -48,7 +48,7 @@ export const S = {
 
   // Audiobookshelf
   abs: {
-    url: '', user: '', token: null, userId: null,
+    url: '', token: null, userId: null,
     currentLibraryId: null,
   },
   absPlayer: {