Der komplette Weg hierher – 8 Grundvarianten, dann 6 Iterationen von Variante 5 – steht unter „Explorationen“ oben. Das hier ist die finale Variante (5.6): ein einziges, adaptives Panel, das sich per CSS-Container-Query an die tatsächlich verfügbare Breite anpasst, keine Wahl zwischen mehreren Komponenten nötig.
Breit: Übersetzung (Checkboxen, auch mehrere für Seite-an-Seite-Vergleich) + Altes Testament (2 Spalten, ein gemeinsamer Scrollbereich) + Neues Testament + Kapitel nebeneinander, komplett scrollfrei. Mobil: eigener Ablauf statt Grid-Spalten – Buchauswahl ist der Primärfall (AT+NT als eine Liste, kein Umschalten zwischen Testamenten), Kapitel kommt als Drilldown nach der Buchwahl, Übersetzung ist bewusst nur der zweite, kleinere Tab. Bücher, die eine gewählte Übersetzung nicht führt (echte Daten aus der Bibelthek-API), bleiben anklickbar und zeigen das kompakt an, statt auf einer leeren Seite zu landen.
Zum Ticket „Insbesondere mit Laptops ist es aktuell schwierig, in den Büchern zu scrollen“. Alle Varianten nutzen die echten Daten aus dem Seiten-Markup (data-book-selector: 77 Bücher inkl. deuterokanonischer Bücher, data-max-chapter je Buch) und zeigen die komplette Strecke Buch → Kapitel. Jede Karte ist ein live klickbarer Prototyp – über Desktop / Mobil umschaltbar.
Die bessere Lösung wäre, vor allem auf großen Displays der Ansicht mehr Platz zu geben, damit alle Bücher direkt sichtbar und auswählbar sind. Bewertet an den drei Problemen (Scrollen, Entdeckbarkeit, Desktop-Tauglichkeit):
bibeltv.de/bibelthek/GNB/1-mose-1)Diese Runde ist gezielt für das Buch-/Kapitel-Dropdown auf der Lese-Seite (nicht die Bibelthek-Übersicht): Auf großen Bildschirmen soll nicht gescrollt werden müssen, und die Bedienung soll „super“ sein. Alle sechs Varianten bauen auf #5 (Suche) auf – jede hat oben ein Typeahead-Suchfeld, das live filtert und Direktsprünge wie „Ps 23“ auflöst. Bücher stehen dabei immer als einfache, senkrechte Liste in Buchreihenfolge – auch wenn das AT auf zwei Spalten aufgeteilt wird, werden die Bücher zuerst Spalte 1 komplett von oben nach unten befüllt und erst danach Spalte 2, nicht im Zickzack quer über die Spalten verteilt; beide AT-Spalten teilen sich dabei einen gemeinsamen Scrollbereich (scrollen als ein Block, nicht getrennt). Als vierte Dimension kommt Übersetzungen dazu – die echten Optionen der Seite: EÜ, ELB, GNB, HFA, LUT, NGÜ, NIV, SLT. Damit der Scrollfrei-Anspruch nicht nur behauptet, sondern nachprüfbar ist, simulieren alle sechs Mocks unten bewusst eine großzügige Desktop-Dropdown-Höhe (~780 px) statt der knappen Kartenhöhe aus Runde 1.
Favorit: Variante 5.6 – 5.3 und 5.4 sind kein Entweder-oder: der entscheidende Kniff (die Zwei-Spalten-Aufteilung des AT, die die längste Spalte auf ~25 Zeilen halbiert und die 4-Spalten-Ansicht auf normaler Laptop-Breite tatsächlich scrollfrei macht) bleibt in beiden Zuständen identisch. 5.6 kombiniert sie zu EINER Komponente, die sich per Container-Query selbst an die tatsächlich verfügbare Panel-Breite anpasst: genug Platz (großer Desktop-Monitor) → Übersetzung mit anbieten (= 5.4); reicht es nicht → automatisch nur AT (2 Spalten), NT, Kapitel (= 5.3). Damit muss die Seite nicht zwischen zwei Varianten wählen, sondern bekommt beide, je nach Fenster.