TTDSG/GDPR Cookie Banner — fertig zum Einbauen.

<!-- Cookie Banner — generated by thenotperfect.de/tools/cookie-banner -->
<div id="cookie-banner" class="cookie-banner cookie-banner--bottom cookie-banner--card" role="dialog" aria-labelledby="cookie-banner-title" hidden>
  <div class="cookie-banner__inner">
    <div class="cookie-banner__content">
      <h2 id="cookie-banner-title" class="cookie-banner__title">🍪 Cookies</h2>
      <p class="cookie-banner__text">
        Wir verwenden Cookies um unsere Website zu verbessern.
        Analyse-Cookies helfen uns die Nutzung zu verstehen. 
        <a href="/datenschutz" class="cookie-banner__link">Mehr erfahren</a>
      </p>
    </div>
    <div class="cookie-banner__actions">
      <button type="button" class="cookie-banner__btn cookie-banner__btn--reject" data-cookie-action="reject">Nur notwendige</button>
      <button type="button" class="cookie-banner__btn cookie-banner__btn--accept" data-cookie-action="accept">Alle akzeptieren</button>
    </div>
  </div>
</div>

<style>
  .cookie-banner { position: fixed; z-index: 9999; font-family: system-ui, -apple-system, sans-serif; }
  .cookie-banner--bottom { bottom: 1rem; left: 1rem; right: 1rem; }
  .cookie-banner--top { top: 1rem; left: 1rem; right: 1rem; }
  .cookie-banner--corner { bottom: 1rem; right: 1rem; max-width: 380px; }
  .cookie-banner--modal { top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 500px; }
  .cookie-banner__inner {
    background: #ffffff; color: #1a1a1a; padding: 1.25rem; border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15); display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
    border: 1px solid rgba(0,0,0,0.06);
  }
  
  
  .cookie-banner__content { flex: 1 1 280px; }
  .cookie-banner__title { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; }
  .cookie-banner__text { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #4a4a4a; }
  .cookie-banner__link { color: #84cc16; text-decoration: underline; }
  .cookie-banner__actions { display: flex; gap: 0.5rem; flex-shrink: 0; flex-wrap: wrap; }
  .cookie-banner__btn { padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; }
  .cookie-banner__btn--reject { background: transparent; color: #4a4a4a; border: 1px solid rgba(0,0,0,0.12); }
  .cookie-banner__btn--reject:hover { background: rgba(0,0,0,0.04); }
  .cookie-banner__btn--accept { background: #84cc16; color: #fff; }
  .cookie-banner__btn--accept:hover { filter: brightness(1.1); }
  @media (prefers-color-scheme: dark) {
    .cookie-banner__inner { background: #1a1a1a; color: #fff; border-color: rgba(255,255,255,0.1); }
    .cookie-banner__text { color: #aaa; }
    .cookie-banner__btn--reject { color: #ccc; border-color: rgba(255,255,255,0.15); }
    .cookie-banner__btn--reject:hover { background: rgba(255,255,255,0.06); }
  }
</style>

<!-- Cookie Banner Logic — TTDSG/GDPR konform — by thenotperfect.de -->
<script>
(function() {
  var STORAGE_KEY = 'cookie_consent';
  var BANNER = document.getElementById('cookie-banner');
  var CONSENT = JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null');

  function show() { if (BANNER) BANNER.hidden = false; }
  function hide() { if (BANNER) BANNER.hidden = true; }

  function setConsent(decision) {
    var consent = {
      decision: decision, // 'accepted' | 'rejected'
      timestamp: new Date().toISOString(),
      tools: ["ga4","mixpanel"]
    };
    localStorage.setItem(STORAGE_KEY, JSON.stringify(consent));
    hide();
    window.dispatchEvent(new CustomEvent('cookie-consent-changed', { detail: consent }));
    if (decision === 'accepted') {
      loadAnalytics();
      loadMarketing();
    }
  }

  function loadAnalytics() {
    // Load Google Analytics 4 here
    // Example: window.gtag = ...
    // Load Mixpanel here
    // Example: window.gtag = ...
    console.log('[consent] Analytics tools enabled');
  }

  function loadMarketing() {
    
    console.log('[consent] Marketing tools enabled');
  }

  // Wire up buttons
  document.querySelectorAll('[data-cookie-action]').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var action = btn.getAttribute('data-cookie-action');
      setConsent(action === 'accept' ? 'accepted' : 'rejected');
    });
  });

  // Show banner if no consent yet
  if (!CONSENT || !CONSENT.decision) {
    show();
  } else if (CONSENT.decision === 'accepted') {
    loadAnalytics();
    loadMarketing();
  }

  // Public API to revoke consent
  window.revokeCookieConsent = function() {
    localStorage.removeItem(STORAGE_KEY);
    show();
  };
})();
</script>