function positionAllDoors() { const cont = document.querySelector('.kalenderbild'); const img = cont?.querySelector('img'); if (!cont || !img) return; const imgRect = img.getBoundingClientRect(); const contRect = cont.getBoundingClientRect(); // Normale Türen + Openfields document.querySelectorAll('.door, .openfield').forEach(el => { const topPct = parseFloat(el.dataset.top) || 0; const leftPct = parseFloat(el.dataset.left) || 0; const widthPct = parseFloat(el.dataset.width) || 10; const widthPx = imgRect.width * (widthPct / 100); const heightPx = widthPx; // quadratisch el.style.position = 'absolute'; el.style.width = widthPx + 'px'; el.style.height = heightPx + 'px'; el.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px'; el.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px'; }); // Flügel: data-width = bereits halbe Breite → NICHT nochmal teilen! document.querySelectorAll('.fluegel').forEach(fluegel => { const topPct = parseFloat(fluegel.dataset.top) || 0; const leftPct = parseFloat(fluegel.dataset.left) || 0; const widthPct = parseFloat(fluegel.dataset.width) || 5; const widthPx = imgRect.width * (widthPct / 100); const heightPx = widthPx * 2; // volle Türhöhe fluegel.style.position = 'absolute'; fluegel.style.width = widthPx + 'px'; fluegel.style.height = heightPx + 'px'; fluegel.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px'; fluegel.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px'; }); }