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]>
2026-07-31 23:42:43 +02:00
parent 39d97c5846
commit bd7d057425
2 changed files with 111 additions and 11 deletions
@@ -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
   ========================================================================== */