bewerben.html: Bewerbungs-Karten komplett neu inszeniert ("ultra von ultra"), Farben unverändert

Neue Klasse .card-duel: rotierender Farbring exakt am Kartenrand,
driftender Aurora-Glow im Hintergrund, leuchtende Icon-Badges statt
schlichter Rahmen-Tags, dramatischer Hover-Lift mit Farbexplosion.
Trennwand + Blitz-Emblem in der Mitte zum pulsierenden "Energiekern"
mit Doppelring und fließendem Lichtstrom aufgewertet. Seitenlabels
bekommen einen leuchtenden Unterstrich. Alle Effekte nutzen bewusst
dieselben --accent/--accent-2-Variablen, die pro Karte schon gesetzt
waren (Community weiterhin babyblau/lila, Agentur weiterhin rot/orange
vom Spicy-Media-Theme) — Farbwelt bleibt exakt erhalten, nur die Machart
ist komplett neu.

assets/css/main.css

@@ -2206,6 +2206,149 @@ body.mit-hintergrund::after {
   }
 }
 
+/* ==========================================================================
+   .card-duel — "Ultra"-Überarbeitung der vier Bewerbungs-Karten auf
+   bewerben.html (03.08.2026, auf Wunsch: "extrem geil, ultra von ultra,
+   trotzdem professionell", Farben MÜSSEN gleich bleiben). Nutzt bewusst
+   dieselben --accent/--accent-2-Variablen, die pro Karte schon gesetzt
+   sind (Community-Karten inline babyblau/lila, Agentur-Karten automatisch
+   rot/orange vom Spicy-Media-Theme) — dadurch bleibt die Farbwelt exakt
+   erhalten, nur die Machart wird komplett neu: rotierender Farbring um
+   die Karte, driftender Aurora-Glow im Hintergrund, leuchtendes Icon-
+   Badge statt schlichtem Rahmen-Tag, dramatischer Hover-Lift mit
+   Farbexplosion. ========================================================================== */
+.card-duel {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  background:
+    radial-gradient(140% 120% at 12% -15%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 55%),
+    var(--card-bg);
+  border: 1px solid rgba(255, 255, 255, .14);
+  border-radius: calc(var(--radius) + 6px);
+  padding: 2.1rem 1.9rem 2.3rem;
+  transition: transform .35s cubic-bezier(.2, .8, .2, 1.25), box-shadow .35s ease, border-color .3s ease;
+  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
+}
+/* Rotierender, dünner Farbring exakt am Kartenrand entlang */
+.card-duel::before {
+  content: "";
+  position: absolute;
+  inset: -1.5px;
+  z-index: 0;
+  border-radius: inherit;
+  padding: 2px;
+  background: conic-gradient(from 0deg,
+    var(--accent) 0deg, var(--accent-2) 90deg, transparent 150deg, transparent 210deg, var(--accent) 270deg, var(--accent) 360deg);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: .6;
+  animation: card-duel-rotate 7s linear infinite;
+}
+/* Driftender Farbschein-Nebel im Hintergrund, hinter dem Text */
+.card-duel::after {
+  content: "";
+  position: absolute;
+  inset: -45%;
+  z-index: 0;
+  background:
+    radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 55%),
+    radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--accent-2) 50%, transparent), transparent 58%);
+  filter: blur(26px) saturate(1.35);
+  opacity: .45;
+  animation: nav-cta-aurora 8s ease-in-out infinite alternate;
+  pointer-events: none;
+}
+.card-duel > * { position: relative; z-index: 2; }
+.card-duel .tag {
+  display: inline-flex;
+  align-items: center;
+  gap: .35rem;
+  background: color-mix(in srgb, var(--accent) 20%, transparent);
+  border: 1px solid color-mix(in srgb, var(--accent) 65%, transparent);
+  color: #fff;
+  font-weight: 700;
+  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, black 20%);
+  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 40%, transparent);
+}
+.card-duel h3 {
+  font-size: 1.55rem;
+  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
+}
+.card-duel p { font-size: 1.04rem; }
+.card-duel:hover {
+  transform: translateY(-9px) scale(1.025);
+  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
+  box-shadow: 0 26px 54px rgba(0, 0, 0, .6),
+              0 0 44px color-mix(in srgb, var(--accent) 50%, transparent),
+              0 0 44px color-mix(in srgb, var(--accent-2) 40%, transparent);
+}
+@keyframes card-duel-rotate { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .card-duel::before, .card-duel::after { animation: none; }
+}
+
+/* Trennwand + Emblem: von schlichtem Steg zu einem pulsierenden
+   "Energiekern" mit Doppelring und fließendem Lichtstrom aufgewertet. */
+.bewerben-wall {
+  background-size: 100% 220%;
+  animation: bewerben-wall-flow 3.4s linear infinite;
+}
+@keyframes bewerben-wall-flow {
+  0% { background-position: 0 20%; }
+  100% { background-position: 0 -180%; }
+}
+.bewerben-wall span {
+  width: 58px;
+  height: 58px;
+  font-size: 1.5rem;
+  box-shadow: 0 0 0 3px rgba(10, 12, 16, .75),
+              0 0 0 5px rgba(255, 255, 255, .16),
+              0 0 26px rgba(143, 217, 234, .5),
+              0 0 26px rgba(217, 74, 92, .45);
+  animation: bewerben-emblem-pulse 2.4s ease-in-out infinite;
+}
+@keyframes bewerben-emblem-pulse {
+  0%, 100% {
+    transform: translate(-50%, -50%) scale(1);
+    box-shadow: 0 0 0 3px rgba(10, 12, 16, .75), 0 0 0 5px rgba(255, 255, 255, .16),
+                0 0 26px rgba(143, 217, 234, .5), 0 0 26px rgba(217, 74, 92, .45);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.1);
+    box-shadow: 0 0 0 3px rgba(10, 12, 16, .75), 0 0 0 6px rgba(255, 255, 255, .28),
+                0 0 40px rgba(143, 217, 234, .7), 0 0 40px rgba(217, 74, 92, .6);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .bewerben-wall, .bewerben-wall span { animation: none; }
+}
+/* Seitenlabels: leuchtender Unterstrich statt schlichtem Text */
+.bewerben-side-label {
+  position: relative;
+  padding-bottom: .55rem;
+  font-size: .8rem;
+}
+.bewerben-side-label::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 64px;
+  height: 2px;
+  border-radius: 2px;
+}
+.bewerben-side-blau .bewerben-side-label::after {
+  background: linear-gradient(90deg, transparent, #8fd9ea, transparent);
+  box-shadow: 0 0 10px rgba(143, 217, 234, .6);
+}
+.bewerben-side-rot .bewerben-side-label::after {
+  background: linear-gradient(90deg, transparent, #d94a5c, transparent);
+  box-shadow: 0 0 10px rgba(217, 74, 92, .6);
+}
+
 /* ==========================================================================
    TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
    ========================================================================== */

bewerben.html

@@ -47,12 +47,12 @@
         <div class="bewerben-split">
           <div class="bewerben-side bewerben-side-blau">
             <span class="bewerben-side-label" data-i18n="bw_label_community">🩵 Community — Team Dogi</span>
-            <a class="card" href="bewerben-modi.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
+            <a class="card card-duel" href="bewerben-modi.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
               <span class="tag" data-i18n="bw_tag_community">Community</span>
               <h3 data-i18n="bw_modi_h3">Modi werden</h3>
               <p data-i18n="bw_modi_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;">
+            <a class="card card-duel" href="bewerben-kooperation.html" style="--accent:#8fd9ea;--accent-2:#8b5cf6;">
               <span class="tag" data-i18n="bw_tag_anfrage">Anfrage</span>
               <h3 data-i18n="bw_koop_h3">Kooperation anfragen</h3>
               <p data-i18n="bw_koop_p">Firma, Marke oder eigenes Projekt — schick deine Idee direkt an Team Dogi.</p>
@@ -63,12 +63,12 @@
 
           <div class="bewerben-side bewerben-side-rot">
             <span class="bewerben-side-label" data-i18n="bw_label_agentur">Agentur — Spicy Media 🌶️</span>
-            <a class="card" href="bewerben-scout.html">
+            <a class="card card-duel" href="bewerben-scout.html">
               <span class="tag" data-i18n="bw_tag_agentur">Agentur</span>
               <h3 data-i18n="bw_scout_h3">Scout werden</h3>
               <p data-i18n="bw_scout_p">Finde und begleite neue Talente für DogFather als Manager.</p>
             </a>
-            <a class="card" href="bewerben-creator.html">
+            <a class="card card-duel" href="bewerben-creator.html">
               <span class="tag" data-i18n="bw_tag_manager">Manager-Bewerbung</span>
               <h3 data-i18n="bw_creator_h3">Als Streamer bewerben</h3>
               <p data-i18n="bw_creator_p">Du suchst einen Manager? Bewirb dich als Creator bei Spicy Media.</p>