Bewerben-Uebersicht: neues Split-Bild, zwei Spalten, Trennwand, zweifarbige Buttons

- Neues Hintergrundbild (Husky + Dogi zwischen Blau/Rot-Blitzen) auf
  bewerben.html, ersetzt das alte Motiv
- Layout in zwei Spalten: Modi + Kooperation links (blaue Community-
  Seite des Bildes), Scout + Streamer/Creator-Bewerbung rechts (rote
  Agentur-Seite), passend zur Bildkomposition
- Kleine leuchtende Trennwand in der Mitte, blau-lila-rot-Verlauf mit
  Blitz-Knoten, verbindet die Bild-Lichtgrenze visuell mit dem Layout
- "Bewerben"-Knopf in der Navigation und der Musik-Knopf unten rechts
  sind jetzt fest halb babyblau/halb rot (statt Theme-Farbe) -- beide
  gehoeren zu keiner der beiden Welten allein

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

assets/css/main.css

@@ -190,14 +190,19 @@ header.site-header {
 }
 .nav-dropdown a:hover, .nav-dropdown a.active { background: var(--bg-alt); color: var(--accent); }
 
+/* "Bewerben" ist der Treffpunkt beider Welten (Team Dogi + Spicy Media) —
+   deshalb bewusst FEST halb babyblau, halb rot, unabhängig vom Theme der
+   gerade offenen Seite. Kein var(--accent), sondern die festen Markenfarben. */
 .nav-cta {
   padding: .55rem 1.1rem;
   border-radius: 999px;
-  background: var(--accent);
+  background: linear-gradient(90deg, #8fd9ea 0%, #8fd9ea 49%, #d94a5c 51%, #d94a5c 100%);
-  color: var(--accent-contrast);
+  color: #0a0c10;
   font-weight: 700;
   font-size: .88rem;
+  transition: filter .2s ease, transform .2s ease;
 }
+.nav-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
 
 /* Interner Login — dezent, aber auf jeder Seite oben rechts auffindbar */
 .nav-login {
@@ -1079,6 +1084,81 @@ body.mit-hintergrund::after {
   .pyramid-tier .profile-card { max-width: min(78vw, 240px) !important; }
 }
 
+/* ==========================================================================
+   BEWERBEN-SPLIT — zwei Welten, zwei Spalten, kleine Trennwand in der Mitte
+   Passend zum Hintergrundbild: Community/Team Dogi (blau) links,
+   Agentur/Spicy Media (rot) rechts.
+   ========================================================================== */
+.bewerben-split {
+  display: flex;
+  align-items: stretch;
+  gap: clamp(1.4rem, 4vw, 3.2rem);
+  max-width: 980px;
+  margin: 0 auto;
+}
+.bewerben-side {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+.bewerben-side-label {
+  text-align: center;
+  font-family: var(--font-head);
+  font-weight: 800;
+  font-size: .74rem;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  margin-bottom: .2rem;
+}
+.bewerben-side-blau .bewerben-side-label { color: #8fd9ea; text-shadow: 0 0 14px rgba(143, 217, 234, .5); }
+.bewerben-side-rot .bewerben-side-label { color: #d94a5c; text-shadow: 0 0 14px rgba(217, 74, 92, .5); }
+.bewerben-side .card { height: auto; }
+
+/* Die kleine Trennungswand: ein leuchtender Steg von blau nach rot,
+   mit einem Blitz-Knoten in der Mitte — passend zur Lichtgrenze im Bild. */
+.bewerben-wall {
+  flex: none;
+  width: 3px;
+  align-self: stretch;
+  position: relative;
+  border-radius: 3px;
+  background: linear-gradient(to bottom,
+    transparent 0%,
+    #8fd9ea 18%,
+    #b285c9 50%,
+    #d94a5c 82%,
+    transparent 100%);
+  box-shadow: 0 0 16px rgba(143, 217, 234, .35), 0 0 16px rgba(217, 74, 92, .3);
+}
+.bewerben-wall span {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.1rem;
+  background: linear-gradient(135deg, #8fd9ea 0%, #8fd9ea 48%, #d94a5c 52%, #d94a5c 100%);
+  border: 2px solid rgba(255, 255, 255, .18);
+  box-shadow: 0 0 0 6px rgba(10, 12, 16, .55),
+              0 0 20px rgba(143, 217, 234, .4),
+              0 0 20px rgba(217, 74, 92, .35);
+}
+@media (max-width: 760px) {
+  .bewerben-split { flex-direction: column; gap: 2.2rem; }
+  .bewerben-wall {
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(to right, transparent 0%, #8fd9ea 18%, #b285c9 50%, #d94a5c 82%, transparent 100%);
+  }
+}
+
 /* ==========================================================================
    TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
    ========================================================================== */
@@ -1136,6 +1216,8 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
   align-items: flex-end;
   gap: 12px;
 }
+/* Musik gehört zu Hasidog UND Van-Van, also zu beiden Welten — deshalb
+   auch hier fest halb babyblau, halb rot, statt der Theme-Farbe. */
 .music-toggle {
   width: 54px;
   height: 54px;
@@ -1147,11 +1229,12 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  color: var(--accent-contrast);
+  color: #0a0c10;
-  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
+  border: 1px solid rgba(255, 255, 255, .18);
-  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  background: linear-gradient(90deg, #8fd9ea 0%, #8fd9ea 49%, #d94a5c 51%, #d94a5c 100%);
   box-shadow: 0 12px 30px rgba(0, 0, 0, .45),
-              0 0 24px color-mix(in srgb, var(--accent) 35%, transparent);
+              0 0 18px rgba(143, 217, 234, .35),
+              0 0 18px rgba(217, 74, 92, .3);
   transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
 }
 .music-toggle:hover,
@@ -1159,7 +1242,8 @@ body.seite-laedt main { opacity: .55; transition: opacity .15s ease; }
   transform: translateY(-2px) scale(1.05);
   filter: brightness(1.12);
   box-shadow: 0 16px 38px rgba(0, 0, 0, .5),
-              0 0 34px color-mix(in srgb, var(--accent) 55%, transparent);
+              0 0 26px rgba(143, 217, 234, .5),
+              0 0 26px rgba(217, 74, 92, .45);
 }
 .music-widget.open .music-toggle { transform: rotate(12deg); }
 

bewerben.html

@@ -22,7 +22,7 @@
 <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.jpg');--page-bg-mobile:url('/assets/img/bg-bewerben-mobile.jpg');">
+<body class="mit-hintergrund" style="--page-bg:url('/assets/img/bg-bewerben-split.jpg');--page-bg-mobile:url('/assets/img/bg-bewerben-split-mobile.jpg');">
 <div id="site-header"></div>
 
 <main>
@@ -36,28 +36,36 @@
 
   <section class="section-tight">
     <div class="container">
-      <div class="grid grid-3">
+      <div class="bewerben-split">
-        <a class="card" href="bewerben-modi.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
+        <div class="bewerben-side bewerben-side-blau">
-          <span class="tag">🩵 Community — Team Dogi</span>
+          <span class="bewerben-side-label">🩵 Community — Team Dogi</span>
-          <h3>Modi werden</h3>
+          <a class="card" href="bewerben-modi.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
-          <p>Dogfathers persönliches Team. Chat, Community und Zusammenhalt im Alltag.</p>
+            <span class="tag">Community</span>
-        </a>
+            <h3>Modi werden</h3>
-        <a class="card" href="bewerben-scout.html">
+            <p>Dogfathers persönliches Team. Chat, Community und Zusammenhalt im Alltag.</p>
-          <span class="tag">Agentur — Spicy Media</span>
+          </a>
-          <h3>Scout werden</h3>
+          <a class="card" href="bewerben-kooperation.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
-          <p>Finde und begleite neue Talente für Dogfather als Manager.</p>
+            <span class="tag">Anfrage</span>
-        </a>
+            <h3>Kooperation anfragen</h3>
-        <a class="card" href="bewerben-creator.html">
+            <p>Firma, Marke oder eigenes Projekt — schick deine Idee direkt an Team Dogi.</p>
-          <span class="tag">Agentur — Spicy Media</span>
+          </a>
-          <h3>Als Streamer bewerben</h3>
+        </div>
-          <p>Du suchst einen Manager? Bewirb dich als Creator bei Spicy Media.</p>
-        </a>
-      </div>
 
-      <div class="card text-center" style="max-width:520px;margin:2.4rem auto 0;">
+        <div class="bewerben-wall" aria-hidden="true"><span>⚡</span></div>
-        <h3 style="margin-top:0;">Firma, Marke oder eigenes Projekt?</h3>
+
-        <p class="small muted">Für Kooperationsanfragen gibt es eine eigene, kurze Seite.</p>
+        <div class="bewerben-side bewerben-side-rot">
-        <a class="btn btn-outline" href="bewerben-kooperation.html">Kooperation anfragen</a>
+          <span class="bewerben-side-label">Agentur — Spicy Media</span>
+          <a class="card" href="bewerben-scout.html">
+            <span class="tag">Agentur</span>
+            <h3>Scout werden</h3>
+            <p>Finde und begleite neue Talente für Dogfather als Manager.</p>
+          </a>
+          <a class="card" href="bewerben-creator.html">
+            <span class="tag">Manager-Bewerbung</span>
+            <h3>Als Streamer bewerben</h3>
+            <p>Du suchst einen Manager? Bewirb dich als Creator bei Spicy Media.</p>
+          </a>
+        </div>
       </div>
     </div>
   </section>