// === GDPR Two-step Consent (Centered Blocking) — GA4 + Meta Pixel — Mobile & SPA Safe === // IDs: GA4 = G-ED9L03Q1KV, Meta Pixel = 624950811953319 (function () { // ===== CONFIG ===== var KEY = "vh_cookie_consent_mid_v2"; var TTL_ACCEPT_ALL = 365 * 24 * 60 * 60 * 1000; // 12 months var TTL_PARTIAL = 180 * 24 * 60 * 60 * 1000; // 6 months var DEFAULTS = { analytics: false, marketing: false }; // GDPR: OFF by default var SHOW_MANAGE_LINK_ALWAYS = false; // <-- Floating-Button NICHT zeigen // Prevent duplicate if (document.getElementById("vhc-stage1") || document.getElementById("vhc-stage2")) return; // ===== Consent Mode v2 default (deny before any tag) ===== window.dataLayer = window.dataLayer || []; function gtag(){ dataLayer.push(arguments); } window.gtag = window.gtag || gtag; gtag('consent','default',{ ad_storage:'denied', analytics_storage:'denied', ad_user_data:'denied', ad_personalization:'denied' }); // ===== CSS (incl. mobile z-index boost) ===== var css = ` :root { --vhc-primary:#7c5cff; --vhc-radius:14px; } #vhc-stage1, #vhc-stage2, #vhc-manage { font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; } /* Stage 1: centered blocking modal */ #vhc-stage1 { position:fixed; inset:0; z-index:2147483647; display:none; } #vhc-stage1 .overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); } #vhc-stage1 .dialog { position:relative; margin:8vh auto 0; max-width:640px; width:92vw; background:#fff; color:#111; border-radius:var(--vhc-radius); box-shadow:0 12px 40px rgba(0,0,0,.35); } #vhc-stage1 .bd { padding:20px 22px; } #vhc-stage1 h3 { margin:0 0 8px; font-size:20px; } #vhc-stage1 p { margin:0 0 12px; font-size:14px; color:#333; } #vhc-stage1 .ft { padding:16px 22px; border-top:1px solid #eee; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; } .vh-btn { appearance:none; border:0; padding:12px 16px; border-radius:10px; font-size:14px; cursor:pointer; } .vh-btn.primary { background:var(--vhc-primary); color:#fff; font-weight:700; } .vh-btn.secondary { background:#f2f2f2; color:#111; border:1px solid #e3e3e3; } /* Stage 2: preferences modal */ #vhc-stage2 { position:fixed; inset:0; z-index:2147483647; display:none; } #vhc-stage2 .overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); } #vhc-stage2 .dialog { position:relative; margin:8vh auto 0; max-width:560px; width:92vw; background:#fff; color:#111; border-radius:var(--vhc-radius); box-shadow:0 12px 36px rgba(0,0,0,.35); } #vhc-stage2 .hd { padding:18px 20px; border-bottom:1px solid #eee; display:flex; align-items:center; justify-content:space-between; } #vhc-stage2 .hd h3 { margin:0; font-size:20px; } #vhc-stage2 .bd { padding:16px 20px; display:grid; gap:12px; } #vhc-stage2 .ft { padding:14px 20px; border-top:1px solid #eee; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; } .vh-row { border:1px solid #eee; border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .vh-row h4 { margin:0 0 4px; font-size:15px; } .vh-row p { margin:0; font-size:13px; color:#444; } .vh-switch { position:relative; width:46px; height:26px; } .vh-switch input { opacity:0; width:0; height:0; } .vh-slider { position:absolute; inset:0; background:#ccc; border-radius:999px; transition:.2s; cursor:pointer; } .vh-slider:before { content:""; position:absolute; height:20px; width:20px; left:3px; top:3px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s; } .vh-switch input:checked + .vh-slider { background:var(--vhc-primary); } .vh-switch input:checked + .vh-slider:before { transform:translateX(20px); } .vh-badge { font-size:11px; color:#fff; background:#888; border-radius:6px; padding:2px 6px; margin-left:6px; } .vh-locked { background:#999; } .vh-close { background:transparent; border:0; font-size:22px; cursor:pointer; line-height:1; } /* Manage link (hidden) */ #vhc-manage { position:fixed; left:12px; bottom:12px; z-index:2147483647; font-size:12px; background:#333; color:#fff; padding:6px 10px; border-radius:8px; text-decoration:none; display:none; } /* Hard-hide just in case */ #vhc-manage{ display:none !important; } @media (max-width: 420px){ #vhc-stage1 .dialog, #vhc-stage2 .dialog { width:94vw; margin:10vh auto 0; } } `; var st = document.createElement("style"); st.appendChild(document.createTextNode(css)); document.head.appendChild(st); // ===== Helpers ===== var $ = function(s){ return document.querySelector(s); }; function now(){ return Date.now(); } function onReady(fn){ if (document.readyState === 'complete' || document.readyState === 'interactive') setTimeout(fn,0); else document.addEventListener('DOMContentLoaded', fn, { once:true }); } function getConsent(){ try { return JSON.parse(localStorage.getItem(KEY) || 'null'); } catch(e){ return null; } } function isExpired(c){ return !c || !c.expiresAt || now() > c.expiresAt; } function applyConsentMode(c){ gtag('consent','update',{ analytics_storage: c.analytics ? 'granted' : 'denied', ad_storage: c.marketing ? 'granted' : 'denied', ad_user_data: c.marketing ? 'granted' : 'denied', ad_personalization:c.marketing ? 'granted' : 'denied' }); if (!c.marketing && window.fbq) { try { fbq('consent','revoke'); } catch(e){} } } function setConsent(c){ try { localStorage.setItem(KEY, JSON.stringify(c)); } catch(e){} try { window.dataLayer.push({event:"cookie_consent", consent:c}); } catch(e){} try { window.vhConsent?.onChange?.(c); } catch(e){} } function saveWithTTL(c, ttl){ c.timestamp = now(); c.expiresAt = now() + ttl; setConsent(c); applyConsentMode(c); } function lockScroll(lock){ document.documentElement.style.overflow = lock ? "hidden" : ""; document.body.style.overflow = lock ? "hidden" : ""; } // ===== Build UI ===== function buildUI(){ // Stage 1 (blocking, no close) var s1 = document.createElement("div"); s1.id = "vhc-stage1"; s1.innerHTML = `

`; document.body.appendChild(s1); // Stage 2 (preferences) var s2 = document.createElement("div"); s2.id = "vhc-stage2"; s2.innerHTML = `

`; document.body.appendChild(s2); // (Hidden) Manage link var manage = document.createElement("a"); manage.id = "vhc-manage"; manage.href="#"; manage.textContent = "Cookie preferences"; document.body.appendChild(manage); } // ===== Open/Close ===== function openStage1(){ var n=$("#vhc-stage1"); if(n){ n.style.display="block"; lockScroll(true);} } function closeStage1(){ var n=$("#vhc-stage1"); if(n){ n.style.display="none"; lockScroll(false);} } function openStage2(){ var n=$("#vhc-stage2"); if(n){ n.style.display="block"; } } function closeStage2(){ var n=$("#vhc-stage2"); if(n){ n.style.display="none"; } } // ===== Init & Events ===== function init(){ var saved = getConsent(); if (saved && !isExpired(saved)) { if (SHOW_MANAGE_LINK_ALWAYS) $("#vhc-manage").style.display="block"; applyConsentMode(saved); setTimeout(function(){ window.vhConsent?.onChange?.(saved); },0); } else { if (SHOW_MANAGE_LINK_ALWAYS) $("#vhc-manage").style.display="block"; $("#vhc-analytics").checked = DEFAULTS.analytics; $("#vhc-marketing").checked = DEFAULTS.marketing; openStage1(); } // Stage 1: Accept all — consent zuerst, dann speichern (sofortiges Feuern) $("#vhc-s1-accept").addEventListener("click", function(){ gtag('consent','update',{ analytics_storage:'granted', ad_storage:'granted', ad_user_data:'granted', ad_personalization:'granted' }); var c = { essential:true, analytics:true, marketing:true }; saveWithTTL(c, TTL_ACCEPT_ALL); closeStage1(); }); $("#vhc-s1-prefs").addEventListener("click", function(){ closeStage1(); openStage2(); }); // Stage 2: Accept all — sofort feuern $("#vhc-s2-accept").addEventListener("click", function(){ gtag('consent','update',{ analytics_storage:'granted', ad_storage:'granted', ad_user_data:'granted', ad_personalization:'granted' }); var c = { essential:true, analytics:true, marketing:true }; saveWithTTL(c, TTL_ACCEPT_ALL); closeStage2(); }); // Stage 2: Save preferences — sofort richtiger Consent $("#vhc-s2-save").addEventListener("click", function(){ var c = { essential:true, analytics: !!$("#vhc-analytics").checked, marketing: !!$("#vhc-marketing").checked }; gtag('consent','update',{ analytics_storage: c.analytics ? 'granted' : 'denied', ad_storage: c.marketing ? 'granted' : 'denied', ad_user_data: c.marketing ? 'granted' : 'denied', ad_personalization:c.marketing ? 'granted' : 'denied' }); var ttl = (c.analytics && c.marketing) ? TTL_ACCEPT_ALL : TTL_PARTIAL; saveWithTTL(c, ttl); closeStage2(); }); // (Hidden) Manage link bleibt funktionsfähig $("#vhc-manage").addEventListener("click", function(e){ e.preventDefault(); var s = getConsent() || {}; $("#vhc-analytics").checked = !!s.analytics; $("#vhc-marketing").checked = !!s.marketing; openStage2(); }); // Stage 2 close (overlay/X allowed) $("#vhc-stage2 .overlay").addEventListener("click", closeStage2); $("#vhc-s2-close").addEventListener("click", closeStage2); } // ===== SPA hook (re-check on route change) ===== function hookSpa(){ var _push = history.pushState, _rep = history.replaceState; function fire(){ try { vhConsentCheck(true); } catch(e){} } history.pushState = function(){ _push.apply(this, arguments); setTimeout(fire,0); }; history.replaceState = function(){ _rep.apply(this, arguments); setTimeout(fire,0); }; window.addEventListener('popstate', fire); } // ===== Public helpers ===== window.vhShowConsent = function(){ try { openStage1(); } catch(e){} }; window.vhConsentCheck = function(){ try { var s=getConsent(); if (!s || isExpired(s)) openStage1(); } catch(e){} }; // Öffner, den der Footer nutzt window.vhOpenPreferences = function () { try { var s = getConsent() || {}; var a = document.getElementById('vhc-analytics'); var m = document.getElementById('vhc-marketing'); if (a) a.checked = !!s.analytics; if (m) m.checked = !!s.marketing; openStage2(); } catch(e){} }; // ===== Lazy loaders: fire only after consent ===== window.vhConsent = { onChange: function(c){ // GA4 (Analytics) if (c.analytics && !window.ga4Loaded) { gtag('js', new Date()); gtag('config','G-ED9L03Q1KV',{ anonymize_ip:true }); var s=document.createElement('script'); s.async=true; s.src='https://www.googletagmanager.com/gtag/js?id=G-ED9L03Q1KV'; document.head.appendChild(s); window.ga4Loaded = true; } // Meta Pixel (Marketing) if (c.marketing && !window.metaPixelLoaded) { !(function(f,b,e,v,n,t,s){ if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s); })(window,document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init','624950811953319'); fbq('consent','grant'); fbq('track','PageView'); window.metaPixelLoaded = true; } if (!c.marketing && window.fbq) { try { fbq('consent','revoke'); } catch(e){} } } }; // ===== Mount everything safely ===== onReady(function(){ buildUI(); (function wait(){ var ok = document.getElementById('vhc-stage1') && document.getElementById('vhc-stage2') && document.getElementById('vhc-manage'); if (!ok) return setTimeout(wait, 30); hookSpa(); init(); })(); }); // ===== Footer trigger (class-based) ===== document.addEventListener('click', function (e) { var el = e.target.closest('.open-cookie-preferences, #cookie-prefs-link, [data-cookie-preferences], a[href="#cookie-preferences"]'); if (!el) return; e.preventDefault(); if (typeof window.vhOpenPreferences === 'function') window.vhOpenPreferences(); }); // Optional: URL-Trigger (https://deinedomain/?cookie-preferences=1) try { var u0 = new URL(location.href); if (u0.hash === '#cookie-preferences' || u0.searchParams.get('cookie-preferences') === '1') { setTimeout(function(){ window.vhOpenPreferences && window.vhOpenPreferences(); }, 0); } } catch(_) {} })(); // --- Mobile polish for cookie modal + link styling (override CSS) --- (function () { var css = ` /* Links deutlich als Link: blau + unterstrichen */ #vhc-stage1 .bd a, #vhc-stage2 .bd a, #vhc-stage1 p a, #vhc-stage2 p a { color: #1a73e8; text-decoration: underline; text-underline-offset: 2px; } /* Jede Einstellungszeile als 2-Spalten-Grid: Text links, Toggle rechts */ #vhc-stage2 .vh-row { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; } #vhc-stage2 .vh-row > div { min-width: 0; } /* Größere Switches (mobile friendly) */ #vhc-stage2 .vh-switch { position: relative; width: 52px; height: 30px; -webkit-tap-highlight-color: transparent; } #vhc-stage2 .vh-switch input { position:absolute; inset:0; opacity:0; width:52px; height:30px; margin:0; } #vhc-stage2 .vh-slider { position:absolute; inset:0; background:#cfcfcf; border-radius:999px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition:.2s; } #vhc-stage2 .vh-slider:before { content:""; position:absolute; width:24px; height:24px; top:3px; left:3px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s; } #vhc-stage2 .vh-switch input:checked + .vh-slider { background: var(--vhc-primary); } #vhc-stage2 .vh-switch input:checked + .vh-slider:before { transform: translateX(22px); } /* "Essential" dezenter */ #vhc-stage2 .vh-switch[aria-disabled="true"] .vh-slider { background:#d7d7d7; } #vhc-stage2 .vh-switch[aria-disabled="true"] .vh-slider:before { box-shadow:none; } /* mehr Luft */ #vhc-stage2 .bd { gap: 16px; } @media (max-width: 420px){ #vhc-stage2 .dialog { width: 94vw; } #vhc-stage2 .vh-switch { width: 54px; height: 32px; } #vhc-stage2 .vh-slider:before { width:26px; height:26px; } #vhc-stage2 .vh-switch input:checked + .vh-slider:before { transform: translateX(24px); } } `; var st = document.createElement('style'); st.appendChild(document.createTextNode(css)); document.head.appendChild(st); })();

We use cookies

Cookie preferences

Essential Always on

Analytics

Marketing

Signup to Get Started !