diff --git a/Changes.md b/Changes.md
index d8bfd70..91f8f27 100644
--- a/Changes.md
+++ b/Changes.md
@@ -1,5 +1,31 @@
# Änderungen
+## Buchungsmaske nennt das Konto und passt auf einen Bildschirm (17.08.2026)
+
+*Neue Buchung* und *Buchung bearbeiten* zeigen oben, in welchem Konto die Buchung liegt
+bzw. gespeichert wird; bisher stand das Konto nur klein in der Kopfzeile über dem
+Formular. Die Maske steht zweispaltig, die Beschriftungen links neben ihren Eingaben und
+die Erklärungen in deren Tooltip – damit endet sie samt Splitzeilen und Knopfleiste
+oberhalb der Fensterhöhe, wo sie vorher über 1190 px lang war.
+
+- Kontoangabe als erstes Feld über beide Spalten: Name des Kontos, dahinter die IBAN –
+ oder, wenn keine hinterlegt ist, Bank und Kontonummer.
+- Feldreihenfolge zeilenweise: Art/Datum, Betrag/Empfänger, Kategorie-Gegenkonto/Klasse,
+ Buchungstext/Nummer, darunter *Abgeglichen*. Namen, Werte und Feld-IDs bleiben
+ unverändert; der Bereich *Splitbuchung* läuft weiter über die volle Breite.
+- Beschriftungen stehen links neben ihrer Eingabe, nicht darüber (neue Variante
+ `.formular.beschriftung-links`). Das halbiert die Höhe je Feld; Hinweise laufen unter
+ Beschriftung und Eingabe hinweg, unter 560 px Fensterbreite rutscht die Beschriftung
+ wieder nach oben.
+- Die erklärenden Texte stehen nicht mehr als eigene Zeile zwischen den Feldern, sondern
+ im `title` ihrer Beschriftung: Konto, Betrag, *Kategorie / Gegenkonto* und
+ *Splitbuchung*. Eine gepunktete Unterstreichung zeigt, wo ein Tooltip hängt.
+- `.formular.zweispaltig` (`public/static/app.css`) stellt jetzt auch Tabellen und
+ `.feldwert` richtig: Tabellen laufen über beide Spalten, ohne eigenen Rand.
+- E2E-Test in `tests/e2e/specs/buchungen.spec.js`: Die Maske nennt das Konto, Datum steht
+ rechts neben der Art, die Beschriftung links neben ihrer Eingabe, die Erklärungen hängen
+ in deren Tooltip, und das ganze Formular endet oberhalb der Fensterhöhe.
+
## Kontoformular zweispaltig (17.08.2026)
*Konto bearbeiten* und *Neues Konto* zeigen ihre Felder in zwei Spalten. Alle Eingaben
diff --git a/public/static/app.css b/public/static/app.css
index d48e5b6..6b27610 100644
--- a/public/static/app.css
+++ b/public/static/app.css
@@ -1231,6 +1231,16 @@ table.kostentabelle .gruppenzeile th { padding-top: .7rem; font-weight: 600; }
margin-top: .6rem;
}
+/* Erklärungen zu einem Feld stehen im Tooltip seiner Beschriftung statt als
+ eigene Zeile darunter – das spart in langen Masken sichtbar Höhe. Die
+ gepunktete Linie zeigt, dass dort etwas zu holen ist. */
+.formular label[title],
+.formular h3 span[title] {
+ text-decoration: underline dotted;
+ text-underline-offset: .25em;
+ cursor: help;
+}
+
/* Zweispaltiges Formular: je Feld ein .feld mit Beschriftung, Eingabe und
Hinweis, zwei davon nebeneinander. Lange Formulare – das Kontoformular etwa –
bleiben so ohne vertikales Scrollen einsehbar. */
@@ -1253,23 +1263,55 @@ table.kostentabelle .gruppenzeile th { padding-top: .7rem; font-weight: 600; }
.formular.zweispaltig .feld .feldhinweis { margin-top: 0; }
-/* Über beide Spalten: verstecktes CSRF-Feld, Überschriften, Knopfleiste und
- Felder, die für eine halbe Zeile zu breit sind. */
+.formular.zweispaltig .feld .feldwert { margin: 0; }
+
+.formular.zweispaltig .feld label.ankreuzfeld { margin-top: 0; }
+
+/* Über beide Spalten: verstecktes CSRF-Feld, Überschriften, Knopfleiste,
+ Tabellen – die Splitzeilen der Buchungsmaske etwa – und Felder, die für eine
+ halbe Zeile zu breit sind. */
.formular.zweispaltig > input[type="hidden"],
.formular.zweispaltig > h3,
.formular.zweispaltig > p,
+.formular.zweispaltig > table,
.formular.zweispaltig > .knopfleiste,
.formular.zweispaltig .feld.ganz { grid-column: 1 / -1; }
/* Die Abstände kommen im Grid aus dem gap – eigene Ränder addierten sich dazu. */
.formular.zweispaltig > h3 { margin: 0; }
.formular.zweispaltig > p { margin: 0; }
+.formular.zweispaltig > table { margin: 0; }
.formular.zweispaltig > .knopfleiste { margin-top: .5rem; }
@media (max-width: 720px) {
.formular.zweispaltig { grid-template-columns: 1fr; }
}
+/* Beschriftung links neben der Eingabe statt darüber. Das halbiert die Höhe je
+ Feld – die Buchungsmaske passt damit samt Splitzeilen auf einen Bildschirm.
+ Hinweise stehen unter der Eingabe, also in derselben Spalte wie diese. */
+.formular.beschriftung-links .feld {
+ display: grid;
+ grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
+ align-items: center;
+ gap: .25rem .7rem;
+}
+
+.formular.beschriftung-links .feld > label { grid-column: 1; }
+.formular.beschriftung-links .feld > :not(label) { grid-column: 2; }
+
+/* Das Ankreuzfeld trägt seine Beschriftung selbst und braucht keine Spalte.
+ Hinweise laufen über beide Spalten: in der schmalen Eingabespalte allein
+ würden sie zu einem hohen Textblock, der die Zeile auseinanderzieht. */
+.formular.beschriftung-links .feld > label.ankreuzfeld,
+.formular.beschriftung-links .feld > .feldhinweis { grid-column: 1 / -1; }
+
+@media (max-width: 560px) {
+ .formular.beschriftung-links .feld { grid-template-columns: 1fr; }
+ .formular.beschriftung-links .feld > label,
+ .formular.beschriftung-links .feld > :not(label) { grid-column: 1; }
+}
+
.formular label.ankreuzfeld {
display: flex;
align-items: center;
diff --git a/src/Views/buchungen/formular.php b/src/Views/buchungen/formular.php
index 4488c9e..5db3270 100644
--- a/src/Views/buchungen/formular.php
+++ b/src/Views/buchungen/formular.php
@@ -33,6 +33,15 @@ $eigenesKonto = (int)$konto['id'];
$mitSplit = false;
$mitDepot = true;
+// Zusatz hinter dem Kontonamen: was das Konto eindeutig macht, ohne die Zeile
+// zu überladen. IBAN sticht, sonst Bank und Kontonummer.
+$kontozusatz = trim((string)($konto['iban'] ?? '')) !== ''
+ ? (string)$konto['iban']
+ : trim(implode(' · ', array_filter([
+ trim((string)($konto['bankname'] ?? '')),
+ trim((string)($konto['kontonummer'] ?? '')),
+ ])));
+
// Immer ein paar leere Splitzeilen anbieten; weitere fügt der Knopf hinzu.
$splitZeilen = $splits;
for ($i = count($splitZeilen); $i < 4; $i++) {
@@ -48,75 +57,95 @@ include __DIR__ . '/../layout/kopf.php';
Konto
-