Modi-Bewerbung: vierte Kategorie neben Creator/Scout/Kooperation

- bewerben.html: neuer Reiter "Modi" mit eigenem Formular (Name, E-Mail,
  Discord/TikTok-Handle, Community-Erfahrung, Verfuegbarkeit, Motivation)
- Reiter wechselt jetzt nicht nur das Hintergrundbild, sondern auch die
  Farbwelt: Creator/Scout/Kooperation bleiben Spicy-Media-rot (Agentur),
  Modi wird babyblau (Team Dogi) -- passend zur bestehenden Regel
  "Rot ist NUR die Agentur"
- Direkt-Link bewerben.html#modi oeffnet die Bewerbung gleich auf dem
  richtigen Reiter; team-modis.html hat jetzt einen "Als Modi bewerben"
  Knopf, der genau dahin fuehrt
- Worker: "modi" als vierter erlaubter Bewerbungstyp, laeuft ueber
  dieselbe Sichtbarkeits-Berechtigung wie Scout/Kooperation (der feste
  Rechte-Katalog aus dem Anforderungsdokument kennt nur zwei Bewerbungs-
  Sichtbereiche -- es wurde bewusst KEIN neuer Permission-Key erfunden)

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-07-31 22:16:57 +02:00
co-authored by Claude Opus 5
parent 823ff52903
commit 755d0c7a0e
4 changed files with 72 additions and 17 deletions
+25 -11
View File
@@ -22,6 +22,7 @@ const CONTACT_EMAIL = "[email protected]"; // TODO: echte Konta
const FORM_TYPES = {
"form-creator": "creator",
"form-scout": "scout",
"form-modi": "modi",
"form-kooperation": "kooperation",
};
@@ -108,21 +109,27 @@ function setupForm(formId, subjectLabel) {
});
}
/* Der Kopfbereich wechselt sein Hintergrundbild mit dem gewählten Reiter:
Creator bekommt sein eigenes Motiv, Scout und Kooperation das
Spicy-Media-Motiv. So passt das Bild immer zur gewählten Bewerbung. */
/* Der Kopfbereich wechselt Hintergrundbild, Welt-Farbe (Theme) und Eyebrow-
Text mit dem gewählten Reiter: Creator/Scout/Kooperation sind Spicy-Media-
Agentur (rot), Modi ist Dogfathers persönliches Team (babyblau) — genau
wie überall sonst auf der Seite (Rot = NUR Agentur). So passt Bild UND
Farbwelt immer zur gerade gewählten Bewerbung. */
const TAB_HINTERGRUENDE = {
"tab-creator": "bg-bewerben-creator",
"tab-scout": "bg-bewerben",
"tab-kooperation": "bg-bewerben",
"tab-creator": { bg: "bg-bewerben-creator", theme: "spicymedia", eyebrow: "Manager Dogfather" },
"tab-scout": { bg: "bg-bewerben", theme: "spicymedia", eyebrow: "Manager Dogfather" },
"tab-modi": { bg: "bg-dogfather", theme: "dogfather", eyebrow: "🩵 Team Dogi" },
"tab-kooperation": { bg: "bg-bewerben", theme: "spicymedia", eyebrow: "Manager Dogfather" },
};
function setzeTabHintergrund(tabId) {
const basis = TAB_HINTERGRUENDE[tabId];
if (!basis) return;
const einstellung = TAB_HINTERGRUENDE[tabId];
if (!einstellung) return;
// Die Bildvariablen hängen am <body> — das Motiv trägt die ganze Seite.
document.body.style.setProperty("--page-bg", `url('/assets/img/${basis}.jpg')`);
document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${basis}-mobile.jpg')`);
document.body.style.setProperty("--page-bg", `url('/assets/img/${einstellung.bg}.jpg')`);
document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${einstellung.bg}-mobile.jpg')`);
document.documentElement.setAttribute("data-theme", einstellung.theme);
const eyebrow = document.getElementById("bewerben-eyebrow");
if (eyebrow) eyebrow.textContent = einstellung.eyebrow;
}
function setupTabs() {
@@ -138,7 +145,13 @@ function setupTabs() {
});
});
// Beim Laden passend zum bereits aktiven Reiter setzen
// Direkt-Link auf einen Reiter, z.B. bewerben.html#modi von der Modi-
// Team-Seite aus — öffnet die Bewerbung gleich auf dem richtigen Tab.
const gewuenscht = location.hash.replace("#", "");
const linkBtn = gewuenscht && document.querySelector(`.tab-btn[data-tab="tab-${gewuenscht}"]`);
if (linkBtn) linkBtn.click();
// Beim Laden passend zum aktiven Reiter setzen (bereits aktiv ODER gerade per Hash geöffnet)
const aktiv = document.querySelector(".tab-btn.active");
if (aktiv) setzeTabHintergrund(aktiv.dataset.tab);
}
@@ -147,5 +160,6 @@ document.addEventListener("DOMContentLoaded", () => {
setupTabs();
setupForm("form-creator", "Creator");
setupForm("form-scout", "Scout");
setupForm("form-modi", "Modi");
setupForm("form-kooperation", "Kooperation");
});