# Consent-Banner-Vorlage für das-nettz.de

das-nettz.de: Banner-Vorlage mit 6 Kategorien, 1 Dienstsignal(en), 1 Prior-Blocking-Regel(n) und Default-Denied Consent Mode.

> Diese Banner-Vorlage ist kein vollständiger CMP-Dienst. Betreiber müssen prior blocking, Backend/Consent-Ledger, Rechtsgrundlagen, Barrierefreiheit, Lokalisierung und Re-Scan vor Produktivstart fachlich freigeben.

## Kategorien
- Notwendig: Erforderliche Dienste für Sicherheit und Grundfunktionen. Default: active
- Statistik: Reichweitenmessung und Analyse erst nach Einwilligung. Default: denied
- Marketing / Tracking: Werbung, Profiling, Retargeting und Tracking erst nach Einwilligung. Default: denied
- Externe Medien: Videos, Karten, Captchas, Fonts und eingebettete Inhalte verzögert laden. Default: denied
- Komfort: Optionale Funktionen getrennt von Statistik und Marketing steuerbar machen. Default: denied
- Unklar / klassifizieren: Unklare Dienste bleiben aus, bis Zweck und Rechtsgrundlage geklärt sind. Default: denied

## Code
### HTML/CSS/JS Banner-Vorlage

```html
<div id="saferpage-consent" class="sp-consent" hidden>
  <div class="sp-consent__panel" role="dialog" aria-modal="true" aria-labelledby="sp-consent-title">
    <h2 id="sp-consent-title">Datenschutz-Einstellungen</h2>
    <p>Wir verwenden notwendige Dienste. Statistik, Marketing und externe Inhalte werden erst nach Ihrer Einwilligung geladen.</p>
    <div id="sp-consent-options"></div>
    <div class="sp-consent__actions">
      <button type="button" data-sp-consent="reject">Ablehnen</button>
      <button type="button" data-sp-consent="settings">Einstellungen</button>
      <button type="button" data-sp-consent="accept">Akzeptieren</button>
    </div>
  </div>
</div>
<button id="saferpage-consent-trigger" type="button">Datenschutz-Einstellungen</button>
<style>
.sp-consent{position:fixed;inset:auto 1rem 1rem 1rem;z-index:2147483000;font:16px/1.45 system-ui,sans-serif;color:#12212f}.sp-consent__panel{max-width:720px;margin:auto;background:#fff;border:1px solid #d9e2ec;border-radius:8px;box-shadow:0 24px 80px rgba(15,23,42,.24);padding:1rem}.sp-consent__actions{display:flex;gap:.5rem;flex-wrap:wrap}.sp-consent button{border:1px solid #123047;border-radius:6px;background:#fff;padding:.7rem 1rem;font-weight:700}.sp-consent button[data-sp-consent=accept]{background:#123047;color:#fff}.sp-consent__option{display:flex;gap:.75rem;margin:.65rem 0}.sp-consent__option input{inline-size:1.2rem;block-size:1.2rem}#saferpage-consent-trigger{position:fixed;right:1rem;bottom:1rem;z-index:2147482999}
</style>
<script>
(function(){
  var categories = [{"id":"notwendig","label":"Notwendig","description":"Erforderliche Dienste für Sicherheit und Grundfunktionen.","default_state":"active"},{"id":"statistik","label":"Statistik","description":"Reichweitenmessung und Analyse erst nach Einwilligung.","default_state":"denied"},{"id":"marketing","label":"Marketing / Tracking","description":"Werbung, Profiling, Retargeting und Tracking erst nach Einwilligung.","default_state":"denied"},{"id":"externe_medien","label":"Externe Medien","description":"Videos, Karten, Captchas, Fonts und eingebettete Inhalte verzögert laden.","default_state":"denied"},{"id":"komfort","label":"Komfort","description":"Optionale Funktionen getrennt von Statistik und Marketing steuerbar machen.","default_state":"denied"},{"id":"unklar","label":"Unklar / klassifizieren","description":"Unklare Dienste bleiben aus, bis Zweck und Rechtsgrundlage geklärt sind.","default_state":"denied"}];
  var key = 'sp_consent_das-nettz.de_v1';
  window.dataLayer = window.dataLayer || [];
  window.gtag = window.gtag || function(){ dataLayer.push(arguments); };
  gtag('consent','default',{ad_storage:'denied',analytics_storage:'denied',ad_user_data:'denied',ad_personalization:'denied',functionality_storage:'denied',security_storage:'granted'});
  var root = document.getElementById('saferpage-consent');
  var options = document.getElementById('sp-consent-options');
  var trigger = document.getElementById('saferpage-consent-trigger');
  function render(){
    options.innerHTML = categories.map(function(cat){
      var disabled = cat.id === 'notwendig' ? ' disabled checked' : '';
      return '<label class="sp-consent__option"><input type="checkbox" value="'+cat.id+'"'+disabled+'><span><b>'+cat.label+'</b><br>'+cat.description+'</span></label>';
    }).join('');
  }
  function update(mode){
    var granted = {notwendig:true};
    if(mode === 'accept') categories.forEach(function(cat){granted[cat.id]=true;});
    if(mode === 'settings') options.querySelectorAll('input').forEach(function(input){granted[input.value]=input.checked;});
    localStorage.setItem(key, JSON.stringify({version:'v1', updated_at:new Date().toISOString(), categories:granted}));
    gtag('consent','update',{ad_storage:granted.marketing?'granted':'denied',analytics_storage:granted.statistik?'granted':'denied',ad_user_data:granted.marketing?'granted':'denied',ad_personalization:granted.marketing?'granted':'denied',functionality_storage:(granted.externe_medien||granted.komfort)?'granted':'denied',security_storage:'granted'});
    root.hidden = true;
    window.dispatchEvent(new CustomEvent('saferpage-consent-update',{detail:granted}));
  }
  render();
  if(!localStorage.getItem(key)) root.hidden = false;
  trigger.addEventListener('click', function(){root.hidden=false;});
  root.addEventListener('click', function(ev){var mode=ev.target && ev.target.getAttribute('data-sp-consent'); if(mode==='reject') update('reject'); if(mode==='accept') update('accept'); if(mode==='settings') update('settings');});
})();
</script>
```

### Privacy Trigger Link

```html
<button type="button" id="saferpage-consent-trigger">Datenschutz-Einstellungen</button>
```

### GTM Event

```html
window.addEventListener('saferpage-consent-update', function(e){ dataLayer.push({event:'saferpage_consent_update', consent:e.detail}); });
```