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",

casper.html

@@ -51,10 +51,10 @@
     <div class="container">
       <h2 class="text-center">Casper-Galerie</h2>
       <div class="grid grid-4">
-        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-3.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:center 20%;" /></div>
-        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-4.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:42% center;" /></div>
-        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/dogfather-casper-2.jpg" alt="Dogfather und Casper" style="width:100%;height:100%;object-fit:cover;object-position:center 38%;" /></div>
-        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/hasidog-casper-book.jpg" alt="HasiDog &amp; Casper Buch-Illustration" style="width:100%;height:100%;object-fit:cover;" /></div>
+        <div class="collage-photo frame-lila" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-3.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:center 20%;" /></div>
+        <div class="collage-photo frame-silver" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-4.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:42% center;" /></div>
+        <div class="collage-photo frame-gold" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/dogfather-casper-2.jpg" alt="Dogfather und Casper" style="width:100%;height:100%;object-fit:cover;object-position:center 38%;" /></div>
+        <div class="collage-photo frame-tuerkis" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/hasidog-casper-book.jpg" alt="HasiDog &amp; Casper Buch-Illustration" style="width:100%;height:100%;object-fit:cover;" /></div>
       </div>
       <div class="btn-row" style="justify-content:center;">
         <a class="btn btn-outline" href="medien.html">Zur ganzen Galerie</a>

hasidog.html

@@ -87,7 +87,7 @@
     <div class="container text-center">
       <h2>„Schlaft schön." 🩵</h2>
       <p class="lead" style="max-width:50ch;margin:0 auto 1.4rem;">Eine Szene aus der HasiDog-&amp;-Casper-Welt, wie sie im Buch lebendig wird.</p>
-      <div class="collage-photo" style="max-width:640px;margin:0 auto;border-radius:var(--radius);aspect-ratio:1200/654;">
+      <div class="collage-photo frame-lila" style="max-width:640px;margin:0 auto;border-radius:var(--radius);aspect-ratio:1200/654;">
         <img src="assets/img/hasidog-casper-book.jpg" alt="Schlaft schön — Team Dogi Illustration" style="width:100%;height:100%;object-fit:cover;" />
       </div>
     </div>

index.html

@@ -123,19 +123,19 @@
           <p class="collage-caption">Dogfather 🩵</p>
         </div>
         <div class="collage-item">
-          <div class="collage-photo"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-1.jpg" alt="Casper" style="object-position:center top;"></div>
+          <div class="collage-photo frame-lila"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-1.jpg" alt="Casper" style="object-position:center top;"></div>
           <p class="collage-caption">Casper 🐾</p>
         </div>
         <div class="collage-item">
-          <div class="collage-photo"><img class="collage-img" data-fallback="Dogfather &amp; Casper" src="assets/img/dogfather-casper-1.jpg" alt="Dogfather und Casper zusammen" style="object-position:center 18%;"></div>
+          <div class="collage-photo frame-silver"><img class="collage-img" data-fallback="Dogfather &amp; Casper" src="assets/img/dogfather-casper-1.jpg" alt="Dogfather und Casper zusammen" style="object-position:center 18%;"></div>
           <p class="collage-caption">Team 🩵🐾</p>
         </div>
         <div class="collage-item">
-          <div class="collage-photo"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-2.jpg" alt="Casper"></div>
+          <div class="collage-photo frame-gold"><img class="collage-img" data-fallback="Casper" src="assets/img/casper-2.jpg" alt="Casper"></div>
           <p class="collage-caption">Husky-Life</p>
         </div>
         <div class="collage-item">
-          <div class="collage-photo"><img class="collage-img" data-fallback="Dogfather &amp; Casper" src="assets/img/dogfather-casper-2.jpg" alt="Dogfather und Casper Nase an Nase"></div>
+          <div class="collage-photo frame-tuerkis"><img class="collage-img" data-fallback="Dogfather &amp; Casper" src="assets/img/dogfather-casper-2.jpg" alt="Dogfather und Casper Nase an Nase"></div>
           <p class="collage-caption">Nase an Nase 🩵</p>
         </div>
       </div>
@@ -174,7 +174,7 @@
   </section>
 
   <!-- ================= TEAM PREVIEW ================= -->
-  <section class="section-tight">
+  <section class="section-tight team-bg">
     <div class="container">
       <h2 class="text-center">Team Dogi 🩵</h2>
       <p class="lead text-center" style="max-width:60ch;margin:0 auto;">Von VanVan bis zu den Scouts — die Menschen, die DOGFATHER UNIVERSE tragen.</p>
@@ -203,9 +203,9 @@
       <h2 class="text-center">Impressionen</h2>
       <div class="grid grid-4">
         <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-3.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:center 20%;" /></div>
-        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" /></div>
-        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-4.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:42% center;" /></div>
-        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-dogfather.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;" /></div>
+        <div class="collage-photo frame-lila" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" /></div>
+        <div class="collage-photo frame-silver" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-4.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:42% center;" /></div>
+        <div class="collage-photo frame-gold" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-dogfather.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;" /></div>
       </div>
       <div class="btn-row" style="justify-content:center;">
         <a class="btn btn-outline" href="medien.html">Zur ganzen Galerie</a>

team-modis.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero team-bg">
     <div class="container">
       <span class="eyebrow">🩵 Team Dogi</span>
       <h1>Das Modi-Team</h1>