VanVan-Text angepasst + Modi-Team als Hierarchie-Pyramide

- team-modis.html: "seine beste Freundin" -> "Super Super Sekretaerin"
- Team-Hierarchie ist jetzt eine echte Pyramide statt eines gleich-
  foermigen Rasters: eine Ebene pro Rang, zentriert, mit leuchtender
  Verbindungslinie und Knoten pro Stufe (Organigramm-Optik). Karten-
  und Avatar-Groesse nimmt von Stufe zu Stufe ab, VanVans grosse,
  separate Karte bleibt oben unveraendert gross.

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

assets/css/main.css

@@ -996,6 +996,89 @@ body.mit-hintergrund::after {
   body.mit-hintergrund::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
 }
 
+/* ==========================================================================
+   HIERARCHIE-PYRAMIDE — Team-Mitglieder stufenweise unter VanVan
+
+   Eine zentrale Linie läuft von oben (unter VanVans großer Karte) nach
+   unten durch alle Ebenen. Jede Ebene ist eine eigene, zentrierte Reihe;
+   die Kartengröße nimmt von Stufe zu Stufe leicht ab, wodurch die
+   Hierarchie auch optisch spürbar wird — oben groß und wichtig, nach
+   unten hin kompakter. An jeder Ebene sitzt ein leuchtender Knoten auf
+   der Linie, wie bei einem Organigramm.
+   ========================================================================== */
+.pyramid {
+  position: relative;
+  padding-top: 2.6rem;
+  display: flex;
+  flex-direction: column;
+  gap: clamp(2.4rem, 5vw, 3.6rem);
+}
+/* Die zentrale, senkrechte Verbindungslinie */
+.pyramid::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  background: linear-gradient(to bottom,
+    color-mix(in srgb, var(--accent) 70%, transparent),
+    color-mix(in srgb, var(--accent-2) 55%, transparent) 55%,
+    transparent 100%);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
+}
+.pyramid-tier {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+  gap: clamp(1rem, 3vw, 2rem);
+}
+/* Leuchtender Knoten pro Ebene, sitzt genau auf der Linie */
+.pyramid-tier::before {
+  content: "";
+  position: absolute;
+  top: -1.5rem;
+  left: 50%;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  background: var(--accent);
+  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
+              0 0 18px color-mix(in srgb, var(--accent) 65%, transparent);
+  z-index: 2;
+}
+.pyramid-tier .profile-card {
+  width: 100%;
+  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
+}
+.pyramid-tier .profile-card:hover { transform: translateY(-6px) scale(1.02); }
+
+/* Fünf Größenstufen — je tiefer, desto kompakter */
+.pyramid-tier[data-tier="1"] .profile-card { max-width: 260px; }
+.pyramid-tier[data-tier="2"] .profile-card { max-width: 240px; }
+.pyramid-tier[data-tier="3"] .profile-card { max-width: 222px; }
+.pyramid-tier[data-tier="4"] .profile-card { max-width: 206px; }
+.pyramid-tier[data-tier="5"] .profile-card { max-width: 192px; }
+.pyramid-tier[data-tier="1"] .avatar { width: 108px; height: 108px; }
+.pyramid-tier[data-tier="2"] .avatar { width: 98px; height: 98px; }
+.pyramid-tier[data-tier="3"] .avatar { width: 90px; height: 90px; }
+.pyramid-tier[data-tier="4"] .avatar { width: 82px; height: 82px; }
+.pyramid-tier[data-tier="5"] .avatar { width: 76px; height: 76px; }
+.pyramid-tier[data-tier="3"] .profile-card h3,
+.pyramid-tier[data-tier="4"] .profile-card h3,
+.pyramid-tier[data-tier="5"] .profile-card h3 { font-size: 1.02rem; }
+.pyramid-tier[data-tier="4"] .role,
+.pyramid-tier[data-tier="5"] .role { font-size: .78rem; }
+
+@media (max-width: 700px) {
+  .pyramid-tier { gap: 1rem; }
+  .pyramid-tier .profile-card { max-width: min(78vw, 240px) !important; }
+}
+
 /* ==========================================================================
    TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
    ========================================================================== */

team-modis.html

@@ -42,7 +42,7 @@
           <div>
             <h2 style="margin-bottom:.3rem;">VanVan 🩵</h2>
             <p class="muted">Rechte Hand von Dogfather · Musik-Produzentin</p>
-            <p>VanVan ist nicht nur die rechte Hand von Dogfather, sondern auch seine beste Freundin. Sie bekommt täglich alle Neuigkeiten und Aufgaben und delegiert oder organisiert gemeinsam mit Diene.</p>
+            <p>VanVan ist nicht nur die rechte Hand von Dogfather, sondern auch Super Super Sekretärin. Sie bekommt täglich alle Neuigkeiten und Aufgaben und delegiert oder organisiert gemeinsam mit Diene.</p>
             <a class="btn btn-primary" href="vanvan.html">VanVans exklusive Seite →</a>
           </div>
           <div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
@@ -52,7 +52,7 @@
       </div>
 
       <h2 class="text-center">Team-Hierarchie</h2>
-      <div id="modis-grid" class="grid grid-4"></div>
+      <div id="modis-grid" class="pyramid"></div>
 
       <!-- TODO: Hinweis: Reihenfolge/Rollen basieren auf: VanVan (rechte Hand) → Diene (rechte Hand von VanVan) → Funny (Modi) → Miss (Modi + Cutterin) → Marina/Michi (Clip-Account-Kommentare). Änderungen einfach in assets/js/data-modis.js pflegen. -->
       <div class="btn-row" style="justify-content:center;">
@@ -69,15 +69,32 @@
 document.addEventListener("DOMContentLoaded", () => {
   const grid = document.getElementById("modis-grid");
   if (!grid || !window.MODIS) return;
-  const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a,b) => a.rank - b.rank);
-  grid.innerHTML = rest.map((m) => `
-    <a class="profile-card" href="${m.page || `profil.html?p=${m.slug}`}">
-      <div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
-      <span class="badge${m.rank === 1 ? " rank-1" : ""}" style="margin-bottom:.5rem;">Stufe ${m.rankLabel || m.rank}</span>
-      <h3>${m.name}</h3>
-      <div class="role">${m.role}</div>
-      <span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span>
-    </a>`).join("");
+  const rest = window.MODIS.filter((m) => m.name !== "VanVan").sort((a, b) => a.rank - b.rank);
+
+  // Pyramide: eine Ebene pro eindeutigem Rang, oben schmal/groß, nach
+  // unten breiter/kompakter — genau wie ein Organigramm.
+  const raenge = [...new Set(rest.map((m) => m.rank))];
+  const MAX_STUFEN = 5; // fünf definierte Größenstufen im CSS
+
+  grid.innerHTML = raenge
+    .map((rang, i) => {
+      const stufe = Math.min(i + 1, MAX_STUFEN);
+      const personen = rest.filter((m) => m.rank === rang);
+      const karten = personen
+        .map(
+          (m) => `
+        <a class="profile-card" href="${m.page || `profil.html?p=${m.slug}`}">
+          <div class="avatar">${(m.avatar || m.photo) ? `<img src="${m.avatar || m.photo}" alt="${m.name}" loading="lazy">` : `<span class="avatar-initial">${m.name.charAt(0).toUpperCase()}</span>`}</div>
+          <span class="badge" style="margin-bottom:.5rem;">Stufe ${m.rankLabel || m.rank}</span>
+          <h3>${m.name}</h3>
+          <div class="role">${m.role}</div>
+          <span class="btn btn-outline" style="margin-top:.7rem;pointer-events:none;">Profil ansehen</span>
+        </a>`
+        )
+        .join("");
+      return `<div class="pyramid-tier" data-tier="${stufe}">${karten}</div>`;
+    })
+    .join("");
 });
 </script>
 </body>