.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 15px;
  z-index: 1000;
  display: none;
  animation: slideUp 0.5s forwards;
}

.cookie-consent__content p {
  margin: 0 0 15px;
  line-height: 1.5;
}

.cookie-consent__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cookie-consent__btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.cookie-consent__btn--accept {
  background-color: #4CAF50;
  color: white;
}

.cookie-consent__btn--accept:hover {
  background-color: #45a049;
}

.cookie-consent__btn--necessary {
  background-color: #f1f1f1;
  color: #333;
}

.cookie-consent__btn--necessary:hover {
  background-color: #e7e7e7;
}

.cookie-consent__btn--settings {
  background-color: transparent;
  border: 1px solid #ddd;
  color: #333;
}

.cookie-consent__btn--settings:hover {
  background-color: #f9f9f9;
}

/* Cookie-Einstellungen Modal */
.cookie-settings-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1001;
  overflow-y: auto;
}

.cookie-settings-modal__content {
  background-color: #fff;
  margin: 50px auto;
  padding: 20px;
  border-radius: 8px;
  max-width: 600px;
  position: relative;
}

.cookie-settings-modal__close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #aaa;
}

.cookie-settings-option {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.cookie-settings-option:last-child {
  border-bottom: none;
}

.cookie-settings-option label {
  font-weight: bold;
  margin-left: 10px;
}

.cookie-settings-option p {
  margin: 5px 0 0 30px;
  color: #666;
  font-size: 0.9em;
}

.cookie-settings-modal__save {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

@keyframes slideUp {
  from { transform: translateY(100px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 768px) {
  .cookie-consent__buttons {
    flex-direction: column;
  }
  
  .cookie-consent__btn {
    width: 100%;
  }
}

// Cookie Consent Manager
class CookieConsentManager {
  constructor() {
    this.consentBanner = document.getElementById('cookie-consent-banner');
    this.settingsModal = document.getElementById('cookie-settings-modal');
    this.cookiePreferences = {
      necessary: true, // Immer erforderlich
      analytics: false,
      marketing: false
    };
    
    // Prüfen, ob bereits Einstellungen gespeichert sind
    this.loadPreferences();
    
    // Ereignishandler binden
    this.bindEvents();
    
    // Banner anzeigen, wenn keine Einstellungen vorhanden sind
    if (!this.hasUserConsent()) {
      this.showConsentBanner();
    }
  }
  
  bindEvents() {
    // Alle akzeptieren Button
    document.querySelector('.cookie-consent__btn--accept').addEventListener('click', () => {
      this.acceptAll();
      this.hideConsentBanner();
    });
    
    // Nur notwendige Button
    document.querySelector('.cookie-consent__btn--necessary').addEventListener('click', () => {
      this.acceptNecessaryOnly();
      this.hideConsentBanner();
    });
    
    // Einstellungen Button
    document.querySelector('.cookie-consent__btn--settings').addEventListener('click', () => {
      this.showSettingsModal();
    });
    
    // Modal schließen
    document.querySelector('.cookie-settings-modal__close').addEventListener('click', () => {
      this.hideSettingsModal();
    });
    
    // Einstellungen speichern
    document.querySelector('.cookie-settings-modal__save').addEventListener('click', () => {
      this.saveSettingsFromModal();
      this.hideSettingsModal();
      this.hideConsentBanner();
    });
  }
  
  hasUserConsent() {
    return localStorage.getItem('cookieConsent') !== null;
  }
  
  loadPreferences() {
    const savedPreferences = localStorage.getItem('cookieConsent');
    if (savedPreferences) {
      this.cookiePreferences = JSON.parse(savedPreferences);
      
      // Checkboxen im Modal aktualisieren
      if (this.settingsModal) {
        document.getElementById('analytics-cookies').checked = this.cookiePreferences.analytics;
        document.getElementById('marketing-cookies').checked = this.cookiePreferences.marketing;
      }
      
      // Aktiviere zugelassene Cookies
      this.applyPreferences();
    }
  }
  
  savePreferences() {
    localStorage.setItem('cookieConsent', JSON.stringify(this.cookiePreferences));
    this.applyPreferences();
  }
  
  saveSettingsFromModal() {
    this.cookiePreferences.analytics = document.getElementById('analytics-cookies').checked;
    this.cookiePreferences.marketing = document.getElementById('marketing-cookies').checked;
    this.savePreferences();
  }
  
  applyPreferences() {
    // Hier könnten verschiedene Tracking-Skripte aktiviert/deaktiviert werden
    if (this.cookiePreferences.analytics) {
      // Analytics-Code aktivieren
      console.log('Analytics aktiviert');
    }
    
    if (this.cookiePreferences.marketing) {
      // Marketing-Code aktivieren
      console.log('Marketing aktiviert');
    }
  }
  
  acceptAll() {
    this.cookiePreferences.analytics = true;
    this.cookiePreferences.marketing = true;
    this.savePreferences();
  }
  
  acceptNecessaryOnly() {
    this.cookiePreferences.analytics = false;
    this.cookiePreferences.marketing = false;
    this.savePreferences();
  }
  
  showConsentBanner() {
    this.consentBanner.style.display = 'block';
  }
  
  hideConsentBanner() {
    this.consentBanner.style.display = 'none';
  }
  
  showSettingsModal() {
    this.settingsModal.style.display = 'block';
  }
  
  hideSettingsModal() {
    this.settingsModal.style.display = 'none';
  }
}

// Initialisieren, wenn DOM geladen ist
document.addEventListener('DOMContentLoaded', () => {
  new CookieConsentManager();
});