Untertitel so gross und so bunt, wie man sie braucht

Die Voreinstellung des Browsers ist weisse Schrift auf schwarzem Kasten, in
einer Grösse, die er aus der Höhe des Videos rechnet. Auf einem grossen
Bildschirm aus drei Metern Abstand ist das zu klein, und wer schlecht sieht,
braucht es anders.

Einstellbar sind Grösse (60 bis 300 Prozent in Zehnerschritten),
Schriftfarbe (Weiss, Hellgelb, Hellblau, Schwarz) und Hintergrund
(Halbdunkel, Schwarz, Grau, Ohne).

Gestaltet wird mit `::cue`, nicht mit eigenen Kästen. Der Browser zeichnet
die Einblendungen selbst — Position, Umbruch, Zeilenabstand und die
Platzangaben aus der Datei. Das nachzubauen hiesse, all das noch einmal zu
schreiben und dabei schlechter zu werden.

Gemessen an einem Video mit echter Spur, Bild für Bild: 200 Prozent in
Hellgelb ohne Kasten und 140 Prozent in Hellblau auf Grau kommen beide so
heraus, wie sie gemeint sind.

Ohne Kasten setzt es von selbst einen Schatten. Weisse Schrift in einer
hellen Szene ist sonst weg, und das wäre eine Einstellung, die sich selbst
unbrauchbar macht. Mit Kasten wäre derselbe Schatten nur Unschärfe.

Die Einstellung sitzt im Untertitelmenü, abgetrennt unter den Spuren — wie
der Tonversatz im Tonmenü. Ob die Schrift gross genug ist, sieht man nur an
einem laufenden Film, in diesem Licht, aus diesem Abstand; wer dafür die
Wiedergabe verlassen muss, stellt zweimal falsch ein, bevor er einmal
richtig liegt.

Gemerkt wird im Browser, nicht am Konto: wie gross Schrift sein muss, hängt
am Bildschirm und am Abstand davor. Dasselbe Konto am Telefon und am
Fernseher will zwei verschiedene Grössen.

Farbfelder statt einer Liste mit Farbnamen — „Hellblau" muss man lesen und
sich vorstellen, ein Feld sieht man. Das gewählte trägt einen Ring aussen
herum und keinen Haken darin: ein Haken wäre auf Weiss unsichtbar und auf
Schwarz erst recht. „Ohne Hintergrund" zeigt ein Karomuster, weil ein
leeres Feld nach Weiss aussähe.

Gelesen wird nur, was bekannt ist. Ein fremder Eintrag im Speicher darf
nicht zu beliebigem CSS in der Seite werden.

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

web/app/src/style.css

@@ -928,6 +928,55 @@ textarea.feld {
     rgba(255, 255, 255, .28);
 }
 
+/* ---------- Das Aussehen der Untertitel ---------- */
+
+.pl-groesse { width: 100%; }
+
+/* Beschriftung links, die Felder rechts — zwei Reihen untereinander, damit
+   „Schrift" und „Hintergrund" auf derselben Kante stehen. */
+.pl-farbreihe {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--s-snug);
+}
+.pl-farben { display: flex; align-items: center; }
+.pl-farbname { font-size: 12px; color: var(--text-muted); }
+
+/* Die Felder selbst. Rand in beide Richtungen: ein weisses Feld braucht
+   einen dunklen Umriss, ein schwarzes einen hellen — ein halbdurchsichtiger
+   Rand leistet beides auf jedem Untergrund. */
+.pl-farbe {
+  width: 20px; height: 20px; padding: 0;
+  border-radius: 50%; cursor: pointer;
+  background: var(--farbe);
+  border: 1px solid rgba(255, 255, 255, .45);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
+}
+.pl-farbe + .pl-farbe { margin-left: 6px; }
+.pl-farbe:hover { transform: scale(1.12); }
+.pl-farbe:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+
+/* Das gewählte Feld: ein Ring aussen herum, nicht ein Haken darin — ein
+   Haken wäre auf Weiss unsichtbar und auf Schwarz erst recht. */
+.pl-farbe.an {
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 0 3px var(--text);
+}
+
+/* „Ohne Hintergrund" ist keine Farbe. Das Karomuster sagt das; ein leeres
+   Feld sähe nach Weiss aus und wäre damit eine Lüge. */
+.pl-farbe.kariert {
+  background-image:
+    linear-gradient(45deg, rgba(255, 255, 255, .55) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, .55) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, .55) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, .55) 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pl-farbe:hover { transform: none; }
+}
+
 .pl-punkt {
   display: flex; align-items: center; gap: 8px;
   background: none; border: 0; color: var(--text);