Zukunftstest: Interaktives Dashboard<\/title>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n <style>\n :root {\n --primary-color: #2c7a7b;\n --primary-hover: #234e52;\n --bg-color: #f7fafc;\n --card-bg: #ffffff;\n --text-main: #2d3748;\n --text-muted: #718096;\n --border-color: #e2e8f0;\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.6;\n padding: 20px;\n margin: 0;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n h1 {\n color: var(--primary-color);\n text-align: center;\n margin-bottom: 5px;\n }\n\n p.subtitle {\n text-align: center;\n color: var(--text-muted);\n margin-bottom: 40px;\n }\n\n \/* --- DASHBOARD LAYOUT --- *\/\n .dashboard {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n align-items: flex-start;\n margin-bottom: 30px;\n }\n\n .sliders-panel {\n flex: 1;\n min-width: 320px;\n background: var(--card-bg);\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n\n .results-panel {\n flex: 1.5;\n min-width: 400px;\n background: var(--card-bg);\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n border-top: 5px solid var(--primary-color);\n }\n\n \/* --- SLIDER STYLES --- *\/\n .slider-group {\n margin-bottom: 22px;\n }\n\n .slider-group:last-child {\n margin-bottom: 0;\n }\n\n .slider-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-weight: bold;\n color: #2a4365;\n font-size: 1.05em;\n }\n\n .slider-value {\n background-color: #e6fffa;\n color: var(--primary-hover);\n padding: 2px 10px;\n border-radius: 12px;\n font-size: 0.9em;\n border: 1px solid #b2ebf2;\n }\n\n input[type=range] {\n width: 100%;\n cursor: pointer;\n accent-color: var(--primary-color);\n height: 6px;\n background: var(--border-color);\n border-radius: 4px;\n outline: none;\n }\n\n \/* --- RESULT STYLES --- *\/\n .score-display {\n font-size: 1.6em;\n font-weight: bold;\n margin-bottom: 10px;\n text-align: center;\n }\n\n .stage-title {\n font-size: 1.5em;\n color: var(--primary-color);\n margin: 0 0 15px 0;\n text-align: center;\n }\n\n .stage-description {\n margin-bottom: 20px;\n font-size: 1.05em;\n text-align: center;\n color: var(--text-main);\n }\n\n .tip-box {\n background: #ffffff;\n padding: 20px;\n border-radius: 6px;\n border: 1px solid #b2ebf2;\n font-weight: 500;\n font-size: 1em;\n margin-bottom: 20px;\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.1em;\n display: block;\n margin-bottom: 5px;\n }\n\n .chart-container {\n position: relative;\n height: 400px;\n width: 100%;\n background: white;\n border-radius: 8px;\n padding: 15px;\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);\n box-sizing: border-box;\n margin-top: auto;\n }\n\n \/* --- STAGES OVERVIEW STYLES --- *\/\n .all-stages-overview {\n background: #ffffff;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n border-top: 5px 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.4em;\n margin-bottom: 25px;\n }\n\n .stages-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n }\n\n .stage-card {\n padding: 15px;\n border: 2px solid var(--border-color);\n border-radius: 6px;\n background-color: var(--bg-color);\n transition: all 0.3s ease;\n opacity: 0.6;\n }\n\n .stage-card.active {\n border-color: var(--primary-color);\n background-color: #e6fffa;\n box-shadow: 0 4px 8px rgba(0,0,0,0.15);\n opacity: 1;\n transform: translateY(-2px);\n }\n\n .stage-card h4 {\n margin: 0 0 8px 0;\n color: #2a4365;\n font-size: 1em;\n line-height: 1.3;\n }\n\n .stage-card .points {\n font-size: 0.85em;\n color: #c05621;\n font-weight: bold;\n margin-bottom: 8px;\n display: block;\n }\n\n .stage-card p {\n margin: 0;\n font-size: 0.85em;\n color: var(--text-main);\n }\n\n \/* Responsivit\u00e4t *\/\n @media (max-width: 800px) {\n .dashboard { flex-direction: column; }\n .results-panel { min-width: 100%; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <h1>Zukunftstest: Nachhaltigkeits-Dashboard<\/h1>\n <p class=\"subtitle\">Pr\u00e4sentationsmodus: Bewegen Sie die Regler, um die Auswirkungen in Echtzeit zu simulieren.<\/p>\n\n <div class=\"dashboard\">\n <div class=\"sliders-panel\" id=\"sliders-container\">\n <\/div>\n\n <div class=\"results-panel\">\n <div class=\"score-display\">Gesamtpunktzahl: <span id=\"total-score\">0<\/span> \/ 40<\/div>\n <h2 class=\"stage-title\" id=\"stage-title\">…<\/h2>\n <p class=\"stage-description\" id=\"stage-desc\">…<\/p>\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=\"chart-container\">\n <canvas id=\"radarChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"all-stages-overview\">\n <h3>Alle Entwicklungsstufen im \u00dcberblick<\/h3>\n <div class=\"stages-grid\" id=\"stages-list\">\n <\/div>\n <\/div>\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 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.\", tip: \"Starten Sie klein. Suchen Sie sich ein Thema, das sofort Kosten spart. So wird aus der Pflicht ein 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.\" },\n { min: 21, max: 28, title: \"Kompetenz-Suchende (Fokus Bildung)\", desc: \"Sie befinden sich in einer spannenden Umbruchphase. Sie wissen, dass altes Wissen nicht mehr reicht.\", tip: \"Nutzen Sie dieses neue Wissen f\u00fcr die Kundenberatung. Wer Nachhaltigkeit erkl\u00e4ren kann, gewinnt 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, um Standards in Ihrer Region aktiv mitzubestimmen.\" },\n { min: 37, max: 40, title: \"Regenerative Innovator*innen (Fokus Sinn)\", desc: \"Sie geh\u00f6ren zu den Pionieren der Branche und gestalten die Zukunft der Gesellschaft aktiv mit.\", tip: \"Werden Sie zum Mentor! Dokumentieren Sie Leuchtturmprojekte und zeigen Sie, dass radikale Nachhaltigkeit funktioniert.\" }\n ];\n\n let userAnswers = new Array(categories.length).fill(3);\n let radarChartInstance = null;\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n renderSliders();\n initChart();\n updateDashboard();\n });\n\n function renderSliders() {\n const container = document.getElementById('sliders-container');\n container.innerHTML = '';\n\n categories.forEach((cat, index) => {\n const group = document.createElement('div');\n group.className = 'slider-group';\n \n group.innerHTML = `\n <div class=\"slider-header\">\n <span>${cat}<\/span>\n <span class=\"slider-value\" id=\"val-${index}\">${userAnswers[index]}<\/span>\n <\/div>\n <input type=\"range\" min=\"1\" max=\"5\" step=\"1\" value=\"${userAnswers[index]}\" data-index=\"${index}\">\n `;\n \n const input = group.querySelector('input');\n input.addEventListener('input', (e) => {\n const val = parseInt(e.target.value, 10);\n userAnswers[index] = val;\n document.getElementById(`val-${index}`).innerText = val;\n updateDashboard();\n });\n\n container.appendChild(group);\n });\n }\n\n function updateDashboard() {\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\n \/\/ Titel, Beschreibung und Tipp aktualisieren\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 \/\/ Live-Update der Stufen-Kacheln unten (visuelle Hervorhebung)\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}<\/h4>\n <span class=\"points\">${s.min} - ${s.max} Punkte ${isUserStage ? '\ud83c\udfaf' : ''}<\/span>\n <p>${s.desc}<\/p>\n `;\n stagesList.appendChild(card);\n });\n\n \/\/ Chart.js Daten aktualisieren\n if (radarChartInstance) {\n radarChartInstance.data.datasets[0].data = userAnswers;\n radarChartInstance.update();\n }\n }\n\n function initChart() {\n const ctx = document.getElementById('radarChart').getContext('2d');\n \n radarChartInstance = new Chart(ctx, {\n type: 'radar',\n data: {\n labels: categories,\n datasets: [{\n label: '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 pointRadius: 4,\n pointHoverRadius: 6\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n animation: {\n duration: 250 \/\/ Schnelle, fl\u00fcssige Animation f\u00fcr Slider\n },\n scales: {\n r: {\n angleLines: { display: true },\n suggestedMin: 1,\n suggestedMax: 5,\n ticks: { \n stepSize: 1, \n backdropColor: 'transparent',\n font: { size: 12 }\n },\n pointLabels: {\n font: { size: 13, weight: 'bold' }\n }\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 'Punktzahl: ' + context.raw;\n },\n afterLabel: function(context) {\n return '\\nBedeutung:\\n' + categoryDescriptions[context.dataIndex];\n }\n }\n }\n }\n }\n });\n }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-86\"><strong>Umweltauflagen:<\/strong> Diese Dimension beschreibt den Umgang mit neuen gesetzlichen Vorgaben und Standards<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-87\"><strong>Motivation:<\/strong> Hier wird der innere oder \u00e4u\u00dfere Antrieb f\u00fcr nachhaltiges Handeln im Betrieb erfasst<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-88\"><strong>Bildung:<\/strong> Dies zeigt den Stellenwert von Nachhaltigkeit in der Aus- und Weiterbildung Ihrer Mitarbeitenden<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-89\"><strong>Materialit\u00e4t:<\/strong> Diese Kategorie beleuchtet die Kriterien bei der Auswahl von Baustoffen und Materialien<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-90\"><strong>Beratung:<\/strong> Hierbei geht es darum, wie das Thema Klimaschutz aktiv in die Kundenberatung einflie\u00dft<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-91\"><strong>Wahrnehmung:<\/strong> Dies spiegelt die grunds\u00e4tzliche, unternehmensinterne Sichtweise auf das Thema Nachhaltigkeit wider<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-92\"><strong>Ressourcen:<\/strong> Diese Dimension bewertet den praktischen Umgang mit Ressourcen, Kreislaufwirtschaft und Abfall direkt auf der Baustelle<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-93\"><strong>Markt:<\/strong> Hier wird betrachtet, inwiefern Nachhaltigkeit als strategischer Wettbewerbs- und Innovationsfaktor genutzt wird<sup><\/sup>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Den QR Code scannen um den Schnelltest machen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"469\" src=\"https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode.png\" alt=\"QR CODE Schnelltest Bauwandel\" class=\"wp-image-1707\" style=\"width:557px;height:auto\" srcset=\"https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode.png 471w, https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode-300x300.png 300w, https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode-150x150.png 150w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Zukunftstest: Interaktives Dashboard Zukunftstest: Nachhaltigkeits-Dashboard Pr\u00e4sentationsmodus: Bewegen Sie die Regler, um die Auswirkungen in Echtzeit zu simulieren. Gesamtpunktzahl: 0 \/ 40 … … Ihr Tipp f\u00fcr die Praxis: … Alle […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1697,"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-1728","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1728","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=1728"}],"version-history":[{"count":5,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1728\/revisions"}],"predecessor-version":[{"id":1771,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1728\/revisions\/1771"}],"up":[{"embeddable":true,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1697"}],"wp:attachment":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/media?parent=1728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1728,"date":"2026-06-03T14:22:24","date_gmt":"2026-06-03T12:22:24","guid":{"rendered":"https:\/\/biwena.de\/?page_id=1728"},"modified":"2026-06-11T15:24:37","modified_gmt":"2026-06-11T13:24:37","slug":"dashboard-schnelltest","status":"publish","type":"page","link":"https:\/\/biwena.de\/index.php\/schnelltest-bauhandwerk\/dashboard-schnelltest\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Zukunftstest: Interaktives Dashboard<\/title>\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n\n <style>\n :root {\n --primary-color: #2c7a7b;\n --primary-hover: #234e52;\n --bg-color: #f7fafc;\n --card-bg: #ffffff;\n --text-main: #2d3748;\n --text-muted: #718096;\n --border-color: #e2e8f0;\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.6;\n padding: 20px;\n margin: 0;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n }\n\n h1 {\n color: var(--primary-color);\n text-align: center;\n margin-bottom: 5px;\n }\n\n p.subtitle {\n text-align: center;\n color: var(--text-muted);\n margin-bottom: 40px;\n }\n\n \/* --- DASHBOARD LAYOUT --- *\/\n .dashboard {\n display: flex;\n flex-wrap: wrap;\n gap: 30px;\n align-items: flex-start;\n margin-bottom: 30px;\n }\n\n .sliders-panel {\n flex: 1;\n min-width: 320px;\n background: var(--card-bg);\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n }\n\n .results-panel {\n flex: 1.5;\n min-width: 400px;\n background: var(--card-bg);\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n display: flex;\n flex-direction: column;\n border-top: 5px solid var(--primary-color);\n }\n\n \/* --- SLIDER STYLES --- *\/\n .slider-group {\n margin-bottom: 22px;\n }\n\n .slider-group:last-child {\n margin-bottom: 0;\n }\n\n .slider-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-weight: bold;\n color: #2a4365;\n font-size: 1.05em;\n }\n\n .slider-value {\n background-color: #e6fffa;\n color: var(--primary-hover);\n padding: 2px 10px;\n border-radius: 12px;\n font-size: 0.9em;\n border: 1px solid #b2ebf2;\n }\n\n input[type=range] {\n width: 100%;\n cursor: pointer;\n accent-color: var(--primary-color);\n height: 6px;\n background: var(--border-color);\n border-radius: 4px;\n outline: none;\n }\n\n \/* --- RESULT STYLES --- *\/\n .score-display {\n font-size: 1.6em;\n font-weight: bold;\n margin-bottom: 10px;\n text-align: center;\n }\n\n .stage-title {\n font-size: 1.5em;\n color: var(--primary-color);\n margin: 0 0 15px 0;\n text-align: center;\n }\n\n .stage-description {\n margin-bottom: 20px;\n font-size: 1.05em;\n text-align: center;\n color: var(--text-main);\n }\n\n .tip-box {\n background: #ffffff;\n padding: 20px;\n border-radius: 6px;\n border: 1px solid #b2ebf2;\n font-weight: 500;\n font-size: 1em;\n margin-bottom: 20px;\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.1em;\n display: block;\n margin-bottom: 5px;\n }\n\n .chart-container {\n position: relative;\n height: 400px;\n width: 100%;\n background: white;\n border-radius: 8px;\n padding: 15px;\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);\n box-sizing: border-box;\n margin-top: auto;\n }\n\n \/* --- STAGES OVERVIEW STYLES --- *\/\n .all-stages-overview {\n background: #ffffff;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n border-top: 5px 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.4em;\n margin-bottom: 25px;\n }\n\n .stages-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n }\n\n .stage-card {\n padding: 15px;\n border: 2px solid var(--border-color);\n border-radius: 6px;\n background-color: var(--bg-color);\n transition: all 0.3s ease;\n opacity: 0.6;\n }\n\n .stage-card.active {\n border-color: var(--primary-color);\n background-color: #e6fffa;\n box-shadow: 0 4px 8px rgba(0,0,0,0.15);\n opacity: 1;\n transform: translateY(-2px);\n }\n\n .stage-card h4 {\n margin: 0 0 8px 0;\n color: #2a4365;\n font-size: 1em;\n line-height: 1.3;\n }\n\n .stage-card .points {\n font-size: 0.85em;\n color: #c05621;\n font-weight: bold;\n margin-bottom: 8px;\n display: block;\n }\n\n .stage-card p {\n margin: 0;\n font-size: 0.85em;\n color: var(--text-main);\n }\n\n \/* Responsivit\u00e4t *\/\n @media (max-width: 800px) {\n .dashboard { flex-direction: column; }\n .results-panel { min-width: 100%; }\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"container\">\n <h1>Zukunftstest: Nachhaltigkeits-Dashboard<\/h1>\n <p class=\"subtitle\">Pr\u00e4sentationsmodus: Bewegen Sie die Regler, um die Auswirkungen in Echtzeit zu simulieren.<\/p>\n\n <div class=\"dashboard\">\n <div class=\"sliders-panel\" id=\"sliders-container\">\n <\/div>\n\n <div class=\"results-panel\">\n <div class=\"score-display\">Gesamtpunktzahl: <span id=\"total-score\">0<\/span> \/ 40<\/div>\n <h2 class=\"stage-title\" id=\"stage-title\">…<\/h2>\n <p class=\"stage-description\" id=\"stage-desc\">…<\/p>\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=\"chart-container\">\n <canvas id=\"radarChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"all-stages-overview\">\n <h3>Alle Entwicklungsstufen im \u00dcberblick<\/h3>\n <div class=\"stages-grid\" id=\"stages-list\">\n <\/div>\n <\/div>\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 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.\", tip: \"Starten Sie klein. Suchen Sie sich ein Thema, das sofort Kosten spart. So wird aus der Pflicht ein 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.\" },\n { min: 21, max: 28, title: \"Kompetenz-Suchende (Fokus Bildung)\", desc: \"Sie befinden sich in einer spannenden Umbruchphase. Sie wissen, dass altes Wissen nicht mehr reicht.\", tip: \"Nutzen Sie dieses neue Wissen f\u00fcr die Kundenberatung. Wer Nachhaltigkeit erkl\u00e4ren kann, gewinnt 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, um Standards in Ihrer Region aktiv mitzubestimmen.\" },\n { min: 37, max: 40, title: \"Regenerative Innovator*innen (Fokus Sinn)\", desc: \"Sie geh\u00f6ren zu den Pionieren der Branche und gestalten die Zukunft der Gesellschaft aktiv mit.\", tip: \"Werden Sie zum Mentor! Dokumentieren Sie Leuchtturmprojekte und zeigen Sie, dass radikale Nachhaltigkeit funktioniert.\" }\n ];\n\n let userAnswers = new Array(categories.length).fill(3);\n let radarChartInstance = null;\n\n document.addEventListener(\"DOMContentLoaded\", () => {\n renderSliders();\n initChart();\n updateDashboard();\n });\n\n function renderSliders() {\n const container = document.getElementById('sliders-container');\n container.innerHTML = '';\n\n categories.forEach((cat, index) => {\n const group = document.createElement('div');\n group.className = 'slider-group';\n \n group.innerHTML = `\n <div class=\"slider-header\">\n <span>${cat}<\/span>\n <span class=\"slider-value\" id=\"val-${index}\">${userAnswers[index]}<\/span>\n <\/div>\n <input type=\"range\" min=\"1\" max=\"5\" step=\"1\" value=\"${userAnswers[index]}\" data-index=\"${index}\">\n `;\n \n const input = group.querySelector('input');\n input.addEventListener('input', (e) => {\n const val = parseInt(e.target.value, 10);\n userAnswers[index] = val;\n document.getElementById(`val-${index}`).innerText = val;\n updateDashboard();\n });\n\n container.appendChild(group);\n });\n }\n\n function updateDashboard() {\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\n \/\/ Titel, Beschreibung und Tipp aktualisieren\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 \/\/ Live-Update der Stufen-Kacheln unten (visuelle Hervorhebung)\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}<\/h4>\n <span class=\"points\">${s.min} - ${s.max} Punkte ${isUserStage ? '\ud83c\udfaf' : ''}<\/span>\n <p>${s.desc}<\/p>\n `;\n stagesList.appendChild(card);\n });\n\n \/\/ Chart.js Daten aktualisieren\n if (radarChartInstance) {\n radarChartInstance.data.datasets[0].data = userAnswers;\n radarChartInstance.update();\n }\n }\n\n function initChart() {\n const ctx = document.getElementById('radarChart').getContext('2d');\n \n radarChartInstance = new Chart(ctx, {\n type: 'radar',\n data: {\n labels: categories,\n datasets: [{\n label: '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 pointRadius: 4,\n pointHoverRadius: 6\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n animation: {\n duration: 250 \/\/ Schnelle, fl\u00fcssige Animation f\u00fcr Slider\n },\n scales: {\n r: {\n angleLines: { display: true },\n suggestedMin: 1,\n suggestedMax: 5,\n ticks: { \n stepSize: 1, \n backdropColor: 'transparent',\n font: { size: 12 }\n },\n pointLabels: {\n font: { size: 13, weight: 'bold' }\n }\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 'Punktzahl: ' + context.raw;\n },\n afterLabel: function(context) {\n return '\\nBedeutung:\\n' + categoryDescriptions[context.dataIndex];\n }\n }\n }\n }\n }\n });\n }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-86\"><strong>Umweltauflagen:<\/strong> Diese Dimension beschreibt den Umgang mit neuen gesetzlichen Vorgaben und Standards<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-87\"><strong>Motivation:<\/strong> Hier wird der innere oder \u00e4u\u00dfere Antrieb f\u00fcr nachhaltiges Handeln im Betrieb erfasst<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-88\"><strong>Bildung:<\/strong> Dies zeigt den Stellenwert von Nachhaltigkeit in der Aus- und Weiterbildung Ihrer Mitarbeitenden<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-89\"><strong>Materialit\u00e4t:<\/strong> Diese Kategorie beleuchtet die Kriterien bei der Auswahl von Baustoffen und Materialien<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-90\"><strong>Beratung:<\/strong> Hierbei geht es darum, wie das Thema Klimaschutz aktiv in die Kundenberatung einflie\u00dft<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-91\"><strong>Wahrnehmung:<\/strong> Dies spiegelt die grunds\u00e4tzliche, unternehmensinterne Sichtweise auf das Thema Nachhaltigkeit wider<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-92\"><strong>Ressourcen:<\/strong> Diese Dimension bewertet den praktischen Umgang mit Ressourcen, Kreislaufwirtschaft und Abfall direkt auf der Baustelle<sup><\/sup>.<\/p>\n\n\n\n<p id=\"p-rc_8315875f3e745ad0-93\"><strong>Markt:<\/strong> Hier wird betrachtet, inwiefern Nachhaltigkeit als strategischer Wettbewerbs- und Innovationsfaktor genutzt wird<sup><\/sup>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Den QR Code scannen um den Schnelltest machen:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"471\" height=\"469\" src=\"https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode.png\" alt=\"QR CODE Schnelltest Bauwandel\" class=\"wp-image-1707\" style=\"width:557px;height:auto\" srcset=\"https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode.png 471w, https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode-300x300.png 300w, https:\/\/biwena.de\/wp-content\/uploads\/2026\/06\/schnelltest_qrcode-150x150.png 150w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n","protected":false},"excerpt":{"rendered":"<p>Zukunftstest: Interaktives Dashboard Zukunftstest: Nachhaltigkeits-Dashboard Pr\u00e4sentationsmodus: Bewegen Sie die Regler, um die Auswirkungen in Echtzeit zu simulieren. Gesamtpunktzahl: 0 \/ 40 … … Ihr Tipp f\u00fcr die Praxis: … Alle […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1697,"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-1728","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1728","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=1728"}],"version-history":[{"count":5,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1728\/revisions"}],"predecessor-version":[{"id":1771,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1728\/revisions\/1771"}],"up":[{"embeddable":true,"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/pages\/1697"}],"wp:attachment":[{"href":"https:\/\/biwena.de\/index.php\/wp-json\/wp\/v2\/media?parent=1728"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}