Rahmen fuer alle Fotos, Team-Dogi-Hintergrund, Bananenstift

- Alle Fotoflaechen bekommen denselben Rahmen-Look wie die Avatare:
  farbige Linie, dunkle Trennkante, Glow und Hover-Anhebung
- Fuenf Rahmenfarben wechseln sich ab (babyblau, lila, silber, gold,
  tuerkis) — auch die Avatar-Ringe der Profilkarten rotieren durch
- Team-Dogi-Collage als abgedunkelter Hintergrund hinter dem
  Team-Abschnitt der Startseite und dem Modi-Team-Hero, mit eigenem
  Hochformat-Zuschnitt fuers Handy
- Bananenstift (Scout) hat jetzt sein Bild

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

assets/css/main.css

@@ -372,9 +372,28 @@ header.site-header {
   transform: translateY(-2px);
   box-shadow:
     0 0 0 2px var(--card-bg),
-    0 0 0 4px var(--accent),
+    0 0 0 4px var(--frame, var(--accent)),
     0 14px 32px rgba(0, 0, 0, .5);
 }
+/* Jede Profilkarte bekommt eine andere Ringfarbe — sonst sieht eine Reihe
+   aus vier Avataren monoton aus. Reihenfolge wiederholt sich alle 5 Karten. */
+.profile-card:nth-child(5n+1) { --frame: var(--accent); }
+.profile-card:nth-child(5n+2) { --frame: var(--accent-2); }
+.profile-card:nth-child(5n+3) { --frame: #c7ccd1; }
+.profile-card:nth-child(5n+4) { --frame: #d8b25a; }
+.profile-card:nth-child(5n+5) { --frame: #6ee7d8; }
+.profile-card .avatar {
+  background: linear-gradient(140deg, var(--frame, var(--accent)), var(--accent-2));
+  box-shadow:
+    0 0 0 2px var(--card-bg),
+    0 0 0 4px color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent),
+    0 10px 26px rgba(0, 0, 0, .45);
+}
+.profile-card::before {
+  background: radial-gradient(circle,
+    color-mix(in srgb, var(--frame, var(--accent)) 20%, transparent), transparent 70%);
+}
+.profile-card:hover { border-color: color-mix(in srgb, var(--frame, var(--accent)) 60%, transparent); }
 .profile-card .role { color: var(--accent); font-weight: 600; font-size: .85rem; margin-bottom: .6rem; }
 .profile-card .quote { font-style: italic; font-size: .9rem; }
 .profile-card .socials { display: flex; justify-content: center; gap: .6rem; margin-top: .8rem; }
@@ -520,13 +539,39 @@ footer.site-footer {
   z-index: 5;
   box-shadow: 0 22px 40px rgba(0, 0, 0, .55);
 }
+/* Alle Fotoflächen bekommen denselben Rahmen-Look wie die Avatare:
+   feine Linie in der Rahmenfarbe, dunkle Trennkante, weicher Schlagschatten.
+   Die Farbe steuert die Variable --frame — Standard ist die Markenfarbe.
+   Andere Farben über die Klassen .frame-silver / .frame-lila / .frame-gold /
+   .frame-rot setzen (siehe unten). */
 .collage-photo {
+  --frame: var(--accent);
   position: relative;
   aspect-ratio: 1 / 1;
-  border-radius: 2px;
+  border-radius: 10px;
   overflow: hidden;
   background: repeating-linear-gradient(135deg, #e8ebee, #e8ebee 10px, #f6f7f9 10px, #f6f7f9 20px);
+  box-shadow:
+    0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
+    0 0 0 4px rgba(0, 0, 0, .55),
+    0 0 26px color-mix(in srgb, var(--frame) 22%, transparent),
+    0 14px 34px rgba(0, 0, 0, .45);
+  transition: box-shadow .3s ease, transform .3s ease;
 }
+.collage-photo:hover {
+  transform: translateY(-3px);
+  box-shadow:
+    0 0 0 2px var(--frame),
+    0 0 0 4px rgba(0, 0, 0, .55),
+    0 0 38px color-mix(in srgb, var(--frame) 38%, transparent),
+    0 18px 42px rgba(0, 0, 0, .5);
+}
+/* Farbvarianten für Abwechslung */
+.frame-silver { --frame: #c7ccd1; }
+.frame-lila   { --frame: var(--accent-2); }
+.frame-gold   { --frame: #d8b25a; }
+.frame-rot    { --frame: #d94a5c; }
+.frame-tuerkis{ --frame: #6ee7d8; }
 .collage-photo img {
   width: 100%;
   height: 100%;
@@ -815,6 +860,42 @@ footer.site-footer {
   .char-card, .char-card img { animation: none; transition: none; }
 }
 
+/* ==========================================================================
+   TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
+   ========================================================================== */
+.team-bg {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+.team-bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-image: url("../img/team-dogi-bg.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+/* Abdunkelung, damit Text und Avatare klar davor stehen und die Ränder
+   sauber in die Seite auslaufen */
+.team-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(ellipse 110% 80% at 50% 50%,
+      rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .80) 65%, rgba(0, 0, 0, .93) 100%),
+    linear-gradient(to bottom, var(--bg) 0%, transparent 14%, transparent 86%, var(--bg) 100%);
+}
+@media (max-width: 760px) {
+  .team-bg::before {
+    background-image: url("../img/team-dogi-bg-mobile.jpg");
+  }
+}
+
 /* ==========================================================================
    SPOTIFY-PLAYER — Musik direkt auf der Seite hören, ohne wegzuklicken
    ========================================================================== */

assets/js/data-scouts.js

@@ -29,7 +29,8 @@ const SCOUTS = [
   {
     name: "Bananenstift",
     role: "Scout — Team Dogi",
-    photo: "",
+    photo: "assets/img/avatar-bananenstift.jpg",
+    avatar: "assets/img/avatar-bananenstift.jpg",
     quote: "", // TODO: Zitat von Bananenstift einholen
     social: {},
     status: "aktiv",