{"id":233,"date":"2026-08-06T08:08:14","date_gmt":"2026-08-06T06:08:14","guid":{"rendered":"https:\/\/bildung-ekhn.de\/?page_id=233"},"modified":"2026-08-26T08:19:47","modified_gmt":"2026-08-26T06:19:47","slug":"demokurs","status":"publish","type":"page","link":"https:\/\/bildung-ekhn.de\/?page_id=233","title":{"rendered":"Demokurs"},"content":{"rendered":"\n<div id=\"elearning-module-engine\" class=\"el-module-wrapper\">\n    <div id=\"el-loading-status\">Module werden geladen&#8230;<\/div>\n<\/div>\n\n<style>\n\/* --- BASIS DESIGN & ACCESSIBILITY --- *\/\n.el-module-wrapper {\n    width: 100%;\n    max-width: 850px;\n    margin: 2rem auto;\n    font-family: inherit; \/* Nutzt Blocksy Theme Font *\/\n}\n\n\/* --- KURS-KARTE (AKTIV) --- *\/\n.el-card {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1.5rem;\n    margin-bottom: 1rem;\n    border-radius: 8px;\n    border: 1px solid #e0e0e0;\n    background: #ffffff;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n    transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n.el-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n\/* --- STATUS: INAKTIV [Anforderung] --- *\/\n.el-card.el-status-inactive {\n    opacity: 0.5;\n    filter: grayscale(1);\n    pointer-events: none; \/* Ganze Karte nicht anklickbar *\/\n    border-style: dashed;\n    background-color: #f5f5f5 !important;\n}\n\n\/* Ausnahme: \"Modul merken\" Button muss bei inaktiven Modulen trotzdem aktiv bleiben [1] *\/\n.el-status-inactive .el-card-actions {\n    pointer-events: auto;\n}\n\n\/* --- ACCORDION \/ GRUPPIERUNG [Anforderung] --- *\/\n.el-accordion {\n    margin-bottom: 1rem;\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n.el-accordion-trigger {\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 1rem 1.5rem;\n    background: #f8f9fa;\n    border: none;\n    cursor: pointer;\n    font-weight: bold;\n    font-size: 1.1rem;\n    text-align: left;\n}\n\n.el-accordion-content {\n    display: none;\n    padding: 1rem;\n    background: #fff;\n    border-top: 1px solid #e0e0e0;\n}\n\n.el-accordion-content.is-open {\n    display: block;\n}\n\n\/* --- INFOS & BADGES --- *\/\n.el-course-title { margin: 0 0 0.5rem 0; font-size: 1.25rem; }\n.el-course-meta { font-size: 0.85rem; color: #666; margin-bottom: 0.5rem; }\n.el-badge {\n    display: inline-block;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 0.75rem;\n    text-transform: uppercase;\n    font-weight: bold;\n    margin-right: 5px;\n}\n.el-badge-pflicht { background: #e3f2fd; color: #0d47a1; }\n.el-badge-wahl { background: #f5f5f5; color: #444; }\n\n\/* --- ACTIONS --- *\/\n.el-card-actions { display: flex; gap: 10px; align-items: center; }\n.el-btn-main {\n    padding: 8px 16px;\n    background: #0073aa;\n    color: #fff !important;\n    text-decoration: none !important;\n    border-radius: 4px;\n    font-size: 0.9rem;\n}\n.el-btn-save {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    background: none;\n    border: 1px solid #ccc;\n    padding: 6px 10px;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 0.85rem;\n}\n.el-btn-save.is-saved { background: #ffcc00; border-color: #ffcc00; }\n\n\/* --- RESPONSIVE --- *\/\n@media (max-width: 600px) {\n    .el-card { flex-direction: column; align-items: flex-start; }\n    .el-card-actions { width: 100%; justify-content: space-between; margin-top: 1rem; }\n}\n<\/style>\n\n<script>\n(function() {\n    \/\/ KONFIGURATION\n    const CATEGORY_ID = 2; \/\/ Kategorie: Digitale Bildung 2027 [1]\n    const API_URL = `\/wp-json\/wp\/v2\/posts?categories=${CATEGORY_ID}&_embed`;\n\n    const container = document.getElementById('elearning-module-engine');\n\n    async function init() {\n        try {\n            const response = await fetch(API_URL);\n            if (!response.ok) throw new Error('API Error');\n            const posts = await response.json();\n            render(posts);\n        } catch (err) {\n            container.innerHTML = '<p>Fehler beim Laden der Module. Bitte pr\u00fcfen Sie die PHP-Konfiguration.<\/p>';\n        }\n    }\n\n    function render(posts) {\n        if (!posts || posts.length === 0) {\n            container.innerHTML = '<p>Keine Module gefunden.<\/p>';\n            return;\n        }\n\n        \/\/ Gruppierung nach modul_nummer [1]\n        const groups = posts.reduce((acc, post) => {\n            const mNum = post.meta?.modul_nummer || 'Unsortiert';\n            if (!acc[mNum]) acc[mNum] = [];\n            acc[mNum].push(post);\n            return acc;\n        }, {});\n\n        let html = '';\n\n        for (const [mNum, courses] in Object.entries(groups)) {\n            if (courses.length > 1) {\n                \/\/ Accordion-Kachel f\u00fcr Gruppen [1]\n                const first = courses[0];\n                html += `\n                <div class=\"el-accordion\">\n                    <button class=\"el-accordion-trigger\" aria-expanded=\"false\" aria-controls=\"grp-${mNum}\">\n                        <span>Modul ${mNum}: ${first.title.rendered}<\/span>\n                        <span>\u25bc<\/span>\n                    <\/button>\n                    <div id=\"grp-${mNum}\" class=\"el-accordion-content\">\n                        <p class=\"el-group-desc\">${first.excerpt.rendered}<\/p>\n                        <div class=\"el-group-list\">\n                            ${courses.map(c => renderCard(c)).join('')}\n                        <\/div>\n                    <\/div>\n                <\/div>`;\n            } else {\n                html += renderCard(courses[0]);\n            }\n        }\n\n        container.innerHTML = html;\n        setupAccordion();\n        setupLocalStorage();\n    }\n\n    function renderCard(post) {\n        const meta = post.meta || {};\n        const isInactive = meta.modul_status !== 'active';\n        const statusClass = isInactive ? 'el-status-inactive' : 'el-status-active';\n        const typClass = meta.modul_typ === '1' ? 'el-badge-pflicht' : 'el-badge-wahl';\n        const typLabel = meta.modul_typ === '1' ? 'Pflicht' : 'Wahl';\n\n        return `\n        <div class=\"el-card ${statusClass}\" data-id=\"${post.id}\">\n            <div class=\"el-card-info\">\n                <h3 class=\"el-course-title\">${post.title.rendered}<\/h3>\n                <div class=\"el-course-meta\">\n                    <span class=\"el-badge ${typClass}\">${typLabel}<\/span>\n                    ${meta.modul_datum ? `<span>\ud83d\udcc5 ${meta.modul_datum}<\/span> | ` : ''}\n                    ${meta.modul_ort ? `<span>\ud83d\udccd ${meta.modul_ort}<\/span>` : ''}\n                <\/div>\n                <div class=\"el-card-desc\">${post.excerpt.rendered}<\/div>\n            <\/div>\n            <div class=\"el-card-actions\">\n                <button class=\"el-btn-save\" onclick=\"window.toggleSave('${post.id}', this)\" aria-label=\"Modul merken\">\n                    <span>\u2b50<\/span> <span class=\"text\">Modul merken<\/span>\n                <\/button>\n                <a href=\"${post.link}\" class=\"el-btn-main\">Zum Kurs<\/a>\n            <\/div>\n        <\/div>`;\n    }\n\n    function setupAccordion() {\n        document.querySelectorAll('.el-accordion-trigger').forEach(btn => {\n            btn.addEventListener('click', () => {\n                const isOpen = btn.getAttribute('aria-expanded') === 'true';\n                btn.setAttribute('aria-expanded', !isOpen);\n                btn.nextElementSibling.classList.toggle('is-open');\n                btn.querySelector('span:last-child').textContent = !isOpen ? '\u25b2' : '\u25bc';\n            });\n        });\n    }\n\n    window.toggleSave = function(id, btn) {\n        const isSaved = btn.classList.toggle('is-saved');\n        const text = btn.querySelector('.text');\n        if (isSaved) {\n            localStorage.setItem(`saved_mod_${id}`, 'true');\n            text.textContent = 'Gemerkt';\n        } else {\n            localStorage.removeItem(`saved_mod_${id}`);\n            text.textContent = 'Modul merken';\n        }\n    };\n\n    function setupLocalStorage() {\n        document.querySelectorAll('.el-btn-save').forEach(btn => {\n            if (localStorage.getItem(`saved_mod_${btn.getAttribute('data-id')}`)) {\n                btn.classList.add('is-saved');\n                btn.querySelector('.text').textContent = 'Gemerkt';\n            }\n        });\n    }\n\n    init();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Module werden geladen&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-233","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=\/wp\/v2\/pages\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=233"}],"version-history":[{"count":9,"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=\/wp\/v2\/pages\/233\/revisions"}],"predecessor-version":[{"id":317,"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=\/wp\/v2\/pages\/233\/revisions\/317"}],"wp:attachment":[{"href":"https:\/\/bildung-ekhn.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}