Firmenfeier \u2013 Aufl\u00f6sungstest<\/title>\r\n\r\n<style>\r\n :root{\r\n --quiz-bg: #DFE3E4C9;\r\n --quiz-text: #2F3C47;\r\n --quiz-font-size: 18px;\r\n\r\n --sage: #9caf88;\r\n --start-btn-bg: #eef5ec;\r\n --start-btn-bg-hover:#e3ecd5;\r\n\r\n --outro-btn-bg:#2F3C47;\r\n --outro-btn-bg-hover:#24303a;\r\n }\r\n\r\n \/* \u2705 Damit scrollIntoView sanft ist *\/\r\n html{ scroll-behavior:smooth; }\r\n\r\n .start-screen { text-align:center; max-width:1300px; margin:1rem auto; }\r\n .start-button-wrapper{ display:flex; justify-content:center; margin-top:1.8rem; }\r\n .start-button{\r\n padding:1.05rem 2rem; border-radius:16px; border:1px solid #cfd8cc;\r\n background:var(--start-btn-bg); color:var(--quiz-text); cursor:pointer;\r\n font-size:1.4rem; font-weight:700; transition:background .2s ease, transform .1s ease;\r\n }\r\n .start-button:hover{ background:var(--start-btn-bg-hover); transform:translateY(-1px); }\r\n\r\n .quiz-box{\r\n max-width:13000px; margin:1rem auto; padding:1rem 1.25rem;\r\n border:1px solid #2F3C47; border-radius:14px;\r\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n background:var(--quiz-bg); color:var(--quiz-text); font-size:var(--quiz-font-size);\r\n }\r\n .quiz-title{ margin:0 0 .5rem 0; font-size:1.4rem; font-weight:700; }\r\n\r\n .quiz-progress{ margin:.5rem 0 1rem 0; font-size:.95rem; }\r\n .quiz-progress .bar{ height:8px; background:#eee; border-radius:999px; overflow:hidden; }\r\n .quiz-progress .bar-fill{ height:100%; background:var(--sage); transition:width .25s ease; width:10%; }\r\n\r\n fieldset{ border:0; padding:0; margin:0; }\r\n legend{ font-weight:700; margin-bottom:.5rem; font-size:1.1rem; }\r\n label{\r\n display:block; padding:.55rem .65rem; border:1px solid #ddd; border-radius:12px;\r\n margin:.45rem 0; cursor:pointer; transition:background-color .2s;\r\n }\r\n label:hover{ background:#f3f4f6; }\r\n input[type=\"radio\"]{ margin-right:.6rem; }\r\n\r\n .quiz-actions{ display:flex; gap:.5rem; margin-top:1rem; }\r\n button{\r\n padding:.65rem 1rem; border-radius:12px; border:1px solid #ccc;\r\n background:#f7f7f7; cursor:pointer; font-size:1rem;\r\n }\r\n button[disabled]{ opacity:.55; cursor:not-allowed; }\r\n .btn-restart{ background:var(--start-btn-bg); border-color:#b8d7b0; }\r\n\r\n .quiz-result{\r\n margin-top:1rem; padding:1rem; border:1px solid #e5e5e5; border-radius:12px; background:#fafafa;\r\n }\r\n .quiz-result ul{ margin-top:.6rem; padding-left:1.2rem; }\r\n .quiz-result li{ margin-bottom:.9rem; }\r\n\r\n .answer-correct{\r\n background:#ecfdf5; border-left:4px solid #22c55e; padding:.45rem .65rem;\r\n border-radius:10px; margin-top:.35rem;\r\n }\r\n .answer-wrong{\r\n background:#fef2f2; border-left:4px solid #ef4444; padding:.45rem .65rem;\r\n border-radius:10px; margin-top:.35rem;\r\n }\r\n\r\n .result-cta{ margin-top:1.5rem; display:flex; justify-content:center; }\r\n .result-button{\r\n display:inline-block; padding:.8rem 1.6rem; border-radius:14px;\r\n background:var(--outro-btn-bg); color:#fff; text-decoration:none; font-weight:700;\r\n transition:background-color .2s ease, transform .1s ease;\r\n }\r\n .result-button:hover{ background:var(--outro-btn-bg-hover); transform:translateY(-1px); }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"quizAppFg\">\r\n \r\n <audio id=\"bgMusicFg\" loop preload=\"none\">\r\n <source src=\"https:\/\/magnificum.net\/wp-content\/uploads\/2025\/12\/suspense-cinematic-atmosphere-255436.mp3\" type=\"audio\/mpeg\">\r\n <\/audio>\r\n\r\n <div id=\"startScreenFg\" class=\"start-screen\">\r\n <div class=\"start-button-wrapper\">\r\n <button id=\"btnStartFg\" class=\"start-button\">Zum Aufl\u00f6sungstest<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"quizFg\" class=\"quiz-box\" lang=\"de\" hidden>\r\n <h2 class=\"quiz-title\">Jetzt wird noch mal volle Konzentration gefordert, um den Fall abzuschlie\u00dfen.\r\n MAGNIFICUM w\u00fcnscht euch viel Erfolg!<\/h2>\r\n\r\n <div class=\"quiz-progress\" aria-live=\"polite\">\r\n <span id=\"progressTextFg\">Frage 1 von 4<\/span>\r\n <div class=\"bar\">\r\n <div class=\"bar-fill\" id=\"progressBarFg\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"quizFormFg\">\r\n <fieldset class=\"quiz-step\" data-step=\"1\" hidden>\r\n <legend>1) Wer hat Louis Bouchard get\u00f6tet?<\/legend>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Marie Moreau<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Olivier Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Chlo\u00e9 Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"richtig\"> Val\u00e9rie Dupont<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Antoine Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Tobias Schmidt<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"2\" hidden>\r\n <legend>2) Wer hat Marie Moreau get\u00f6tet?<\/legend>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Louis Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Margaux Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"richtig\"> Chlo\u00e9 Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Antoine Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Val\u00e9rie Dupont<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Olivier Bouchard<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"3\" hidden>\r\n <legend>3) Was war das Motiv am Mord an Marie?<\/legend>\r\n <label><input type=\"radio\" name=\"q3\" value=\"richtig\"> Rache und Selbstschutz<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Eifersucht<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Habgier<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Lustmord<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"4\" hidden>\r\n <legend>4) Wer sind die drei Personen, die \u00fcber das Smart-Home-System nachts im Untergeschoss erfasst wurden?<\/legend>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Tobias Schmidt, Iluka Jones und Olivier Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Antoine Bouchard, Chloe Bouchard und Louis Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Val\u00e9rie Dupont, Marie Moreau und Louis Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"richtig\"> Chlo\u00e9 Bouchard, Louis Bouchard und Marie Moreau<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Chlo\u00e9 Bouchard, Olivier Bouchard und Antoine Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Val\u00e9rie Dupont, Margaux Bouchard und Marie Moreau<\/label>\r\n <\/fieldset>\r\n <\/form>\r\n\r\n <div class=\"quiz-actions\">\r\n <button type=\"button\" id=\"btnNextFg\" disabled>Weiter<\/button>\r\n <button type=\"button\" id=\"btnRestartFg\" class=\"btn-restart\" hidden>Nochmal spielen<\/button>\r\n <\/div>\r\n\r\n <div id=\"resultFg\" class=\"quiz-result\" hidden aria-live=\"polite\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n const startScreen = document.getElementById('startScreenFg');\r\n const btnStart = document.getElementById('btnStartFg');\r\n const quiz = document.getElementById('quizFg');\r\n const quizForm = document.getElementById('quizFormFg');\r\n\r\n const steps = Array.from(quizForm.querySelectorAll('.quiz-step'));\r\n\r\n const btnNext = document.getElementById('btnNextFg');\r\n const btnRestart = document.getElementById('btnRestartFg');\r\n const resultBox = document.getElementById('resultFg');\r\n const progressText = document.getElementById('progressTextFg');\r\n const progressBar = document.getElementById('progressBarFg');\r\n\r\n const bgMusic = document.getElementById('bgMusicFg');\r\n const MUSIC_DEFAULT_VOL = 0.35;\r\n\r\n const questionTexts = [\r\n 'Wer hat Louis Bouchard get\u00f6tet?',\r\n 'Wer hat Marie Moreau get\u00f6tet?',\r\n 'Was war das Motiv am Mord an Marie?',\r\n 'Wer sind die drei Personen, die \u00fcber das Smart-Home-System nachts im Untergeschoss erfasst wurden?'\r\n ];\r\n const correctAnswers = [\r\n 'Val\u00e9rie Dupont',\r\n 'Chlo\u00e9 Bouchard',\r\n 'Rache und Selbstschutz',\r\n 'Chlo\u00e9 Bouchard, Louis Bouchard und Marie Moreau'\r\n ];\r\n\r\n let current = 0;\r\n const total = steps.length;\r\n\r\n btnStart.addEventListener('click', () => {\r\n startScreen.style.display = 'none';\r\n quiz.hidden = false;\r\n\r\n \/\/ \u2705 Musik starten (nur im Click-Handler -> Autoplay-sicher)\r\n if (bgMusic) {\r\n bgMusic.volume = MUSIC_DEFAULT_VOL;\r\n bgMusic.play().catch(() => {});\r\n }\r\n\r\n toggleStep(0, true);\r\n updateProgress();\r\n\r\n \/\/ \u2705 Quiz mittig in den Viewport scrollen + optional Fokus\r\n requestAnimationFrame(() => {\r\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n const firstRadio = steps[0].querySelector('input[type=\"radio\"]');\r\n if (firstRadio) firstRadio.focus({ preventScroll: true });\r\n });\r\n });\r\n\r\n steps.forEach((fs) => {\r\n fs.addEventListener('change', () => {\r\n btnNext.disabled = !getSelected(fs);\r\n });\r\n });\r\n\r\n btnNext.addEventListener('click', () => {\r\n const fs = steps[current];\r\n if (!getSelected(fs)) return;\r\n\r\n if (current === total - 1) return showResult();\r\n\r\n toggleStep(current, false);\r\n current += 1;\r\n toggleStep(current, true);\r\n updateProgress();\r\n btnNext.disabled = !getSelected(steps[current]);\r\n\r\n \/\/ \u2705 bei \"Weiter\" mittig halten\r\n requestAnimationFrame(() => {\r\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n });\r\n });\r\n\r\n btnRestart.addEventListener('click', resetQuiz);\r\n\r\n function getSelected(fieldset) {\r\n return fieldset.querySelector('input[type=\"radio\"]:checked');\r\n }\r\n function toggleStep(index, show) {\r\n if (!steps[index]) return;\r\n steps[index].hidden = !show;\r\n }\r\n function updateProgress() {\r\n const stepNr = current + 1;\r\n progressText.textContent = `Frage ${stepNr} von ${total}`;\r\n progressBar.style.width = Math.round((stepNr \/ total) * 100) + '%';\r\n }\r\n\r\n let fadeTimer = null;\r\n function fadeOutMusic(durationMs = 1400) {\r\n if (!bgMusic || bgMusic.paused) return;\r\n if (fadeTimer) { clearInterval(fadeTimer); fadeTimer = null; }\r\n\r\n const startVol = bgMusic.volume;\r\n const stepsN = 28;\r\n const stepTime = Math.max(25, Math.floor(durationMs \/ stepsN));\r\n let i = 0;\r\n\r\n fadeTimer = setInterval(() => {\r\n i += 1;\r\n const t = i \/ stepsN;\r\n const v = Math.max(0, startVol * (1 - t));\r\n bgMusic.volume = v;\r\n\r\n if (i >= stepsN || v <= 0.001) {\r\n clearInterval(fadeTimer);\r\n fadeTimer = null;\r\n bgMusic.pause();\r\n bgMusic.currentTime = 0;\r\n bgMusic.volume = MUSIC_DEFAULT_VOL;\r\n }\r\n }, stepTime);\r\n }\r\n\r\n function showResult() {\r\n let score = 0;\r\n let list = '<h3>Auswertung (gr\u00fcn = richtig, rot = falsch):<\/h3><ul>';\r\n\r\n steps.forEach((fs, i) => {\r\n const sel = getSelected(fs);\r\n const isCorrect = !!(sel && sel.value === 'richtig');\r\n if (isCorrect) score++;\r\n\r\n const playerText = sel ? sel.parentElement.textContent.trim() : 'Keine Antwort';\r\n\r\n list += `\r\n <li>\r\n <strong>${questionTexts[i]}<\/strong>\r\n <div class=\"${isCorrect ? 'answer-correct' : 'answer-wrong'}\">\r\n ${isCorrect ? '\u2714 Richtig \u2013 deine Antwort:' : '\u2718 Falsch \u2013 deine Antwort:'}\r\n ${playerText}\r\n <\/div>\r\n ${!isCorrect ? `\r\n <div class=\"answer-correct\">\r\n \u2714 Richtige Antwort: ${correctAnswers[i]}\r\n <\/div>` : ''}\r\n <\/li>\r\n `;\r\n });\r\n\r\n list += '<\/ul>';\r\n\r\n \/\/ \u2705 Musik sanft ausfaden beim Ergebnis\r\n fadeOutMusic(1400);\r\n\r\n steps[current].hidden = true;\r\n btnNext.hidden = true;\r\n btnRestart.hidden = false;\r\n progressText.textContent = 'Ergebnis';\r\n progressBar.style.width = '100%';\r\n\r\n const Prozent = Math.round((score \/ total) * 100);\r\n\r\n resultBox.innerHTML = `\r\n <strong>Du hast ${score} von ${total} richtig (${Prozent}%).<\/strong>\r\n ${list}\r\n <div class=\"result-cta\">\r\n <a href=\"https:\/\/magnificum.net\/fg-outro\" class=\"result-button\">H\u00f6rspiel Outro zum Fall<\/a>\r\n <\/div>\r\n `;\r\n resultBox.hidden = false;\r\n\r\n \/\/ \u2705 Ergebnis mittig anzeigen\r\n requestAnimationFrame(() => {\r\n resultBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n });\r\n }\r\n\r\n function resetQuiz() {\r\n quizForm.reset();\r\n steps.forEach((fs, i) => (fs.hidden = i !== 0));\r\n current = 0;\r\n btnNext.hidden = false;\r\n btnRestart.hidden = true;\r\n btnNext.disabled = true;\r\n resultBox.hidden = true;\r\n resultBox.innerHTML = '';\r\n updateProgress();\r\n\r\n \/\/ \u2705 Musik wieder starten (und ggf. laufenden Fade abbrechen)\r\n if (fadeTimer) { clearInterval(fadeTimer); fadeTimer = null; }\r\n if (bgMusic) {\r\n bgMusic.pause();\r\n bgMusic.currentTime = 0;\r\n bgMusic.volume = MUSIC_DEFAULT_VOL;\r\n bgMusic.play().catch(() => {});\r\n }\r\n\r\n \/\/ \u2705 Quiz wieder mittig\r\n requestAnimationFrame(() => {\r\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n const firstRadio = steps[0].querySelector('input[type=\"radio\"]');\r\n if (firstRadio) firstRadio.focus({ preventScroll: true });\r\n });\r\n }\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18bbd26 elementor-widget elementor-widget-spacer\" data-id=\"18bbd26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6f56c1 elementor-widget elementor-widget-text-editor\" data-id=\"e6f56c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><span style=\"color: #ffffff;\"><strong><a style=\"color: #ffffff;\" href=\"\/datenschutz\">DATENSCHUTZ<\/a>\u00a0 |\u00a0 <a style=\"color: #ffffff;\" href=\"\/impressum\">IMPRESSUM<\/a><\/strong><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Firmenfeier \u2013 Aufl\u00f6sungstest Zum Aufl\u00f6sungstest Jetzt wird noch mal volle Konzentration gefordert, um den Fall abzuschlie\u00dfen. MAGNIFICUM w\u00fcnscht euch viel Erfolg! Frage 1 von 4 1) Wer hat Louis Bouchard get\u00f6tet? Marie Moreau Olivier Bouchard Chlo\u00e9 Bouchard Val\u00e9rie Dupont Antoine Bouchard Tobias Schmidt 2) Wer hat Marie Moreau get\u00f6tet? Louis Bouchard Margaux Bouchard Chlo\u00e9 Bouchard Antoine Bouchard Val\u00e9rie Dupont Olivier Bouchard 3) Was war das Motiv am Mord an […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-19346","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/19346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/comments?post=19346"}],"version-history":[{"count":0,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/19346\/revisions"}],"wp:attachment":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/media?parent=19346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\t\t

\n\t\t\t

<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nFirmenfeier \u2013 Aufl\u00f6sungstest<\/title>\r\n\r\n<style>\r\n :root{\r\n --quiz-bg: #DFE3E4C9;\r\n --quiz-text: #2F3C47;\r\n --quiz-font-size: 18px;\r\n\r\n --sage: #9caf88;\r\n --start-btn-bg: #eef5ec;\r\n --start-btn-bg-hover:#e3ecd5;\r\n\r\n --outro-btn-bg:#2F3C47;\r\n --outro-btn-bg-hover:#24303a;\r\n }\r\n\r\n \/* \u2705 Damit scrollIntoView sanft ist *\/\r\n html{ scroll-behavior:smooth; }\r\n\r\n .start-screen { text-align:center; max-width:1300px; margin:1rem auto; }\r\n .start-button-wrapper{ display:flex; justify-content:center; margin-top:1.8rem; }\r\n .start-button{\r\n padding:1.05rem 2rem; border-radius:16px; border:1px solid #cfd8cc;\r\n background:var(--start-btn-bg); color:var(--quiz-text); cursor:pointer;\r\n font-size:1.4rem; font-weight:700; transition:background .2s ease, transform .1s ease;\r\n }\r\n .start-button:hover{ background:var(--start-btn-bg-hover); transform:translateY(-1px); }\r\n\r\n .quiz-box{\r\n max-width:13000px; margin:1rem auto; padding:1rem 1.25rem;\r\n border:1px solid #2F3C47; border-radius:14px;\r\n font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;\r\n background:var(--quiz-bg); color:var(--quiz-text); font-size:var(--quiz-font-size);\r\n }\r\n .quiz-title{ margin:0 0 .5rem 0; font-size:1.4rem; font-weight:700; }\r\n\r\n .quiz-progress{ margin:.5rem 0 1rem 0; font-size:.95rem; }\r\n .quiz-progress .bar{ height:8px; background:#eee; border-radius:999px; overflow:hidden; }\r\n .quiz-progress .bar-fill{ height:100%; background:var(--sage); transition:width .25s ease; width:10%; }\r\n\r\n fieldset{ border:0; padding:0; margin:0; }\r\n legend{ font-weight:700; margin-bottom:.5rem; font-size:1.1rem; }\r\n label{\r\n display:block; padding:.55rem .65rem; border:1px solid #ddd; border-radius:12px;\r\n margin:.45rem 0; cursor:pointer; transition:background-color .2s;\r\n }\r\n label:hover{ background:#f3f4f6; }\r\n input[type=\"radio\"]{ margin-right:.6rem; }\r\n\r\n .quiz-actions{ display:flex; gap:.5rem; margin-top:1rem; }\r\n button{\r\n padding:.65rem 1rem; border-radius:12px; border:1px solid #ccc;\r\n background:#f7f7f7; cursor:pointer; font-size:1rem;\r\n }\r\n button[disabled]{ opacity:.55; cursor:not-allowed; }\r\n .btn-restart{ background:var(--start-btn-bg); border-color:#b8d7b0; }\r\n\r\n .quiz-result{\r\n margin-top:1rem; padding:1rem; border:1px solid #e5e5e5; border-radius:12px; background:#fafafa;\r\n }\r\n .quiz-result ul{ margin-top:.6rem; padding-left:1.2rem; }\r\n .quiz-result li{ margin-bottom:.9rem; }\r\n\r\n .answer-correct{\r\n background:#ecfdf5; border-left:4px solid #22c55e; padding:.45rem .65rem;\r\n border-radius:10px; margin-top:.35rem;\r\n }\r\n .answer-wrong{\r\n background:#fef2f2; border-left:4px solid #ef4444; padding:.45rem .65rem;\r\n border-radius:10px; margin-top:.35rem;\r\n }\r\n\r\n .result-cta{ margin-top:1.5rem; display:flex; justify-content:center; }\r\n .result-button{\r\n display:inline-block; padding:.8rem 1.6rem; border-radius:14px;\r\n background:var(--outro-btn-bg); color:#fff; text-decoration:none; font-weight:700;\r\n transition:background-color .2s ease, transform .1s ease;\r\n }\r\n .result-button:hover{ background:var(--outro-btn-bg-hover); transform:translateY(-1px); }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"quizAppFg\">\r\n \r\n <audio id=\"bgMusicFg\" loop preload=\"none\">\r\n <source src=\"https:\/\/magnificum.net\/wp-content\/uploads\/2025\/12\/suspense-cinematic-atmosphere-255436.mp3\" type=\"audio\/mpeg\">\r\n <\/audio>\r\n\r\n <div id=\"startScreenFg\" class=\"start-screen\">\r\n <div class=\"start-button-wrapper\">\r\n <button id=\"btnStartFg\" class=\"start-button\">Zum Aufl\u00f6sungstest<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"quizFg\" class=\"quiz-box\" lang=\"de\" hidden>\r\n <h2 class=\"quiz-title\">Jetzt wird noch mal volle Konzentration gefordert, um den Fall abzuschlie\u00dfen.\r\n MAGNIFICUM w\u00fcnscht euch viel Erfolg!<\/h2>\r\n\r\n <div class=\"quiz-progress\" aria-live=\"polite\">\r\n <span id=\"progressTextFg\">Frage 1 von 4<\/span>\r\n <div class=\"bar\">\r\n <div class=\"bar-fill\" id=\"progressBarFg\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"quizFormFg\">\r\n <fieldset class=\"quiz-step\" data-step=\"1\" hidden>\r\n <legend>1) Wer hat Louis Bouchard get\u00f6tet?<\/legend>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Marie Moreau<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Olivier Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Chlo\u00e9 Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"richtig\"> Val\u00e9rie Dupont<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Antoine Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Tobias Schmidt<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"2\" hidden>\r\n <legend>2) Wer hat Marie Moreau get\u00f6tet?<\/legend>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Louis Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Margaux Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"richtig\"> Chlo\u00e9 Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Antoine Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Val\u00e9rie Dupont<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> Olivier Bouchard<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"3\" hidden>\r\n <legend>3) Was war das Motiv am Mord an Marie?<\/legend>\r\n <label><input type=\"radio\" name=\"q3\" value=\"richtig\"> Rache und Selbstschutz<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Eifersucht<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Habgier<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Lustmord<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"4\" hidden>\r\n <legend>4) Wer sind die drei Personen, die \u00fcber das Smart-Home-System nachts im Untergeschoss erfasst wurden?<\/legend>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Tobias Schmidt, Iluka Jones und Olivier Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Antoine Bouchard, Chloe Bouchard und Louis Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Val\u00e9rie Dupont, Marie Moreau und Louis Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"richtig\"> Chlo\u00e9 Bouchard, Louis Bouchard und Marie Moreau<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Chlo\u00e9 Bouchard, Olivier Bouchard und Antoine Bouchard<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Val\u00e9rie Dupont, Margaux Bouchard und Marie Moreau<\/label>\r\n <\/fieldset>\r\n <\/form>\r\n\r\n <div class=\"quiz-actions\">\r\n <button type=\"button\" id=\"btnNextFg\" disabled>Weiter<\/button>\r\n <button type=\"button\" id=\"btnRestartFg\" class=\"btn-restart\" hidden>Nochmal spielen<\/button>\r\n <\/div>\r\n\r\n <div id=\"resultFg\" class=\"quiz-result\" hidden aria-live=\"polite\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n const startScreen = document.getElementById('startScreenFg');\r\n const btnStart = document.getElementById('btnStartFg');\r\n const quiz = document.getElementById('quizFg');\r\n const quizForm = document.getElementById('quizFormFg');\r\n\r\n const steps = Array.from(quizForm.querySelectorAll('.quiz-step'));\r\n\r\n const btnNext = document.getElementById('btnNextFg');\r\n const btnRestart = document.getElementById('btnRestartFg');\r\n const resultBox = document.getElementById('resultFg');\r\n const progressText = document.getElementById('progressTextFg');\r\n const progressBar = document.getElementById('progressBarFg');\r\n\r\n const bgMusic = document.getElementById('bgMusicFg');\r\n const MUSIC_DEFAULT_VOL = 0.35;\r\n\r\n const questionTexts = [\r\n 'Wer hat Louis Bouchard get\u00f6tet?',\r\n 'Wer hat Marie Moreau get\u00f6tet?',\r\n 'Was war das Motiv am Mord an Marie?',\r\n 'Wer sind die drei Personen, die \u00fcber das Smart-Home-System nachts im Untergeschoss erfasst wurden?'\r\n ];\r\n const correctAnswers = [\r\n 'Val\u00e9rie Dupont',\r\n 'Chlo\u00e9 Bouchard',\r\n 'Rache und Selbstschutz',\r\n 'Chlo\u00e9 Bouchard, Louis Bouchard und Marie Moreau'\r\n ];\r\n\r\n let current = 0;\r\n const total = steps.length;\r\n\r\n btnStart.addEventListener('click', () => {\r\n startScreen.style.display = 'none';\r\n quiz.hidden = false;\r\n\r\n \/\/ \u2705 Musik starten (nur im Click-Handler -> Autoplay-sicher)\r\n if (bgMusic) {\r\n bgMusic.volume = MUSIC_DEFAULT_VOL;\r\n bgMusic.play().catch(() => {});\r\n }\r\n\r\n toggleStep(0, true);\r\n updateProgress();\r\n\r\n \/\/ \u2705 Quiz mittig in den Viewport scrollen + optional Fokus\r\n requestAnimationFrame(() => {\r\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n const firstRadio = steps[0].querySelector('input[type=\"radio\"]');\r\n if (firstRadio) firstRadio.focus({ preventScroll: true });\r\n });\r\n });\r\n\r\n steps.forEach((fs) => {\r\n fs.addEventListener('change', () => {\r\n btnNext.disabled = !getSelected(fs);\r\n });\r\n });\r\n\r\n btnNext.addEventListener('click', () => {\r\n const fs = steps[current];\r\n if (!getSelected(fs)) return;\r\n\r\n if (current === total - 1) return showResult();\r\n\r\n toggleStep(current, false);\r\n current += 1;\r\n toggleStep(current, true);\r\n updateProgress();\r\n btnNext.disabled = !getSelected(steps[current]);\r\n\r\n \/\/ \u2705 bei \"Weiter\" mittig halten\r\n requestAnimationFrame(() => {\r\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n });\r\n });\r\n\r\n btnRestart.addEventListener('click', resetQuiz);\r\n\r\n function getSelected(fieldset) {\r\n return fieldset.querySelector('input[type=\"radio\"]:checked');\r\n }\r\n function toggleStep(index, show) {\r\n if (!steps[index]) return;\r\n steps[index].hidden = !show;\r\n }\r\n function updateProgress() {\r\n const stepNr = current + 1;\r\n progressText.textContent = `Frage ${stepNr} von ${total}`;\r\n progressBar.style.width = Math.round((stepNr \/ total) * 100) + '%';\r\n }\r\n\r\n let fadeTimer = null;\r\n function fadeOutMusic(durationMs = 1400) {\r\n if (!bgMusic || bgMusic.paused) return;\r\n if (fadeTimer) { clearInterval(fadeTimer); fadeTimer = null; }\r\n\r\n const startVol = bgMusic.volume;\r\n const stepsN = 28;\r\n const stepTime = Math.max(25, Math.floor(durationMs \/ stepsN));\r\n let i = 0;\r\n\r\n fadeTimer = setInterval(() => {\r\n i += 1;\r\n const t = i \/ stepsN;\r\n const v = Math.max(0, startVol * (1 - t));\r\n bgMusic.volume = v;\r\n\r\n if (i >= stepsN || v <= 0.001) {\r\n clearInterval(fadeTimer);\r\n fadeTimer = null;\r\n bgMusic.pause();\r\n bgMusic.currentTime = 0;\r\n bgMusic.volume = MUSIC_DEFAULT_VOL;\r\n }\r\n }, stepTime);\r\n }\r\n\r\n function showResult() {\r\n let score = 0;\r\n let list = '<h3>Auswertung (gr\u00fcn = richtig, rot = falsch):<\/h3><ul>';\r\n\r\n steps.forEach((fs, i) => {\r\n const sel = getSelected(fs);\r\n const isCorrect = !!(sel && sel.value === 'richtig');\r\n if (isCorrect) score++;\r\n\r\n const playerText = sel ? sel.parentElement.textContent.trim() : 'Keine Antwort';\r\n\r\n list += `\r\n <li>\r\n <strong>${questionTexts[i]}<\/strong>\r\n <div class=\"${isCorrect ? 'answer-correct' : 'answer-wrong'}\">\r\n ${isCorrect ? '\u2714 Richtig \u2013 deine Antwort:' : '\u2718 Falsch \u2013 deine Antwort:'}\r\n ${playerText}\r\n <\/div>\r\n ${!isCorrect ? `\r\n <div class=\"answer-correct\">\r\n \u2714 Richtige Antwort: ${correctAnswers[i]}\r\n <\/div>` : ''}\r\n <\/li>\r\n `;\r\n });\r\n\r\n list += '<\/ul>';\r\n\r\n \/\/ \u2705 Musik sanft ausfaden beim Ergebnis\r\n fadeOutMusic(1400);\r\n\r\n steps[current].hidden = true;\r\n btnNext.hidden = true;\r\n btnRestart.hidden = false;\r\n progressText.textContent = 'Ergebnis';\r\n progressBar.style.width = '100%';\r\n\r\n const Prozent = Math.round((score \/ total) * 100);\r\n\r\n resultBox.innerHTML = `\r\n <strong>Du hast ${score} von ${total} richtig (${Prozent}%).<\/strong>\r\n ${list}\r\n <div class=\"result-cta\">\r\n <a href=\"https:\/\/magnificum.net\/fg-outro\" class=\"result-button\">H\u00f6rspiel Outro zum Fall<\/a>\r\n <\/div>\r\n `;\r\n resultBox.hidden = false;\r\n\r\n \/\/ \u2705 Ergebnis mittig anzeigen\r\n requestAnimationFrame(() => {\r\n resultBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n });\r\n }\r\n\r\n function resetQuiz() {\r\n quizForm.reset();\r\n steps.forEach((fs, i) => (fs.hidden = i !== 0));\r\n current = 0;\r\n btnNext.hidden = false;\r\n btnRestart.hidden = true;\r\n btnNext.disabled = true;\r\n resultBox.hidden = true;\r\n resultBox.innerHTML = '';\r\n updateProgress();\r\n\r\n \/\/ \u2705 Musik wieder starten (und ggf. laufenden Fade abbrechen)\r\n if (fadeTimer) { clearInterval(fadeTimer); fadeTimer = null; }\r\n if (bgMusic) {\r\n bgMusic.pause();\r\n bgMusic.currentTime = 0;\r\n bgMusic.volume = MUSIC_DEFAULT_VOL;\r\n bgMusic.play().catch(() => {});\r\n }\r\n\r\n \/\/ \u2705 Quiz wieder mittig\r\n requestAnimationFrame(() => {\r\n quiz.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n const firstRadio = steps[0].querySelector('input[type=\"radio\"]');\r\n if (firstRadio) firstRadio.focus({ preventScroll: true });\r\n });\r\n }\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18bbd26 elementor-widget elementor-widget-spacer\" data-id=\"18bbd26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6f56c1 elementor-widget elementor-widget-text-editor\" data-id=\"e6f56c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"text-align: center;\"><span style=\"color: #ffffff;\"><strong><a style=\"color: #ffffff;\" href=\"\/datenschutz\">DATENSCHUTZ<\/a>\u00a0 |\u00a0 <a style=\"color: #ffffff;\" href=\"\/impressum\">IMPRESSUM<\/a><\/strong><\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Firmenfeier \u2013 Aufl\u00f6sungstest Zum Aufl\u00f6sungstest Jetzt wird noch mal volle Konzentration gefordert, um den Fall abzuschlie\u00dfen. MAGNIFICUM w\u00fcnscht euch viel Erfolg! Frage 1 von 4 1) Wer hat Louis Bouchard get\u00f6tet? Marie Moreau Olivier Bouchard Chlo\u00e9 Bouchard Val\u00e9rie Dupont Antoine Bouchard Tobias Schmidt 2) Wer hat Marie Moreau get\u00f6tet? Louis Bouchard Margaux Bouchard Chlo\u00e9 Bouchard Antoine Bouchard Val\u00e9rie Dupont Olivier Bouchard 3) Was war das Motiv am Mord an […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-19346","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/19346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/comments?post=19346"}],"version-history":[{"count":0,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/19346\/revisions"}],"wp:attachment":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/media?parent=19346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}