{"id":233,"date":"2026-03-03T13:08:12","date_gmt":"2026-03-03T13:08:12","guid":{"rendered":"https:\/\/rettungstormarn.wenk-hh.de\/?page_id=233"},"modified":"2026-03-03T13:08:30","modified_gmt":"2026-03-03T13:08:30","slug":"trello","status":"publish","type":"page","link":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/trello\/","title":{"rendered":"Trello"},"content":{"rendered":"\n<!-- Trello Widget Snippet f\u00fcr Qualido -->\n<div id=\"trello-widget\">\n    <style>\n        \/* Scoped CSS: Wirkt sich nur innerhalb von #trello-widget aus, um das Qualido-Design nicht zu st\u00f6ren *\/\n        #trello-widget {\n            --trello-blue: #0079bf;\n            --list-bg: #ebecf0;\n            --card-bg: #ffffff;\n            --text-main: #172b4d;\n            --text-muted: #5e6c84;\n            --btn-hover: rgba(9, 30, 66, 0.08);\n            --primary-btn: #0052cc;\n            --primary-btn-hover: #0043a6;\n            --danger-btn: #eb5a46;\n            \n            --label-green: #4bce97;\n            --label-yellow: #f5cd47;\n            --label-orange: #fea362;\n            --label-red: #f87168;\n            --label-purple: #9f8fef;\n            --label-blue: #579dff;\n\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\n            background-color: var(--trello-blue);\n            color: var(--text-main);\n            \/* Angepasste H\u00f6he f\u00fcr Widgets statt 100vh *\/\n            height: 700px; \n            max-height: 85vh;\n            display: flex;\n            flex-direction: column;\n            overflow: hidden;\n            position: relative;\n            border-radius: 8px;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n            margin: 10px 0;\n            text-align: left;\n        }\n\n        #trello-widget * { \n            box-sizing: border-box; \n        }\n        \n        #trello-widget .trello-header {\n            background-color: rgba(0,0,0,0.15);\n            padding: 12px 20px;\n            color: white;\n            display: flex;\n            align-items: center;\n            font-size: 1.2rem;\n            font-weight: bold;\n            box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n        }\n\n        #trello-widget .board {\n            flex-grow: 1;\n            display: flex;\n            padding: 20px;\n            overflow-x: auto;\n            align-items: flex-start;\n            gap: 20px;\n        }\n\n        #trello-widget .list {\n            background-color: var(--list-bg);\n            border-radius: 12px;\n            width: 300px;\n            min-width: 300px;\n            max-height: 100%;\n            display: flex;\n            flex-direction: column;\n            box-shadow: 0 1px 2px rgba(9,30,66,0.25);\n        }\n\n        #trello-widget .list-header {\n            padding: 12px 16px;\n            font-weight: 600;\n            font-size: 1rem;\n            color: var(--text-main);\n            margin: 0;\n        }\n\n        #trello-widget .list-cards {\n            flex-grow: 1;\n            overflow-y: auto;\n            padding: 0 8px;\n            min-height: 40px; \n        }\n\n        #trello-widget .list-cards::-webkit-scrollbar { width: 8px; }\n        #trello-widget .list-cards::-webkit-scrollbar-thumb { background: #bfc7d5; border-radius: 4px; }\n\n        #trello-widget .add-card-btn {\n            padding: 12px 16px;\n            color: var(--text-muted);\n            cursor: pointer;\n            border-radius: 0 0 12px 12px;\n            transition: background 0.2s;\n            font-size: 0.9rem;\n        }\n        #trello-widget .add-card-btn:hover { background-color: var(--btn-hover); color: var(--text-main); }\n\n        #trello-widget .card {\n            background-color: var(--card-bg);\n            border-radius: 8px;\n            padding: 10px;\n            margin-bottom: 8px;\n            box-shadow: 0 1px 2px rgba(9,30,66,0.15);\n            cursor: pointer;\n            position: relative;\n            transition: background 0.2s;\n            border: 1px solid transparent;\n        }\n        #trello-widget .card:hover { background-color: #f4f5f7; }\n        #trello-widget .card.dragging { opacity: 0.5; }\n\n        #trello-widget .card-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }\n        #trello-widget .card-label { height: 8px; width: 40px; border-radius: 4px; }\n        \n        #trello-widget .card-title { font-size: 0.9rem; word-wrap: break-word; line-height: 1.4; margin-bottom: 8px; }\n\n        #trello-widget .card-badges { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 0.8rem; flex-wrap: wrap; }\n        #trello-widget .badge { display: flex; align-items: center; gap: 4px; }\n        \n        #trello-widget .assignee-avatar {\n            width: 24px; height: 24px; border-radius: 50%; background: #dfe1e6;\n            color: var(--text-main); display: flex; align-items: center; justify-content: center;\n            font-size: 0.7rem; font-weight: bold; margin-left: auto;\n        }\n\n        \/* Modal - Absolute statt fixed, damit es Qualido nicht \u00fcberlagert *\/\n        #trello-widget .modal-overlay {\n            position: absolute; top: 0; left: 0; right: 0; bottom: 0;\n            background: rgba(0,0,0,0.6); display: none;\n            justify-content: center; align-items: flex-start;\n            z-index: 1000; overflow-y: auto; padding: 40px 20px;\n            border-radius: 8px;\n        }\n        #trello-widget .modal-overlay.active { display: flex; }\n\n        #trello-widget .modal-content {\n            background: #f4f5f7; width: 100%; max-width: 768px;\n            border-radius: 12px; padding: 24px; position: relative;\n            box-shadow: 0 8px 16px rgba(0,0,0,0.2);\n            margin-top: 20px;\n        }\n\n        #trello-widget .close-modal { position: absolute; top: 16px; right: 16px; font-size: 1.5rem; cursor: pointer; color: var(--text-muted); border: none; background: none; }\n        #trello-widget .close-modal:hover { color: var(--text-main); }\n\n        #trello-widget .modal-section { margin-bottom: 24px; }\n        #trello-widget .modal-section h3 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 12px 0; color: var(--text-main); }\n        \n        #trello-widget .input-title { width: 100%; font-size: 1.5rem; font-weight: bold; border: none; background: transparent; padding: 4px 8px; margin-left: -8px; border-radius: 4px; color: var(--text-main); font-family: inherit;}\n        #trello-widget .input-title:focus { background: white; outline: 2px solid var(--primary-btn); }\n\n        #trello-widget .modal-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; }\n\n        #trello-widget .rt-toolbar { background: white; border: 1px solid #dfe1e6; border-bottom: none; padding: 8px; border-radius: 4px 4px 0 0; display: flex; gap: 8px; }\n        #trello-widget .rt-toolbar button { background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; font-weight: bold; }\n        #trello-widget .rt-toolbar button:hover { background: var(--list-bg); }\n        #trello-widget .rt-editor { background: white; border: 1px solid #dfe1e6; min-height: 100px; padding: 12px; border-radius: 0 0 4px 4px; outline: none; line-height: 1.5;}\n        #trello-widget .rt-editor:focus { border-color: var(--primary-btn); }\n\n        #trello-widget .progress-bar-container { height: 8px; background: #dfe1e6; border-radius: 4px; margin-bottom: 12px; overflow: hidden; }\n        #trello-widget .progress-bar { height: 100%; background: var(--label-green); width: 0%; transition: width 0.3s; }\n        #trello-widget .cl-item { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }\n        #trello-widget .cl-item input[type=\"checkbox\"] { width: 16px; height: 16px; cursor: pointer; margin: 0;}\n        #trello-widget .cl-item input[type=\"text\"] { flex-grow: 1; padding: 6px; border: 1px solid transparent; background: transparent; border-radius: 4px; font-family: inherit;}\n        #trello-widget .cl-item input[type=\"text\"]:focus { background: white; border-color: var(--primary-btn); outline: none; }\n        #trello-widget .cl-item.done input[type=\"text\"] { text-decoration: line-through; color: var(--text-muted); }\n        #trello-widget .del-cl-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px;}\n        #trello-widget .del-cl-btn:hover { color: var(--danger-btn); }\n        \n        #trello-widget .trello-btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; transition: background 0.2s; font-family: inherit; font-size: 0.9rem;}\n        #trello-widget .btn-secondary { background: rgba(9, 30, 66, 0.04); color: var(--text-main); }\n        #trello-widget .btn-secondary:hover { background: rgba(9, 30, 66, 0.08); }\n        #trello-widget .btn-primary { background: var(--primary-btn); color: white; }\n        #trello-widget .btn-primary:hover { background: var(--primary-btn-hover); }\n        #trello-widget .btn-danger { background: var(--danger-btn); color: white; width: 100%; margin-top: 24px; }\n        #trello-widget .btn-danger:hover { background: #b04632; }\n\n        #trello-widget .sidebar-item { margin-bottom: 16px; }\n        #trello-widget .sidebar-item label { display: block; font-size: 0.8rem; font-weight: bold; color: var(--text-muted); margin-bottom: 4px; }\n        #trello-widget .sidebar-input { width: 100%; padding: 8px; border: 2px solid #dfe1e6; border-radius: 4px; font-family: inherit; margin: 0;}\n        #trello-widget .sidebar-input:focus { border-color: var(--primary-btn); outline: none; }\n\n        #trello-widget .label-picker { display: flex; flex-wrap: wrap; gap: 8px; }\n        #trello-widget .color-blob { width: 32px; height: 32px; border-radius: 4px; cursor: pointer; border: 2px solid transparent; }\n        #trello-widget .color-blob.selected { border-color: var(--text-main); transform: scale(1.1); }\n    <\/style>\n\n    <div class=\"trello-header\">\n        \ud83d\udcca Trellau Widget\n    <\/div>\n\n    <div class=\"board\" id=\"trello-board\">\n        <!-- Listen werden hier per JS eingef\u00fcgt -->\n    <\/div>\n\n    <!-- Modal f\u00fcr Kartendetails -->\n    <div class=\"modal-overlay\" id=\"trello-cardModal\">\n        <div class=\"modal-content\">\n            <button class=\"close-modal\" id=\"trello-closeModalBtn\">\u00d7<\/button>\n            \n            <div class=\"modal-section\">\n                <input type=\"text\" id=\"trello-modalTitle\" class=\"input-title\" placeholder=\"Kartenname...\">\n            <\/div>\n\n            <div class=\"modal-grid\">\n                <div class=\"main-col\">\n                    <div class=\"modal-section\">\n                        <h3>\ud83d\udcdd Beschreibung<\/h3>\n                        <div class=\"rt-toolbar\">\n                            <button id=\"rt-bold\" title=\"Fett\"><b>B<\/b><\/button>\n                            <button id=\"rt-italic\" title=\"Kursiv\"><i>I<\/i><\/button>\n                            <button id=\"rt-underline\" title=\"Unterstrichen\"><u>U<\/u><\/button>\n                            <button id=\"rt-list\" title=\"Liste\">\u2022 Liste<\/button>\n                        <\/div>\n                        <div class=\"rt-editor\" id=\"trello-modalDesc\" contenteditable=\"true\" placeholder=\"F\u00fcge eine detaillierte Beschreibung hinzu...\"><\/div>\n                    <\/div>\n\n                    <div class=\"modal-section\">\n                        <h3>\u2705 Checkliste<\/h3>\n                        <div class=\"progress-bar-container\">\n                            <div class=\"progress-bar\" id=\"trello-modalProgress\"><\/div>\n                        <\/div>\n                        <div id=\"trello-modalChecklist\"><\/div>\n                        <button class=\"trello-btn btn-secondary\" id=\"trello-addChecklistBtn\" style=\"margin-top: 8px;\">+ Element hinzuf\u00fcgen<\/button>\n                    <\/div>\n                <\/div>\n\n                <div class=\"sidebar-col\">\n                    <div class=\"sidebar-item\">\n                        <label>\ud83d\udc64 Verantwortlich<\/label>\n                        <input type=\"text\" id=\"trello-modalAssignee\" class=\"sidebar-input\" placeholder=\"Name eintragen...\">\n                    <\/div>\n                    \n                    <div class=\"sidebar-item\">\n                        <label>\ud83d\udcc5 F\u00e4lligkeitsdatum<\/label>\n                        <input type=\"date\" id=\"trello-modalDueDate\" class=\"sidebar-input\">\n                    <\/div>\n\n                    <div class=\"sidebar-item\">\n                        <label>\ud83c\udff7\ufe0f Labels<\/label>\n                        <div class=\"label-picker\" id=\"trello-modalLabels\">\n                            <div class=\"color-blob\" style=\"background: var(--label-green)\" data-color=\"var(--label-green)\"><\/div>\n                            <div class=\"color-blob\" style=\"background: var(--label-yellow)\" data-color=\"var(--label-yellow)\"><\/div>\n                            <div class=\"color-blob\" style=\"background: var(--label-orange)\" data-color=\"var(--label-orange)\"><\/div>\n                            <div class=\"color-blob\" style=\"background: var(--label-red)\" data-color=\"var(--label-red)\"><\/div>\n                            <div class=\"color-blob\" style=\"background: var(--label-purple)\" data-color=\"var(--label-purple)\"><\/div>\n                            <div class=\"color-blob\" style=\"background: var(--label-blue)\" data-color=\"var(--label-blue)\"><\/div>\n                        <\/div>\n                    <\/div>\n\n                    <button class=\"trello-btn btn-primary\" style=\"width: 100%; margin-top: 16px;\" id=\"trello-saveCardBtn\">\ud83d\udcbe Speichern<\/button>\n                    <button class=\"trello-btn btn-danger\" id=\"trello-deleteCardBtn\">\ud83d\uddd1\ufe0f Karte l\u00f6schen<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ Um Kapselung zu garantieren und Namenskonflikte in Qualido zu vermeiden, wickeln wir das Script in eine IIFE.\n(function() {\n    \/\/ --- STATE MANAGEMENT ---\n    let boardData = {\n        lists: [\n            { id: 'list-1', title: 'To Do' },\n            { id: 'list-2', title: 'Umsetzung' },\n            { id: 'list-3', title: 'Erledigt' }\n        ]\n    };\n\n    let cardsData = {\n        'card-1': {\n            id: 'card-1', listId: 'list-1', title: 'Projekt Setup', \n            description: 'Grundlegende <b>HTML<\/b> Struktur im Qualido-Portal aufsetzen.',\n            labels: ['var(--label-blue)', 'var(--label-green)'],\n            dueDate: '2026-03-05', assignee: 'Max',\n            checklist: [{ id: 'cl-1', text: 'Snippet einf\u00fcgen', done: true }, { id: 'cl-2', text: 'CSS anpassen', done: false }]\n        },\n        'card-2': {\n            id: 'card-2', listId: 'list-1', title: 'Drag & Drop implementieren', \n            description: '', labels: ['var(--label-orange)'], dueDate: '', assignee: '', checklist: []\n        },\n        'card-3': {\n            id: 'card-3', listId: 'list-2', title: 'Widget testen', \n            description: '', labels: ['var(--label-purple)'], dueDate: '', assignee: 'Anna', checklist: []\n        }\n    };\n\n    let currentOpenCardId = null;\n\n    \/\/ Globale Variablen f\u00fcr DOM Elemente\n    let boardEl;\n    let modal;\n\n    \/\/ --- INITIALIZATION ---\n    function init() {\n        \/\/ Erst hier die Elemente suchen\n        boardEl = document.getElementById('trello-board');\n        modal = document.getElementById('trello-cardModal');\n\n        \/\/ CMS-Timing-Fix: Wenn Qualido das HTML noch nicht vollst\u00e4ndig gerendert hat,\n        \/\/ wartet das Script 100ms und probiert es erneut, bis es da ist.\n        if (!boardEl || !modal) {\n            setTimeout(init, 100);\n            return;\n        }\n\n        renderBoard();\n        setupDragAndDrop();\n        setupEventListeners();\n    }\n\n    \/\/ --- RENDERING ---\n    function renderBoard() {\n        boardEl.innerHTML = ''; \n\n        boardData.lists.forEach(list => {\n            const listEl = document.createElement('div');\n            listEl.className = 'list';\n            listEl.innerHTML = `\n                <div class=\"list-header\">${list.title}<\/div>\n                <div class=\"list-cards\" id=\"${list.id}\" data-list-id=\"${list.id}\"><\/div>\n                <div class=\"add-card-btn\" data-target-list=\"${list.id}\">\u2795 Karte hinzuf\u00fcgen<\/div>\n            `;\n            boardEl.appendChild(listEl);\n        });\n\n        \/\/ Event Listeners f\u00fcr dynamisch generierte Add-Buttons\n        document.querySelectorAll('.add-card-btn').forEach(btn => {\n            btn.addEventListener('click', (e) => addNewCard(e.target.getAttribute('data-target-list')));\n        });\n\n        Object.values(cardsData).forEach(card => renderCardElement(card));\n    }\n\n    function renderCardElement(cardData) {\n        const listContainer = document.getElementById(cardData.listId);\n        if (!listContainer) return;\n\n        let cardEl = document.getElementById(cardData.id);\n        if (!cardEl) {\n            cardEl = document.createElement('div');\n            cardEl.className = 'card';\n            cardEl.draggable = true;\n            cardEl.id = cardData.id;\n            cardEl.addEventListener('click', () => openModal(cardData.id));\n            listContainer.appendChild(cardEl);\n        }\n\n        let labelsHtml = cardData.labels.map(l => `<div class=\"card-label\" style=\"background: ${l}\"><\/div>`).join('');\n        \n        let badgesHtml = '';\n        if (cardData.dueDate) {\n            const d = new Date(cardData.dueDate);\n            badgesHtml += `<span class=\"badge\" title=\"F\u00e4lligkeit\">\ud83d\udcc5 ${d.toLocaleDateString('de-DE', {day:'2-digit', month:'2-digit'})}<\/span>`;\n        }\n        if (cardData.description.trim().length > 0) badgesHtml += `<span class=\"badge\" title=\"Beschreibung vorhanden\">\ud83d\udcdd<\/span>`;\n        if (cardData.checklist && cardData.checklist.length > 0) {\n            const doneCount = cardData.checklist.filter(c => c.done).length;\n            badgesHtml += `<span class=\"badge\" title=\"Checklisten-Fortschritt\">\u2705 ${doneCount}\/${cardData.checklist.length}<\/span>`;\n        }\n        if (cardData.assignee) {\n            const initials = cardData.assignee.substring(0,2).toUpperCase();\n            badgesHtml += `<span class=\"assignee-avatar\" title=\"Verantwortlich: ${cardData.assignee}\">${initials}<\/span>`;\n        }\n\n        cardEl.innerHTML = `\n            ${labelsHtml ? `<div class=\"card-labels\">${labelsHtml}<\/div>` : ''}\n            <div class=\"card-title\">${escapeHTML(cardData.title)}<\/div>\n            ${badgesHtml ? `<div class=\"card-badges\">${badgesHtml}<\/div>` : ''}\n        `;\n\n        attachDragEventsToCard(cardEl);\n    }\n\n    \/\/ --- DRAG AND DROP ---\n    function setupDragAndDrop() {\n        boardEl.addEventListener('dragover', e => {\n            e.preventDefault(); \n            const container = e.target.closest('.list-cards');\n            if (!container) return;\n\n            const draggable = document.querySelector('.dragging');\n            if(!draggable) return;\n\n            const afterElement = getDragAfterElement(container, e.clientY);\n            if (afterElement == null) {\n                container.appendChild(draggable);\n            } else {\n                container.insertBefore(draggable, afterElement);\n            }\n        });\n\n        boardEl.addEventListener('drop', e => {\n            e.preventDefault();\n            const container = e.target.closest('.list-cards');\n            const draggable = document.querySelector('.dragging');\n            if (container && draggable) {\n                const cardId = draggable.id;\n                const newListId = container.id;\n                cardsData[cardId].listId = newListId;\n            }\n        });\n    }\n\n    function attachDragEventsToCard(card) {\n        card.addEventListener('dragstart', () => {\n            card.classList.add('dragging');\n            setTimeout(() => card.style.opacity = '0.5', 0);\n        });\n\n        card.addEventListener('dragend', () => {\n            card.classList.remove('dragging');\n            card.style.opacity = '1';\n        });\n    }\n\n    function getDragAfterElement(container, y) {\n        const draggableElements = [...container.querySelectorAll('.card:not(.dragging)')];\n        return draggableElements.reduce((closest, child) => {\n            const box = child.getBoundingClientRect();\n            const offset = y - box.top - box.height \/ 2;\n            if (offset < 0 &#038;&#038; offset > closest.offset) {\n                return { offset: offset, element: child };\n            } else {\n                return closest;\n            }\n        }, { offset: Number.NEGATIVE_INFINITY }).element;\n    }\n\n    \/\/ --- CARD ACTIONS ---\n    function generateId() {\n        return 'id-' + Math.random().toString(36).substr(2, 9);\n    }\n\n    function addNewCard(listId) {\n        const title = prompt('Titel der neuen Karte:');\n        if (!title || title.trim() === '') return;\n\n        const newId = generateId();\n        cardsData[newId] = {\n            id: newId, listId: listId, title: title, description: '', \n            labels: [], dueDate: '', assignee: '', checklist: []\n        };\n        \n        renderCardElement(cardsData[newId]);\n    }\n\n    function deleteCurrentCard() {\n        if(confirm('M\u00f6chtest du diese Karte wirklich l\u00f6schen?')) {\n            const cardEl = document.getElementById(currentOpenCardId);\n            if(cardEl) cardEl.remove();\n            delete cardsData[currentOpenCardId];\n            closeModal();\n        }\n    }\n\n    \/\/ --- MODAL & EVENTS ---\n    function setupEventListeners() {\n        \/\/ Modal Buttons\n        document.getElementById('trello-closeModalBtn').addEventListener('click', closeModal);\n        document.getElementById('trello-saveCardBtn').addEventListener('click', saveCard);\n        document.getElementById('trello-deleteCardBtn').addEventListener('click', deleteCurrentCard);\n        document.getElementById('trello-addChecklistBtn').addEventListener('click', addChecklistItem);\n\n        \/\/ Rich Text Formatierung\n        document.getElementById('rt-bold').addEventListener('click', () => formatText('bold'));\n        document.getElementById('rt-italic').addEventListener('click', () => formatText('italic'));\n        document.getElementById('rt-underline').addEventListener('click', () => formatText('underline'));\n        document.getElementById('rt-list').addEventListener('click', () => formatText('insertUnorderedList'));\n\n        \/\/ Modal Klick-Outside Listener\n        modal.addEventListener('click', (e) => {\n            if (e.target.id === 'trello-cardModal') closeModal();\n        });\n\n        \/\/ Label Picker Events\n        document.querySelectorAll('#trello-modalLabels .color-blob').forEach(blob => {\n            blob.addEventListener('click', (e) => toggleLabel(e.target));\n        });\n    }\n\n    function formatText(command) {\n        document.execCommand(command, false, null);\n        document.getElementById('trello-modalDesc').focus();\n    }\n\n    function openModal(cardId) {\n        currentOpenCardId = cardId;\n        const data = cardsData[cardId];\n\n        document.getElementById('trello-modalTitle').value = data.title;\n        document.getElementById('trello-modalDesc').innerHTML = data.description;\n        document.getElementById('trello-modalAssignee').value = data.assignee;\n        document.getElementById('trello-modalDueDate').value = data.dueDate;\n\n        document.querySelectorAll('#trello-modalLabels .color-blob').forEach(blob => {\n            blob.classList.remove('selected');\n            if (data.labels.includes(blob.getAttribute('data-color'))) {\n                blob.classList.add('selected');\n            }\n        });\n\n        renderChecklistInModal(data.checklist);\n        modal.classList.add('active');\n    }\n\n    function closeModal() {\n        modal.classList.remove('active');\n        currentOpenCardId = null;\n    }\n\n    function saveCard() {\n        if (!currentOpenCardId) return;\n\n        const data = cardsData[currentOpenCardId];\n        data.title = document.getElementById('trello-modalTitle').value || 'Unbenannt';\n        data.description = document.getElementById('trello-modalDesc').innerHTML;\n        data.assignee = document.getElementById('trello-modalAssignee').value;\n        data.dueDate = document.getElementById('trello-modalDueDate').value;\n\n        data.labels = Array.from(document.querySelectorAll('#trello-modalLabels .color-blob.selected'))\n                            .map(b => b.getAttribute('data-color'));\n\n        renderCardElement(data);\n        closeModal();\n    }\n\n    function toggleLabel(element) {\n        element.classList.toggle('selected');\n    }\n\n    \/\/ --- CHECKLIST LOGIC ---\n    function renderChecklistInModal(checklist) {\n        const container = document.getElementById('trello-modalChecklist');\n        container.innerHTML = '';\n        \n        checklist.forEach((item, index) => {\n            const div = document.createElement('div');\n            div.className = `cl-item ${item.done ? 'done' : ''}`;\n            \n            const checkbox = document.createElement('input');\n            checkbox.type = 'checkbox';\n            checkbox.checked = item.done;\n            checkbox.addEventListener('change', (e) => toggleChecklistItem(index, e.target.checked));\n\n            const textInput = document.createElement('input');\n            textInput.type = 'text';\n            textInput.value = item.text;\n            textInput.addEventListener('change', (e) => updateChecklistItemText(index, e.target.value));\n\n            const delBtn = document.createElement('button');\n            delBtn.className = 'del-cl-btn';\n            delBtn.title = 'L\u00f6schen';\n            delBtn.innerHTML = '\u2716';\n            delBtn.addEventListener('click', () => deleteChecklistItem(index));\n\n            div.appendChild(checkbox);\n            div.appendChild(textInput);\n            div.appendChild(delBtn);\n            container.appendChild(div);\n        });\n\n        updateProgress(checklist);\n    }\n\n    function addChecklistItem() {\n        if(!currentOpenCardId) return;\n        const cl = cardsData[currentOpenCardId].checklist;\n        cl.push({ id: generateId(), text: 'Neues Element', done: false });\n        renderChecklistInModal(cl);\n    }\n\n    function toggleChecklistItem(index, isDone) {\n        if(!currentOpenCardId) return;\n        cardsData[currentOpenCardId].checklist[index].done = isDone;\n        renderChecklistInModal(cardsData[currentOpenCardId].checklist);\n    }\n\n    function updateChecklistItemText(index, text) {\n        if(!currentOpenCardId) return;\n        cardsData[currentOpenCardId].checklist[index].text = text;\n    }\n\n    function deleteChecklistItem(index) {\n        if(!currentOpenCardId) return;\n        cardsData[currentOpenCardId].checklist.splice(index, 1);\n        renderChecklistInModal(cardsData[currentOpenCardId].checklist);\n    }\n\n    function updateProgress(checklist) {\n        const bar = document.getElementById('trello-modalProgress');\n        if (checklist.length === 0) {\n            bar.style.width = '0%';\n            return;\n        }\n        const done = checklist.filter(c => c.done).length;\n        const percent = (done \/ checklist.length) * 100;\n        bar.style.width = `${percent}%`;\n        bar.style.background = percent === 100 ? 'var(--label-green)' : '#579dff';\n    }\n\n    \/\/ --- UTILS ---\n    function escapeHTML(str) {\n        return str.replace(\/[&<>'\"]\/g, \n            tag => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', \"'\": '&#39;', '\"': '&quot;' }[tag])\n        );\n    }\n\n    \/\/ Run\n    init();\n\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcca Trellau Widget \u00d7 \ud83d\udcdd Beschreibung B I U \u2022 Liste \u2705 Checkliste + Element hinzuf\u00fcgen \ud83d\udc64 Verantwortlich \ud83d\udcc5 F\u00e4lligkeitsdatum \ud83c\udff7\ufe0f Labels \ud83d\udcbe Speichern \ud83d\uddd1\ufe0f Karte l\u00f6schen<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-233","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/comments?post=233"}],"version-history":[{"count":3,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/233\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/pages\/233\/revisions\/236"}],"wp:attachment":[{"href":"https:\/\/rettungstormarn.wenk-hh.de\/index.php\/wp-json\/wp\/v2\/media?parent=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}