Update-Kacheln zu einer zusammengefuehrt

Die App hatte "App-Update" (OTA-Buendel) und "Version" (Integration) als zwei
Kacheln nebeneinander - zweimal dieselbe Frage. Jetzt eine Kachel "Version"
mit zwei benannten, durch eine Haarlinie getrennten Abschnitten; ohne das
staenden zwei gleich aussehende "Update installieren"-Knoepfe untereinander,
ohne dass man ihnen ansieht, was sie erneuern.

Die Unterueberschrift "Integration" erscheint nur, wenn wirklich ein zweiter
Abschnitt folgt (otaMoeglich()) - sonst waere es eine Unterteilung ohne
zweiten Teil. Wo es kein OTA gibt, also im Panel und in der App im Browser,
sieht die Kachel damit aus wie zuvor.

Das Panel bekommt den App-Abschnitt nicht: die App traegt ihre Dateien fest
gebuendelt und kann veralten, das Panel laedt sie bei jedem Aufruf neu. Eine
geplante Abweichung.

Nachgemessen: Panel 216px, App im Browser 203px, gleicher Inhalt; die
Gestaltung des zweiten Abschnitts durch Einsetzen gegengeprueft. 299 Tests
gruen, 0 Tracebacks.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

companion-app/src/screens/Einstellungen.tsx

@@ -730,48 +730,30 @@ export function Einstellungen({
       </Tile>
 
 
-      {otaMoeglich() && (
-        <Tile>
-          <span className="ads-eyebrow">App-Update</span>
-          {otaUpdateVerfuegbar && otaBuendel ? (
-            <>
-              <Werteliste
-                kinder={
-                  <Wertzeile
-                    label="Verfügbare Version"
-                    wert={otaBuendel.version}
-                    zusatz={`${Math.round(otaBuendel.bytes / 1024)} KB`}
-                  />
-                }
-              />
-              <p className="dm-erklaerung">
-                Lädt die Oberfläche neu und startet die App neu. Fahrzeugprofil, Fahrten und
-                Tankvorgänge sind davon nicht betroffen — die liegen in Home Assistant.
-              </p>
-              <div className="dm-knopfreihe">
-                <ActionButton onClick={() => void otaAusloesen()} disabled={otaLaeuft}>
-                  {otaLaeuft ? "Lade Update …" : "Update installieren"}
-                </ActionButton>
-              </div>
-              {otaFehler && <p className="dm-fehler">{otaFehler}</p>}
-            </>
-          ) : (
-            <p className="dm-erklaerung">
-              {otaBuendel
-                ? `Diese App ist aktuell (${eigeneVersion() ?? "unbekannte Version"}).`
-                : "Der Server hat gerade kein Update-Bündel hinterlegt."}
-            </p>
-          )}
-        </Tile>
-      )}
-
-
       {/* Installierte Fassung und ihr Update stehen in EINER Kachel: es ist
           dieselbe Sache aus zwei Blickwinkeln, und zwei Kacheln nebeneinander
           zwangen zum Vergleichen zweier Zahlen ueber eine Kachelgrenze hinweg
-          (Vorgabe des Eigentuemers, 04.09.2026). */}
+          (Vorgabe des Eigentuemers, 04.09.2026).
+
+          Seit dem 05.09.2026 gilt das auch fuer die App selbst: sie hatte eine
+          eigene Kachel "App-Update" daneben, obwohl es dieselbe Frage ist -
+          "was laeuft hier, und gibt es etwas Neueres". Zusammengelegt auf
+          Vorgabe des Eigentuemers.
+
+          Die beiden Abschnitte sind BENANNT und durch eine Haarlinie getrennt.
+          Ohne das staenden zwei gleich aussehende "Update installieren"-Knoepfe
+          untereinander, ohne dass man ihnen ansieht, was sie erneuern. Das
+          Panel kennt nur den Integrationsteil - die App traegt ihre Dateien
+          fest gebuendelt, das Panel laedt sie bei jedem Aufruf neu. */}
       <Tile>
         <span className="ads-eyebrow">Version</span>
+
+        <div className="dm-abschnitt">
+          {/* Nur wenn darunter wirklich ein zweiter Abschnitt folgt. Ohne den
+              staende "Integration" allein unter "Version" - eine Unterteilung
+              ohne zweiten Teil, genau wie im Panel, das den App-Abschnitt gar
+              nicht kennt. */}
+          {otaMoeglich() && <span className="ads-eyebrow">Integration</span>}
         <Werteliste
           kinder={
             <Wertzeile
@@ -876,6 +858,47 @@ export function Einstellungen({
           !updatePruefenLaeuft &&
           !updateInstallierenLaeuft &&
           !updateNeustartLaeuft && <p className="dm-fehler">{integrationUpdate.fehler}</p>}
+        </div>
+
+        {otaMoeglich() && (
+          <div className="dm-abschnitt">
+            <span className="ads-eyebrow">App</span>
+            <Werteliste
+              kinder={
+                <Wertzeile label="Installiert" wert={eigeneVersion() ?? "unbekannt"} zusatz="Diese App" />
+              }
+            />
+            {otaUpdateVerfuegbar && otaBuendel ? (
+              <>
+                <Werteliste
+                  kinder={
+                    <Wertzeile
+                      label="Verfügbare Version"
+                      wert={otaBuendel.version}
+                      zusatz={`${Math.round(otaBuendel.bytes / 1024)} KB`}
+                    />
+                  }
+                />
+                <p className="dm-erklaerung">
+                  Lädt die Oberfläche neu und startet die App neu. Fahrzeugprofil, Fahrten und
+                  Tankvorgänge sind davon nicht betroffen — die liegen in Home Assistant.
+                </p>
+                <div className="dm-knopfreihe">
+                  <ActionButton onClick={() => void otaAusloesen()} disabled={otaLaeuft}>
+                    {otaLaeuft ? "Lade Update …" : "Update installieren"}
+                  </ActionButton>
+                </div>
+                {otaFehler && <p className="dm-fehler">{otaFehler}</p>}
+              </>
+            ) : (
+              <p className="dm-erklaerung">
+                {otaBuendel
+                  ? "Diese App ist aktuell."
+                  : "Der Server hat gerade kein Update-Bündel hinterlegt."}
+              </p>
+            )}
+          </div>
+        )}
       </Tile>
 
       {/* Debug-Mode: Zugaenge, Dongle und der letzte Datensatz des Geraets.

companion-app/src/stile/screens.css

@@ -1653,6 +1653,29 @@ button.dm-listenzeile {
    aus dem Blick geraten. */
 /* Zwei gleichrangige Knöpfe nebeneinander - der Aufbau allein, ohne Aussage
    darüber, wozu sie dienen. Das QR-Blatt setzt hier „Abbrechen" und „Bild
+   auswählen" hin und speichert gar nichts.
+
+   Bis zum 05.09.2026 hieß auch das `dm-speicherleiste`. Der Name log: bei
+   einer Suche nach allen Speicherleisten des Projekts kam das QR-Blatt als
+   Treffer heraus, obwohl es dort nichts zu speichern gibt (vom Eigentümer
+   richtiggestellt). Eine Klasse soll eine Sache bedeuten. */
+/* Zwei benannte Abschnitte in EINER Kachel, durch eine Haarlinie getrennt.
+
+   Gebraucht in "Version": dort stehen seit dem 05.09.2026 die Integration
+   und die App untereinander, jede mit eigenem Stand und eigenem
+   Update-Knopf. Ohne Benennung und Trennung staenden dort zwei gleich
+   aussehende "Update installieren"-Knoepfe, ohne dass man ihnen ansieht,
+   was sie erneuern.
+
+   Die Linie sitzt am ZWEITEN Abschnitt (Geschwister-Selektor), damit der
+   erste keinen Strich direkt unter der Kachelueberschrift bekommt. */
+.dm-abschnitt + .dm-abschnitt {
+  margin-top: var(--sp-4);
+  padding-top: var(--sp-4);
+  border-top: 1px solid var(--line);
+}
+
+/* Die Ueberschrift eines Abschnitts ist kein direktes Kind der Kachel, die
    Regel .ads-tile > .ads-eyebrow:first-child greift hier also nicht. */
 .dm-abschnitt > .ads-eyebrow:first-child {
   display: block;