<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_kas.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>
Cookie-Banner / Preference Center
kas.de: Banner-Vorlage aus Scan-Evidenz
kas.de: Banner-Vorlage mit 6 Kategorien, 1 Dienstsignal(en), 0 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.
Template
Einbettbarer Banner-Code
<button type="button" id="saferpage-consent-trigger">Datenschutz-Einstellungen</button>
window.addEventListener('saferpage-consent-update', function(e){ dataLayer.push({event:'saferpage_consent_update', consent:e.detail}); });
Kategorien
Erste und zweite Banner-Ebene
Erforderliche Dienste für Sicherheit und Grundfunktionen.
Erste Ebene · Immer aktivReichweitenmessung und Analyse erst nach Einwilligung.
Erste Ebene · Statistik erlaubenWerbung, Profiling, Retargeting und Tracking erst nach Einwilligung.
Erste Ebene · Marketing erlaubenVideos, Karten, Captchas, Fonts und eingebettete Inhalte verzögert laden.
Erste Ebene · Externe Inhalte erlaubenOptionale Funktionen getrennt von Statistik und Marketing steuerbar machen.
Zweite Ebene · Komfort erlaubenUnklare Dienste bleiben aus, bis Zweck und Rechtsgrundlage geklärt sind.
Zweite Ebene · Nicht aktivierenDienste
Welche Signale blockiert oder erklärt werden müssen
Notwendig
Vor Consent sichtbar. Aus SaferPage-Scan-Evidenz abgeleitet.- Blocking
- nein
- Consent Mode
- security_storage
Abnahme
Tests vor Produktivstart
Google-/Marketing-/Analytics-Tags laden erst nach restriktivem Default.
Ablehnen ist auf erster Ebene ähnlich sichtbar wie Akzeptieren.
Privacy Trigger bleibt nach Entscheidung sichtbar.
Dienste mit prior_blocking_required=true werden vor Freigabe technisch blockiert.
Version, Zeit, Kategorie, Region und Widerruf werden im Betreiber-System protokolliert.