Eigener Suchtitel, Schriften lokal, Bilder in Anzeigegroesse

Getrennter Titel fuer Suchergebnisse je Seite und Beitrag (Migration
20260913000100): auf der Seite steht "Leistungen", im Suchergebnis darf
der lange Titel stehen. Leer heisst weiterhin: der Titel der Seite.

Schriften kommen jetzt vom eigenen Server. Ein Knopf im Designbereich
oder cms:fonts:fetch holt die gewaehlten Google-Schnitte als WOFF2 nach
public/assets/fonts. Das spart zwei fremde Verbindungen nacheinander
(gemessen 820 ms) und die IP-Weitergabe an Google. Ohne Dateien bleibt
es beim bisherigen Verweis - eine Seite ohne Schrift waere schlimmer.

Ein Stylesheet statt vier, mit Pruefsumme im Namen und ohne Kommentare,
dazu eine .htaccess mit Kompression, Cache und Schutz interner Dateien.
Der Entwicklungsserver sendet dieselben Kopfzeilen, sonst misst man
lokal etwas, das es im Betrieb nicht gibt.

Bilder in der Groesse, in der sie erscheinen: ein nur fuer Desktop
gesetztes Hintergrundbild gilt auf dem Telefon in Telefongroesse
(189 KB -> 40 KB), img nennt seine feste Breite oder sizes="auto", und
fetchpriority liegt auf dem ersten Bild des Inhalts statt auf dem Logo.

Neu: npm run test:links prueft jeden internen Verweis auf seine
Antwort. Lighthouse gegen den Nachbau: Barrierefreiheit, Best
Practices und SEO 100 auf allen vier geprueften Adressen, Performance
100 ausser auf der bilderreichen Startseite (98 mobil, 96 Desktop).

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

src/Content/StyleCompiler.php

@@ -101,6 +101,7 @@ final class StyleCompiler
     private function compileBlock(string $id, array $style): string
     {
         $css = '';
+        $style = $this->scaleBackground($style);
         foreach (['desktop', 'tablet', 'mobile'] as $device) {
             $values = $style[$device] ?? null;
             if (!is_array($values)) {
@@ -322,6 +323,39 @@ final class StyleCompiler
      * Mobile takes the smallest that is at least 960 wide, tablet the one around 1600, desktop the
      * largest. A picture that only has small variants simply gives what it has.
      */
+    /**
+     * Ein Hintergrundbild gilt auch dann in Gerätegrößen, wenn es nur einmal gesetzt wurde.
+     *
+     * Wer im Editor ein Hintergrundbild wählt, setzt es üblicherweise am Schreibtisch - also unter
+     * „Desktop“. Ohne eigene Regel für die kleineren Geräte erbt ein Telefon diese Regel und lädt
+     * die größte Variante: gemessen 189 KB statt 40 KB für ein Bild, das nie in dieser Auflösung
+     * zu sehen ist. CSS kennt kein srcset, aber die Regeln stehen ohnehin je Gerät da - also
+     * bekommt jedes Gerät dieselbe Bildwahl, die es bekäme, wenn jemand sie einzeln gesetzt hätte.
+     *
+     * Ein ausdrücklich gesetztes Bild wird nie ersetzt; ergänzt wird nur, wo nichts steht.
+     */
+    private function scaleBackground(array $style): array
+    {
+        $image = $style['desktop']['backgroundImage'] ?? null;
+        if (null === $image) {
+            return $style;
+        }
+        foreach (['tablet', 'mobile'] as $device) {
+            if (!isset($style[$device]['backgroundImage'])) {
+                $style[$device]['backgroundImage'] = $image;
+                // Verlauf und Überlagerung gehören zur selben Regel: ohne sie stünde auf dem
+                // Telefon plötzlich ein unabgedunkeltes Bild hinter hellem Text.
+                foreach (['gradientFrom', 'gradientTo', 'gradientAngle', 'overlayColor', 'overlayOpacity', 'backgroundSize', 'backgroundPosition', 'backgroundRepeat', 'backgroundAttachment'] as $begleiter) {
+                    if (isset($style['desktop'][$begleiter]) && !isset($style[$device][$begleiter])) {
+                        $style[$device][$begleiter] = $style['desktop'][$begleiter];
+                    }
+                }
+            }
+        }
+
+        return $style;
+    }
+
     private function variantFor(array $variants, string $device): array
     {
         $wanted = ['mobile' => 960, 'tablet' => 1600, 'desktop' => 4000][$device] ?? 4000;