Bewerben-Poster als Kino-Flankierung, neuer Creator-Hintergrund, Diene/Funny gleichrangig

- bewerben.html: die zwei neuen Kampagnen-Poster (Dogfather/Team-Dogi links,
  Spicy Media rechts) flankieren jetzt die beiden Bewerbungs-Spalten wie
  Kinoplakate, leicht gekippt, farblich passend zur jeweiligen Seite,
  blenden nach unten sanft aus. Bewusst als eigene scharfe Bildspalte statt
  als verwaschener Hintergrund hinter den Karten, damit beides in voller
  Qualität lesbar bleibt. Ab 1080px Breite ausgeblendet (kein Platz mehr).
- creator.html: neues, extra dafür erstelltes "Die Creator"-Breitbild als
  Hintergrund, ersetzt den bisher wiederverwendeten Bewerbungs-Platzhalter
- data-modis.js: Funny von Stufe 3 auf Stufe 2 - jetzt gleiche Hierarchie-
  Ebene wie Diene (Pyramide gruppiert automatisch per Stufe, keine
  Code-Änderung an der Anzeige-Logik nötig)
- Alle Bilder als optimierte JPEGs eingebunden (PNG-Originale via
  System.Drawing skaliert/komprimiert, 63-232 KB statt 1,9-2,6 MB)

assets/css/main.css

@@ -1148,6 +1148,63 @@ body.mit-hintergrund::after {
   .pyramid-tier .profile-card { max-width: min(78vw, 240px) !important; }
 }
 
+/* ==========================================================================
+   BEWERBEN-SHOWCASE — die beiden Kampagnen-Poster (Dogfather/Team-Dogi
+   links, Spicy Media rechts) flankieren die Bewerbungs-Spalten wie
+   Kinoplakate. Bewusst NICHT als verwaschener Hintergrund HINTER den
+   Karten (das hätte Lesbarkeit gekostet), sondern als eigene, scharfe
+   Bildspalten DANEBEN — dadurch bleiben die Poster in voller Qualität
+   sichtbar UND die Bewerbungs-Karten bleiben ungestört lesbar. Jedes
+   Poster fasst farblich zur jeweiligen Seite (blau/rot) und blendet nach
+   unten sanft aus, damit es nicht wie ein hart abgeschnittenes Rechteck
+   wirkt, sondern organisch in die Seite übergeht. */
+.bewerben-showcase {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(1rem, 3vw, 2.2rem);
+}
+.bewerben-poster {
+  flex: 0 0 auto;
+  width: clamp(120px, 15vw, 220px);
+  aspect-ratio: 2 / 3;
+  border-radius: var(--radius);
+  overflow: hidden;
+  position: relative;
+  align-self: center;
+  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
+  transition: transform .25s ease, filter .25s ease;
+}
+.bewerben-poster img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+  display: block;
+}
+.bewerben-poster::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius);
+  pointer-events: none;
+}
+.bewerben-poster-blau {
+  box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 30px rgba(143, 217, 234, .22);
+  transform: rotate(-2.5deg);
+}
+.bewerben-poster-blau::after { box-shadow: inset 0 0 0 1px rgba(143, 217, 234, .35); }
+.bewerben-poster-rot {
+  box-shadow: 0 18px 46px rgba(0, 0, 0, .55), 0 0 30px rgba(217, 74, 92, .22);
+  transform: rotate(2.5deg);
+}
+.bewerben-poster-rot::after { box-shadow: inset 0 0 0 1px rgba(217, 74, 92, .35); }
+.bewerben-poster:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); filter: brightness(1.08); }
+@media (max-width: 1080px) {
+  .bewerben-poster { display: none; }
+}
+
 /* ==========================================================================
    BEWERBEN-SPLIT — zwei Welten, zwei Spalten, kleine Trennwand in der Mitte
    Passend zum Hintergrundbild: Community/Team Dogi (blau) links,

assets/js/data-modis.js

@@ -77,7 +77,7 @@ const MODIS = [
     name: "Funny",
     slug: "funny",
     role: "Mama der Community",
-    rank: 3,
+    rank: 2, // gleiche Hierarchie-Stufe wie Diene — Wunsch von Dogi
     photo: "assets/img/card-funny.jpg",
     avatar: "assets/img/avatar-funny.jpg",
     bio: "Funny ist Teil des Modi-Teams von Team Dogi und mit dafür verantwortlich, dass im Chat und in der Community alles rundläuft.",

bewerben.html

@@ -37,35 +37,45 @@
 
   <section class="section-tight">
     <div class="container">
-      <div class="bewerben-split">
+      <div class="bewerben-showcase">
-        <div class="bewerben-side bewerben-side-blau">
+        <div class="bewerben-poster bewerben-poster-blau" aria-hidden="true">
-          <span class="bewerben-side-label">🩵 Community — Team Dogi</span>
+          <img src="assets/img/bewerben-poster-dogfather.jpg" alt="" loading="lazy" />
-          <a class="card" href="bewerben-modi.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
-            <span class="tag">Community</span>
-            <h3>Modi werden</h3>
-            <p>Dogfathers persönliches Team. Chat, Community und Zusammenhalt im Alltag.</p>
-          </a>
-          <a class="card" href="bewerben-kooperation.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
-            <span class="tag">Anfrage</span>
-            <h3>Kooperation anfragen</h3>
-            <p>Firma, Marke oder eigenes Projekt — schick deine Idee direkt an Team Dogi.</p>
-          </a>
         </div>
 
-        <div class="bewerben-wall" aria-hidden="true"><span>⚡</span></div>
+        <div class="bewerben-split">
+          <div class="bewerben-side bewerben-side-blau">
+            <span class="bewerben-side-label">🩵 Community — Team Dogi</span>
+            <a class="card" href="bewerben-modi.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
+              <span class="tag">Community</span>
+              <h3>Modi werden</h3>
+              <p>Dogfathers persönliches Team. Chat, Community und Zusammenhalt im Alltag.</p>
+            </a>
+            <a class="card" href="bewerben-kooperation.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
+              <span class="tag">Anfrage</span>
+              <h3>Kooperation anfragen</h3>
+              <p>Firma, Marke oder eigenes Projekt — schick deine Idee direkt an Team Dogi.</p>
+            </a>
+          </div>
 
-        <div class="bewerben-side bewerben-side-rot">
+          <div class="bewerben-wall" aria-hidden="true"><span>⚡</span></div>
-          <span class="bewerben-side-label">Agentur — Spicy Media</span>
+
-          <a class="card" href="bewerben-scout.html">
+          <div class="bewerben-side bewerben-side-rot">
-            <span class="tag">Agentur</span>
+            <span class="bewerben-side-label">Agentur — Spicy Media</span>
-            <h3>Scout werden</h3>
+            <a class="card" href="bewerben-scout.html">
-            <p>Finde und begleite neue Talente für Dogfather als Manager.</p>
+              <span class="tag">Agentur</span>
-          </a>
+              <h3>Scout werden</h3>
-          <a class="card" href="bewerben-creator.html">
+              <p>Finde und begleite neue Talente für Dogfather als Manager.</p>
-            <span class="tag">Manager-Bewerbung</span>
+            </a>
-            <h3>Als Streamer bewerben</h3>
+            <a class="card" href="bewerben-creator.html">
-            <p>Du suchst einen Manager? Bewirb dich als Creator bei Spicy Media.</p>
+              <span class="tag">Manager-Bewerbung</span>
-          </a>
+              <h3>Als Streamer bewerben</h3>
+              <p>Du suchst einen Manager? Bewirb dich als Creator bei Spicy Media.</p>
+            </a>
+          </div>
+        </div>
+
+        <div class="bewerben-poster bewerben-poster-rot" aria-hidden="true">
+          <img src="assets/img/bewerben-poster-spicymedia.jpg" alt="" loading="lazy" />
         </div>
       </div>
     </div>

creator.html

@@ -22,12 +22,12 @@
 <link rel="stylesheet" href="assets/css/theme-hasidog.css" />
 <link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
 </head>
-<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-bewerben-creator.jpg');--page-bg-mobile:url('/assets/img/bg-bewerben-creator-mobile.jpg');">
+<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-creator.jpg');--page-bg-mobile:url('/assets/img/bg-creator-mobile.jpg');">
 <div id="site-header"></div>
 
 <main>
   <section class="hero page-bg">
-    <div class="hero-banner"><img src="/assets/img/bg-bewerben-creator.jpg" alt="" loading="eager" /></div>
+    <div class="hero-banner"><img src="/assets/img/bg-creator.jpg" alt="" loading="eager" /></div>
     <div class="container">
       <span class="eyebrow">Manager Dogfather — Team</span>
       <h1>Creator im Team</h1>