Startseite: Hintergrund-Kanten weg, "Event des Jahres" neu aufgebaut

Gemeldet 27.08.2026: "es ueberschneidet den hintergrund sieht irgendwie
scheisse aus."

1. HARTE KANTEN IM HINTERGRUND
   Das scharfe Trio-Artwork lag als CSS-Hintergrund mit "contain" hinter
   der Seite und endete an einer messerscharfen Linie (bei 1366x800 exakt
   bei 570px und 1345px); darueber/darunter lag sichtbar die verwaschene
   Fassung. Das las sich wie ein aufgeklebtes Band quer ueber der Seite.
   Jetzt ein echtes <img>, das an seinen EIGENEN Raendern weich in die
   verwaschene Ebene uebergeht. Entscheidend: Die Maske haengt am Bild,
   nicht am Fenster -- als CSS-Hintergrund war das unmoeglich, weil die
   Kante je nach Fensterformat wandert.

2. "EVENT DES JAHRES" -- 700px tote Flaeche
   Eine 480px schmale Kachel sass zentriert in einer 1180px breiten
   Kiste, die selbst Rahmen und Hintergrund trug: drei Rahmen ineinander
   um einen einzigen Inhalt, links und rechts je 350px Leere. Jetzt volle
   Breite mit Bild links / Text rechts, die umgebende Kiste ist rahmenlos.
   Hoehe von 656px auf 332px, ohne dass Inhalt verloren geht -- das Bild
   ist dabei doppelt so gross wie vorher.

3. Welt-Kacheln mit einer Spur Milchglas und feinem Lichtsaum, damit sie
   zur Szene gehoeren statt als flache Rechtecke daraufzuliegen.

BEIM BAUEN GEFUNDEN UND KORRIGIERT: Der erste Entwurf hat die versteckte
zweite Event-Kachel wieder sichtbar gemacht (leere Kachel mit einsamem
"Mehr erfahren"). Ursache ist die im Code zweimal dokumentierte Falle:
".jahres-event-card[hidden]" ist genau so stark wie eine
Zwei-Klassen-Regel und verliert gegen die spaetere. Deshalb steht in den
neuen Regeln ueberall :not([hidden]).

Versionsnummern von main.css/main.js hochgesetzt -- Assets werden mit
max-age=14400 ausgeliefert, sonst haette Dogi die Aenderung bis zu vier
Stunden nicht gesehen.

Geprueft: pruef-handy (56), pruef-barrierefrei (60), pruef-design (0
Fundstellen), pruef-blickfang (13), pruef-assets (67), pruef-musik (17)
-- alle gruen. Der Musik-Knopf holt seine Farben jetzt aus dem <img>
statt aus dem CSS-Hintergrund (main.js), sonst waere er ausgerechnet auf
der Startseite auf die Ersatzfarbe zurueckgefallen.

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

index.html

@@ -19,7 +19,7 @@
 <meta name="twitter:description" content="DOGFATHER UNIVERSE: die Heimat von DogFather als Streamer, der HasiDog-Community und Manager DogFather bei Spicy Media." />
 <meta name="twitter:image" content="https://dogfather-universe.com/assets/img/og-cover.jpg" />
 
-<link rel="stylesheet" href="assets/css/main.css?v=20260828c" />
+<link rel="stylesheet" href="assets/css/main.css?v=20260827hero" />
 <link rel="stylesheet" href="assets/css/theme-dogfather.css?v=20260828c" />
 <link rel="stylesheet" href="assets/css/theme-hasidog.css?v=20260828c" />
 <link rel="stylesheet" href="assets/css/theme-spicymedia.css?v=20260828c" />
@@ -30,8 +30,20 @@
 <main>
   <!-- ================= HERO ================= -->
   <section class="hero hero-cinematic">
-    <!-- Großes Trio-Artwork als Kino-Hintergrund (DogFather · Dogi · HasiDog) -->
-    <div class="hero-artwork" aria-hidden="true"></div>
+    <!-- Großes Trio-Artwork als Kino-Hintergrund (DogFather · Dogi · HasiDog).
+
+         Das scharfe Bild ist seit 27.08.2026 ein echtes <img> statt eines
+         CSS-Hintergrunds. Grund: Als Hintergrund mit "contain" endete es an
+         einer harten Kante, und darunter/darüber lag sichtbar die verwaschene
+         Fassung — es sah aus wie ein aufgeklebtes Band quer über der Seite
+         ("es überschneidet den hintergrund"). Ein echtes Bild lässt sich an
+         seinen eigenen Rändern weich ausblenden, egal wie breit der
+         Bildschirm ist; ein CSS-Hintergrund kann das nicht, weil die Kante
+         dort je nach Fensterformat woanders liegt. -->
+    <div class="hero-artwork" aria-hidden="true">
+      <img class="hero-artwork-scharf" src="assets/img/universe-trio.jpg?v=20260820h"
+           width="1600" height="900" alt="" fetchpriority="high" decoding="async" />
+    </div>
 
     <div class="hero-atmosphere" aria-hidden="true">
       <span class="atmosphere-blend"></span>
@@ -293,7 +305,7 @@
 <script src="assets/js/data-modis.js?v=20260828c"></script>
 <script src="assets/js/data-scouts.js?v=20260828c"></script>
 <script src="assets/js/i18n-index.js?v=20260828c"></script>
-<script src="assets/js/main.js?v=20260828c"></script>
+<script src="assets/js/main.js?v=20260827hero"></script>
 <script>
 // Gleiche URL wie in assets/js/forms.js / postfach.html — läuft seit
 // 05.08.2026 auf dem eigenen Server statt auf Cloudflare Workers.