Fassung 1.4.3: Update ohne Git, Verwaltung auf dem Telefon, eigene Symbole

Vier Wuensche und ein Fund beim Nachmessen.

- Farbwaehler im Designbereich. Das Textfeld bleibt massgeblich, damit
  "@akzent" ein Verweis auf die Palette bleibt und nicht beim ersten
  Klick zu einem festen Hexwert erstarrt (ADR 066).
- Die Verwaltung auf dem Telefon: das Menue klappt unter 760 px zu und
  nennt den Bereich, in dem man steht; Ziele 44 px, kein Skript.
- Eigene SVG-Symbole statt Unicode-Zeichen - ein Telefon ersetzt die
  sonst durch Emoji in fremdem Stil. Zwei Eintraege trugen dabei
  denselben Pfad; ein Test findet beides (ADR 067).
- Update aus dem Releasearchiv: der Weg fuer Installationen ohne Git.
  Zwei Schritte, weil ein Prozess, der sich selbst ausgetauscht hat,
  mit dem alten Code weiterarbeitet. var/, .env, hochgeladene
  Schriften und das erzeugte Buendel bleiben unberuehrt; public/ wird
  dazu Datei fuer Datei zusammengefuehrt. Geprueft ohne Netz gegen
  eine Releaseseite im Speicher (ADR 068).

Beim Nachmessen der echten Startseite statt einer Testseite: das
groesste Element ueber der Falz ist dort kein <img>, sondern der
Hintergrund des ersten Abschnitts - und der steht nur im Stylesheet.
Drei Vorabverweise mit denselben Geraetegrenzen wie der Compiler holen
genau die Variante, die die Regel auch nimmt. LCP 1,3 s -> 1,1 s.
Dabei gefunden: dasselbe Bild wurde je Geraeteregel neu abgefragt -
Startseite 19 -> 15 Abfragen (ADR 069).

Geprueft: 428 Tests auf PHP 8.2 und 8.4, Editor-, Browser- und
Linkpruefung, Lighthouse auf drei echten Seiten (alles ausser der
Leistung der Startseite 100).

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

src/Content/StyleCompiler.php

@@ -16,6 +16,18 @@ final class StyleCompiler
 {
     private const BREAKPOINTS = ['tablet' => 1024, 'mobile' => 767];
 
+    /**
+     * Dieselben Grenzen, als Medienabfragen fuer einen Verweis im Seitenkopf.
+     *
+     * Genau eine trifft zu, und sie trifft dieselbe Variante wie die Regel weiter unten - sonst
+     * holte ein Vorabverweis ein zweites Bild.
+     */
+    public const PRELOAD_DEVICES = [
+        'desktop' => '(min-width:1025px)',
+        'tablet' => '(min-width:768px) and (max-width:1024px)',
+        'mobile' => '(max-width:767px)',
+    ];
+
     public function __construct(private ?MediaLibrary $media = null)
     {
     }
@@ -226,7 +238,7 @@ final class StyleCompiler
             if (null !== $item && [] !== $item['variants']) {
                 // A phone should not download the 2400 pixel variant of a background. CSS has no
                 // srcset, but the rules are already written per device, so the device decides.
-                $largest = $this->variantFor($item['variants'], $device);
+                $largest = self::variantFor($item['variants'], $device);
                 // The URL comes from the media library, never from the document.
                 $layers[] = sprintf('url("%s")', $largest['src']);
             }
@@ -356,7 +368,17 @@ final class StyleCompiler
         return $style;
     }
 
-    private function variantFor(array $variants, string $device): array
+    /**
+     * Die Variante, die ein Hintergrundbild auf diesem Geraet bekommt.
+     *
+     * Oeffentlich und statisch, weil der Seitenkopf dieselbe Wahl treffen muss, wenn er das Bild
+     * vorab holt. Zwei Stellen mit derselben Regel waeren zwei Stellen, die auseinanderlaufen.
+     *
+     * @param list<array{src: string, width: int}> $variants
+     *
+     * @return array{src: string, width: int}
+     */
+    public static function variantFor(array $variants, string $device): array
     {
         $wanted = ['mobile' => 960, 'tablet' => 1600, 'desktop' => 4000][$device] ?? 4000;
         $chosen = $variants[0];