Hintergrundbilder komplett sichtbar statt angeschnitten

Auf Wunsch: das ganze Motiv soll immer zu sehen sein, oben/unten/
links/rechts nichts abgeschnitten.

- .page-bg (14 Seiten: Casper, Dogfather, Modi-Team, Scouts, VanVan,
  Bewerben, Manager, Streamplan, Zeitreise, Stimmen, Community, Werte,
  Creator, HasiDog): background-size von cover auf contain. Der scharfe
  Bild-Layer zeigt jetzt garantiert das komplette Motiv; wo dadurch
  links/rechts oder oben/unten Rand frei bleibt, scheint die weichge-
  zeichnete Ebene dahinter durch statt einer leeren Flaeche.
- .hero-artwork (Trio-Kinohintergrund auf Startseite + altem HasiDog-
  Layout): ebenfalls auf contain umgestellt, Ken-Burns-Zoom entfernt
  (ein Zoom haette immer einen Teil aus dem Bild geschoben - Widerspruch
  zu "alles soll zu sehen sein"). Feste, ruhige Darstellung.
- Handy: der scharfe Layer bleibt beim vollen Original (kein Zuschnitt
  mehr auf den portraetierten *-mobile.jpg); nur der unscharfe
  Hintergrund-Layer darf weiter den Handy-Zuschnitt nutzen, da er nur
  Stimmung ist, nicht "das Bild" selbst.
- Tote Regeln (Kenburns-Keyframes, leere reduced-motion-Regel) entfernt.

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

assets/css/main.css

@@ -745,15 +745,16 @@ footer.site-footer {
 .hero-artwork::before {
   content: "";
   position: absolute;
-  inset: -5%; /* etwas Luft, damit die Ken-Burns-Fahrt nie eine Kante zeigt */
+  inset: 0;
-  /* zwei Ebenen: scharfes Artwork über einer 4-KB-Unschärfe, die sofort da ist */
+  /* Zwei Ebenen: das scharfe Artwork komplett sichtbar (contain — nichts
+     abgeschnitten, oben/unten/links/rechts alles da), darunter dieselbe
+     Szene verwaschen als Cover, die die Ränder füllt statt sie leer zu
+     lassen. Kein Zoom/Kenburns mehr — der hätte immer einen Teil des
+     Bildes aus dem sichtbaren Bereich geschoben. */
   background-image: url("../img/universe-trio.jpg"), url("../img/universe-trio-blur.jpg");
-  background-size: cover, cover;
+  background-size: contain, cover;
-  background-position: center 40%, center 40%;
+  background-position: center, center;
-  background-repeat: no-repeat;
+  background-repeat: no-repeat, no-repeat;
-  transform-origin: 50% 40%;
-  animation: artwork-kenburns 48s ease-in-out infinite alternate;
-  will-change: transform;
 }
 .hero-artwork::after {
   content: "";
@@ -771,10 +772,6 @@ footer.site-footer {
       rgba(0, 0, 0, .78) 88%,
       var(--bg) 100%);
 }
-@keyframes artwork-kenburns {
-  from { transform: scale(1.03); }
-  to   { transform: scale(1.12) translate3d(-1.4%, -1%, 0); }
-}
 /* Atmosphäre über dem Artwork nur noch als feiner Schleier */
 .hero-cinematic .hero-atmosphere { opacity: .5; }
 /* Text bekommt eine weiche Abschattung, damit er auf jedem Bildausschnitt sitzt */
@@ -782,17 +779,6 @@ footer.site-footer {
 .hero-cinematic .lead,
 .hero-cinematic .eyebrow { text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 1px 3px rgba(0, 0, 0, .9); }
 
-@media (max-width: 760px) {
-  /* Hochformat-Zuschnitt: mittig auf Dogi, Husky und Hase bleiben angeschnitten sichtbar */
-  .hero-artwork::before {
-    background-image: url("../img/universe-trio-mobile.jpg"), url("../img/universe-trio-blur.jpg");
-    background-position: center 36%, center 36%;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .hero-artwork::before { animation: none; transform: scale(1.03); }
-}
-
 /* ==========================================================================
    CHARAKTER-SHOWCASE — die zwei Artworks groß, scharf und komplett sichtbar
    ========================================================================== */
@@ -938,7 +924,13 @@ body.mit-hintergrund::after {
 }
 
 /* ---- 2) Im Kopfbereich zeigt sich das Motiv gestochen scharf ----
-   Hier darf es wirken: kaum abgedunkelt, volle Schärfe. */
+   Hier darf es wirken: kaum abgedunkelt, volle Schärfe.
+   WICHTIG: background-size CONTAIN, nicht cover — das ganze Bild soll immer
+   komplett zu sehen sein (oben/unten/links/rechts), nichts abgeschnitten.
+   Falls das Bild schmaler/breiter als der Kopfbereich ist, bleibt links und
+   rechts (oder oben/unten) ein Rand frei — durch den scheint die weichge-
+   zeichnete Version aus Ebene 1 durch, damit dort keine harte leere Fläche
+   entsteht, sondern ein ruhiger, stimmiger Übergang. */
 .page-bg {
   position: relative;
   isolation: isolate;
@@ -950,7 +942,7 @@ body.mit-hintergrund::after {
   inset: 0;
   z-index: -2;
   background-image: var(--page-bg);
-  background-size: cover;
+  background-size: contain;
   background-position: var(--page-bg-pos, center);
   background-repeat: no-repeat;
 }
@@ -993,7 +985,10 @@ body.mit-hintergrund::after {
 .page-bg.hero > .container { margin-inline: auto; }
 
 @media (max-width: 760px) {
-  .page-bg::before,
+  /* Der weichgezeichnete Grund-Layer darf ruhig den Handy-Zuschnitt nehmen —
+     der ist nur Stimmung im Hintergrund, wird nicht "als Bild" wahrgenommen.
+     Der scharfe .page-bg-Layer bleibt beim VOLLEN Original, damit auf dem
+     Handy garantiert nichts vom eigentlichen Motiv fehlt. */
   body.mit-hintergrund::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
 }