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 Smooth scroll f\u00fcrs saubere Zentrieren *\/\r\n html{ scroll-behavior:smooth; }\r\n\r\n .start-screen {\r\n text-align: center;\r\n max-width: 1300px;\r\n margin: 1rem auto;\r\n }\r\n .start-image {\r\n width: 100%;\r\n max-height: 420px;\r\n object-fit: cover;\r\n border-radius: 16px;\r\n }\r\n .start-button-wrapper{\r\n display:flex;\r\n justify-content:center;\r\n margin-top: 1.8rem;\r\n }\r\n .start-button {\r\n padding: 1.05rem 2rem;\r\n border-radius: 16px;\r\n border: 1px solid #cfd8cc;\r\n background: var(--start-btn-bg);\r\n color: var(--quiz-text);\r\n cursor: pointer;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n transition: background 0.2s ease, transform 0.1s ease;\r\n }\r\n .start-button:hover {\r\n background: var(--start-btn-bg-hover);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .quiz-box {\r\n max-width: 13000px;\r\n margin: 1rem auto;\r\n padding: 1rem 1.25rem;\r\n border: 1px solid #2F3C47;\r\n border-radius: 14px;\r\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n background: var(--quiz-bg);\r\n color: var(--quiz-text);\r\n font-size: var(--quiz-font-size);\r\n }\r\n .quiz-title {\r\n margin: 0 0 0.5rem 0;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n }\r\n\r\n .quiz-progress {\r\n margin: 0.5rem 0 1rem 0;\r\n font-size: 0.95rem;\r\n }\r\n .quiz-progress .bar {\r\n height: 8px;\r\n background: #eee;\r\n border-radius: 999px;\r\n overflow: hidden;\r\n }\r\n .quiz-progress .bar-fill {\r\n height: 100%;\r\n background: var(--sage);\r\n transition: width 0.25s ease;\r\n width: 10%;\r\n }\r\n\r\n fieldset { border: 0; padding: 0; margin: 0; }\r\n legend {\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n font-size: 1.1rem;\r\n }\r\n label {\r\n display: block;\r\n padding: 0.55rem 0.65rem;\r\n border: 1px solid #ddd;\r\n border-radius: 12px;\r\n margin: 0.45rem 0;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n }\r\n label:hover { background: #f3f4f6; }\r\n input[type=\"radio\"] { margin-right: 0.6rem; }\r\n\r\n .quiz-actions {\r\n display: flex;\r\n gap: 0.5rem;\r\n margin-top: 1rem;\r\n }\r\n button {\r\n padding: 0.65rem 1rem;\r\n border-radius: 12px;\r\n border: 1px solid #ccc;\r\n background: #f7f7f7;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n }\r\n button[disabled] { opacity: 0.55; cursor: not-allowed; }\r\n #btnRestart {\r\n background: var(--start-btn-bg);\r\n border-color: #b8d7b0;\r\n }\r\n\r\n .quiz-result {\r\n margin-top: 1rem;\r\n padding: 1rem;\r\n border: 1px solid #e5e5e5;\r\n border-radius: 12px;\r\n background: #fafafa;\r\n }\r\n .quiz-result ul {\r\n margin-top: 0.6rem;\r\n padding-left: 1.2rem;\r\n }\r\n .quiz-result li { margin-bottom: 0.9rem; }\r\n\r\n .answer-correct {\r\n background: #ecfdf5;\r\n border-left: 4px solid #22c55e;\r\n padding: 0.45rem 0.65rem;\r\n border-radius: 10px;\r\n margin-top: 0.35rem;\r\n }\r\n .answer-wrong {\r\n background: #fef2f2;\r\n border-left: 4px solid #ef4444;\r\n padding: 0.45rem 0.65rem;\r\n border-radius: 10px;\r\n margin-top: 0.35rem;\r\n }\r\n\r\n .result-cta{\r\n margin-top: 1.5rem;\r\n display:flex;\r\n justify-content:center;\r\n }\r\n .result-button{\r\n display:inline-block;\r\n padding: 0.8rem 1.6rem;\r\n border-radius: 14px;\r\n background: var(--outro-btn-bg);\r\n color:#fff;\r\n text-decoration:none;\r\n font-weight:700;\r\n transition: background-color 0.2s ease, transform 0.1s ease;\r\n }\r\n .result-button:hover{\r\n background: var(--outro-btn-bg-hover);\r\n transform: translateY(-1px);\r\n }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"quizApp\">\r\n <div id=\"startScreen\" class=\"start-screen\">\r\n <div class=\"start-button-wrapper\">\r\n <button id=\"btnStart\" class=\"start-button\">Zum Aufl\u00f6sungstest<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"quiz\" 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=\"progressText\">Frage 1 von 4<\/span>\r\n <div class=\"bar\">\r\n <div class=\"bar-fill\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"quizForm\">\r\n <fieldset class=\"quiz-step\" data-step=\"1\" hidden>\r\n <legend>1) Wer hat den Diamanten von Ramanpur gestohlen\/ aus dem Safe entwendet?<\/legend>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> August von Donnerswarth<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Rupert von Lohengrinn<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Elsbeth von Donnerswarth<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Dr. Dinesh Rahul Yathavan<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Patricia von Donnerswarth<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Titania und Aurora von Schwarzburg<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Miga Lindstr\u00f6m<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Dr. Sascha Haller<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Dutchess<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"richtig\"> Kareem Dubois<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Lady Sophia von Lohengrinn<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"2\" hidden>\r\n <legend>2) Wie ist der Dieb\/ die Diebin ins Zimmer gelangt?<\/legend>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> \u00dcber den Garten im Erdgeschoss, das Rankgitter hochkletternd<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"richtig\"> \u00dcber den Balkon von Zimmer 204 mit einem Bettlaken<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> \u00dcber den Bel\u00fcftungsschacht im Badezimmer<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> \u00dcber einen geheimen Durchgang von Zimmer 104<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> In einem Reisekoffer versteckt<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"3\" hidden>\r\n <legend>3) Wo war Patricia von Donnerswarth, als man sie verdreckt aufgefunden hat?<\/legend>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Im Weinkeller<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Am Gest\u00fct Tannhof<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Am Waldfriedhof<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Am Brackenburg Viadukt<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"richtig\"> Am Spitzhorn Viadukt<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"4\" hidden>\r\n <legend>4) Wem geh\u00f6rt der Koffer zu Zimmer 203?<\/legend>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Rupert von Lohengrinn<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"richtig\"> Alejandro Herrera Alvarez<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Dr. Sascha Haller<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Kareem Dubois<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Maximilian Schneider<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Nuriah van de Berg<\/label>\r\n <\/fieldset>\r\n <\/form>\r\n\r\n <div class=\"quiz-actions\">\r\n <button type=\"button\" id=\"btnNext\" disabled>Weiter<\/button>\r\n <button type=\"button\" id=\"btnRestart\" hidden>Nochmal spielen<\/button>\r\n <\/div>\r\n\r\n <div id=\"result\" 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 AUDIO_URL = 'https:\/\/magnificum.net\/wp-content\/uploads\/2025\/12\/suspense-cinematic-atmosphere-255436.mp3';\r\n\r\n const startScreen = document.getElementById('startScreen');\r\n const btnStart = document.getElementById('btnStart');\r\n const quiz = document.getElementById('quiz');\r\n const quizForm = document.getElementById('quizForm');\r\n\r\n const steps = Array.from(quizForm.querySelectorAll('.quiz-step'));\r\n\r\n const btnNext = document.getElementById('btnNext');\r\n const btnRestart = document.getElementById('btnRestart');\r\n const resultBox = document.getElementById('result');\r\n const progressText = document.getElementById('progressText');\r\n const progressBar = document.getElementById('progressBar');\r\n\r\n \/\/ --- Audio setup ---\r\n const bgAudio = new Audio(AUDIO_URL);\r\n bgAudio.loop = true;\r\n bgAudio.preload = 'auto';\r\n bgAudio.volume = 1;\r\n\r\n let fadeRAF = null;\r\n\r\n function cancelFade(){\r\n if (fadeRAF) cancelAnimationFrame(fadeRAF);\r\n fadeRAF = null;\r\n }\r\n\r\n function startAudio(){\r\n cancelFade();\r\n bgAudio.currentTime = 0;\r\n bgAudio.volume = 1;\r\n bgAudio.play().catch(() => {});\r\n }\r\n\r\n function fadeOutAudio(durationMs = 1500){\r\n cancelFade();\r\n const startVol = bgAudio.volume ?? 1;\r\n const start = performance.now();\r\n\r\n function tick(now){\r\n const t = Math.min(1, (now - start) \/ durationMs);\r\n bgAudio.volume = Math.max(0, startVol * (1 - t));\r\n if (t < 1) {\r\n fadeRAF = requestAnimationFrame(tick);\r\n } else {\r\n bgAudio.pause();\r\n bgAudio.currentTime = 0;\r\n bgAudio.volume = startVol; \/\/ f\u00fcr Neustart wieder bereit\r\n fadeRAF = null;\r\n }\r\n }\r\n fadeRAF = requestAnimationFrame(tick);\r\n }\r\n\r\n const questionTexts = [\r\n 'Wer hat den Diamanten von Ramanpur gestohlen\/ aus dem Safe entwendet?',\r\n 'Wie ist der Dieb\/ die Diebin ins Zimmer gelangt?',\r\n 'Wo war Patricia von Donnerswarth, als man sie verdreckt aufgefunden hat?',\r\n 'Wem geh\u00f6rt der Koffer zu Zimmer 203?'\r\n ];\r\n\r\n const correctAnswers = [\r\n 'Kareem Dubois',\r\n '\u00dcber den Balkon von Zimmer 204 mit einem Bettlaken',\r\n 'Am Spitzhorn Viadukt',\r\n 'Alejandro Herrera Alvarez'\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 toggleStep(0, true);\r\n updateProgress();\r\n\r\n \/\/ \u2705 Audio starten\r\n startAudio();\r\n\r\n \/\/ \u2705 Quiz mittig in den Viewport scrollen\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) {\r\n showResult();\r\n return;\r\n }\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\" auch mittig halten (optional, aber angenehm)\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 const pct = Math.round((stepNr \/ total) * 100);\r\n progressBar.style.width = pct + '%';\r\n }\r\n\r\n function showResult() {\r\n \/\/ \u2705 Audio ausfaden beim Ergebnis\r\n fadeOutAudio(1500);\r\n\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 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\/b1-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 \/\/ \u2705 Audio zur\u00fccksetzen + neu starten\r\n cancelFade();\r\n bgAudio.pause();\r\n bgAudio.currentTime = 0;\r\n bgAudio.volume = 1;\r\n\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 startAudio();\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-4be9ded elementor-widget elementor-widget-spacer\" data-id=\"4be9ded\" 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-c526156 elementor-widget elementor-widget-text-editor\" data-id=\"c526156\" 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 den Diamanten von Ramanpur gestohlen\/ aus dem Safe entwendet? August von Donnerswarth Rupert von Lohengrinn Elsbeth von Donnerswarth Dr. Dinesh Rahul Yathavan Patricia von Donnerswarth Titania und Aurora von Schwarzburg Miga Lindstr\u00f6m Dr. Sascha Haller Dutchess Kareem Dubois Lady Sophia von Lohengrinn 2) Wie ist der Dieb\/ die Diebin […]<\/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-3404","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/3404","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=3404"}],"version-history":[{"count":0,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/3404\/revisions"}],"wp:attachment":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/media?parent=3404"}],"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 Smooth scroll f\u00fcrs saubere Zentrieren *\/\r\n html{ scroll-behavior:smooth; }\r\n\r\n .start-screen {\r\n text-align: center;\r\n max-width: 1300px;\r\n margin: 1rem auto;\r\n }\r\n .start-image {\r\n width: 100%;\r\n max-height: 420px;\r\n object-fit: cover;\r\n border-radius: 16px;\r\n }\r\n .start-button-wrapper{\r\n display:flex;\r\n justify-content:center;\r\n margin-top: 1.8rem;\r\n }\r\n .start-button {\r\n padding: 1.05rem 2rem;\r\n border-radius: 16px;\r\n border: 1px solid #cfd8cc;\r\n background: var(--start-btn-bg);\r\n color: var(--quiz-text);\r\n cursor: pointer;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n transition: background 0.2s ease, transform 0.1s ease;\r\n }\r\n .start-button:hover {\r\n background: var(--start-btn-bg-hover);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .quiz-box {\r\n max-width: 13000px;\r\n margin: 1rem auto;\r\n padding: 1rem 1.25rem;\r\n border: 1px solid #2F3C47;\r\n border-radius: 14px;\r\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;\r\n background: var(--quiz-bg);\r\n color: var(--quiz-text);\r\n font-size: var(--quiz-font-size);\r\n }\r\n .quiz-title {\r\n margin: 0 0 0.5rem 0;\r\n font-size: 1.4rem;\r\n font-weight: 700;\r\n }\r\n\r\n .quiz-progress {\r\n margin: 0.5rem 0 1rem 0;\r\n font-size: 0.95rem;\r\n }\r\n .quiz-progress .bar {\r\n height: 8px;\r\n background: #eee;\r\n border-radius: 999px;\r\n overflow: hidden;\r\n }\r\n .quiz-progress .bar-fill {\r\n height: 100%;\r\n background: var(--sage);\r\n transition: width 0.25s ease;\r\n width: 10%;\r\n }\r\n\r\n fieldset { border: 0; padding: 0; margin: 0; }\r\n legend {\r\n font-weight: 700;\r\n margin-bottom: 0.5rem;\r\n font-size: 1.1rem;\r\n }\r\n label {\r\n display: block;\r\n padding: 0.55rem 0.65rem;\r\n border: 1px solid #ddd;\r\n border-radius: 12px;\r\n margin: 0.45rem 0;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n }\r\n label:hover { background: #f3f4f6; }\r\n input[type=\"radio\"] { margin-right: 0.6rem; }\r\n\r\n .quiz-actions {\r\n display: flex;\r\n gap: 0.5rem;\r\n margin-top: 1rem;\r\n }\r\n button {\r\n padding: 0.65rem 1rem;\r\n border-radius: 12px;\r\n border: 1px solid #ccc;\r\n background: #f7f7f7;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n }\r\n button[disabled] { opacity: 0.55; cursor: not-allowed; }\r\n #btnRestart {\r\n background: var(--start-btn-bg);\r\n border-color: #b8d7b0;\r\n }\r\n\r\n .quiz-result {\r\n margin-top: 1rem;\r\n padding: 1rem;\r\n border: 1px solid #e5e5e5;\r\n border-radius: 12px;\r\n background: #fafafa;\r\n }\r\n .quiz-result ul {\r\n margin-top: 0.6rem;\r\n padding-left: 1.2rem;\r\n }\r\n .quiz-result li { margin-bottom: 0.9rem; }\r\n\r\n .answer-correct {\r\n background: #ecfdf5;\r\n border-left: 4px solid #22c55e;\r\n padding: 0.45rem 0.65rem;\r\n border-radius: 10px;\r\n margin-top: 0.35rem;\r\n }\r\n .answer-wrong {\r\n background: #fef2f2;\r\n border-left: 4px solid #ef4444;\r\n padding: 0.45rem 0.65rem;\r\n border-radius: 10px;\r\n margin-top: 0.35rem;\r\n }\r\n\r\n .result-cta{\r\n margin-top: 1.5rem;\r\n display:flex;\r\n justify-content:center;\r\n }\r\n .result-button{\r\n display:inline-block;\r\n padding: 0.8rem 1.6rem;\r\n border-radius: 14px;\r\n background: var(--outro-btn-bg);\r\n color:#fff;\r\n text-decoration:none;\r\n font-weight:700;\r\n transition: background-color 0.2s ease, transform 0.1s ease;\r\n }\r\n .result-button:hover{\r\n background: var(--outro-btn-bg-hover);\r\n transform: translateY(-1px);\r\n }\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"quizApp\">\r\n <div id=\"startScreen\" class=\"start-screen\">\r\n <div class=\"start-button-wrapper\">\r\n <button id=\"btnStart\" class=\"start-button\">Zum Aufl\u00f6sungstest<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"quiz\" 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=\"progressText\">Frage 1 von 4<\/span>\r\n <div class=\"bar\">\r\n <div class=\"bar-fill\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <form id=\"quizForm\">\r\n <fieldset class=\"quiz-step\" data-step=\"1\" hidden>\r\n <legend>1) Wer hat den Diamanten von Ramanpur gestohlen\/ aus dem Safe entwendet?<\/legend>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> August von Donnerswarth<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Rupert von Lohengrinn<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Elsbeth von Donnerswarth<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Dr. Dinesh Rahul Yathavan<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Patricia von Donnerswarth<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Titania und Aurora von Schwarzburg<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Miga Lindstr\u00f6m<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Dr. Sascha Haller<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Dutchess<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"richtig\"> Kareem Dubois<\/label>\r\n <label><input type=\"radio\" name=\"q1\" value=\"falsch\"> Lady Sophia von Lohengrinn<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"2\" hidden>\r\n <legend>2) Wie ist der Dieb\/ die Diebin ins Zimmer gelangt?<\/legend>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> \u00dcber den Garten im Erdgeschoss, das Rankgitter hochkletternd<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"richtig\"> \u00dcber den Balkon von Zimmer 204 mit einem Bettlaken<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> \u00dcber den Bel\u00fcftungsschacht im Badezimmer<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> \u00dcber einen geheimen Durchgang von Zimmer 104<\/label>\r\n <label><input type=\"radio\" name=\"q2\" value=\"falsch\"> In einem Reisekoffer versteckt<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"3\" hidden>\r\n <legend>3) Wo war Patricia von Donnerswarth, als man sie verdreckt aufgefunden hat?<\/legend>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Im Weinkeller<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Am Gest\u00fct Tannhof<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Am Waldfriedhof<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"falsch\"> Am Brackenburg Viadukt<\/label>\r\n <label><input type=\"radio\" name=\"q3\" value=\"richtig\"> Am Spitzhorn Viadukt<\/label>\r\n <\/fieldset>\r\n\r\n <fieldset class=\"quiz-step\" data-step=\"4\" hidden>\r\n <legend>4) Wem geh\u00f6rt der Koffer zu Zimmer 203?<\/legend>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Rupert von Lohengrinn<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"richtig\"> Alejandro Herrera Alvarez<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Dr. Sascha Haller<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Kareem Dubois<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Maximilian Schneider<\/label>\r\n <label><input type=\"radio\" name=\"q4\" value=\"falsch\"> Nuriah van de Berg<\/label>\r\n <\/fieldset>\r\n <\/form>\r\n\r\n <div class=\"quiz-actions\">\r\n <button type=\"button\" id=\"btnNext\" disabled>Weiter<\/button>\r\n <button type=\"button\" id=\"btnRestart\" hidden>Nochmal spielen<\/button>\r\n <\/div>\r\n\r\n <div id=\"result\" 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 AUDIO_URL = 'https:\/\/magnificum.net\/wp-content\/uploads\/2025\/12\/suspense-cinematic-atmosphere-255436.mp3';\r\n\r\n const startScreen = document.getElementById('startScreen');\r\n const btnStart = document.getElementById('btnStart');\r\n const quiz = document.getElementById('quiz');\r\n const quizForm = document.getElementById('quizForm');\r\n\r\n const steps = Array.from(quizForm.querySelectorAll('.quiz-step'));\r\n\r\n const btnNext = document.getElementById('btnNext');\r\n const btnRestart = document.getElementById('btnRestart');\r\n const resultBox = document.getElementById('result');\r\n const progressText = document.getElementById('progressText');\r\n const progressBar = document.getElementById('progressBar');\r\n\r\n \/\/ --- Audio setup ---\r\n const bgAudio = new Audio(AUDIO_URL);\r\n bgAudio.loop = true;\r\n bgAudio.preload = 'auto';\r\n bgAudio.volume = 1;\r\n\r\n let fadeRAF = null;\r\n\r\n function cancelFade(){\r\n if (fadeRAF) cancelAnimationFrame(fadeRAF);\r\n fadeRAF = null;\r\n }\r\n\r\n function startAudio(){\r\n cancelFade();\r\n bgAudio.currentTime = 0;\r\n bgAudio.volume = 1;\r\n bgAudio.play().catch(() => {});\r\n }\r\n\r\n function fadeOutAudio(durationMs = 1500){\r\n cancelFade();\r\n const startVol = bgAudio.volume ?? 1;\r\n const start = performance.now();\r\n\r\n function tick(now){\r\n const t = Math.min(1, (now - start) \/ durationMs);\r\n bgAudio.volume = Math.max(0, startVol * (1 - t));\r\n if (t < 1) {\r\n fadeRAF = requestAnimationFrame(tick);\r\n } else {\r\n bgAudio.pause();\r\n bgAudio.currentTime = 0;\r\n bgAudio.volume = startVol; \/\/ f\u00fcr Neustart wieder bereit\r\n fadeRAF = null;\r\n }\r\n }\r\n fadeRAF = requestAnimationFrame(tick);\r\n }\r\n\r\n const questionTexts = [\r\n 'Wer hat den Diamanten von Ramanpur gestohlen\/ aus dem Safe entwendet?',\r\n 'Wie ist der Dieb\/ die Diebin ins Zimmer gelangt?',\r\n 'Wo war Patricia von Donnerswarth, als man sie verdreckt aufgefunden hat?',\r\n 'Wem geh\u00f6rt der Koffer zu Zimmer 203?'\r\n ];\r\n\r\n const correctAnswers = [\r\n 'Kareem Dubois',\r\n '\u00dcber den Balkon von Zimmer 204 mit einem Bettlaken',\r\n 'Am Spitzhorn Viadukt',\r\n 'Alejandro Herrera Alvarez'\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 toggleStep(0, true);\r\n updateProgress();\r\n\r\n \/\/ \u2705 Audio starten\r\n startAudio();\r\n\r\n \/\/ \u2705 Quiz mittig in den Viewport scrollen\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) {\r\n showResult();\r\n return;\r\n }\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\" auch mittig halten (optional, aber angenehm)\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 const pct = Math.round((stepNr \/ total) * 100);\r\n progressBar.style.width = pct + '%';\r\n }\r\n\r\n function showResult() {\r\n \/\/ \u2705 Audio ausfaden beim Ergebnis\r\n fadeOutAudio(1500);\r\n\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 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\/b1-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 \/\/ \u2705 Audio zur\u00fccksetzen + neu starten\r\n cancelFade();\r\n bgAudio.pause();\r\n bgAudio.currentTime = 0;\r\n bgAudio.volume = 1;\r\n\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 startAudio();\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-4be9ded elementor-widget elementor-widget-spacer\" data-id=\"4be9ded\" 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-c526156 elementor-widget elementor-widget-text-editor\" data-id=\"c526156\" 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 den Diamanten von Ramanpur gestohlen\/ aus dem Safe entwendet? August von Donnerswarth Rupert von Lohengrinn Elsbeth von Donnerswarth Dr. Dinesh Rahul Yathavan Patricia von Donnerswarth Titania und Aurora von Schwarzburg Miga Lindstr\u00f6m Dr. Sascha Haller Dutchess Kareem Dubois Lady Sophia von Lohengrinn 2) Wie ist der Dieb\/ die Diebin […]<\/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-3404","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/3404","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=3404"}],"version-history":[{"count":0,"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/pages\/3404\/revisions"}],"wp:attachment":[{"href":"https:\/\/magnificum.net\/en\/wp-json\/wp\/v2\/media?parent=3404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}