document.addEventListener('DOMContentLoaded', () => {
    // Die neue ID 'berater-container' auswählen
    const container = document.getElementById('berater-container');

    fetch('json/berater.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Fehler beim Laden der Datei: json/berater.json');
            }
            return response.json();
        })
        .then(beraterDaten => {
            // Variablen von 'advisor' zu 'berater' geändert
            beraterDaten.forEach(berater => {
                const card = document.createElement('div');
                card.className = 'berater-card'; // Neue Klasse

                card.innerHTML = `
                    <div class="berater-image-wrapper">
                        <img src="${berater.image}" alt="${berater.name} Profilbild">
                    </div>
                    <h2 class="berater-name">${berater.name}</h2>
                    <h3 class="berater-rolle">${berater.role}</h3>
                    
                    <div class="berater-bio-box">
                        <h4 class="bio-title">${berater.bioTitle}</h4>
                        <p class="bio-text">${berater.bioText}</p>
                    </div>
                `;

                container.appendChild(card);
            });
        })
        .catch(error => {
            console.error('Fehler:', error);
            container.innerHTML = '<p style="color: #94A3B8;">Die Beraterprofile konnten nicht geladen werden.</p>';
        });
});