Verwaltung: Bildschmuck an zwei Stellen, beide ausserhalb der Arbeit

Die Verwaltung ist ein Arbeitsplatz. Hier wird nicht geworben, hier
werden Listen gelesen und Zahlen verglichen -- der Schmuck ist deshalb
deutlich zurueckhaltender als auf den oeffentlichen Seiten.

Zwei Stellen, beide bewusst ausserhalb des Arbeitsflusses:

- Ein Ring-Streifen ganz oben, der nach unten wegblendet. Er sitzt
  direkt unter der Kopfleiste und ist verschwunden, bevor die erste
  Tabelle anfaengt. Deckkraft 16 % (Handy 13 %) -- die oeffentlichen
  Motive liegen bei 55 %. Dort traegt das Bild die Stimmung, hier darf
  es die Kopfzeile nur andeuten.
- Das Wappen auf der Anmeldekarte. Dort wird nichts gelesen ausser drei
  Zeilen, also darf es sichtbarer sein.

Was hier ABSICHTLICH nicht passiert: kein Motiv hinter Listen, Tabellen
oder Zahlen. Ein Bild hinter einer Zahlenspalte ist genau die Art von
Schoenheit, die ein Werkzeug unbrauchbar macht. Ein Test haelt das fest.

Ein echter Fehler beim Bauen, den erst der Screenshot zeigte: Das Wappen
stand zuerst auf 38 % und mittig -- der Hundekopf lag genau im
Erklaertext, die Zeilen liefen quer ueber Schnauze und Schriftzug.
Jetzt 16 % und nach unten versetzt, sodass es hinter Eingabefeld und
Knopf sitzt statt hinter den Zeilen. Die Glasflaeche darueber ist hier
dichter als auf den oeffentlichen Seiten.

Der Test dazu misst nicht die Deckkraft, sondern das eigentliche
Problem: wie stark der Untergrund UNTER DER SCHRIFT schwankt, an echten
Bildpunkten aus dem Absatz. Deckkraft allein sagt naemlich nichts -- ein
Motiv mit hellen Kanten ist bei 20 % stoerender als ein ruhiges bei
50 %.

Und er misst im Vergleich, nicht gegen eine geratene Zahl: Schon die
weichgezeichneten Buchstabenkanten allein erzeugen eine Schwankung von
12. Ein fester Grenzwert "unter 14" haette also fast nur diese Kanten
gemessen und waere je nach Schriftgroesse zufaellig gruen oder rot. Der
Test schaltet das Motiv jetzt ab, misst erneut und prueft die Differenz.
Gemessen: mit 14, ohne 12, also plus 2.

Die Tag-Balance von verwaltung.html bleibt unveraendert bei Differenz 1
(vorher 192/191, jetzt 193/192) -- das neue Element ist ausgeglichen,
die alte Meldung ist Altbestand und wurde hier nicht angefasst.

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

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

webdesign/verwaltung.html

@@ -32,6 +32,75 @@
   /* ---------- Anmeldung ---------- */
   .vw-login { max-width: 420px; margin: clamp(2rem,8vh,5rem) auto; }
 
+  /* ---------- Schmuck ----------
+
+     Die Verwaltung ist ein Arbeitsplatz. Hier wird nicht geworben,
+     hier werden Listen gelesen und Zahlen verglichen -- deshalb ist
+     der Schmuck hier bewusst viel zurueckhaltender als auf den
+     oeffentlichen Seiten.
+
+     Zwei Stellen, beide ausserhalb des Arbeitsflusses:
+     1. Die Anmeldemaske. Dort wird nichts gelesen ausser drei Zeilen,
+        also darf das Motiv dort deutlich zu sehen sein.
+     2. Ein Streifen ganz oben, der nach unten wegblendet. Er liegt
+        hinter der Kopfleiste und ist verschwunden, bevor die erste
+        Tabelle anfaengt.
+
+     Was hier ABSICHTLICH nicht passiert: kein Motiv hinter Listen,
+     Tabellen oder Zahlen. Ein Bild hinter einer Zahlenspalte ist genau
+     die Art von Schoenheit, die ein Werkzeug unbrauchbar macht. */
+
+  .vw-schmuck {
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: clamp(220px, 34vh, 380px);
+    z-index: -1;
+    pointer-events: none;
+    background: url("/assets/img/cryo-ring.webp") center top / cover no-repeat;
+    /* Sehr leise. Der Wert ist bewusst niedriger als bei den
+       oeffentlichen Motiven (.55): Dort traegt das Bild die Stimmung,
+       hier darf es die Kopfzeile nur andeuten. */
+    opacity: .16;
+    /* Nach unten sauber ausblenden, damit es keine sichtbare Kante
+       gibt, an der das Bild einfach aufhoert. */
+    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
+    mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .55) 45%, transparent 100%);
+  }
+  @media (max-width: 900px) {
+    /* Auf dem Handy die kleine Fassung -- 34 KB statt 113 KB fuer ein
+       Bild, das ohnehin nur angedeutet ist. */
+    .vw-schmuck { background-image: url("/assets/img/cryo-ring-klein.webp"); opacity: .13; }
+  }
+
+  /* Die Anmeldekarte bekommt das Wappen. Sie ist halbdurchsichtig,
+     das Motiv scheint also durch die Glasflaeche hindurch.
+
+     Warum so wenig: Bei .38 lag der Hundekopf mitten im Erklaertext,
+     und die Zeilen liefen quer ueber Schnauze und Schriftzug. Lesbar
+     war das nicht mehr. Entscheidend ist hier nicht die Deckkraft an
+     sich, sondern wie stark der Untergrund unter der Schrift
+     schwankt -- ein ruhiger dunkler Grund vertraegt viel, ein Motiv mit
+     hellen Kanten fast nichts. */
+  .vw-login.wd-motiv::before {
+    opacity: .16;
+    /* Das Wappen sitzt zentriert genau dort, wo der Text steht. Nach
+       unten versetzt liegt es hinter Knopf und Rand statt hinter den
+       Zeilen. */
+    background-position: center 72%;
+  }
+  /* Die Glasflaeche zwischen Bild und Schrift wird hier dichter als auf
+     den oeffentlichen Seiten -- dort steht Fliesstext, hier ein
+     Eingabefeld, das man treffen koennen muss. */
+  .vw-login.wd-motiv::after {
+    background: linear-gradient(180deg,
+      rgb(6 19 35 / .82) 0%,
+      rgb(6 19 35 / .88) 55%,
+      rgb(3 8 16 / .92) 100%);
+  }
+  @media (max-width: 900px) {
+    .vw-login.wd-motiv::before { background-image: url("/assets/img/cryo-wappen-klein.webp"); }
+  }
+
   /* ---------- Kopfleiste ---------- */
   /* Zwei Zeilen statt einer: oben WO man ist, darunter WOHIN man kann.
 
@@ -1082,11 +1151,21 @@
 <div id="wd-kopf" data-wd-kopf="minimal"></div>
 
 <main id="wd-inhalt">
-  <section class="wd-abschnitt" style="padding-top:1.6rem">
+  <!-- position:relative als Bezugspunkt fuer den Schmuckstreifen.
+       Ohne das haengt er sich an das naechste positionierte Elternteil
+       und landet irgendwo -- im schlimmsten Fall mitten in einer
+       Tabelle statt oben am Rand. -->
+  <section class="wd-abschnitt" style="padding-top:1.6rem; position:relative">
+
+    <!-- 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="wd-container">
 
       <!-- ============ ANMELDUNG ============ -->
-      <div id="vw-anmeldung" class="wd-karte vw-login" hidden>
+      <div id="vw-anmeldung" class="wd-karte vw-login wd-motiv wd-motiv--wappen" hidden>
         <h1 style="font-size:1.4rem">Verwaltung</h1>
         <p class="wd-klein wd-leise">
           Normalerweise landest du hier gar nicht: Wer durch die Zugangswand