document.addEventListener('DOMContentLoaded', (event) => {
    // Function to handle button clicks
    function handleButtonClick(event) {
        const buttonName = event.target.name;
        let radioButtonIndex;

        // Determine which radio button to check based on the button clicked
        if (buttonName === 'tv-s') {
            radioButtonIndex = 0; // First radio button
        } else if (buttonName === 'tv-m') {
            radioButtonIndex = 1; // Second radio button
        } else if (buttonName === 'tv-l') {
            radioButtonIndex = 2; // Third radio button
        }

        // Reset the checked status and remove the class from all radio buttons and their parent labels
        const radioButtons = document.getElementsByName('Produktauswahl');
        radioButtons.forEach((radioButton) => {
            radioButton.checked = false;
            const parentLabel = radioButton.closest('label');
            if (parentLabel) {
                parentLabel.classList.remove('cmp-form-options__checked');
            }
        });

        // Check the appropriate radio button and add the class to its parent label if a match was found
        if (radioButtonIndex !== undefined && radioButtons[radioButtonIndex]) {
            const selectedRadioButton = radioButtons[radioButtonIndex];
            selectedRadioButton.checked = true;
            const parentLabel = selectedRadioButton.closest('label');
            if (parentLabel) {
                parentLabel.classList.add('cmp-form-options__checked');
            }
        }
    }

    // Add event listeners to the buttons
    document.querySelector('button[name="tv-s"]').addEventListener('click', handleButtonClick);
    document.querySelector('button[name="tv-m"]').addEventListener('click', handleButtonClick);
    document.querySelector('button[name="tv-l"]').addEventListener('click', handleButtonClick);
});