Fortnite-Experience: Enzyklopädie um Monetarisierungs-Bereich erweitert (Sub-Tabs, 10 Themen mit Timelines/Fakten/FOMO-Boxen, Detail-Modal)

fortnite-experience/app.js

@@ -553,7 +553,353 @@ const fortniteCollabs = [
   }
 ];
 
-// Game State Variables
+/* ==========================================================================
+   MONETARISIERUNGS-ENZYKLOPÄDIE
+   Alle Daten sorgfältig recherchiert (Stand 2026). Jedes Topic hat:
+   id, icon, color, title, tagline, intro, sections[] (verschiedene Block-Typen),
+   und optional eine timeline[].
+   Block-Typen im "sections"-Array:
+     { type:'text', title?, body }
+     { type:'facts', title?, items:[{label, value, note?}] }
+     { type:'prices', title?, items:[{name, vbucks?, euro?, note?}] }
+     { type:'fomo', title?, body }        -> rote Warn-/FOMO-Box
+     { type:'good', title?, body }        -> grüne "fair"-Box
+     { type:'timeline', title?, items:[{date, label, desc?}] }
+     { type:'list', title?, items:[string] }
+   ========================================================================== */
+const monetizationTopics = [
+  {
+    id: "skins",
+    icon: "fa-shirt",
+    color: "#c084fc",
+    title: "Skins & Cosmetics",
+    tagline: "Das Herzstück: Aussehen ohne Spielvorteil",
+    intro: "Fortnite verkauft ausschließlich <strong>kosmetische</strong> Items – nichts davon macht dich stärker. Trotzdem ist genau das die größte Geldquelle. Der Reiz: Selbstausdruck, Seltenheit und der Gruppenzwang, dabei zu sein. \"Cosmetics\" ist ein Sammelbegriff für viele Unterkategorien.",
+    sections: [
+      {
+        type: "list",
+        title: "🎨 Die Unterkategorien der Cosmetics",
+        items: [
+          "<strong>Skins (Outfits):</strong> Das komplette Charakter-Modell – von 800 bis 2.000 V‑Bucks.",
+          "<strong>Waffen-Skins (Wraps):</strong> Lackierungen für Waffen & Fahrzeuge. Eingeführt in Season 7.",
+          "<strong>Gleiter (Gliders):</strong> Dein Fallschirm/Gleiter beim Absprung aus dem Battle Bus.",
+          "<strong>Spitzhacken (Pickaxes / \"Harvesting Tools\"):</strong> Die Werkzeuge zum Abbauen – rein optisch.",
+          "<strong>Pets & Rückenbling (Back Bling):</strong> Begleiter und Rucksäcke, seit Season 6 im Battle Pass.",
+          "<strong>Emotes & Tänze:</strong> Die berühmten Tänze – oft von echten Künstlern lizenziert.",
+          "<strong>Sprays, Ladebildschirme, Lobby-Musik:</strong> Kleinere Deko-Items."
+        ]
+      },
+      {
+        type: "facts",
+        title: "💰 Typische Preis-Stufen (Skins)",
+        items: [
+          { label: "Ungewöhnlich (Grün/Blau)", value: "800 V‑Bucks", note: "≈ 7 €" },
+          { label: "Selten / Episch", value: "1.200 V‑Bucks", note: "≈ 11 €" },
+          { label: "Legendär", value: "1.500 – 2.000 V‑Bucks", note: "≈ 13 – 18 €" },
+          { label: "Icon-Serie (Promis)", value: "1.500+ V‑Bucks", note: "z. B. Musiker" }
+        ]
+      },
+      {
+        type: "fomo",
+        title: "⚠️ Der psychologische Trick",
+        body: "Skins sind kein Spielvorteil – sie verkaufen <strong>Identität und Zugehörigkeit</strong>. Kinder und Jugendliche wollen dazugehören. Kombiniert mit künstlicher Verknappung (\"nur noch heute!\") entsteht enormer Kaufdruck."
+      }
+    ]
+  },
+  {
+    id: "itemshop",
+    icon: "fa-store",
+    color: "#06b6d4",
+    title: "Item Shop & FOMO",
+    tagline: "Der tägliche Laden mit Countdown",
+    intro: "Der <strong>Item Shop</strong> wechselt täglich. Nicht alles ist immer verfügbar – Skins verschwinden und kommen erst Wochen oder Monate später wieder. Das erzeugt <strong>FOMO</strong> (\"Fear of Missing Out\" – die Angst, etwas zu verpassen).",
+    sections: [
+      {
+        type: "text",
+        title: "🕐 Wie FOMO funktioniert",
+        body: "Ein Countdown-Timer zeigt, wie lange ein Skin noch im Shop ist. Diese künstliche Verknappung drängt zu schnellen, unüberlegten Käufen – \"jetzt oder vielleicht nie\". Klassisches Dark-Pattern-Design."
+      },
+      {
+        type: "timeline",
+        title: "📜 Wichtige Transparenz-Änderungen am Shop",
+        items: [
+          { date: "Anfangs", label: "Nur V‑Bucks sichtbar", desc: "Preise standen nur in der Kunstwährung – der echte Euro-Wert war bewusst verschleiert." },
+          { date: "Nach FTC-Druck", label: "Echtgeld-Preis muss erscheinen", desc: "Infolge des FTC-Verfahrens 2022/23 wurde Epic stärker zu klaren Angaben gedrängt." },
+          { date: "Später", label: "\"Verfügbar bis …\"-Anzeige", desc: "Der Shop zeigt nun, wie lange ein Item noch bleibt – Transparenz, aber auch verstärkte FOMO." },
+          { date: "Fortlaufend", label: "Shop-Größe verändert", desc: "Die Anzahl der täglich angebotenen Items wurde über die Jahre mehrfach angepasst." }
+        ]
+      },
+      {
+        type: "fomo",
+        body: "Studien zeigen: Zeitdruck + Kunstwährung = mehr Impulskäufe. Man \"fühlt\" nicht, dass 2.000 V‑Bucks ca. 18 € echtes Geld sind."
+      }
+    ]
+  },
+  {
+    id: "battlepass",
+    icon: "fa-medal",
+    color: "#c5ff26",
+    title: "Battle Pass & Pässe",
+    tagline: "Vom fairen Deal zum Abo-Zwang",
+    intro: "Der <strong>Battle Pass</strong> ist ein saisonales Belohnungssystem: Man spielt, sammelt XP und schaltet ~100 Belohnungen frei. Lange galt er als <strong>fairster Deal</strong> im Spiel – weil man die bezahlten V‑Bucks fast komplett zurückbekam. Das hat sich 2026 geändert.",
+    sections: [
+      {
+        type: "text",
+        title: "♻️ Was heißt \"self-sustaining\"?",
+        body: "Ein Battle Pass war <strong>self-sustaining</strong> (\"selbsttragend\"), wenn er mehr V‑Bucks zurückgab, als er kostete. Wer durchspielte, konnte den nächsten Pass gratis kaufen – ein cleverer Loyalitäts-Trick, der zum Weiterspielen motivierte."
+      },
+      {
+        type: "timeline",
+        title: "📜 Preis-Geschichte des Battle Pass",
+        items: [
+          { date: "Season 2 (2018)", label: "Einführung – 950 V‑Bucks", desc: "Enthielt genug V‑Bucks (~1.300–1.500) zum Rückverdienen. Klar self-sustaining." },
+          { date: "Jahre danach", label: "1.000 V‑Bucks", desc: "Kostete 1.000 V‑Bucks, gab aber ~1.500 V‑Bucks zurück → immer noch selbsttragend." },
+          { date: "März 2026", label: "800 V‑Bucks – NICHT mehr self-sustaining", desc: "Beim großen Preis-Anstieg gesenkt auf 800 V‑Bucks, enthält aber nur noch GENAU die 800 V‑Bucks zurück – kein Bonus mehr. Der faire Kreislauf ist vorbei." }
+        ]
+      },
+      {
+        type: "facts",
+        title: "🎟️ Die verschiedenen Pässe (Stand 2026)",
+        items: [
+          { label: "Battle Pass (Premium)", value: "800 V‑Bucks", note: ">100 Belohnungen" },
+          { label: "Gratis Battle Pass", value: "0 V‑Bucks", note: "wenige Items, ~300 V‑Bucks, keine Outfits" },
+          { label: "Music Pass (früher Festival)", value: "eigener Pass", desc: "" , note: "für Fortnite Festival" },
+          { label: "LEGO Pass", value: "eigener Pass", note: "für LEGO Fortnite" },
+          { label: "OG Pass / Rocket Pass", value: "eigene Pässe", note: "weitere Modi" }
+        ]
+      },
+      {
+        type: "good",
+        title: "✅ Was daran fair war",
+        body: "Anders als reine Zufalls-Lootboxen weiß man beim Battle Pass <strong>genau</strong>, was man bekommt und wann. Und jahrelang finanzierte er sich beim Durchspielen selbst."
+      },
+      {
+        type: "fomo",
+        title: "⚠️ Der Haken 2026",
+        body: "Seit März 2026 gibt es keinen V‑Bucks-Überschuss mehr. Zusätzlich muss man für Music-/LEGO-/OG-Pass-Belohnungen ggf. ein aktives <strong>Fortnite-Crew-Abo</strong> halten – sonst verfallen sie."
+      }
+    ]
+  },
+  {
+    id: "bundles",
+    icon: "fa-box-open",
+    color: "#fb7185",
+    title: "Bundles",
+    tagline: "Pakete – mal mit, mal ohne Euro-Preis",
+    intro: "<strong>Bundles</strong> sind Pakete aus mehreren Cosmetics (z. B. Skin + Spitzhacke + Gleiter). Sie sind meist günstiger als der Einzelkauf – aber die Preisgestaltung ist bewusst uneinheitlich.",
+    sections: [
+      {
+        type: "text",
+        title: "💶 Mal Direktpreis, mal V‑Bucks",
+        body: "Manche Bundles haben einen <strong>direkten Echtgeld-Preis</strong> (z. B. 24,99 €) – oft solche mit exklusiven Skins, die man <em>nur</em> so bekommt. Andere kosten nur V‑Bucks. Diese Mischung macht Vergleiche absichtlich schwer."
+      },
+      {
+        type: "facts",
+        title: "📦 Typische Bundle-Beispiele",
+        items: [
+          { label: "Starter-Paket", value: "meist 4,99 – 7,99 €", note: "Direktpreis, Einsteiger-Köder" },
+          { label: "Skin-Bundle", value: "1.800 – 2.500 V‑Bucks", note: "Skin + Zubehör gebündelt" },
+          { label: "Gaming-Legends-Reihe", value: "nur Echtgeld", note: "exklusive Crossover-Skins" }
+        ]
+      },
+      {
+        type: "fomo",
+        body: "Der \"Rabatt\" wirkt attraktiv – aber man kauft oft mehr Items, als man einzeln je gekauft hätte. Ein Bundle mit Direktpreis umgeht zudem den V‑Bucks-Kauf und verschleiert den Vergleich."
+      }
+    ]
+  },
+  {
+    id: "crew",
+    icon: "fa-crown",
+    color: "#fbbf24",
+    title: "Fortnite Crew",
+    tagline: "Das monatliche Abo-Modell",
+    intro: "<strong>Fortnite Crew</strong> ist ein monatliches Abonnement (seit Dezember 2020). Statt Einzelkäufen zahlt man einen festen Betrag pro Monat und bekommt ein Paket – das klassische \"Netflix für Skins\"-Modell mit planbaren Einnahmen für Epic.",
+    sections: [
+      {
+        type: "facts",
+        title: "👑 Was im Abo steckt",
+        items: [
+          { label: "Preis", value: "11,99 € / Monat", note: "seit Einführung" },
+          { label: "V‑Bucks monatlich", value: "1.000 V‑Bucks", note: "ab Juni 2026 nur noch 800" },
+          { label: "Exklusiver Crew-Skin", value: "jeden Monat neu", note: "+ passende Cosmetics" },
+          { label: "Battle Pass inklusive", value: "automatisch", note: "aktueller Season-Pass" }
+        ]
+      },
+      {
+        type: "timeline",
+        title: "📜 Wie das Abo immer mehr bündelte",
+        items: [
+          { date: "Dez 2020", label: "Start der Crew", desc: "Battle Pass + 1.000 V‑Bucks + monatlicher Skin." },
+          { date: "April 2023", label: "Rocket Pass dazu", desc: "Rocket-League-Belohnungen wurden eingebunden (Cross-Game)." },
+          { date: "Dez 2024", label: "Music-, LEGO- & OG-Pass dazu", desc: "Das Abo umfasst nun fast alle Modi – und wird für deren Premium-Belohnungen teils Pflicht." },
+          { date: "Nov 2025", label: "Teil von Xbox Game Pass Ultimate", desc: "Crew wurde in ein weiteres Abo eingebettet." }
+        ]
+      },
+      {
+        type: "fomo",
+        title: "⚠️ Die Abo-Falle",
+        body: "Seit Dezember 2024 gilt: Kündigt man die Crew, kann man Premium-Pass-Belohnungen <strong>nicht mehr freischalten</strong>. Das bindet Spieler langfristig – typisches Abo-Lock-in."
+      }
+    ]
+  },
+  {
+    id: "cars",
+    icon: "fa-car-side",
+    color: "#38bdf8",
+    title: "Autos & Cross-Game",
+    tagline: "Lizenzierte Fahrzeuge zu Auto-Preisen",
+    intro: "Seit Dezember 2023 verkauft Fortnite <strong>lizenzierte, echte Automarken</strong> als fahrbare Karosserien – BMW, McLaren, Tesla, Mercedes, Nissan u. v. m. Das Besondere: Diese Autos funktionieren <strong>Cross-Game</strong> und tauchen teils auch in Rocket League / Rocket Racing auf. Ein gemeinsames Inventar über mehrere Spiele.",
+    sections: [
+      {
+        type: "text",
+        title: "🔗 Ein Inventar über mehrere Spiele",
+        body: "Epic besitzt sowohl Fortnite als auch Rocket League (Studio Psyonix). Gekaufte Fahrzeug-Cosmetics lassen sich über die Epic-Modi hinweg nutzen – das erhöht den gefühlten Wert und bindet an das gesamte Ökosystem."
+      },
+      {
+        type: "facts",
+        title: "🚗 Beispiele & gefühlt hohe Preise",
+        items: [
+          { label: "Lizenz-Auto (Karosserie)", value: "oft 1.500 – 2.500 V‑Bucks", note: "≈ 13 – 22 €" },
+          { label: "Auto-Bundle mit Extras", value: "bis ~2.800 V‑Bucks", note: "Wraps, Räder, Emotes" },
+          { label: "BMW / McLaren / Tesla", value: "voll lizenziert", note: "detailgetreu nachgebaut" }
+        ]
+      },
+      {
+        type: "fomo",
+        body: "Für ein rein <strong>kosmetisches</strong> Auto (kein Spielvorteil!) über 20 € zu zahlen, zeigt, wie weit die Preise gestiegen sind. Die echten Markennamen verleihen künstlichen Premium-Wert."
+      }
+    ]
+  },
+  {
+    id: "lego",
+    icon: "fa-cubes",
+    color: "#f59e0b",
+    title: "LEGO Fortnite",
+    tagline: "Hohe Preise für Bausets & Styles",
+    intro: "Seit Dezember 2023 gibt es <strong>LEGO Fortnite</strong> – ein eigener Survival-/Bau-Modus in Kooperation mit der LEGO-Gruppe. Auch hier wird monetarisiert: über LEGO-Styles für Skins, eigene Bausets und den LEGO-Pass.",
+    sections: [
+      {
+        type: "facts",
+        title: "🧱 Was hier Geld kostet",
+        items: [
+          { label: "LEGO-Styles für Skins", value: "im Shop / Pass", note: "verwandeln Skins in Minifiguren" },
+          { label: "LEGO-Bausets / Dekor", value: "teils hohe Preise", note: "Bauteile für die eigene Welt" },
+          { label: "LEGO-Pass", value: "eigener Pass", note: "via Crew oder einzeln" }
+        ]
+      },
+      {
+        type: "text",
+        title: "🏗️ Doppelte Marke, doppelter Reiz",
+        body: "LEGO und Fortnite sind zwei Kindheits-Magneten. Die Kombination spricht eine sehr junge Zielgruppe an – und rechtfertigt (in den Augen mancher Käufer) auch hohe Preise für rein optische Bauten."
+      },
+      {
+        type: "fomo",
+        body: "Wie bei allen Pässen gilt: Ohne aktives Crew-Abo können LEGO-Pass-Premium-Belohnungen verfallen."
+      }
+    ]
+  },
+  {
+    id: "musicfestival",
+    icon: "fa-music",
+    color: "#a78bfa",
+    title: "Fortnite Festival / Music",
+    tagline: "Jam Tracks – kaufen oder gratis würfeln",
+    intro: "<strong>Fortnite Festival</strong> (entwickelt von Harmonix, den Machern von Rock Band) ist ein Rhythmus-Spiel. Songs heißen <strong>\"Jam Tracks\"</strong>. Interessant: Hier gibt es sowohl bezahlte als auch <strong>kostenlose</strong> Musik.",
+    sections: [
+      {
+        type: "text",
+        title: "🎵 Preis vs. Gratis-Auswahl",
+        body: "Jam Tracks lassen sich einzeln im Shop kaufen. Gleichzeitig rotiert eine <strong>kostenlose Zufallsauswahl</strong> an Songs, die man gratis spielen kann. Das ist ungewöhnlich fair – dient aber auch als Köder, um den Modus (und die kaufbaren Tracks) auszuprobieren."
+      },
+      {
+        type: "facts",
+        title: "🎸 So wird verdient",
+        items: [
+          { label: "Jam Track (Song)", value: "meist ~500 V‑Bucks", note: "≈ 4,50 € pro Lied" },
+          { label: "Kostenlose Rotation", value: "0 V‑Bucks", note: "wechselnde Zufallsauswahl" },
+          { label: "Music Pass", value: "eigener Pass", note: "Instrumente, Outfits, Tracks" },
+          { label: "Instrumente & Mikros", value: "Cosmetics", note: "optische Gitarren etc." }
+        ]
+      },
+      {
+        type: "good",
+        title: "✅ Fair-Faktor",
+        body: "Die kostenlose Song-Rotation lässt jeden mitspielen, ohne zu zahlen – einer der spielerfreundlichsten Teile der Monetarisierung."
+      },
+      {
+        type: "fomo",
+        body: "Wer einen bestimmten Lieblingssong dauerhaft will, muss ihn kaufen. Bei ~4,50 € pro Lied summiert sich das schnell zu Streaming-Abo-Preisen."
+      }
+    ]
+  },
+  {
+    id: "refund",
+    icon: "fa-rotate-left",
+    color: "#34d399",
+    title: "Refund-Policy & FTC",
+    tagline: "Rückgabe-Regeln & das 520-Mio-Urteil",
+    intro: "Kann man Käufe zurückgeben? Nur sehr begrenzt. Fortnites Rückerstattungs-Regeln und die berühmte <strong>FTC-Strafe</strong> sind zentral, um die Monetarisierung kritisch zu verstehen.",
+    sections: [
+      {
+        type: "facts",
+        title: "↩️ Die Rückgabe-Regeln",
+        items: [
+          { label: "Selbst-Rückerstattung", value: "3 Tickets", note: "nur wenige Käufe pro Konto überhaupt erstattbar" },
+          { label: "Bedingung", value: "Item kaum genutzt", note: "nicht bei allem möglich" },
+          { label: "Battle Pass / V‑Bucks", value: "nicht erstattbar", note: "generell ausgeschlossen" },
+          { label: "Crew-Abo", value: "einmalige Sonderregel", note: "V‑Bucks-Rückgabe bei Pass-Kauf < 14 Tage" }
+        ]
+      },
+      {
+        type: "text",
+        title: "⚖️ Das FTC-Verfahren (USA)",
+        body: "Die US-Handelsbehörde <strong>FTC</strong> warf Epic \"Dark Patterns\" vor: verwirrende Kauf-Buttons, mit denen Nutzer <strong>ungewollt</strong> Geld ausgaben, sowie unzureichender Kinderschutz (Verstoß gegen das Datenschutzgesetz COPPA)."
+      },
+      {
+        type: "facts",
+        title: "💸 Die Rekord-Strafe (2022/23)",
+        items: [
+          { label: "Gesamtsumme", value: "520 Mio. $", note: "Rekord im Gaming" },
+          { label: "Für Rückerstattungen", value: "245 Mio. $", note: "an geschädigte Spieler" },
+          { label: "Kinderschutz-Strafe", value: "275 Mio. $", note: "COPPA-Verstoß" }
+        ]
+      },
+      {
+        type: "good",
+        title: "✅ Was sich dadurch besserte",
+        body: "Infolge des Verfahrens musste Epic Kauf-Abläufe klarer gestalten, Echtgeld-Preise deutlicher zeigen und einen \"Hold-to-Purchase\"-Bestätigungsschritt einführen, um Fehlkäufe zu verhindern."
+      }
+    ]
+  },
+  {
+    id: "cosmetictimeline",
+    icon: "fa-timeline",
+    color: "#22d3ee",
+    title: "Cosmetics-Zeitstrahl",
+    tagline: "Wann kam welche neue Kauf-Kategorie?",
+    intro: "Fortnite hat über die Jahre immer <strong>neue Arten</strong> von Cosmetics eingeführt – jede eine neue Einnahmequelle. Dieser Zeitstrahl zeigt, wann welche Kategorie dazukam.",
+    sections: [
+      {
+        type: "timeline",
+        title: "📜 Von Emotes bis Autos",
+        items: [
+          { date: "Season 2 (2018)", label: "Battle Pass & erste Emotes", desc: "Der Grundstein – Tänze wurden zum Kult." },
+          { date: "Season 4", label: "Rückenbling & Sprays", desc: "Mystery-Rewards, Ladebildschirme." },
+          { date: "Season 6", label: "Pets & Lobby-Musik", desc: "Niedliche Begleiter am Rücken – rein optisch." },
+          { date: "Season 7", label: "Waffen-Wraps", desc: "Erstmals Lackierungen für Waffen & Fahrzeuge." },
+          { date: "Season 8", label: "Reaktive Skins & Traversal-Emotes", desc: "Skins, die sich im Kampf verändern." },
+          { date: "Dez 2023", label: "Lizenz-Autos", desc: "Echte Automarken als fahrbare Cosmetics." },
+          { date: "Dez 2023", label: "LEGO-Styles", desc: "Skins als LEGO-Minifiguren." },
+          { date: "2024", label: "Jam Tracks (Musik) & Kicks", desc: "Kaufbare Songs im Festival; echte Sneaker-Marken (Nike, adidas) als \"Kicks\"." },
+          { date: "März 2026", label: "Großer Preis-Anstieg", desc: "V‑Bucks +20 %, Battle Pass nicht mehr selbsttragend – Spieler-Proteste." }
+        ]
+      }
+    ]
+  }
+];
+
+
 let currentQuestions = [];
 let currentIndex = 0;
 let countBelieve = 0; // Correct guesses (Richtig)
@@ -934,6 +1280,137 @@ let activeFilter = 'all';
 
 function initEncyclopedia() {
     renderEncyclopediaGrid();
+    renderMonetizationGrid();
+}
+
+/* ==========================================
+   Monetization Encyclopedia Operations
+   ========================================== */
+
+// Render the grid of monetization method cards
+function renderMonetizationGrid() {
+    const grid = document.getElementById('monetization-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+
+    monetizationTopics.forEach(topic => {
+        const card = document.createElement('div');
+        card.className = 'monet-card';
+        card.style.setProperty('--card-accent', topic.color);
+        card.innerHTML = `
+            <div class="monet-card-icon" style="color:${topic.color}; background:${topic.color}1a; border-color:${topic.color}40;">
+                <i class="fa-solid ${topic.icon}"></i>
+            </div>
+            <div class="monet-card-text">
+                <h3>${topic.title}</h3>
+                <p class="monet-card-tagline">${topic.tagline}</p>
+            </div>
+            <span class="monet-card-arrow" style="color:${topic.color};">
+                Mehr erfahren <i class="fa-solid fa-arrow-right"></i>
+            </span>
+        `;
+        card.addEventListener('click', () => openMonetModal(topic));
+        grid.appendChild(card);
+    });
+}
+
+// Build the inner HTML for a single content block/section
+function buildMonetSection(section, accent) {
+    const heading = section.title ? `<h4 class="monet-sec-title">${section.title}</h4>` : '';
+
+    switch (section.type) {
+        case 'text':
+            return `<div class="monet-sec">${heading}<p class="monet-sec-body">${section.body}</p></div>`;
+
+        case 'list': {
+            const lis = section.items.map(it => `<li>${it}</li>`).join('');
+            return `<div class="monet-sec">${heading}<ul class="monet-sec-list">${lis}</ul></div>`;
+        }
+
+        case 'facts': {
+            const rows = section.items.map(it => `
+                <div class="monet-fact">
+                    <span class="monet-fact-label">${it.label}</span>
+                    <span class="monet-fact-value">${it.value}</span>
+                    ${it.note ? `<span class="monet-fact-note">${it.note}</span>` : ''}
+                </div>
+            `).join('');
+            return `<div class="monet-sec">${heading}<div class="monet-facts">${rows}</div></div>`;
+        }
+
+        case 'prices': {
+            const rows = section.items.map(it => `
+                <div class="monet-price">
+                    <span class="monet-price-name">${it.name}</span>
+                    <span class="monet-price-tags">
+                        ${it.vbucks ? `<span class="monet-tag-vbucks">${it.vbucks} V‑Bucks</span>` : ''}
+                        ${it.euro ? `<span class="monet-tag-euro">${it.euro}</span>` : ''}
+                    </span>
+                    ${it.note ? `<span class="monet-price-note">${it.note}</span>` : ''}
+                </div>
+            `).join('');
+            return `<div class="monet-sec">${heading}<div class="monet-prices">${rows}</div></div>`;
+        }
+
+        case 'timeline': {
+            const items = section.items.map(it => `
+                <div class="monet-tl-item">
+                    <div class="monet-tl-dot" style="background:${accent};"></div>
+                    <div class="monet-tl-content">
+                        <span class="monet-tl-date">${it.date}</span>
+                        <span class="monet-tl-label">${it.label}</span>
+                        ${it.desc ? `<span class="monet-tl-desc">${it.desc}</span>` : ''}
+                    </div>
+                </div>
+            `).join('');
+            return `<div class="monet-sec">${heading}<div class="monet-timeline" style="--tl-accent:${accent};">${items}</div></div>`;
+        }
+
+        case 'fomo':
+            return `<div class="monet-callout monet-callout-warn">
+                        ${section.title ? `<strong>${section.title}</strong>` : '<strong>⚠️ Achtung</strong>'}
+                        <p>${section.body}</p>
+                    </div>`;
+
+        case 'good':
+            return `<div class="monet-callout monet-callout-good">
+                        ${section.title ? `<strong>${section.title}</strong>` : '<strong>✅ Fair</strong>'}
+                        <p>${section.body}</p>
+                    </div>`;
+
+        default:
+            return '';
+    }
+}
+
+// Open the monetization detail modal for a topic
+function openMonetModal(topic) {
+    const modal = document.getElementById('monet-modal');
+    const iconEl = document.getElementById('monet-modal-icon');
+    const titleEl = document.getElementById('monet-modal-title');
+    const taglineEl = document.getElementById('monet-modal-tagline');
+    const bodyEl = document.getElementById('monet-modal-body');
+
+    iconEl.innerHTML = `<i class="fa-solid ${topic.icon}"></i>`;
+    iconEl.style.color = topic.color;
+    iconEl.style.background = topic.color + '1a';
+    iconEl.style.borderColor = topic.color + '40';
+
+    titleEl.textContent = topic.title;
+    taglineEl.textContent = topic.tagline;
+
+    // Intro paragraph + all sections
+    let html = `<p class="monet-modal-intro">${topic.intro}</p>`;
+    topic.sections.forEach(sec => {
+        html += buildMonetSection(sec, topic.color);
+    });
+    bodyEl.innerHTML = html;
+    bodyEl.scrollTop = 0;
+
+    // Accent the modal border/title
+    document.querySelector('.monet-modal-content').style.setProperty('--modal-accent', topic.color);
+
+    modal.classList.add('active');
 }
 
 function renderEncyclopediaGrid() {
@@ -1064,6 +1541,43 @@ filterTabs.forEach(tab => {
     });
 });
 
+// Encyclopedia Sub-Tab switching (Monetarisierung <-> Collabs)
+const encSubtabs = document.querySelectorAll('.enc-subtab');
+encSubtabs.forEach(tab => {
+    tab.addEventListener('click', () => {
+        const target = tab.getAttribute('data-subtab');
+        // Toggle active button
+        encSubtabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        // Toggle panels
+        document.querySelectorAll('.enc-subpanel').forEach(p => p.classList.remove('active'));
+        const panel = document.getElementById('enc-sub-' + target);
+        if (panel) panel.classList.add('active');
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+});
+
+// Monetization Modal closing actions
+const monetModal = document.getElementById('monet-modal');
+const monetModalClose = document.querySelector('.close-monet-modal');
+if (monetModalClose) {
+    monetModalClose.addEventListener('click', () => {
+        monetModal.classList.remove('active');
+    });
+}
+window.addEventListener('click', (e) => {
+    if (e.target === monetModal) {
+        monetModal.classList.remove('active');
+    }
+});
+// Close any open modal with Escape
+window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+        detailModal.classList.remove('active');
+        if (monetModal) monetModal.classList.remove('active');
+    }
+});
+
 // Initialize on load
 initEncyclopedia();
 

fortnite-experience/collab_game.html

@@ -204,33 +204,67 @@
         <!-- ENCYCLOPEDIA SCREEN -->
         <section id="encyclopedia-view" class="view">
             <div class="encyclopedia-header-section">
-                <h2>Die Fortnite Absurditäts-Enzyklopädie</h2>
-                <p>Durchsuche alle 50 realen Marken, Promis und Produkte und vergleiche sie mit ihrer Fortnite-Version.</p>
+                <h2>Die Fortnite-Enzyklopädie</h2>
+                <p>Das große Nachschlagewerk: Wie genau verdient Fortnite eigentlich sein Geld? Und welche absurden Collabs gibt es? Wähle einen Bereich.</p>
             </div>
 
-            <!-- Controls (Filters) -->
-            <div class="encyclopedia-controls" style="justify-content: center;">
-                <div class="filter-tabs">
-                    <button class="filter-tab active" data-filter="all">Alle (50)</button>
-                    <button class="filter-tab" data-filter="fashion"><i class="fa-solid fa-shoe-prints"></i> Mode</button>
-                    <button class="filter-tab" data-filter="car"><i class="fa-solid fa-car"></i> Autos</button>
-                    <button class="filter-tab" data-filter="celebrity"><i class="fa-solid fa-user"></i> Promis & Sport</button>
-                    <button class="filter-tab" data-filter="horror"><i class="fa-solid fa-ghost"></i> Horror</button>
-                    <button class="filter-tab" data-filter="popculture"><i class="fa-solid fa-gamepad"></i> Kultur & Games</button>
+            <!-- Sub-Tab Navigation -->
+            <div class="enc-subtabs">
+                <button class="enc-subtab active" data-subtab="monetization">
+                    <i class="fa-solid fa-coins"></i> Monetarisierung
+                </button>
+                <button class="enc-subtab" data-subtab="collabs">
+                    <i class="fa-solid fa-handshake-angle"></i> Collabs
+                </button>
+            </div>
+
+            <!-- ================= SUB-PANEL: MONETARISIERUNG ================= -->
+            <div id="enc-sub-monetization" class="enc-subpanel active">
+                <div class="monet-intro">
+                    <div class="monet-intro-icon"><i class="fa-solid fa-sack-dollar"></i></div>
+                    <div>
+                        <h3>Wie Fortnite Milliarden verdient</h3>
+                        <p>Fortnite ist <strong>kostenlos</strong> – und trotzdem eines der umsatzstärksten Spiele der Welt (über 9 Mrd.&nbsp;$ allein bis Ende 2019). Der Trick: Dutzende clevere, teils umstrittene Monetarisierungs-Methoden. Alle bezahlt man mit der Kunstwährung <strong class="hl-vbucks">V‑Bucks</strong>. Tippe auf eine Methode, um alles darüber zu erfahren.</p>
+                        <div class="vbucks-ref">
+                            <i class="fa-solid fa-circle-info"></i>
+                            <span><strong>Umrechnung:</strong> 1.000 V‑Bucks ≈ 8,99&nbsp;€. Seit dem großen Preis-Anstieg im März 2026 kosten 800 V‑Bucks rund 10&nbsp;$.</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Monetization Grid (dynamically filled) -->
+                <div id="monetization-grid" class="monetization-grid">
+                    <!-- Dynamically filled -->
                 </div>
             </div>
 
-            <!-- Grid -->
-            <div id="encyclopedia-grid" class="encyclopedia-grid">
-                <!-- Dynamically filled -->
-            </div>
+            <!-- ================= SUB-PANEL: COLLABS ================= -->
+            <div id="enc-sub-collabs" class="enc-subpanel">
+                <!-- Controls (Filters) -->
+                <div class="encyclopedia-controls" style="justify-content: center;">
+                    <div class="filter-tabs">
+                        <button class="filter-tab active" data-filter="all">Alle (50)</button>
+                        <button class="filter-tab" data-filter="fashion"><i class="fa-solid fa-shoe-prints"></i> Mode</button>
+                        <button class="filter-tab" data-filter="car"><i class="fa-solid fa-car"></i> Autos</button>
+                        <button class="filter-tab" data-filter="celebrity"><i class="fa-solid fa-user"></i> Promis & Sport</button>
+                        <button class="filter-tab" data-filter="horror"><i class="fa-solid fa-ghost"></i> Horror</button>
+                        <button class="filter-tab" data-filter="popculture"><i class="fa-solid fa-gamepad"></i> Kultur & Games</button>
+                    </div>
+                </div>
 
-            <!-- Stats in Footer of Encyclopedia -->
-            <div class="encyclopedia-stats">
-                <span>Einträge gesamt: <strong id="enc-total-count">50</strong></span>
+                <!-- Grid -->
+                <div id="encyclopedia-grid" class="encyclopedia-grid">
+                    <!-- Dynamically filled -->
+                </div>
+
+                <!-- Stats in Footer of Encyclopedia -->
+                <div class="encyclopedia-stats">
+                    <span>Einträge gesamt: <strong id="enc-total-count">50</strong></span>
+                </div>
             </div>
         </section>
 
+
         <footer>
             Master Medien- und Bildungsmanagement
         </footer>
@@ -288,6 +322,23 @@
         </div>
     </div>
 
+    <!-- Monetarisierungs-Detail-Modal (Enzyklopädie) -->
+    <div id="monet-modal" class="modal monet-modal">
+        <div class="modal-content monet-modal-content">
+            <span class="close-monet-modal">&times;</span>
+            <div class="monet-modal-header">
+                <span id="monet-modal-icon" class="monet-modal-icon"><i class="fa-solid fa-coins"></i></span>
+                <div class="monet-modal-heading">
+                    <h2 id="monet-modal-title">Titel</h2>
+                    <p id="monet-modal-tagline">Kurzbeschreibung</p>
+                </div>
+            </div>
+            <div id="monet-modal-body" class="monet-modal-body">
+                <!-- Dynamically filled -->
+            </div>
+        </div>
+    </div>
+
     <!-- Core App JS -->
     <script src="app.js"></script>
 </body>