Zukunftstest: Betriebliche Nachhaltigkeit<\/title>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <style>\n \/* Deine bestehenden Variablen-Definitionen hier einf\u00fcgen, falls vorhanden *\/\n :root {\n --bg-color: #f7fafc;\n --card-bg: #ffffff;\n --text-main: #2d3748;\n --text-muted: #718096;\n --border-color: #e2e8f0;\n --primary-color: #2c7a7b;\n --primary-hover: #234e52;\n }\n\n body {\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n background-color: var(--bg-color);\n color: var(--text-main);\n line-height: 1.5;\n padding: 15px;\n margin: 0;\n }\n\n .container {\n max-width: 1440px;\n margin: 0 auto;\n padding: 0 10px;\n }\n\n h1 {\n color: var(--primary-color);\n text-align: center;\n margin-bottom: 5px;\n font-size: 1.8em;\n }\n\n p.subtitle {\n text-align: center;\n color: var(--text-muted);\n margin-bottom: 20px;\n font-size: 1em;\n }\n\n \/* --- WIZARD STYLES --- *\/\n .wizard-container {\n background: var(--card-bg);\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n\n .progress-header {\n font-weight: bold;\n color: var(--text-muted);\n margin-bottom: 15px;\n font-size: 0.85em;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n border-bottom: 2px solid var(--border-color);\n padding-bottom: 8px;\n }\n\n h3.question-title {\n color: #2a4365;\n margin-top: 0;\n margin-bottom: 15px;\n font-size: 1.15em;\n line-height: 1.4;\n }\n\n .radio-option {\n display: flex;\n align-items: center; \/* Zentriert Radio-Button und Text vertikal auf dem Handy *\/\n padding: 12px 15px;\n margin-bottom: 10px;\n border: 2px solid var(--border-color);\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease-in-out;\n background-color: #fff;\n font-size: 0.95em;\n }\n\n .radio-option:hover {\n border-color: #b2ebf2;\n background-color: #f0fdfa;\n }\n\n .radio-option.selected {\n border-color: var(--primary-color);\n background-color: #e6fffa;\n }\n\n .radio-option input[type=\"radio\"] {\n margin: 0 12px 0 0;\n transform: scale(1.2);\n cursor: pointer;\n flex-shrink: 0; \/* Verhindert, dass der Radio-Button bei langem Text zusammengedr\u00fcckt wird *\/\n }\n\n .button-group {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n padding-top: 15px;\n border-top: 1px solid var(--border-color);\n }\n\n .btn {\n padding: 12px 20px;\n font-size: 0.95em;\n font-weight: bold;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: background-color 0.2s;\n touch-action: manipulation; \/* Optimiert die Reaktionszeit auf Touchscreens *\/\n }\n\n .btn-primary {\n background-color: var(--primary-color);\n color: white;\n }\n\n .btn-primary:hover:not(:disabled) {\n background-color: var(--primary-hover);\n }\n\n .btn-primary:disabled {\n background-color: #cbd5e0;\n cursor: not-allowed;\n }\n\n .btn-secondary {\n background-color: #e2e8f0;\n color: var(--text-main);\n }\n\n .btn-secondary:hover {\n background-color: #cbd5e0;\n }\n\n \/* --- RESULT STYLES --- *\/\n .result-container {\n display: none;\n padding: 20px;\n border-radius: 8px;\n background-color: #ebf8fa;\n border-top: 5px solid var(--primary-color);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n\n .chart-container {\n position: relative;\n height: 380px;\n width: 100%;\n margin-bottom: 25px;\n background: white;\n border-radius: 8px;\n padding: 10px;\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);\n box-sizing: border-box;\n }\n\n .score-display {\n font-size: 1.3em;\n font-weight: bold;\n margin-bottom: 10px;\n text-align: center;\n }\n\n .stage-title {\n font-size: 1.4em;\n color: var(--primary-color);\n margin: 0 0 12px 0;\n text-align: center;\n }\n\n .stage-description {\n margin-bottom: 20px;\n font-size: 1em;\n text-align: center;\n }\n\n .tip-box {\n background: #ffffff;\n padding: 15px;\n border-radius: 6px;\n border: 1px solid #b2ebf2;\n font-weight: 500;\n font-size: 0.95em;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n }\n\n .tip-box strong {\n color: #c05621;\n font-size: 1.05em;\n display: block;\n margin-bottom: 5px;\n }\n\n \/* --- STAGES OVERVIEW STYLES --- *\/\n .all-stages-overview {\n margin-top: 30px;\n background: #ffffff;\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n border: 1px solid var(--border-color);\n }\n\n .all-stages-overview h3 {\n color: var(--primary-color);\n margin-top: 0;\n text-align: center;\n font-size: 1.2em;\n margin-bottom: 15px;\n }\n\n .stage-card {\n padding: 12px;\n margin-bottom: 12px;\n border: 1px solid var(--border-color);\n border-radius: 6px;\n background-color: var(--bg-color);\n transition: all 0.3s ease;\n }\n\n .stage-card.active {\n border-color: var(--primary-color);\n background-color: #e6fffa;\n border-left: 5px solid var(--primary-color);\n box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n }\n\n .stage-card h4 {\n margin: 0 0 5px 0;\n color: #2a4365;\n font-size: 1em;\n }\n\n .stage-card .points {\n font-size: 0.8em;\n color: #c05621;\n font-weight: bold;\n margin-bottom: 6px;\n }\n\n .stage-card p {\n margin: 0;\n font-size: 0.85em;\n color: var(--text-main);\n }\n\n \/* --- LEAD FORM STYLES --- *\/\n .lead-capture-box {\n margin-top: 30px;\n background: #ffffff; \n padding: 20px; \n border-radius: 8px; \n box-shadow: 0 4px 10px rgba(0,0,0,0.08); \n border: 2px solid var(--primary-color);\n }\n \n .lead-capture-box h3 {\n color: var(--primary-color);\n margin-top: 0; \n font-size: 1.2em;\n }\n\n .form-input {\n width: 100%;\n padding: 12px; \n margin-bottom: 12px; \n border: 1px solid #ccc; \n border-radius: 6px; \n box-sizing: border-box; \n font-family: inherit;\n font-size: 0.95em;\n }\n\n \/* --- MOBILE MEDIA QUERIES (Speziell Hochkant-Handy) --- *\/\n @media screen and (max-width: 600px) {\n body {\n padding: 10px;\n }\n h1 {\n font-size: 1.4em;\n }\n p.subtitle {\n font-size: 0.9em;\n margin-bottom: 15px;\n }\n .wizard-container, .result-container {\n padding: 15px;\n }\n h3.question-title {\n font-size: 1.05em;\n margin-bottom: 12px;\n }\n .radio-option {\n padding: 10px 12px;\n margin-bottom: 8px;\n font-size: 0.88em;\n }\n .btn {\n padding: 12px 16px;\n font-size: 0.9em;\n }\n .chart-container {\n height: 300px; \/* Perfekte H\u00f6he f\u00fcr Smartphone-Displays *\/\n }\n }\n\n \/* --- DRUCK- & PDF-STYLES --- *\/\n @media print {\n body {\n background-color: white;\n padding: 0;\n color: #000;\n }\n .container {\n max-width: 100%;\n box-shadow: none;\n padding: 0;\n }\n .lead-capture-box, \n #btn-print,\n .button-group {\n display: none !important;\n }\n \n \/* Verhindert winzige Diagramme beim Drucken vom Handy *\/\n .chart-container {\n display: block !important;\n height: 450px !important; \/* Erzwingt eine lesbare H\u00f6he im PDF *\/\n min-height: 450px !important;\n width: 100% !important;\n page-break-inside: avoid;\n }\n \n .stage-card, \n .tip-box {\n page-break-inside: avoid;\n }\n .all-stages-overview {\n box-shadow: none;\n border: none;\n padding: 10px 0;\n }\n .stage-card {\n border: 1px solid #ccc;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <h1>Zukunftstest: Betriebliche Nachhaltigkeit<\/h1>\n <p class=\"subtitle\" id=\"main-subtitle\">Bewerten Sie die aktuelle Positionierung Ihres Unternehmens.<\/p>\n\n <div class=\"wizard-container\" id=\"wizard-box\">\n <div class=\"progress-header\" id=\"progress-text\">Frage 1 von 8<\/div>\n \n <div id=\"question-content\"><\/div>\n\n <div class=\"button-group\">\n <button type=\"button\" class=\"btn btn-secondary\" id=\"btn-prev\" onclick=\"prevQuestion()\">Zur\u00fcck<\/button>\n <button type=\"button\" class=\"btn btn-primary\" id=\"btn-next\" onclick=\"nextQuestion()\">Weiter<\/button>\n <\/div>\n <\/div>\n\n <div class=\"result-container\" id=\"result-box\">\n <div class=\"score-display\">Gesamtpunktzahl: <span id=\"total-score\">0<\/span> \/ 40<\/div>\n <h2 class=\"stage-title\" id=\"stage-title\">Auswertung<\/h2>\n <p class=\"stage-description\" id=\"stage-desc\"><\/p>\n \n <div class=\"chart-container\">\n <canvas id=\"radarChart\"><\/canvas>\n <\/div>\n\n <div class=\"tip-box\">\n <strong>Ihr Tipp f\u00fcr die Praxis:<\/strong>\n <span id=\"stage-tip\"><\/span>\n <\/div>\n\n <div class=\"all-stages-overview\">\n <h3>Alle Entwicklungsstufen im \u00dcberblick<\/h3>\n <div id=\"stages-list\"><\/div>\n <\/div>\n \n <div class=\"lead-capture-box\">\n <h3>Lassen Sie uns dar\u00fcber sprechen!<\/h3>\n <p style=\"margin-bottom: 20px; font-size: 0.95em;\">Nutzen Sie Ihr Ergebnis als Startpunkt. Wir finden Ihre Ans\u00e4tze sehr spannend und m\u00f6chten Sie gerne im Projekt Bauwandel begleiten. Wir freuen uns darauf, die nachhaltige Bauwende zusammen mit Ihnen voranzutreiben und von Ihrer Expertise zu profitieren.<\/p>\n \n <form id=\"lead-form\" onsubmit=\"submitLead(event)\">\n <input type=\"text\" id=\"lead-name\" class=\"form-input\" placeholder=\"Ihr Name \/ Firma\" required>\n <input type=\"email\" id=\"lead-email\" class=\"form-input\" placeholder=\"Ihre E-Mail-Adresse\" required>\n <input type=\"text\" id=\"lead-industry\" class=\"form-input\" placeholder=\"Gewerk \/ Branche\" required>\n \n <select id=\"lead-employees\" class=\"form-input\" required style=\"color: var(--text-main); background-color: #fff;\">\n <option value=\"\" disabled selected>Anzahl Mitarbeitende im Betrieb w\u00e4hlen…<\/option>\n <option value=\"1-9\">1 – 9 Mitarbeitende<\/option>\n <option value=\"10-49\">10 – 49 Mitarbeitende<\/option>\n <option value=\"50-249\">50 – 249 Mitarbeitende<\/option>\n <option value=\"250+\">250 und mehr Mitarbeitende<\/option>\n <\/select>\n\n <input type=\"text\" id=\"lead-job\" class=\"form-input\" placeholder=\"Job \/ Funktion\" required>\n <label style=\"display: flex; align-items: flex-start; font-size: 0.85em; color: var(--text-muted); margin-bottom: 20px; font-weight: normal; cursor: pointer;\">\n <input type=\"checkbox\" id=\"lead-consent\" required style=\"margin-right: 10px; margin-top: 2px; transform: scale(1.2); flex-shrink: 0;\">\n <span>Ich stimme zu, dass meine Daten zur eventuellen Kontaktaufnahme gespeichert und verarbeitet werden. Die Daten werden vertraulich behandelt und nicht an Dritte weitergegeben. (DSGVO-konform)<\/span>\n <\/label>\n \n <button type=\"submit\" id=\"submit-btn\" class=\"btn btn-primary\" style=\"width: 100%; font-size: 1.1em; padding: 14px;\">Bitte hier das Formular absenden<\/button>\n <\/form>\n\n <div id=\"success-message\" style=\"display: none; background: #e6fffa; color: #234e52; padding: 15px; border-radius: 6px; text-align: center; font-weight: bold; border: 1px solid #b2ebf2;\">\n Vielen Dank f\u00fcr Ihr Interesse! Ihre Daten wurden erfolgreich gesendet.\n <\/div>\n<div style=\"text-align: center; margin-top: 20px; margin-bottom: 20px;\">\n <button type=\"button\" id=\"btn-print\" class=\"btn btn-secondary\" onclick=\"window.print()\" style=\"font-size: 1.05em; padding: 12px 24px; width: 100%; max-width: 400px;\">\n \ud83d\udcc4 Ergebnis als PDF speichern \/ Drucken\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n<\/div>\n\n<script>\n const categories = [\n \"Umweltauflagen\", \"Motivation\", \"Bildung\", \"Materialit\u00e4t\", \n \"Beratung\", \"Wahrnehmung\", \"Ressourcen\", \"Markt\"\n ];\n\n const categoryDescriptions = [\n \"Umgang mit neuen gesetzlichen Vorgaben und Standards.\",\n \"Der innere oder \u00e4u\u00dfere Antrieb f\u00fcr nachhaltiges Handeln im Betrieb.\",\n \"Stellenwert von Nachhaltigkeit in der Aus- und Weiterbildung.\",\n \"Kriterien bei der Auswahl von Baustoffen und Materialien.\",\n \"Wie das Thema Klimaschutz in die Kundenberatung einflie\u00dft.\",\n \"Die unternehmensinterne Sichtweise auf das Thema Nachhaltigkeit.\",\n \"Umgang mit Ressourcen, Kreislaufwirtschaft und Abfall auf der Baustelle.\",\n \"Nachhaltigkeit als strategischer Wettbewerbs- und Innovationsfaktor.\"\n ];\n\n const questionsData = [\n {\n title: \"Wie reagieren Sie\/Ihr Unternehmen auf neue gesetzliche Umweltauflagen?\",\n options: [\n { val: 2, text: \"Wir setzen sie um, sofern es sich durch F\u00f6rdergelder rechnet oder die Effizienz steigert.\" },\n { val: 5, text: \"Wir gehen weit \u00fcber das Gesetz hinaus, da wir Standards f\u00fcr die Zukunft setzen wollen.\" }, \n { val: 3, text: \"Wir suchen gezielt nach Informationen und Schulungen, um die neuen Anforderungen fachlich zu verstehen.\" },\n { val: 1, text: \"Wir orientieren uns am Kundenwunsch.\" },\n { val: 4, text: \"Wir seehen diese Gesetze als Mindeststandard und Teil unserer Qualit\u00e4tsstrategie.\" }\n ]\n },\n {\n title: \"Was ist die Hauptmotivation f\u00fcr Nachhaltigkeitsma\u00dfnahmen in Ihrem Betrieb?\",\n options: [\n { val: 2, text: \"Einsparung von Kosten (z. B. durch geringeren Energieverbrauch).\" },\n { val: 3, text: \"Sicherung der zuk\u00fcnftigen Marktf\u00e4higkeit durch den Aufbau von Fachwissen.\" },\n { val: 4, text: \"\u00dcberzeugung, dass nachhaltiges Bauen ein Qualit\u00e4tsmerkmal und Wettbewerbsvorteil ist.\" },\n { val: 1, text: \"Druck von au\u00dfen durch Gesetze und Beh\u00f6rden.\" },\n { val: 5, text: \"Die tiefe ethische Verantwortung f\u00fcr den Erhalt des Planeten f\u00fcr kommende Generationen.\" }\n ]\n },\n {\n title: \"Welchen Stellenwert hat das Thema Nachhaltigkeit in der Aus- und Weiterbildung?\",\n options: [\n { val: 4, text: \"Nachhaltigkeit ist unser Leitmotiv.\" },\n { val: 1, text: \"Kaum einen; wir konzentrieren uns auf das traditionelle Handwerk. Hauptsache wir finden Nachwuchs.\" },\n { val: 2, text: \"Wir nehmen an Schulungen teil, wenn diese gef\u00f6rdert werden oder sofortige Ersparnis bringen.\" },\n { val: 5, text: \"Wir bilden uns und andere zu Pionieren f\u00fcr radikale Ressourcenschonung aus.\" },\n { val: 3, text: \"Wir investieren aktiv in Weiterbildung, weil wir f\u00fcr die Zukunft und Fachkr\u00e4fte bereit sein wollen.\" }\n ]\n },\n {\n title: \"Wie w\u00e4hlen Sie Baustoffe f\u00fcr Ihre Projekte aus?\",\n options: [\n { val: 3, text: \"Wir pr\u00fcfen vermehrt \u00f6kologische Alternativen, sind aber noch in der Lernphase.\" },\n { val: 1, text: \"Verf\u00fcgbarkeit und nach dem g\u00fcnstigsten Preis.\" },\n { val: 2, text: \"Nach dem Preis-Leistungs-Verh\u00e4ltnis, wobei langlebige Stoffe bevorzugt werden.\" },\n { val: 4, text: \"Wir beraten Kunden aktiv zu \u00f6kologischen Baustoffen und betrachten den Lebenszyklus.\" },\n { val: 5, text: \"Wir nutzen Cradle-to-Cradle-Prinzipien, \u00f6kologische Produkte und achten auf die soziale Lieferkette.\" }\n ]\n },\n {\n title: \"Wie nehmen Sie Einfluss oder beraten Sie zum Thema Klimaschutz?\",\n options: [\n { val: 5, text: \"Wir begeistern Kunden f\u00fcr echte \u00f6kologische Praxis, die weit \u00fcber das \u00dcbliche hinaus geht.\" },\n { val: 1, text: \"Wir raten eher von teuren \u00f6kologischen Ma\u00dfnahmen ab, sofern nicht zwingend vorgeschrieben.\" },\n { val: 4, text: \"Wir positionieren uns als Expert*innen f\u00fcr zukunftsf\u00e4higes Bauen oder Arbeiten.\" },\n { val: 2, text: \"Wir weisen vor allem auf staatliche F\u00f6rderprogramme und Kosteneinsparungen hin.\" },\n { val: 3, text: \"Wir thematisieren die fachliche Notwendigkeit und m\u00f6chten uns weiterentwickeln.\" }\n ]\n },\n {\n title: \"Welches Bild beschreibt Ihre Sicht auf Nachhaltigkeit am besten?\",\n options: [\n { val: 3, text: \"Eine fachliche Herausforderung, die wir meistern m\u00fcssen.\" },\n { val: 1, text: \"Ein Kostenfaktor und b\u00fcrokratisches Hindernis.\" },\n { val: 2, text: \"Ein Optimierungspotenzial f\u00fcr die Firma.\" },\n { val: 4, text: \"Ein strategisches Qualit\u00e4tsmerkmal, das uns auszeichnet.\" },\n { val: 5, text: \"Unsere eigentliche Daseinsberechtigung und Sinnkopplung ('Wir bauen f\u00fcr die Enkel').\" }\n ]\n },\n {\n title: \"Wie gehen Sie mit Ressourcen und Abfall auf der Baustelle um?\",\n options: [\n { val: 4, text: \"Kreislaufwirtschaft ist bei uns Standard; wir planen den R\u00fcckbau bereits beim Aufbau mit.\" },\n { val: 1, text: \"Entsorgung erfolgt so g\u00fcnstig wie m\u00f6glich; Trennung wird als st\u00f6rend empfunden.\" },\n { val: 2, text: \"Wir trennen Abf\u00e4lle konsequent, um Entsorgungsgeb\u00fchren zu sparen.\" },\n { val: 3, text: \"Wir bilden uns weiter, wie wir durch bessere Planung Abf\u00e4lle von vornherein vermeiden k\u00f6nnen.\" },\n { val: 5, text: \"Wir verfolgen einen Null-Abfall-Ansatz und nutzen die Baustelle als Rohstofflager f\u00fcr die Zukunft.\" }\n ]\n },\n {\n title: \"Ist Nachhaltigkeit ein Wettbewerbsfaktor f\u00fcr Sie?\",\n options: [\n { val: 2, text: \"Wir machen das, was alle machen, solange es profitabel bleibt.\" },\n { val: 1, text: \"Nachhaltigkeit spielt keine Rolle, wir wollen weiter machen wie bisher.\" },\n { val: 3, text: \"Wir sind gerade dabei, uns durch Bildung einen Wissensvorsprung zu erarbeiten.\" },\n { val: 5, text: \"Wir sind Innovatoren, die den Markt durch neue, regenerative L\u00f6sungen antreiben.\" },\n { val: 4, text: \"Wir sind als Vorreiter f\u00fcr nachhaltige L\u00f6sungen am Markt bekannt.\" }\n ]\n }\n ];\n\n const stages = [\n { min: 8, max: 12, title: \"Reaktiv-Abwehrend (Fokus Aushalten)\", desc: \"Aktuell empfinden Sie Nachhaltigkeit vor allem als externe Belastung. Die Motivation ist rein von \u00e4u\u00dferem Druck abh\u00e4ngig (z.B. vom Ordnungsrecht).\", tip: \"Starten Sie klein. Suchen Sie sich ein Thema (z.B. Verschnitt-\/Abfallmanagement), das sofort Kosten spart. So wird aus der 'l\u00e4stigen Pflicht' ein wirtschaftlicher Vorteil.\" },\n { min: 13, max: 20, title: \"Pragmatisch Mitgehend (Fokus Effizienz)\", desc: \"Sie haben verstanden: Nachhaltigkeit kann sich rechnen! Sie nutzen F\u00f6rderungen und optimieren gezielt Kosten.\", tip: \"Gehen Sie den n\u00e4chsten Schritt und binden Sie Ihre Mitarbeitenden ein. Wissen ist der Schl\u00fcssel, um nicht nur auf Anreize zu reagieren, sondern agieren zu k\u00f6nnen.\" },\n { min: 21, max: 28, title: \"Kompetenz-Suchende (Fokus Bildung)\", desc: \"Sie befinden sich in einer spannenden Umbruchphase. Sie wissen, dass das alte Wissen nicht mehr reicht, und investieren in K\u00f6pfe.\", tip: \"Nutzen Sie dieses neue Wissen f\u00fcr die Kundenberatung. Wer Nachhaltigkeit fachlich erkl\u00e4ren kann, gewinnt heute die lukrativen Auftr\u00e4ge.\" },\n { min: 29, max: 36, title: \"\u00dcberzeugte Gestaltende (Fokus Strategie)\", desc: \"Nachhaltigkeit ist f\u00fcr Sie kein Trend, sondern ein Qualit\u00e4tsmerkmal. Sie beraten aktiv und setzen Ma\u00dfst\u00e4be.\", tip: \"Vernetzen Sie sich mit Gleichgesinnten. Als '\u00dcberzeugte Gestaltende' k\u00f6nnen Sie die Standards in Ihrer Region aktiv mitbestimmen.\" },\n { min: 37, max: 40, title: \"Regenerative Innovator*innen (Fokus Sinn)\", desc: \"Sie geh\u00f6ren zu den Pionieren der Branche. Sie bauen nicht nur Geb\u00e4ude, sondern gestalten die Zukunft der Gesellschaft aktiv mit.\", tip: \"Werden Sie zum Mentor! Dokumentieren Sie Ihre Leuchtturmprojekte (Kreislaufwirtschaft, CO2 Speicherung etc.) und zeigen Sie der Branche, dass radikale Nachhaltigkeit funktioniert.\" }\n ];\n\n let currentIndex = 0;\n let userAnswers = new Array(questionsData.length).fill(null);\n let radarChartInstance = null;\n\n const progressText = document.getElementById('progress-text');\n const questionContent = document.getElementById('question-content');\n const btnPrev = document.getElementById('btn-prev');\n const btnNext = document.getElementById('btn-next');\n const wizardBox = document.getElementById('wizard-box');\n const resultBox = document.getElementById('result-box');\n const mainSubtitle = document.getElementById('main-subtitle');\n\n function renderQuestion() {\n const q = questionsData[currentIndex];\n progressText.innerText = `Frage ${currentIndex + 1} von ${questionsData.length}`;\n questionContent.innerHTML = '';\n\n const titleEl = document.createElement('h3');\n titleEl.className = 'question-title';\n titleEl.textContent = q.title;\n questionContent.appendChild(titleEl);\n\n q.options.forEach((opt) => {\n const labelEl = document.createElement('label');\n labelEl.className = 'radio-option';\n if (userAnswers[currentIndex] === opt.val) {\n labelEl.classList.add('selected');\n }\n\n const radioEl = document.createElement('input');\n radioEl.type = 'radio';\n radioEl.name = 'question_' + currentIndex;\n radioEl.value = opt.val;\n \n if (userAnswers[currentIndex] === opt.val) {\n radioEl.checked = true;\n }\n\n radioEl.addEventListener('change', (e) => {\n userAnswers[currentIndex] = parseInt(e.target.value, 10);\n document.querySelectorAll('.radio-option').forEach(el => el.classList.remove('selected'));\n labelEl.classList.add('selected');\n btnNext.disabled = false;\n });\n\n const textEl = document.createElement('span');\n textEl.textContent = opt.text;\n\n labelEl.appendChild(radioEl);\n labelEl.appendChild(textEl);\n questionContent.appendChild(labelEl);\n });\n\n btnPrev.style.display = currentIndex === 0 ? 'none' : 'inline-block';\n btnNext.disabled = userAnswers[currentIndex] === null;\n\n if (currentIndex === questionsData.length - 1) {\n btnNext.textContent = 'Auswertung anzeigen';\n } else {\n btnNext.textContent = 'Weiter';\n }\n }\n\n function nextQuestion() {\n if (currentIndex < questionsData.length - 1) {\n currentIndex++;\n renderQuestion();\n window.scrollTo({ top: 0, behavior: 'smooth' }); \/\/ Scrollt sanft nach oben bei neuer Frage\n } else {\n showResults();\n }\n }\n\n function prevQuestion() {\n if (currentIndex > 0) {\n currentIndex--;\n renderQuestion();\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n }\n\n function showResults() {\n wizardBox.style.display = 'none';\n mainSubtitle.style.display = 'none';\n resultBox.style.display = 'block';\n window.scrollTo({ top: 0, behavior: 'smooth' });\n\n const total = userAnswers.reduce((sum, val) => sum + val, 0);\n document.getElementById('total-score').innerText = total;\n\n const result = stages.find(s => total >= s.min && total <= s.max);\n if(result) {\n document.getElementById('stage-title').innerText = result.title;\n document.getElementById('stage-desc').innerText = result.desc;\n document.getElementById('stage-tip').innerText = result.tip;\n }\n\n const ctx = document.getElementById('radarChart').getContext('2d');\n\n if (radarChartInstance) {\n radarChartInstance.destroy();\n }\n\n radarChartInstance = new Chart(ctx, {\n type: 'radar',\n data: {\n labels: categories,\n datasets: [{\n label: 'Ihr Profil',\n data: userAnswers,\n backgroundColor: 'rgba(44, 122, 123, 0.2)',\n borderColor: 'rgba(44, 122, 123, 1)',\n pointBackgroundColor: 'rgba(44, 122, 123, 1)',\n pointBorderColor: '#fff',\n pointHoverBackgroundColor: '#fff',\n pointHoverBorderColor: 'rgba(44, 122, 123, 1)',\n borderWidth: 2,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n scales: {\n r: {\n angleLines: { display: true },\n suggestedMin: 1,\n suggestedMax: 5,\n ticks: { stepSize: 1, backdropColor: 'transparent' }\n }\n },\n plugins: { \n legend: { display: false },\n tooltip: {\n displayColors: false,\n padding: 12,\n callbacks: {\n title: function(tooltipItems) {\n return tooltipItems[0].label;\n },\n label: function(context) {\n return 'Ihre Punktzahl: ' + context.raw;\n },\n afterLabel: function(context) {\n const desc = categoryDescriptions[context.dataIndex];\n return '\\nBedeutung:\\n' + desc;\n }\n }\n }\n }\n }\n });\n\n const stagesList = document.getElementById('stages-list');\n stagesList.innerHTML = '';\n \n stages.forEach(s => {\n const isUserStage = (total >= s.min && total <= s.max);\n const card = document.createElement('div');\n card.className = `stage-card ${isUserStage ? 'active' : ''}`;\n\n card.innerHTML = `\n <h4>${s.title} ${isUserStage ? '\ud83c\udfaf (Ihr aktueller Bereich)' : ''}<\/h4>\n <div class=\"points\">Punktebereich: ${s.min} - ${s.max} Punkte<\/div>\n <p>${s.desc}<\/p>\n `;\n stagesList.appendChild(card);\n });\n }\n\n function submitLead(e) {\n e.preventDefault();\n \n const name = document.getElementById('lead-name').value.trim();\n const email = document.getElementById('lead-email').value.trim();\n const industry = document.getElementById('lead-industry').value.trim();\n const employees = document.getElementById('lead-employees').value;\n const job = document.getElementById('lead-job').value.trim();\n const score = document.getElementById('total-score').innerText;\n const stage = document.getElementById('stage-title').innerText;\n\n const btn = document.getElementById('submit-btn');\n const originalText = btn.innerText;\n btn.innerText = \"Wird gesendet...\";\n btn.disabled = true;\n\n const formData = new FormData();\n formData.append('Name', name);\n formData.append('Email', email);\n formData.append('Gewerk_Branche', industry);\n formData.append('Anzahl_Mitarbeitende', employees);\n formData.append('Job_Funktion', job);\n formData.append('Testergebnis_Punkte', score + \" von 40\");\n formData.append('Testergebnis_Stufe', stage);\n \n questionsData.forEach((q, index) => {\n const answerValue = userAnswers[index];\n const selectedOption = q.options.find(opt => opt.val === answerValue);\n const answerText = selectedOption ? selectedOption.text : \"Nicht beantwortet\";\n \n formData.append(`Frage_${index + 1}_${categories[index]}`, `Punkte: ${answerValue} | ${answerText}`);\n });\n\n formData.append('_subject', 'Anfrage: Zukunftstest Auswertung & Beratung');\n formData.append('_captcha', 'false');\n\n fetch(\"https:\/\/formsubmit.co\/ajax\/4325602a44adb9845b85ac4475b6dfa6\", {\n method: \"POST\",\n headers: {\n 'Accept': 'application\/json' \n },\n body: formData\n })\n .then(response => response.json())\n .then(data => {\n if(data.success) {\n document.getElementById('lead-form').style.display = 'none';\n document.getElementById('success-message').style.display = 'block';\n } else {\n alert(\"Es gab einen Fehler. Bitte versuchen Sie es sp\u00e4ter nochmal.\");\n btn.innerText = originalText;\n btn.disabled = false;\n }\n })\n .catch(error => {\n alert(\"Netzwerkfehler. Bitte pr\u00fcfen Sie Ihre Verbindung.\");\n btn.innerText = originalText;\n btn.disabled = false;\n });\n }\n\n renderQuestion();\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-text-align-center\">F\u00fcr Anleitende: Zum <a href=\"https:\/\/biwena.de\/index.php\/schnelltest-bauhandwerk\/dashboard-schnelltest\/\" data-type=\"page\" data-id=\"1728\">Dashboard <\/a>f\u00fcr Pr\u00e4sentation gehen.<\/p>\n\n\n\n<p>Das Projekt „<em>Bauwandel – Strukturelle Verschr\u00e4nkung partizipativer Nachhaltigkeitskonzepte in \u00fcberbetrieblicher Ausbildung mit Betrieben des Bauhauptgewerbes<\/em>“ wird gef\u00f6rdert im F\u00f6rderprogramm \u201e<a href=\"https:\/\/www.bibb.de\/de\/161509.php\">Nachhaltig im Beruf \u2013 zukunftsorientiert ausbilden (NIB)<\/a>\u201c , einer zentralen Initiative des <a href=\"https:\/\/www.bmbfsfj.bund.de\/\">Bundesministeriums f\u00fcr Bildung und Forschung (BMBF)<\/a> in Zusammenarbeit mit dem <a href=\"https:\/\/www.esf.de\/portal\/DE\/ESF-Plus-2021-2027\/Foerderprogramme\/bmbfsfj\/nachhaltig_im_beruf.html\" data-type=\"link\" data-id=\"https:\/\/www.esf.de\/portal\/DE\/ESF-Plus-2021-2027\/Foerderprogramme\/bmbfsfj\/nachhaltig_im_beruf.html\">ESF Plus<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/biwena.de\/wp-content\/uploads\/2026\/03\/image-1-1024x560.png\" alt=\"\" class=\"wp-image-1474\" srcset=\"https:\/\/biwena.de\/wp-content\/uploads\/2026\/03\/image-1-1024x560.png 1024w, https:\/\/biwena.de\/wp-content\/uploads\/2026\/03\/image-1-300x164.png 300w, https:\/\/biwena.de\/wp-content\/uploads\/2026\/03\/image-1-768x420.png 768w, https:\/\/biwena.de\/wp-content\/uploads\/2026\/03\/image-1.png 1180w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Zukunftstest: Betriebliche Nachhaltigkeit Zukunftstest: Betriebliche Nachhaltigkeit Bewerten Sie die aktuelle Positionierung Ihres Unternehmens. Frage 1 von 8 Zur\u00fcck Weiter Gesamtpunktzahl: 0 \/ 40 Auswertung Ihr Tipp f\u00fcr die Praxis: Alle […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"ohne-seitenfeatures","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"_tribe_blocks_recurrence_rules":"","_tribe_blocks_recurrence_description":"","_tribe_blocks_recurrence_exclusions":"","footnotes":""},"class_list":["post-1697","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/comments?post=1697"}],"version-history":[{"count":35,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1697\/revisions"}],"predecessor-version":[{"id":1773,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1697\/revisions\/1773"}],"wp:attachment":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/media?parent=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1697,"date":"2026-06-02T21:06:46","date_gmt":"2026-06-02T19:06:46","guid":{"rendered":"https:\/\/biwena.de\/?page_id=1697"},"modified":"2026-06-11T15:28:56","modified_gmt":"2026-06-11T13:28:56","slug":"schnelltest-bauhandwerk","status":"publish","type":"page","link":"https:\/\/biwena.de\/index.php\/schnelltest-bauhandwerk\/","title":{"rendered":""},"content":{"rendered":"\n