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]>

assets/css/main.css

@@ -1835,15 +1835,34 @@ header.site-header {
    kein Grid-Kind), zeigt bewusst IMMER genau zwei Events nebeneinander. Gleiche
    Karten-/Tag-Optik wie die 3 Welt-Kacheln, damit es wie ein natürlicher Abschluss des
    Grids wirkt statt wie ein fremdes Element. */
+/* Die umgebende Kiste ist seit 27.08.2026 rahmenlos. Vorher trug sie
+   Hintergrund UND Rahmen, und die Event-Karte darin trug beides noch
+   einmal — zwei Rahmen um denselben Inhalt, dazwischen tote Fläche. Die
+   Karte allein trägt das Design jetzt besser; die Überschrift steht frei
+   darüber. */
 .jahres-events {
-  margin-top: 1.2rem;
-  background: var(--card-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.6rem;
-  box-shadow: var(--shadow);
+  margin-top: 1.8rem;
+  background: none;
+  border: 0;
+  padding: 0;
+  box-shadow: none;
+}
+.jahres-events-head { margin-bottom: .9rem; }
+/* Ohne die umgebende Kiste stand die Überschrift als nackter Text
+   zwischen zwei Kacheln und wirkte verloren. Als goldene Plakette gehört
+   sie sichtbar zur Event-Karte darunter — gedecktes Gold, kein grelles
+   Leuchten (Projektregel: augenschonend). */
+.jahres-events-head .tag {
+  display: inline-block;
+  padding: .34rem .95rem;
+  border-radius: 999px;
+  border: 1px solid rgba(212, 175, 55, .38);
+  background: rgba(212, 175, 55, .09);
+  color: #e8c465;
+  font-size: .82rem;
+  font-weight: 700;
+  letter-spacing: .04em;
 }
-.jahres-events-head { margin-bottom: 1.2rem; }
 .jahres-events-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -1875,11 +1894,19 @@ header.site-header {
   overflow: hidden;
   isolation: isolate;
   padding: 1.2rem 1.4rem;
-  border-radius: calc(var(--radius) - 4px);
+  border-radius: var(--radius);
   border: 1px solid rgba(212, 175, 55, .35);
+  /* Die Karte steht jetzt ohne umgebende Kiste direkt über dem Artwork
+     und muss ihren Hintergrund selbst mitbringen — vorher genügte ein
+     Hauch Weiß, weil die Kiste darunter ohnehin deckend war. Deckend
+     genug für ruhigen Lesetext, mit einer Spur Milchglas, damit die Karte
+     zur Seite gehört statt wie ein Aufkleber darauf zu liegen. */
   background:
-    radial-gradient(circle at 15% 0%, rgba(212, 175, 55, .08), transparent 55%),
-    rgba(255, 255, 255, .02);
+    radial-gradient(circle at 12% 0%, rgba(212, 175, 55, .10), transparent 58%),
+    linear-gradient(180deg, rgba(19, 23, 31, .90), rgba(13, 16, 22, .94));
+  -webkit-backdrop-filter: blur(6px);
+  backdrop-filter: blur(6px);
+  box-shadow: 0 14px 40px rgba(0, 0, 0, .38);
   transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
 }
 .jahres-event-card:hover, .jahres-event-card:focus-visible {
@@ -1909,15 +1936,69 @@ header.site-header {
 .jahres-event-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
 .jahres-event-card p { margin: 0 0 .6rem; color: var(--text-muted); font-size: .93rem; line-height: 1.55; }
 .jahres-event-mehr { color: #e8c465; font-weight: 600; font-size: .88rem; }
-/* Genau EIN aktives Event: zentrierte, etwas größere Einzelkachel statt
-   halbleerem Zwei-Spalten-Raster (Nutzer-Wunsch: "spezieller"). */
-.jahres-events-grid-einzeln {
-  grid-template-columns: 1fr;
-  max-width: 480px;
-  margin: 0 auto;
+/* Genau EIN aktives Event (27.08.2026 neu gebaut).
+
+   VORHER: eine 480px schmale Kachel, zentriert in einer 1180px breiten
+   Kiste. Links und rechts davon standen je 350px totes Dunkelgrau, und
+   weil die Kiste selbst schon Rahmen und Hintergrund hatte, saß eine
+   gerahmte Karte in einer gerahmten Kiste in einem Container — drei
+   Rahmen ineinander um einen einzigen Inhalt ("sieht irgendwie scheisse
+   aus", 27.08.2026).
+
+   JETZT: Die Karte nimmt die volle Breite ein und teilt sich in Bild
+   links / Text rechts. Das Bild ist das Beste am Event -- es bekommt
+   Platz statt Briefmarkenformat, und die leere Fläche verschwindet, weil
+   der Text sie füllt. Ab 900px abwärts wird daraus wieder
+   untereinander, sonst würden beide Spalten zu schmal. */
+.jahres-events-grid-einzeln { grid-template-columns: 1fr; }
+/* ⚠️ :not([hidden]) ist hier PFLICHT, nicht Deko.
+   ".jahres-event-card[hidden]{display:none}" weiter oben hat die Stärke
+   Klasse+Attribut. Eine Regel "Klasse Klasse" wie diese hier ist exakt
+   gleich stark und steht später in der Datei — sie hätte das Verstecken
+   also ausgehebelt und die zweite, leere Event-Kachel wieder sichtbar
+   gemacht. Genau das ist beim ersten Entwurf passiert (im Bild stand
+   eine leere Kachel mit einsamem "Mehr erfahren →"). Im Code stand die
+   Warnung davor schon zweimal; sie stimmt. */
+.jahres-events-grid-einzeln .jahres-event-card:not([hidden]) {
+  display: grid;
+  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+  /* Zeilen nach Inhalt, Block als Ganzes mittig: sonst verteilt das
+     Raster Datum/Titel/Text/Link über die volle Bildhöhe und der Text
+     steht auseinandergezogen wie eine Liste statt als Absatz. */
+  grid-template-rows: repeat(4, max-content);
+  align-content: center;
+  column-gap: 1.7rem;
+  row-gap: .1rem;
+  padding: 1.5rem;
+}
+.jahres-events-grid-einzeln .jahres-event-bild:not([hidden]) {
+  margin-bottom: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 230px;
+  aspect-ratio: auto;
+  align-self: stretch;
+  object-fit: cover;
+}
+/* Datum, Titel, Text und "Mehr erfahren" bilden die zweite Spalte. Sie
+   stehen im HTML als Geschwister nebeneinander, deshalb hier ein eigenes
+   Unter-Raster statt eines zusätzlichen <div> im Markup — so bleibt die
+   Vorlage in der Verwaltung unverändert. */
+.jahres-events-grid-einzeln .jahres-event-datum { grid-column: 2; margin-bottom: .15rem; }
+.jahres-events-grid-einzeln .jahres-event-card h3 { grid-column: 2; font-size: 1.5rem; margin-bottom: .5rem; }
+.jahres-events-grid-einzeln .jahres-event-card p { grid-column: 2; font-size: 1rem; margin-bottom: .8rem; }
+.jahres-events-grid-einzeln .jahres-event-mehr { grid-column: 2; justify-self: start; }
+.jahres-events-grid-einzeln .jahres-event-bild:not([hidden]) { grid-column: 1; grid-row: 1 / -1; }
+
+@media (max-width: 900px) {
+  .jahres-events-grid-einzeln .jahres-event-card:not([hidden]) { grid-template-columns: 1fr; grid-template-rows: none; gap: .9rem; padding: 1.2rem 1.3rem; }
+  .jahres-events-grid-einzeln .jahres-event-datum,
+  .jahres-events-grid-einzeln .jahres-event-card h3,
+  .jahres-events-grid-einzeln .jahres-event-card p,
+  .jahres-events-grid-einzeln .jahres-event-mehr { grid-column: 1; }
+  .jahres-events-grid-einzeln .jahres-event-bild:not([hidden]) { grid-column: 1; grid-row: auto; height: auto; min-height: 0; aspect-ratio: 16/9; }
+  .jahres-events-grid-einzeln .jahres-event-card h3 { font-size: 1.25rem; }
 }
-.jahres-events-grid-einzeln .jahres-event-card { padding: 1.6rem 1.8rem; }
-.jahres-events-grid-einzeln .jahres-event-card h3 { font-size: 1.3rem; }
 /* Optionales Admin-Bild pro Event (20.08.2026, "Event des Jahres" jetzt in
    der Verwaltung pflegbar) — bleibt per [hidden] unsichtbar, solange kein
    Bild gesetzt ist, damit die textbasierten Standard-Karten unverändert
@@ -2843,21 +2924,51 @@ footer.site-footer {
   overflow: hidden;
   pointer-events: none;
 }
+/* Untere Ebene: dieselbe Szene verwaschen als Cover — füllt jeden Rand,
+   den das scharfe Bild freilässt. */
 .hero-artwork::before {
   content: "";
   position: absolute;
   inset: 0;
-  /* Zwei Ebenen: das scharfe Artwork komplett sichtbar (contain — auf
-     dieser Seite läuft der Text ÜBER dem Bild mit Polarlicht-Effekten,
-     ein Banner-oberhalb-des-Texts-Layout wie auf den anderen Seiten
-     würde das Design zerstören). Darunter dieselbe Szene verwaschen als
-     Cover, die jeden Rand auffüllt, den "contain" freilässt — dadurch
-     wirkt es trotzdem randlos, obwohl die scharfen Pixel garantiert
-     nie beschnitten werden. */
-  background-image: url("../img/universe-trio.jpg?v=20260820h"), url("../img/universe-trio-blur.jpg?v=20260820h");
-  background-size: contain, cover;
-  background-position: center, center;
-  background-repeat: no-repeat, no-repeat;
+  background-image: url("../img/universe-trio-blur.jpg?v=20260820h");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+/* Obere Ebene: das scharfe Artwork, ungeschnitten und mittig — wie zuvor
+   "contain", nur eben als echtes Bild (siehe Begründung in index.html).
+
+   DER ENTSCHEIDENDE TEIL IST DIE MASKE (27.08.2026):
+
+   Vorher endete das scharfe Bild an einer messerscharfen Kante, oben wie
+   unten (bei 1366x800 z.B. exakt bei 570px und 1345px) — dort traf helles,
+   scharfes Bild auf dunklen, verwaschenen Untergrund. Das las sich nicht
+   als Hintergrund, sondern als Fremdkörper quer über der Seite.
+
+   Die Maske blendet das scharfe Bild an seinen EIGENEN Rändern weich in
+   die verwaschene Fassung darunter über. Weil sie am Bild hängt und nicht
+   am Fenster, sitzt der Übergang auf jedem Bildschirm richtig — genau das
+   war mit einem CSS-Hintergrund nicht möglich, dessen Kante je nach
+   Fensterformat wandert. Unten wird großzügiger ausgeblendet als oben,
+   weil dort die Kacheln liegen: Je ruhiger es unter ihnen wird, desto
+   klarer heben sie sich ab. */
+.hero-artwork-scharf {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-mask-image:
+    linear-gradient(to bottom, transparent 0%, #000 9%, #000 72%, transparent 100%),
+    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
+  mask-image:
+    linear-gradient(to bottom, transparent 0%, #000 9%, #000 72%, transparent 100%),
+    linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
+  -webkit-mask-composite: source-in;
+  mask-composite: intersect;
 }
 .hero-artwork::after {
   content: "";
@@ -2895,6 +3006,30 @@ footer.site-footer {
 /* Die drei Welten-Karten (DogFather/HasiDog/Manager) unter dem Hero
    sollen ebenfalls etwas größer wirken, wie auf Wunsch — Text war auf
    großen Bildschirmen zu klein. */
+/* Die drei Welt-Kacheln liegen direkt auf dem Artwork. Als flache
+   dunkle Rechtecke wirkten sie wie ausgeschnitten und aufgeklebt
+   (27.08.2026). Jetzt: eine Spur Milchglas und ein feiner Lichtsaum
+   oben, wie ihn eine Fläche bekommt, auf die Licht von vorne fällt —
+   dadurch gehören sie sichtbar zur selben Szene. Deckkraft bleibt hoch
+   genug, dass der Text ruhig lesbar bleibt (Projektregel: augenschonend
+   vor Effekt). */
+.hero-cinematic .hero-grid .card {
+  position: relative;
+  background: linear-gradient(180deg, rgba(22, 26, 35, .88), rgba(14, 17, 23, .92));
+  border-color: rgba(255, 255, 255, .11);
+  -webkit-backdrop-filter: blur(7px);
+  backdrop-filter: blur(7px);
+  box-shadow: 0 14px 38px rgba(0, 0, 0, .40);
+}
+.hero-cinematic .hero-grid .card::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 12%; right: 12%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
+  pointer-events: none;
+}
+.hero-cinematic .hero-grid .card:hover { box-shadow: 0 18px 46px rgba(0, 0, 0, .5); }
 .hero-cinematic .hero-grid .tag { font-size: .8rem; }
 .hero-cinematic .hero-grid h3 { font-size: 1.45rem; }
 .hero-cinematic .hero-grid p { font-size: 1.05rem; }