Node.js/Express-Server als Ersatz fuer den Cloudflare gate-worker.js

Der margin-top:12px, den ich für den Verbindungs-Pfeil ergänzt hatte,
erzeugte eine echte Lücke zwischen Knopf und Menü. Bewegte man die Maus
gerade runter, um einen Menüpunkt auszuwählen, verließ der Zeiger kurz
.nav-group (die Lücke gehört layoutmäßig zu keinem der beiden), das
Hover-abhängige Menü klappte sofort zu — Klicken wurde unmöglich. Fix:
Box sitzt wieder bündig an top:100% (keine Lücke), der Pfeil pokt jetzt
direkt in die Knopf-Kante statt in einen Leerraum.

.gitignore

@@ -5,3 +5,7 @@ node_modules/
 cloudflare-worker/.wrangler/
 cloudflare-worker/node_modules/
 .wrangler/
+.env
+.env.*
+!.env.example
+server/node_modules/

assets/css/main.css

@@ -247,6 +247,12 @@ header.site-header {
    ruhigen Look statt der vorherigen schlichten grauen Box. */
 .nav-dropdown {
   position: absolute;
+  /* WICHTIG: KEIN margin-top/Lücke zum Knopf — sonst verliert die Maus
+     beim Runterfahren zur Box kurz den Hover auf .nav-group, und das
+     Menü klappt zu, bevor man einen Punkt anklicken kann (Bug gefunden
+     03.08.2026, durch den Caret-Abstand selbst verursacht). Box sitzt
+     deshalb bewusst bündig an top:100%, der Verbindungs-Pfeil unten
+     pokt einfach in die Knopf-Kante hinein statt in eine echte Lücke. */
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
@@ -261,7 +267,33 @@ header.site-header {
     0 0 32px var(--brand-2, rgba(190, 200, 215, .15));
   display: none;
   flex-direction: column;
-  animation: sprach-dropdown-in .18s ease both;
+  /* EIGENE Animation statt der geteilten sprach-dropdown-in: eine
+     @keyframes-Regel setzt "transform" als GANZES pro Frame, würde also
+     das zentrierende translateX(-50%) oben komplett überschreiben und
+     die Box nach dem Aufklappen sichtbar nach rechts verschieben (Bug
+     gefunden 03.08.2026 — Box wirkte "nicht mittig", war es auch nicht:
+     transform sprang nach der Animation auf reines translateY/scale).
+     Der Sprachschalter unten ist rechtsbündig (kein translateX nötig)
+     und behält deshalb bewusst die alte, geteilte Animation. */
+  animation: nav-dropdown-in .18s ease both;
+}
+/* Kleiner Verbindungs-Pfeil (Caret), mittig unter dem Kategorie-Knopf —
+   macht auch dann unmissverständlich klar, zu welcher Kategorie das
+   Menü gehört, wenn die Box (wegen mehr Einträgen) breiter ist als der
+   Knopf selbst und dadurch optisch in Nachbar-Kategorien hineinragt. */
+.nav-dropdown::before {
+  content: "";
+  position: absolute;
+  top: -7px;
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
+  width: 14px;
+  height: 14px;
+  background: rgba(4, 5, 8, .96);
+  border-left: 1px solid rgba(255, 255, 255, .14);
+  border-top: 1px solid rgba(255, 255, 255, .14);
+  border-radius: 3px 0 0 0;
+  pointer-events: none;
 }
 .nav-group.open .nav-dropdown { display: flex; }
 /* Auf echten Maus-Geräten (nicht Touch) öffnet sich das Menü schon beim
@@ -280,6 +312,12 @@ header.site-header {
   color: var(--text-muted);
   transition: color .2s ease;
 }
+/* translateX(-50%) MUSS in jedem Frame mit drinstehen, sonst hebt die
+   Animation die Zentrierung von .nav-dropdown auf (siehe Kommentar oben). */
+@keyframes nav-dropdown-in {
+  from { opacity: 0; transform: translateX(-50%) translateY(-6px) scale(.96); }
+  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
+}
 .nav-dropdown a:hover, .nav-dropdown a.active {
   color: var(--brand-1, var(--accent));
 }
@@ -804,6 +842,131 @@ header.site-header {
   }
 }
 
+/* =====================================================================
+   .btn-holo — zweiter "Mega"-Button-Stil, bewusst MECHANISCH anders als
+   .btn-legendary/.btn-silver/.btn-tiktok (die alle nach demselben Muster
+   funktionieren: dunkler Hintergrund + heller Rand/Text-Glanz). Hier ist
+   stattdessen die GESAMTE Pille eine wandernde Holo-Foil-Fläche, wie bei
+   einer schillernden Trading-Card — Marken-Farbverlauf (Babyblau → Lila
+   → Pink → Gold → zurück), ein diagonaler Glare-Sweep wie echtes reflek-
+   tierendes Folienlicht, feines Foliekorn und dunkle geprägte Schrift
+   OBEN DRAUF statt heller Chrome-Schrift auf Dunkel. Auf Vorrat gebaut
+   (03.08.2026, auf Wunsch von Dogi) — noch nirgends im Einsatz, einfach
+   die Klassen wie unten im Beispiel verwenden:
+
+   <a class="btn-holo" href="...">
+     <span class="btn-holo-spark" aria-hidden="true">💎</span>
+     <span class="btn-holo-text">Label</span>
+     <span class="btn-holo-spark" aria-hidden="true">💎</span>
+   </a>
+   ===================================================================== */
+.btn-holo {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  gap: .6rem;
+  padding: .95rem 2.4rem;
+  border-radius: 999px;
+  font-weight: 900;
+  font-size: 1.12rem;
+  letter-spacing: .02em;
+  text-decoration: none;
+  border: 1.5px solid rgba(255, 255, 255, .7);
+  background: linear-gradient(120deg,
+    #8fd9ea 0%, #8b5cf6 18%, #ff5fa8 38%, #ffcf4d 54%, #8fd9ea 74%, #8b5cf6 100%);
+  background-size: 340% 340%;
+  animation: btn-holo-shift 6s ease-in-out infinite, btn-holo-halo 2.6s ease-in-out infinite;
+  transition: transform .25s cubic-bezier(.2, .8, .3, 1.4), box-shadow .25s ease, border-color .25s ease;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, .45),
+              0 0 0 3px rgba(11, 13, 16, .9),
+              0 0 0 4.5px rgba(255, 255, 255, .3);
+}
+.btn-holo-text {
+  position: relative;
+  z-index: 2;
+  color: #0b0d10;
+  text-transform: uppercase;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .22);
+}
+.btn-holo-spark {
+  position: relative;
+  z-index: 2;
+  display: inline-block;
+  font-size: .9em;
+  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
+  animation: btn-holo-twinkle 1.8s ease-in-out infinite;
+}
+.btn-holo-spark:last-child { animation-delay: .9s; }
+/* Diagonaler Glare-Sweep, wie Licht, das über echte Folie wandert */
+.btn-holo::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(100deg,
+    transparent 28%, rgba(255, 255, 255, .95) 48%, rgba(255, 255, 255, .2) 54%, transparent 74%);
+  background-size: 250% 100%;
+  mix-blend-mode: overlay;
+  animation: btn-holo-glare 2.8s ease-in-out infinite;
+  pointer-events: none;
+}
+/* Feines Foliekorn (SVG-Turbulence), sorgt für den "echten Folien"-Look
+   statt einer platten Farbverlaufsfläche. */
+.btn-holo::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+  background-size: 150px 150px;
+  mix-blend-mode: overlay;
+  opacity: .3;
+  pointer-events: none;
+}
+.btn-holo:hover {
+  transform: translateY(-3px) scale(1.06);
+  border-color: #fff;
+  animation-play-state: paused;
+  box-shadow: 0 18px 44px rgba(0, 0, 0, .5),
+              0 0 0 3px rgba(11, 13, 16, .9),
+              0 0 0 4.5px rgba(255, 255, 255, .5),
+              0 0 40px rgba(139, 92, 246, .6),
+              0 0 40px rgba(143, 217, 234, .5);
+}
+@keyframes btn-holo-shift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+@keyframes btn-holo-halo {
+  0%, 100% {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
+                0 0 0 3px rgba(11, 13, 16, .9),
+                0 0 0 4.5px rgba(255, 255, 255, .3),
+                0 0 18px rgba(139, 92, 246, .35),
+                0 0 18px rgba(143, 217, 234, .3);
+  }
+  50% {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, .45),
+                0 0 0 3px rgba(11, 13, 16, .9),
+                0 0 0 4.5px rgba(255, 255, 255, .45),
+                0 0 34px rgba(139, 92, 246, .6),
+                0 0 34px rgba(255, 95, 168, .45);
+  }
+}
+@keyframes btn-holo-glare {
+  0% { background-position: -70% 0; }
+  100% { background-position: 170% 0; }
+}
+@keyframes btn-holo-twinkle {
+  0%, 100% { opacity: .6; transform: scale(.85) rotate(0deg); }
+  50% { opacity: 1; transform: scale(1.35) rotate(-14deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn-holo, .btn-holo::before, .btn-holo-spark { animation: none; }
+}
+
 /* Kompakter Polarlicht-Button für Karten (z.B. Marinas Team-Modi-Karte →
    direkter Link zur Manager-Seite): exakt derselbe Mechanismus wie
    .btn-tiktok, nur kleiner und in den Spicy-Media-Markenfarben
@@ -972,7 +1135,8 @@ header.site-header {
   .nav-links.open { transform: translateY(0); }
   .nav-group > button { width: 100%; justify-content: space-between; padding: .9rem 0; border-bottom: 1px solid var(--border); }
   .nav-flat { display: block; padding: .9rem 0; border-bottom: 1px solid var(--border); }
-  .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; }
+  .nav-dropdown { position: static; transform: none; box-shadow: none; width: 100%; margin-top: 0; animation: none; }
+  .nav-dropdown::before { display: none; }
   .nav-group.open .nav-dropdown { display: flex; }
   .nav-cta { align-self: flex-start; margin: 1rem 0 .6rem; }
 }
@@ -2032,23 +2196,44 @@ body.mit-hintergrund::after {
     transparent 100%);
   box-shadow: 0 0 16px rgba(143, 217, 234, .35), 0 0 16px rgba(217, 74, 92, .3);
 }
+/* "Reaktorkern"-Emblem: dunkle Mitte mit statischem Blitz, dahinter ein
+   EIGENER, separat rotierender Farbring (::before) — dadurch dreht sich
+   der Farbschein, ohne dass der Blitz selbst mitdreht/schief steht. */
 .bewerben-wall span {
-  position: absolute;
+  position: relative;
+  isolation: isolate;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 42px;
-  height: 42px;
+  width: 60px;
+  height: 60px;
   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);
+  font-size: 1.65rem;
+  background: radial-gradient(circle at 34% 28%, #232830, #0a0c10 72%);
+  border: 1px solid rgba(255, 255, 255, .2);
+  text-shadow: 0 0 10px rgba(255, 214, 140, .9), 0 0 4px rgba(0, 0, 0, .6);
+  box-shadow: 0 0 0 4px rgba(10, 12, 16, .85),
+              0 0 0 6px rgba(255, 255, 255, .14),
+              0 0 26px rgba(143, 217, 234, .45),
+              0 0 26px rgba(217, 74, 92, .4);
+}
+.bewerben-wall span::before {
+  content: "";
+  position: absolute;
+  inset: -5px;
+  z-index: -1;
+  border-radius: 50%;
+  background: conic-gradient(from 0deg,
+    #8fd9ea 0%, #b285c9 25%, #d94a5c 50%, #b285c9 75%, #8fd9ea 100%);
+  filter: blur(2px) saturate(1.3);
+  animation: bewerben-emblem-spin 5s linear infinite;
+}
+@keyframes bewerben-emblem-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .bewerben-wall span::before { animation: none; }
 }
 @media (max-width: 760px) {
   .bewerben-split { flex-direction: column; gap: 2.2rem; width: 100%; }
@@ -2061,6 +2246,142 @@ 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 {
+  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 4px rgba(10, 12, 16, .85), 0 0 0 6px rgba(255, 255, 255, .14),
+                0 0 26px rgba(143, 217, 234, .45), 0 0 26px rgba(217, 74, 92, .4);
+  }
+  50% {
+    transform: translate(-50%, -50%) scale(1.08);
+    box-shadow: 0 0 0 4px rgba(10, 12, 16, .85), 0 0 0 7px rgba(255, 255, 255, .26),
+                0 0 42px rgba(143, 217, 234, .7), 0 0 42px 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>

hasidog.html

@@ -46,7 +46,7 @@
         <h2 data-i18n="hd_was_h2">Wer ist HasiDog?</h2>
         <p data-i18n="hd_was_1">HasiDog ist mehr als ein Spitzname — es ist die verspielte, familiäre Marke rund um DogFathers Community. Unter dem Namen „Hasidog" erscheint auch die eigene Musik auf <a href="https://open.spotify.com/intl-de/artist/2INiE1VVJGUQdEURsltuJU" target="_blank" rel="noopener">Spotify</a>.</p>
         <div class="btn-row">
-          <a class="btn-legendary" href="streamer.html"><span class="btn-legendary-spark" aria-hidden="true">✨</span><span class="btn-legendary-text" data-i18n="hd_btn_erschaffer">Erschaffer</span><span class="btn-legendary-spark" aria-hidden="true">✨</span></a>
+          <a class="btn-holo" href="streamer.html"><span class="btn-holo-spark" aria-hidden="true">💎</span><span class="btn-holo-text" data-i18n="hd_btn_erschaffer">Erschaffer</span><span class="btn-holo-spark" aria-hidden="true">💎</span></a>
         </div>
       </div>
     </div>

server/.env.example

@@ -0,0 +1,8 @@
+# Vorlage — echte Werte kommen in eine eigene ".env"-Datei (nie committen).
+
+PORT=4100
+
+# Zugangscode-Schranke — gleiche Codes wie beim bisherigen Cloudflare-Worker möglich, oder neu.
+SITE_ACCESS_SECRET=
+SITE_ACCESS_CODE_DOGI=
+SITE_ACCESS_CODE_VANVAN=

server/gate.js

@@ -0,0 +1,99 @@
+/* =====================================================================
+   gate.js — Zugangs-Schranke vor der ganzen statischen Website. 1:1 portiert aus
+   gate-worker.js (Cloudflare Worker), auf Express-Middleware umgestellt. Gleiche Logik:
+   HMAC-signierte Session-Cookies, Fail-open falls Secrets fehlen, gate.html + Assets immer
+   erreichbar, "/" wird intern auf "/index.html" abgebildet.
+   ===================================================================== */
+
+export const COOKIE_NAME = "dogi_session";
+export const ROLE_COOKIE_NAME = "dogi_role";
+export const SESSION_TAGE = 90;
+
+function b64urlEncode(bytes) {
+  let bin = "";
+  bytes.forEach((b) => (bin += String.fromCharCode(b)));
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+function b64urlDecodeToBytes(str) {
+  str = str.replace(/-/g, "+").replace(/_/g, "/");
+  while (str.length % 4) str += "=";
+  const bin = atob(str);
+  return Uint8Array.from(bin, (c) => c.charCodeAt(0));
+}
+async function hmacKey(secret) {
+  return crypto.subtle.importKey("raw", new TextEncoder().encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["sign", "verify"]);
+}
+
+export async function signSession(role, secret) {
+  const payload = JSON.stringify({ role, exp: Date.now() + SESSION_TAGE * 24 * 60 * 60 * 1000 });
+  const payloadB64 = b64urlEncode(new TextEncoder().encode(payload));
+  const key = await hmacKey(secret);
+  const sig = await crypto.subtle.sign("HMAC", key, new TextEncoder().encode(payloadB64));
+  return `${payloadB64}.${b64urlEncode(new Uint8Array(sig))}`;
+}
+
+export async function verifySession(token, secret) {
+  if (!token || !token.includes(".")) return null;
+  const [payloadB64, sigB64] = token.split(".");
+  try {
+    const key = await hmacKey(secret);
+    const valid = await crypto.subtle.verify("HMAC", key, b64urlDecodeToBytes(sigB64), new TextEncoder().encode(payloadB64));
+    if (!valid) return null;
+    const payload = JSON.parse(new TextDecoder().decode(b64urlDecodeToBytes(payloadB64)));
+    if (!payload.exp || payload.exp < Date.now()) return null;
+    return payload;
+  } catch {
+    return null;
+  }
+}
+
+export async function gateAuthHandler(req, res) {
+  const body = req.body || {};
+  const code = (body.code || "").trim();
+  const next = typeof body.next === "string" && body.next.startsWith("/") && body.next !== "/" ? body.next : "/index.html";
+
+  let role = null;
+  if (process.env.SITE_ACCESS_CODE_DOGI && code === process.env.SITE_ACCESS_CODE_DOGI) role = "dogi";
+  else if (process.env.SITE_ACCESS_CODE_VANVAN && code === process.env.SITE_ACCESS_CODE_VANVAN) role = "vanvan";
+
+  if (!role) {
+    return res.status(401).json({ ok: false, error: "Falscher Zugangscode." });
+  }
+
+  const session = await signSession(role, process.env.SITE_ACCESS_SECRET);
+  const maxAge = SESSION_TAGE * 24 * 60 * 60 * 1000;
+  res.cookie(COOKIE_NAME, session, { path: "/", maxAge, httpOnly: true, secure: true, sameSite: "lax" });
+  res.cookie(ROLE_COOKIE_NAME, role, { path: "/", maxAge, secure: true, sameSite: "lax" });
+  return res.json({ ok: true, next });
+}
+
+export function gateMiddleware(req, res, next) {
+  const pfad = req.path;
+
+  const codesKonfiguriert = !!(process.env.SITE_ACCESS_SECRET && (process.env.SITE_ACCESS_CODE_DOGI || process.env.SITE_ACCESS_CODE_VANVAN));
+  if (!codesKonfiguriert) return next();
+
+  if (pfad === "/gate-auth" && req.method === "POST") {
+    return gateAuthHandler(req, res);
+  }
+
+  const sessionToken = req.cookies?.[COOKIE_NAME];
+
+  (async () => {
+    const payload = sessionToken ? await verifySession(sessionToken, process.env.SITE_ACCESS_SECRET) : null;
+    if (payload) return next();
+
+    if (
+      pfad === "/gate.html" ||
+      pfad.startsWith("/assets/") ||
+      pfad === "/manifest.json" ||
+      pfad === "/sw.js" ||
+      pfad === "/favicon.ico"
+    ) {
+      return next();
+    }
+
+    const nextParam = pfad === "/" ? "/index.html" : pfad + (req.originalUrl.includes("?") ? "?" + req.originalUrl.split("?")[1] : "");
+    return res.redirect(302, `/gate.html?next=${encodeURIComponent(nextParam)}`);
+  })();
+}

server/index.js

@@ -0,0 +1,36 @@
+/* =====================================================================
+   index.js — Haupteinstiegspunkt für DogFather Universe. Liefert die statische Website aus
+   (../ ist der Ordner mit allen .html-Dateien) plus die Zugangsschranke (gate.js), 1:1 wie
+   vorher der Cloudflare Worker (gate-worker.js).
+   ===================================================================== */
+
+import "dotenv/config";
+import express from "express";
+import cookieParser from "cookie-parser";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { gateMiddleware } from "./gate.js";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const SITE_DIR = join(__dirname, "..");
+const PORT = Number(process.env.PORT || 4100);
+
+const app = express();
+app.set("trust proxy", 1);
+
+app.use(cookieParser());
+app.use(express.json({ limit: "1mb" }));
+app.use(gateMiddleware);
+
+app.use(express.static(SITE_DIR, { index: "index.html" }));
+
+app.use((req, res) => {
+  res.status(404).sendFile(join(SITE_DIR, "404.html"), (err) => {
+    if (err) res.status(404).send("Nicht gefunden.");
+  });
+});
+
+app.listen(PORT, "127.0.0.1", () => {
+  console.log(`DogFather Universe – Server läuft auf http://127.0.0.1:${PORT}`);
+});

server/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "dogfather-universe-server",
+  "type": "module",
+  "version": "1.0.0",
+  "description": "Eigener Node.js/Express-Server für DogFather Universe – Ersatz für den Cloudflare-Worker (gate-worker.js), liefert die statische Seite + Zugangsschranke.",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "cookie-parser": "^1.4.7",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2"
+  }
+}