CRYONOVA Schritt 3: Feldfokus, Blickfaenge, Testkorrekturen

Der Feldfokus zeigt jetzt den Ion-Rand und den weichen Schein, den das
Design-System auf Seite 15 verlangt. Er fehlte, weil der allgemeine
Tastaturring seinen dunklen Innenring darueberlegte: Dessen Selektor hat
Spezifitaet 0,3,0, die Feldregel nur 0,2,1 -- und Spezifitaet schlaegt
Reihenfolge, egal wie weit unten die Regel steht. Eingabefelder sind
jetzt vom Innenring ausgenommen; sie brauchen ihn nicht, weil sie selbst
eine dunkle Flaeche sind. Der Aqua-Umriss bleibt fuer alle erhalten.

Die zwei Blickfang-Motive stehen jetzt auch wirklich auf einer Seite:
das Wappen auf "Ueber mich", direkt nach dem Absatz ueber die Herkunft
des Namens, der Monolith auf "Portfolio" zwischen Einleitung und den
echten Projekten. Beide als Zierbild ausgezeichnet -- ihre Aussage steht
schon im Text daneben. Auf dem Handy laedt automatisch die kleine
Fassung.

Vier Fehler steckten in der Pruefung selbst, nicht im Stilblatt:
- Sie griff das erste "input" der Anfrageseite. Das sind aber sechs
  optisch versteckte Auswahl-Radios, kein Textfeld.
- Sie mass ohne Fensterfokus. Ein Browser wendet :focus nur an, wenn das
  Fenster selbst den Fokus hat -- das DOM meldet trotzdem brav
  matches(":focus") === true, die Farbe bleibt die alte.
- Sie mass mitten im Uebergang, bevor die Animation stand.
- Und sie zaehlte Schattenebenen an "),", einem Muster, das in keinem
  Schattenwert je vorkommt. Geprueft wird jetzt die Anforderung selbst:
  Ion-Farbe und ein Weichzeichner ueber 0.

Geprueft: 334 Pruefungen gruen (CRYONOVA 53, Blickfang 13, Abmelden 16,
Angebot 54, Abbruch 42, System 5, Automatik 55, Angebote 56, Kette 40).

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

webdesign/portfolio.html

@@ -70,6 +70,16 @@
     </div>
   </section>
 
+  <!-- Blickfang: der Monolith. Steht zwischen Einleitung und den zwei
+       echten Projekten -- ein ruhiger Moment, bevor die Arbeit kommt.
+       aria-hidden, weil rein atmosphaerisch: Die Aussage der Seite
+       steckt in den Projekten darunter, nicht in diesem Bild. -->
+  <section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:0">
+    <div class="wd-container wd-container--schmal">
+      <div class="wd-blickfang wd-blickfang--monolith wd-auf" aria-hidden="true"></div>
+    </div>
+  </section>
+
   <section class="wd-abschnitt" style="padding-top:0">
     <div class="wd-container">
 

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-v32";
+const CACHE_NAME = "dogfather-webdesign-v33";
 
 /* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
    HTML-Datei in dieser Liste. */

webdesign/ueber.html

@@ -68,6 +68,20 @@
     </div>
   </section>
 
+  <!-- ---------------- Blickfang: das Wappen ----------------
+       Ein Bild, das man ansieht, keine Flaeche mit Text darauf. Es
+       steht bewusst hier: nach dem Absatz, der erklaert, woher der
+       Name kommt.
+
+       aria-hidden, weil es rein atmosphaerisch ist -- alles, was es
+       zeigt, steht schon im Text daneben. Es vorzulesen wuerde nichts
+       ergaenzen, nur den Lesefluss unterbrechen. -->
+  <section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:0">
+    <div class="wd-container wd-container--schmal">
+      <div class="wd-blickfang wd-blickfang--wappen wd-auf" aria-hidden="true"></div>
+    </div>
+  </section>
+
   <!-- ---------------- Arbeitsweise ---------------- -->
   <section class="wd-abschnitt wd-abschnitt--gehoben">
     <div class="wd-container">