Buehnen hell, Flaechen dicht - und die Kopfleiste wieder kurz

DIE BUEHNEN WAREN ZU DUNKEL. Bei 0.42 Helligkeit sah man Schemen, nicht
die Szene -- "zu dunkel und sieht ganz komisch aus" traf es genau. Jetzt
0.66 mit etwas mehr Farbe (1.08), die Vignette schwaecher (0.52 statt
0.72). Die Bilder kommen durch.

MOEGLICH IST DAS NUR MIT DEM GEGENZUG: Alle Kacheln, Karten und Spalten
lagen bei 2 bis 3 Prozent WEISS -- also praktisch durchsichtig. Solange
der Hintergrund fast schwarz war, fiel das nicht auf; sobald er hell
wurde, lief das Bild mitten durch den Text. Jetzt gibt es --flaeche
(rgba(9,13,22,.78)), eine deckende dunkle Flaeche, und 44 Stellen in 16
Dateien holen sich ihre Farbe von dort.

Der Unterschied ist genau der, den Filipe beschrieben hat: Der
Hintergrund bleibt sichtbar, aber ZWISCHEN den Kacheln -- nicht hinter
der Schrift. Wer die Flaechen kuenftig dichter oder durchlaessiger will,
aendert eine einzige Zeile statt 44.

Die Kacheln selbst tragen ihren Farbton jetzt AUF der Flaeche
(color-mix mit --flaeche statt mit transparent) -- dadurch bleibt die
Farbe erkennbar, ohne dass die Kachel durchsichtig wird.

DIE KOPFLEISTE war so breit wie das ganze Fenster, obwohl der Text kurz
ist: .marke__text stand auf flex: 1 1 auto. Das war unsichtbar, solange
der Schriftzug nur Text war -- seit er einen Rahmen traegt, lief die
Pille quer durchs Bild. Jetzt flex: 0 1 auto (schrumpfen ja, wachsen
nein). Gemessen: 375 px statt 1280.

Kontrast an echten Bildpunkten auf allen sechs Seiten nachgemessen --
haelt trotz des viel helleren Bildes (schlechtester Wert 4,69:1).

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/start.css

@@ -400,7 +400,7 @@ body.start > main { position: relative; z-index: 1; }
   background:
     radial-gradient(120% 90% at 50% -10%,
       color-mix(in srgb, var(--ton, var(--akzent)) 9%, transparent), transparent 68%),
-    rgba(255, 255, 255, .022);
+    var(--flaeche);
 }
 /* Der Ring: ein Kreis in der Seitenfarbe, hohl, weich leuchtend. Ein
    Zeichen wäre hier zu laut -- es geht ja gerade darum, dass NICHTS da
@@ -469,7 +469,7 @@ body.start > main { position: relative; z-index: 1; }
 
 .zahl {
   padding: 14px 16px;
-  background: rgba(255, 255, 255, .03);
+  background: var(--flaeche);
   border: 1px solid var(--rand);
   border-radius: var(--radius-klein);
 }
@@ -588,8 +588,8 @@ body.start > main { position: relative; z-index: 1; }
   border-radius: 18px;
   background:
     linear-gradient(155deg,
-      color-mix(in srgb, var(--ton) 10%, transparent),
-      rgba(255, 255, 255, .022) 48%);
+      color-mix(in srgb, var(--ton) 26%, var(--flaeche)),
+      var(--flaeche) 62%);
   border: 1px solid var(--rand);
   /* Die feine helle Linie an der Oberkante. Ein Pixel, kaum sichtbar --
      aber die Kachel wirkt dadurch von oben beleuchtet statt aufgeklebt.
@@ -879,7 +879,7 @@ body.start > main { position: relative; z-index: 1; }
   border-radius: var(--radius-klein);
   background:
     linear-gradient(90deg, color-mix(in srgb, var(--ton) 9%, transparent), transparent 46%),
-    rgba(255, 255, 255, .028);
+    var(--flaeche);
   transition: border-color .18s ease, background .18s ease, transform .18s ease;
 }
 /* Der Streifen links ist die Farbe der Kachel, zu der es geht -- oben
@@ -995,7 +995,12 @@ body.start > main { position: relative; z-index: 1; }
      Derselbe Fehler wie im August, eine Ebene tiefer. */
   min-width: 0;
 }
-.kopfleiste .marke__text { min-width: 0; flex: 1 1 auto; }
+/* flex: 0 1 auto, NICHT 1 1 auto. Mit flex-grow: 1 zog sich der
+   Schriftzug ueber die ganze Leiste -- unsichtbar, solange er nur Text
+   war, aber seit er einen Rahmen traegt (die Pille), lief der Rahmen
+   quer durch das ganze Bild, obwohl der Text kurz ist. Schrumpfen darf
+   er weiterhin (das braucht die Kuerzung auf dem Handy), wachsen nicht. */
+.kopfleiste .marke__text { min-width: 0; flex: 0 1 auto; }
 .kopfleiste .marke::before {
   content: "";
   flex: none; width: 22px; height: 22px;
@@ -1065,7 +1070,9 @@ body.start > main { position: relative; z-index: 1; }
   filter: drop-shadow(0 0 7px rgba(63, 189, 245, .45));
 }
 .kopfleiste .marke {
-  padding: 4px 12px 4px 4px;
+  /* Nur so breit wie ihr Inhalt -- sonst waere die Pille eine Leiste. */
+  flex: 0 1 auto;
+  padding: 4px 13px 4px 5px;
   border-radius: 999px;
   border: 1px solid transparent;
   transition: border-color var(--tempo), background var(--tempo);