From 0d2f485ecc15239fcefba07a160184fd70489591 Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Mon, 19 Oct 2026 21:53:11 +0200
Subject: [PATCH] =?UTF-8?q?=E2=80=9EGeteiltes=20ablegen"=20als=20Leiste=20?=
 =?UTF-8?q?=C3=BCber=20der=20Navigation=20statt=20schwebend=20=C3=BCber=20?=
 =?UTF-8?q?den=20Auftr=C3=A4gen=20[deploy]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eddy: der Knopf soll unten am Rand liegen und die Aufträge nicht
überdecken. Er steht jetzt in der App-Spalte direkt über der Navigation
(sticky am unteren Rand), der FAB rückt solange eine Leistenhöhe hoch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 ROADMAP.md |  4 ++++
 app.css    | 23 ++++++++++++++---------
 app.js     |  8 +++++++-
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 69675c3..8965baf 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -41,6 +41,10 @@ Aufträgen: Geteiltes ablegen"*.
 - [x] ✅ 19.10.2026: Leere Pakete räumt die App selbst weg (kein Knopf); „Es kam nichts an" löscht den Rest;
       Knopf zeigt „(Notiz)", wenn nur Text geteilt wurde; `share.html` hat „Verwerfen" mit Rückfrage in der Seite.
       Auf der Testinstanz durchgespielt (leer → kein Knopf; Notiz → Knopf → Verwerfen → weg).
+- [x] ✅ 19.10.2026 (Eddy: „unten am Rand, nicht auf den Aufträgen"): Knopf ist jetzt eine Leiste in der App-Spalte
+      direkt über der Navigation (`position: sticky; bottom: 0`) statt fest schwebend; der FAB rückt eine Leistenhöhe
+      hoch. Auf 412 × 860 gemessen: kurze Liste → Leiste über der Navigation, nichts verdeckt; lange Liste → Leiste
+      klebt am unteren Rand, am Ende lässt sich alles darüber scrollen.
 - [ ] Am Handy gegenprüfen: Knopf ist nach dem Update weg (beim ersten Laden räumt die App den leeren Rest ab).
 
 ### Befunde aus der AVIF-Prüfung in Bericht (19.10.2026, nicht geändert)
diff --git a/app.css b/app.css
index b12e2db..2cff76c 100644
--- a/app.css
+++ b/app.css
@@ -1516,23 +1516,28 @@ body {
     text-align: center;
 }
 
+/* Leiste in der App-Spalte über der Navigation (19.10.2026): klebt beim Scrollen am unteren Rand,
+ * steht aber im Fluss — der Inhalt macht ihr Platz und lässt sich ganz darüber scrollen. Der FAB
+ * (fixed, bottom 68px) liegt darüber und wird nicht mehr verdeckt. */
 .shared-banner {
-    position: fixed;
-    left: 16px;
-    right: 16px;
-    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
-    z-index: 60;
-    padding: 14px 16px;
+    position: sticky;
+    bottom: 0;
+    z-index: 20;
+    width: 100%;
+    margin: 0;
+    padding: 12px 16px;
     border: none;
-    border-radius: 10px;
+    border-radius: 0;
     background: #7aa2f7;
     color: #10101a;
     font-size: 15px;
     font-weight: 600;
-    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.35);
     cursor: pointer;
 }
-.shared-banner:active { transform: scale(0.98); }
+.shared-banner:active { filter: brightness(0.95); }
+/* Solange die Leiste da ist, sitzt der FAB eine Leistenhöhe höher — sonst ragt er hinein */
+body.hat-geteiltes .fab { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
 
 
 /* Zurück-Knopf: Pfeil UND Wort, ausreichend große Tippfläche (Handschuhe) */
diff --git a/app.js b/app.js
index 3a502a3..870a244 100644
--- a/app.js
+++ b/app.js
@@ -1867,7 +1867,13 @@ async function checkPendingShare() {
     b.className = 'shared-banner';
     b.textContent = '📤 Geteiltes ablegen' + (n ? ' (' + n + ' Bild' + (n > 1 ? 'er' : '') + ')' : ' (Notiz)');
     b.addEventListener('click', () => { location.href = 'share.html'; });
-    document.body.appendChild(b);
+    // Als Leiste in die App-Spalte direkt über die Navigation (Eddy: „unten am Rand, nicht auf den
+    // Aufträgen") — vorher schwebte der Knopf fest über der Liste und verdeckte Einträge und den FAB
+    const app = document.getElementById('app');
+    const nav = document.getElementById('bottom-nav');
+    if (app && nav) app.insertBefore(b, nav);
+    else document.body.appendChild(b);
+    document.body.classList.add('hat-geteiltes');   // hebt den FAB über die Leiste (app.css)
 }
 
 /* Bottom nav + Hilfe-Button */