Verwaltung: das Bild wird zur Buehne statt zum Streifen

Der erste Anlauf hat die Motive kaputtgemacht. Sie standen in einem
schmalen Streifen, auf 190 % gezoomt, davon ein Ausschnitt gewaehlt und
die linke Haelfte voll zugedeckt -- alles nur, damit Text darauf lesbar
bleibt. Von einer Kristallwelt, die ueber das ganze Bild geht, war ein
Zipfel uebrig.

Der Denkfehler: Bild und Text auf dieselbe Ebene zwingen und dann das
Bild opfern. Jetzt liegen sie auf zwei Ebenen.

DAS BILD IST DIE BUEHNE. Bildschirmfuellend, fest stehend,
ungeschnitten, ungedimmt. Kein Zoom, kein einseitiges Abdunkeln. Beim
Bereichswechsel wechselt der ganze Raum.

DER INHALT SCHWEBT ALS GLAS DARUEBER. Karten, Reiter, Bedienknoepfe und
selbst die Meldung "Wird geladen" bekommen eine Rueckseiten-Unschaerfe.
Das Motiv bleibt sichtbar, verliert hinter dem Glas aber jede Struktur --
und genau das macht Text darauf ruhig lesbar. Dadurch muss das Bild
nirgends mehr weichen.

Die Kacheln tragen eine Leuchtkante in der Leitfarbe des Bereichs. Das
bindet Inhalt und Buehne zusammen, statt die Kacheln wie aufgeklebte
Zettel wirken zu lassen.

Weil der Text jetzt auf Glas steht statt auf dem Bild, konnte auch die
Toenung deutlich zurueckgenommen werden: von .42/.58/.72 auf
.18/.38/.60. Mehr Bild, gleiche Lesbarkeit -- gemessen 12,4 bis 14,5:1
auf der Kachel, verlangt sind 4,5:1.

Die Pruefung ist mitgedreht und misst jetzt das Gegenteil von vorher:
- Wird das Bild NICHT gezoomt und NICHT ausgeschnitten? (frueher stand
  hier "190% auto" und "84% 46%")
- Traegt jede Flaeche, auf der gelesen wird, wirklich Glas?
- Bleibt der Text lesbar -- gemessen an echten Bildpunkten, nicht am
  rechnerischen Wert des Stilblatts. Die Kachel ist halbdurchsichtig,
  ihr Sollwert sagt nichts darueber, was am Ende darunter liegt.

Dazu die Vergleichsmessung: Wie unruhig ist der Kachelgrund MIT Buehne
gegenueber ohne? Gemessen: minus 1 bis plus 1 in allen sechs Bereichen.
Das Glas arbeitet.

Was unveraendert gilt: Bewegung aus bei prefers-reduced-motion, aber die
Buehne bleibt sichtbar -- abschalten heisst nicht verschwinden. Auf dem
Handy die kleine Bildfassung und eine etwas dichtere Toenung, weil dort
mehr Inhalt uebereinander liegt.

Geprueft: 229 Pruefungen gruen (Verwaltung 31, Portfolio 15, CRYONOVA 53,
Blickfang 13, System 5, Abmelden 16, Abbruch 42, Angebot 54).

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

webdesign/sw.js

@@ -34,7 +34,7 @@
    Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
    Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
    Stand fest. */
-const CACHE_NAME = "dogfather-webdesign-v36";
+const CACHE_NAME = "dogfather-webdesign-v37";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */

webdesign/verwaltung.html

@@ -133,130 +133,136 @@
     --vw-blick: 12% 54%;
   }
 
-  /* Warum 190% statt cover: Bei "cover" skaliert der Browser das Bild
-     auf die Breite des Streifens -- die volle Bildbreite ist dann immer
-     sichtbar, und eine waagerechte Ausschnittsangabe bewirkt schlicht
-     nichts. Genau das ist hier passiert: Alle Werte von 62% bis 84%
-     zeigten dasselbe Bild. Erst mit einem Zoom ueber 100% entsteht
-     ueberhaupt Spielraum, den --vw-blick verschieben kann.
+  /* ---------- DIE BUEHNE ----------
 
-     190% ist so gewaehlt, dass der Streifen auf jeder Bildschirmbreite
-     gefuellt bleibt: Die Bildbreite ist immer 1,9-mal so breit wie der
-     Streifen, die Hoehe waechst proportional mit.
+     Das Motiv fuellt den ganzen Bildschirm. Fest stehend, ungeschnitten,
+     in voller Leuchtkraft. Es wird NICHT gezoomt und NICHT einseitig
+     abgedunkelt.
 
-     Zu den Ausschnitten (--vw-blick): Sie sind so gewaehlt, dass KEIN
-     Logo angeschnitten im Streifen haengt. Ein halber Hundekopf mitten
-     im Bild sieht nach Versehen aus, nicht nach Absicht -- und das Logo
-     steht ohnehin schon oben links in der Kopfleiste. Gezeigt werden
-     stattdessen die Kristallformationen, also das, was an den Motiven
-     tatsaechlich spektakulaer ist. */
-  .vw-schmuck {
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    /* Genau die Kopfzone: Titel plus Reiterreihe, mehr nicht. Der
-       Streifen ist zu Ende, BEVOR die erste Kachel anfaengt.
+     Warum das der zweite Anlauf ist: Vorher war es ein schmaler Streifen
+     mit 190 % Zoom, aus dem ein Ausschnitt gewaehlt und dessen linke
+     Haelfte voll zugedeckt wurde -- damit der Text darauf lesbar bleibt.
+     Uebrig blieb ein Zipfel. Von einer Kristallwelt, die ueber das ganze
+     Bild geht, war praktisch nichts mehr zu sehen.
 
-       Vorher war er fast doppelt so hoch und reichte in den
-       Kachelbereich hinein. Dadurch musste er blass bleiben, sonst
-       haette er durch die halbdurchsichtigen Kacheln geschienen. Kurz
-       und kraeftig ist beides besser: mehr Wirkung dort, wo Platz ist,
-       und null Stoerung dort, wo gearbeitet wird. */
-    height: clamp(186px, 25vh, 250px);
-    z-index: -1;
+     Der Denkfehler war, Bild und Text auf dieselbe Ebene zu zwingen und
+     dann das Bild zu opfern. Jetzt liegen sie auf zwei Ebenen: Das Bild
+     ist die Buehne, der Inhalt schwebt als Milchglas darueber. Dadurch
+     steht Text NIE direkt auf dem Bild -- und das Bild muss nirgends
+     mehr weichen. */
+
+  .vw-buehne {
+    position: fixed;
+    inset: 0;
+    z-index: -2;
     pointer-events: none;
-
-    /* ZWEI Ebenen, und die Reihenfolge ist der ganze Trick:
-       oben eine Deckschicht, darunter das Motiv.
-
-       Die Deckschicht ist LINKS fast undurchsichtig und wird nach
-       rechts hin offen. Links stehen Titel und Reiter -- dort bleibt es
-       ruhig. Rechts ist die Flaeche leer, dort darf das Bild richtig
-       auftreten.
-
-       Der erste Versuch war gleichmaessig bei 17 % Deckkraft. Ergebnis:
-       Das Wappen war ueberall gleich schwach zu ahnen, ein Fleck statt
-       eines Bildes -- und trotzdem lag es hinter der Schrift. Diese
-       Loesung ist beides zugleich staerker und ruhiger, weil Bild und
-       Text sich schlicht nicht mehr denselben Platz teilen. */
-    background:
-      /* Bis 46 % voll deckend -- das ist genau die Zone, in der Titel
-         und Reiterreihe liegen. Der Wert ist gemessen, nicht geschaetzt:
-         Bei 34 % schob das Thron-Motiv seine hellen Kristallfluegel bis
-         unter die Reiter und machte den Grund dort merklich unruhiger
-         als ohne Bild. */
-      linear-gradient(100deg,
-        rgb(3 8 16 / 1) 0%,
-        rgb(3 8 16 / 1) 46%,
-        rgb(3 8 16 / .52) 64%,
-        rgb(3 8 16 / .05) 86%,
-        rgb(3 8 16 / 0) 100%),
-      var(--vw-motiv, url("/assets/img/cryo-wappen.webp"))
-        var(--vw-blick, center top) / 190% auto no-repeat;
-
-    opacity: .82;
-
-    /* Unten ausblenden, damit es keine sichtbare Kante gibt, an der das
-       Bild einfach aufhoert. */
-    -webkit-mask-image:
-      linear-gradient(180deg, #000 0%, #000 55%, rgb(0 0 0 / .45) 82%, transparent 100%);
-    mask-image:
-      linear-gradient(180deg, #000 0%, #000 55%, rgb(0 0 0 / .45) 82%, transparent 100%);
+    background: var(--vw-motiv, url("/assets/img/cryo-wappen.webp"))
+                center center / cover no-repeat;
+    /* Kein Zoom: "cover" zeigt bei einem 16:9-Motiv auf einem
+       ueblichen Bildschirm praktisch das ganze Bild. */
   }
 
-  /* Die Kristallkante als eigene Ebene: ein sehr schmaler Leuchtsaum in
-     der Leitfarbe, der den Streifen nach unten abschliesst. */
-  .vw-schmuck::after {
+  /* Eine ruhige Toenung darueber. Sie nimmt dem Bild nicht die Zeichnung,
+     sondern legt nur so viel Tiefe darunter, dass die Glasflaechen sich
+     abheben. Oben etwas dichter, weil dort die Kopfleiste sitzt. */
+  .vw-buehne::after {
     content: "";
     position: absolute;
-    left: 0; right: 0; bottom: 0;
-    height: 2px;
-    background: linear-gradient(90deg,
-      transparent 0%,
-      rgb(var(--vw-farbe) / .55) 22%,
-      rgb(var(--vw-farbe) / .18) 50%,
-      rgb(var(--vw-farbe) / .55) 78%,
-      transparent 100%);
-    clip-path: polygon(
-      0% 0%, 6% 100%, 13% 0%, 21% 100%, 29% 0%, 37% 100%, 45% 0%,
-      53% 100%, 61% 0%, 69% 100%, 77% 0%, 85% 100%, 93% 0%, 100% 100%);
+    inset: 0;
+    background:
+      radial-gradient(125% 95% at 50% 8%,
+        rgb(3 8 16 / .18) 0%, rgb(3 8 16 / .38) 52%, rgb(3 8 16 / .60) 100%),
+      linear-gradient(180deg,
+        rgb(3 8 16 / .14) 0%, rgb(6 19 35 / .20) 55%, rgb(3 8 16 / .40) 100%);
   }
 
-  /* Beim Bereichswechsel blendet die Signatur kurz aus und wieder ein.
-     Ohne das springt das Bild hart um -- mit sieht es aus, als wuerde
-     der Raum wechseln. */
-  @keyframes vw-signatur-ein {
-    from { opacity: 0; transform: scale(1.05); }
-    to   { opacity: .82; transform: none; }
+  /* Beim Bereichswechsel wechselt der ganze Raum. */
+  @keyframes vw-buehne-ein {
+    from { opacity: 0; transform: scale(1.06); }
+    to   { opacity: 1; transform: none; }
+  }
+  .vw-buehne { animation: vw-buehne-ein .7s cubic-bezier(.16,.8,.3,1) both; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vw-buehne { animation: none; }
   }
-  .vw-schmuck { animation: vw-signatur-ein .55s ease-out both; }
 
   @media (max-width: 900px) {
-    /* Auf dem Handy die kleine Fassung -- ein Bruchteil der Datenmenge
-       fuer ein Bild, das ohnehin nur angedeutet ist. */
-    /* Auf dem Handy ist links kein Platz, den man freihalten koennte --
-       die Reiter laufen ueber die ganze Breite. Deshalb hier eine
-       gleichmaessige Deckschicht und deutlich weniger Bild. */
-    .vw-schmuck {
+    /* Auf dem Handy die kleine Bildfassung. Und "cover" schneidet bei
+       einem hochkant gehaltenen Telefon zwangslaeufig die Seiten weg --
+       deshalb hier der Bildmittelpunkt, wo bei allen Motiven das
+       Hauptgeschehen sitzt. */
+    .vw-buehne {
+      background-image: var(--vw-motiv-klein, url("/assets/img/cryo-wappen-klein.webp"));
+      background-position: center center;
+    }
+    /* Auf kleinen Schirmen liegt mehr Inhalt uebereinander, also etwas
+       mehr Tiefe unter dem Glas. */
+    .vw-buehne::after {
       background:
         linear-gradient(180deg,
-          rgb(3 8 16 / .82) 0%,
-          rgb(3 8 16 / .88) 60%,
-          rgb(3 8 16 / .95) 100%),
-        var(--vw-motiv-klein, url("/assets/img/cryo-wappen-klein.webp"))
-          var(--vw-blick, center top) / 190% auto no-repeat;
-      opacity: .62;
-      height: clamp(200px, 30vh, 300px);
-    }
-    @keyframes vw-signatur-ein {
-      from { opacity: 0; transform: scale(1.04); }
-      to   { opacity: .62; transform: none; }
+          rgb(3 8 16 / .52) 0%, rgb(6 19 35 / .58) 50%, rgb(3 8 16 / .72) 100%);
     }
   }
 
-  /* Wer Bewegung reduziert haben will, bekommt den Wechsel ohne
-     Animation -- das Motiv ist trotzdem da. */
-  @media (prefers-reduced-motion: reduce) {
-    .vw-schmuck { animation: none; }
+  /* ---------- GLAS ----------
+
+     Alles, worauf gelesen wird, bekommt eine Rueckseiten-Unschaerfe.
+     Das Bild bleibt sichtbar, verliert hinter dem Glas aber jede
+     Struktur -- und genau das macht Text darauf ruhig lesbar.
+
+     Wo der Browser backdrop-filter nicht kann, traegt die Farbe allein:
+     Deshalb ist der Hintergrund auch ohne Unschaerfe schon dicht genug.
+     Das ist kein Schoenheitsfehler, sondern der Rueckfall. */
+  #vw-bereich .wd-karte,
+  #vw-bereich .vw-liste,
+  #vw-bereich .wd-notiz,
+  #vw-bereich .vw-kachel,
+  #vw-bereich table {
+    -webkit-backdrop-filter: blur(22px) saturate(1.15);
+    backdrop-filter: blur(22px) saturate(1.15);
+  }
+
+  /* Die Reiter und die Bedienknoepfe schweben ebenfalls. */
+  #vw-bereich .vw-filter-knopf,
+  #vw-bereich .vw-wer {
+    -webkit-backdrop-filter: blur(16px) saturate(1.1);
+    backdrop-filter: blur(16px) saturate(1.1);
+  }
+
+  /* Meldungen wie "Wird geladen" oder "Nichts vorhanden" stehen frei
+     zwischen den Kacheln -- also direkt auf der Buehne. Sie bekommen
+     deshalb ihre eigene kleine Glasflaeche statt nur Text zu sein.
+     Sonst haengt ausgerechnet die Zeile, die etwas erklaeren soll,
+     ungeschuetzt vor einer Kristallwand. */
+  #vw-bereich .vw-laedt,
+  #vw-bereich .vw-leer {
+    display: inline-block;
+    padding: .55rem 1.1rem;
+    border-radius: 999px;
+    background: rgb(6 19 35 / .72);
+    border: 1px solid rgb(var(--vw-farbe) / .22);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+  }
+
+  /* Die Glaskacheln bekommen eine Leuchtkante in der Leitfarbe. Das
+     bindet Inhalt und Buehne zusammen, statt die Kacheln wie
+     aufgeklebte Zettel wirken zu lassen. */
+  #vw-bereich .wd-karte {
+    border-color: rgb(var(--vw-farbe) / .30);
+    box-shadow:
+      0 24px 60px -30px rgb(0 0 0 / .85),
+      inset 0 1px 0 rgb(var(--vw-farbe) / .16);
+  }
+
+  /* Der Titel steht als einziges frei auf der Buehne. Damit er das
+     aushaelt, bekommt er einen weichen dunklen Hof -- kein Kasten, der
+     die Buehne zerschneiden wuerde. */
+  #vw-bereich .vw-leiste h1 {
+    text-shadow:
+      0 2px 18px rgb(3 8 16 / .95),
+      0 1px 4px rgb(3 8 16 / .9);
   }
 
   /* Suchen und Abmelden sitzen oben rechts -- also genau dort, wo das
@@ -1397,7 +1403,7 @@
     <!-- Rein dekorativ, deshalb aria-hidden: Es gibt hier nichts
          vorzulesen, und ein leeres Element im Vorlesefluss ist nur
          eine Stolperstelle. -->
-    <div class="vw-schmuck" aria-hidden="true"></div>
+    <div class="vw-buehne" aria-hidden="true"></div>
 
     <div class="wd-container">
 
@@ -3320,7 +3326,7 @@
     if (!ANSICHTEN[bereich]) return;          // unbekannt: lieber nichts tun
     document.documentElement.setAttribute("data-vw-bereich", bereich);
 
-    var schmuck = document.querySelector(".vw-schmuck");
+    var schmuck = document.querySelector(".vw-buehne");
     if (!schmuck) return;
     /* Wer Bewegung reduziert haben will, bekommt keinen Neustart -- die
        Animation ist fuer ihn ohnehin abgeschaltet. */