{"__browser":{"country":"DE","device":"unknown_device","mobile":false,"name":"chrome","platform":"mac","version":"151"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; bluetooth *; camera *; clipboard-read *; clipboard-write *; display-capture *; encrypted-media *; geolocation *; gyroscope *; language-detector *; language-model *; local-network-access *; microphone *; midi *; rewriter *; serial *; summarizer *; translator *; web-share *; writer *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzg2MjQxNTc4LCJpYXQiOjE3ODYyMzc5NzgsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.OEsZ9FJBmRP60NYhAxZiGJIP8Ynh9IGZuI8XqiVutWwpb3nwU7oQdwX-1mZ84NanjNAI_vbBdFz18tcOpWwR-dfapLpYgrgdFu8uwojnprbUP_WY7SX6FBUwSxt4FkZI9y3Q_cSm0zoFkEB8ybIjQnJqi6iIVqt17h0skZHE1TXN7Y3n7WT4KOh6Vds24dvfT_YDq-kbJRNRbFU6VetsxvPt641EvGO3iuLcsZbGNhciW2K_38X0XNaMjx4MElPhn-IWRCc7PUv6hscY8hAsRvrghqytlKLBuHIOXgRrgqCycTxT-N2pp-fkcPKj9Six1eYRfIBMpBkD4Yg4ZxRQWg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":88401249,\"user_id\":15552934,\"html\":\"<!DOCTYPE html>\\n<html lang=\\\"de\\\">\\n<head>\\n<meta charset=\\\"UTF-8\\\">\\n<meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n<title>Erstkontakt - ClarityLead Lab<\\/title>\\n<link href=\\\"https:\\/\\/fonts.googleapis.com\\/css2?family=Playfair+Display:wght@400;500&family=Inter:wght@400;500&display=swap\\\" rel=\\\"stylesheet\\\">\\n<style>\\n*{box-sizing:border-box;margin:0;padding:0;}\\nbody{background:#f7f5f2;font-family:'Inter',sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}\\n.wrap{width:100%;max-width:520px;}\\n.brand{text-align:center;margin-bottom:1.5rem;}\\n.brand-name{font-family:'Playfair Display',serif;font-size:15px;color:#B8860B;letter-spacing:0.08em;}\\n.progress{display:flex;align-items:center;margin-bottom:1.75rem;}\\n.step-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;transition:all .3s;flex-shrink:0;}\\n.step-dot.done{background:#d4edda;color:#2e7d32;}\\n.step-dot.active{background:#1F4E79;color:#fff;}\\n.step-dot.pending{background:#f0eeea;color:#aaa;border:0.5px solid #ddd;}\\n.step-line{flex:1;height:1px;background:#ddd;}\\n.step-line.done{background:#2e7d32;}\\n.card{background:#fff;border:0.5px solid #e8e4de;border-radius:12px;padding:2.25rem 2rem;box-shadow:0 2px 16px rgba(0,0,0,0.06);}\\n.intro-block{text-align:center;margin-bottom:1.75rem;}\\n.card-title{font-family:'Playfair Display',serif;font-size:22px;font-weight:500;color:#1a1a1a;margin-bottom:0.35rem;line-height:1.3;}\\n.line2,.line3{font-size:14px;color:#666;line-height:1.6;}\\n.line2{margin-bottom:0.15rem;}\\n.card-sub{font-size:14px;color:#666;margin-bottom:1.75rem;line-height:1.6;}\\n.field{margin-bottom:1.1rem;}\\n.field label{display:block;font-size:11px;color:#888;margin-bottom:6px;letter-spacing:0.06em;text-transform:uppercase;}\\n.opt{font-size:11px;text-transform:none;letter-spacing:0;color:#bbb;}\\n.field input{width:100%;padding:10px 12px;border:0.5px solid #ddd;border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;color:#222;background:#fff;outline:none;transition:border-color .2s;}\\n.field input:focus{border-color:#1F4E79;}\\n.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}\\n.btn-next{width:100%;margin-top:1.25rem;padding:12px;font-size:14px;font-weight:500;cursor:pointer;border-radius:8px;background:#1F4E79;color:#fff;border:none;transition:opacity .2s;font-family:'Inter',sans-serif;letter-spacing:0.04em;}\\n.btn-next:hover{opacity:.87;}\\n.btn-back{background:none;border:0.5px solid #ccc;color:#888;width:100%;margin-top:8px;padding:9px;font-size:13px;cursor:pointer;border-radius:8px;transition:background .2s;font-family:'Inter',sans-serif;}\\n.btn-back:hover{background:#f5f3f0;}\\n.btn-close{background:none;border:none;color:#bbb;width:100%;margin-top:4px;padding:9px;font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;text-decoration:underline;}\\n.btn-close:hover{color:#888;}\\n.panel{display:none;}\\n.panel.active{display:block;}\\n.confirm-box{background:#f7f5f2;border-radius:8px;padding:1rem 1.25rem;margin-bottom:1.25rem;font-size:14px;line-height:1.9;color:#555;}\\n.confirm-box strong{color:#1a1a1a;font-weight:500;}\\n.action-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.25rem;}\\n.action-card{border:0.5px solid #e0ddd8;border-radius:8px;padding:1.25rem 1rem;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .2s,background .2s;cursor:pointer;background:#fff;}\\n.action-card:hover{border-color:#1F4E79;background:#f0f5fb;}\\n.action-card .icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;}\\n.alabel{font-size:13px;font-weight:500;color:#1a1a1a;}\\n.adesc{font-size:12px;color:#888;}\\n.cal .icon{background:#E6F1FB;}\\n.mail .icon{background:#EAF3DE;}\\n.error{font-size:12px;color:#c0392b;margin-top:4px;display:none;}\\n.hint{font-size:11px;color:#bbb;margin-top:1rem;text-align:center;}\\n.footer-brand{text-align:center;margin-top:1.5rem;font-size:12px;color:#B8860B;font-family:'Playfair Display',serif;letter-spacing:0.05em;}\\n<\\/style>\\n<\\/head>\\n<body>\\n<div class=\\\"wrap\\\">\\n <div class=\\\"brand\\\">\\n <span class=\\\"brand-name\\\">ClarityLead Lab &middot; Michael B&ouml;hm<\\/span>\\n <\\/div>\\n <div class=\\\"progress\\\">\\n <div class=\\\"step-dot active\\\" id=\\\"d1\\\">1<\\/div>\\n <div class=\\\"step-line\\\" id=\\\"l1\\\"><\\/div>\\n <div class=\\\"step-dot pending\\\" id=\\\"d2\\\">2<\\/div>\\n <div class=\\\"step-line\\\" id=\\\"l2\\\"><\\/div>\\n <div class=\\\"step-dot pending\\\" id=\\\"d3\\\">3<\\/div>\\n <\\/div>\\n <div class=\\\"card\\\">\\n\\n <div class=\\\"panel active\\\" id=\\\"p1\\\">\\n <div class=\\\"intro-block\\\">\\n <p class=\\\"card-title\\\">Ihr Weg zum kostenlosen Erstkontakt.<\\/p>\\n <p class=\\\"line2\\\">Bitte nennen Sie uns Ihren Namen.<\\/p>\\n <p class=\\\"line3\\\">Wir melden uns pers&ouml;nlich bei Ihnen.<\\/p>\\n <\\/div>\\n <div class=\\\"row\\\">\\n <div class=\\\"field\\\">\\n <label>Name<\\/label>\\n <input type=\\\"text\\\" id=\\\"fname\\\" placeholder=\\\"z.B. M&uuml;ller\\\">\\n <div class=\\\"error\\\" id=\\\"e-fname\\\">Bitte Namen eingeben<\\/div>\\n <\\/div>\\n <div class=\\\"field\\\">\\n <label>Vorname <span class=\\\"opt\\\">(optional)<\\/span><\\/label>\\n <input type=\\\"text\\\" id=\\\"fvorname\\\" placeholder=\\\"z.B. Thomas\\\">\\n <\\/div>\\n <\\/div>\\n <button class=\\\"btn-next\\\" onclick=\\\"goTo2()\\\">Weiter &rarr;<\\/button>\\n <\\/div>\\n\\n <div class=\\\"panel\\\" id=\\\"p2\\\">\\n <p class=\\\"card-title\\\">Ihr Hotel<\\/p>\\n <div class=\\\"field\\\">\\n <label>Hotelname<\\/label>\\n <input type=\\\"text\\\" id=\\\"fhotel\\\" placeholder=\\\"z.B. Hotel Zur Post\\\">\\n <div class=\\\"error\\\" id=\\\"e-fhotel\\\">Bitte Hotelnamen eingeben<\\/div>\\n <\\/div>\\n <div class=\\\"field\\\">\\n <label>Stadt<\\/label>\\n <input type=\\\"text\\\" id=\\\"fstadt\\\" placeholder=\\\"z.B. M&uuml;nchen\\\">\\n <div class=\\\"error\\\" id=\\\"e-fstadt\\\">Bitte Stadt eingeben<\\/div>\\n <\\/div>\\n <button class=\\\"btn-next\\\" onclick=\\\"goTo3()\\\">Weiter &rarr;<\\/button>\\n <button class=\\\"btn-back\\\" onclick=\\\"goTo(1)\\\">&larr; Zur&uuml;ck<\\/button>\\n <\\/div>\\n\\n <div class=\\\"panel\\\" id=\\\"p3\\\">\\n <p class=\\\"card-title\\\">Wie erreichen wir Sie?<\\/p>\\n <div class=\\\"field\\\">\\n <label>E-Mail-Adresse<\\/label>\\n <input type=\\\"email\\\" id=\\\"femail\\\" placeholder=\\\"ihre@email.de\\\">\\n <div class=\\\"error\\\" id=\\\"e-femail\\\">Bitte g&uuml;ltige E-Mail eingeben<\\/div>\\n <\\/div>\\n <div class=\\\"field\\\">\\n <label>Telefonnummer <span class=\\\"opt\\\">(optional)<\\/span><\\/label>\\n <input type=\\\"tel\\\" id=\\\"ftel\\\" placeholder=\\\"+49 ...\\\">\\n <\\/div>\\n <button class=\\\"btn-next\\\" onclick=\\\"goToConfirm()\\\">Weiter &rarr;<\\/button>\\n <button class=\\\"btn-back\\\" onclick=\\\"goTo(2)\\\">&larr; Zur&uuml;ck<\\/button>\\n <\\/div>\\n\\n <div class=\\\"panel\\\" id=\\\"p4\\\">\\n <p class=\\\"card-title\\\">Alles bereit.<\\/p>\\n <p class=\\\"card-sub\\\">Entscheiden Sie, wie Sie mit uns in Kontakt treten wollen:<\\/p>\\n <div class=\\\"confirm-box\\\" id=\\\"summary\\\"><\\/div>\\n <div class=\\\"action-cards\\\">\\n <a class=\\\"action-card cal\\\" href=\\\"https:\\/\\/clarityleadlab.kajinga.com\\/hotel-call-termin\\\" target=\\\"_blank\\\">\\n <div class=\\\"icon\\\">&#128197;<\\/div>\\n <span class=\\\"alabel\\\">Termin buchen<\\/span>\\n <span class=\\\"adesc\\\">Direkt in den Kalender<\\/span>\\n <\\/a>\\n <a class=\\\"action-card mail\\\" id=\\\"maillink\\\" href=\\\"#\\\" target=\\\"_blank\\\">\\n <div class=\\\"icon\\\">&#9993;<\\/div>\\n <span class=\\\"alabel\\\">E-Mail schreiben<\\/span>\\n <span class=\\\"adesc\\\">clarityleadlab@kajinga.com<\\/span>\\n <\\/a>\\n <\\/div>\\n <button class=\\\"btn-back\\\" style=\\\"margin-top:1rem;\\\" onclick=\\\"goTo(3)\\\">&larr; Angaben &auml;ndern<\\/button>\\n <button class=\\\"btn-close\\\" onclick=\\\"closeForm()\\\">Formular schlie&szlig;en<\\/button>\\n <p class=\\\"hint\\\">Ihre Daten werden ausschlie&szlig;lich f&uuml;r die Kontaktaufnahme verwendet.<\\/p>\\n <\\/div>\\n\\n <\\/div>\\n <div class=\\\"footer-brand\\\">clarityleadlab.kajinga.com<\\/div>\\n<\\/div>\\n<script>\\nvar d = {};\\nfunction setStep(n) {\\n [1,2,3,4].forEach(function(i){ document.getElementById('p'+i).classList.toggle('active',i===n); });\\n [1,2,3].forEach(function(i){\\n var el=document.getElementById('d'+i);\\n if(i<n){el.className='step-dot done';el.textContent='\\\\u2713';}\\n else if(i===n){el.className='step-dot active';el.textContent=i;}\\n else{el.className='step-dot pending';el.textContent=i;}\\n });\\n [1,2].forEach(function(i){ document.getElementById('l'+i).className='step-line'+(i<n?' done':''); });\\n}\\nfunction goTo(n){setStep(n);}\\nfunction showErr(id,show){ var el=document.getElementById('e-'+id); if(el) el.style.display=show?'block':'none'; }\\nfunction goTo2(){\\n var name=document.getElementById('fname').value.trim();\\n showErr('fname',!name);\\n if(name){ d.name=name; d.vorname=document.getElementById('fvorname').value.trim(); setStep(2); }\\n}\\nfunction goTo3(){\\n var hotel=document.getElementById('fhotel').value.trim();\\n var stadt=document.getElementById('fstadt').value.trim();\\n showErr('fhotel',!hotel); showErr('fstadt',!stadt);\\n if(hotel&&stadt){ d.hotel=hotel; d.stadt=stadt; setStep(3); }\\n}\\nfunction closeForm(){\\n document.querySelector('.wrap').innerHTML='<div style=\\\"text-align:center;padding:3rem 1rem;\\\"><p style=\\\"font-family:Playfair Display,serif;font-size:20px;color:#1a1a1a;margin-bottom:0.5rem;\\\">Vielen Dank.<\\/p><p style=\\\"font-size:14px;color:#666;\\\">Wir freuen uns auf Ihren Kontakt.<\\/p><\\/div>';\\n}\\nfunction goToConfirm(){\\n var email=document.getElementById('femail').value.trim();\\n var tel=document.getElementById('ftel').value.trim();\\n var valid=email&&email.indexOf('@')>0;\\n showErr('femail',!valid);\\n if(!valid) return;\\n d.email=email; d.tel=tel;\\n var full=d.vorname?d.vorname+' '+d.name:d.name;\\n document.getElementById('summary').innerHTML=\\n '<strong>Name:<\\/strong> '+full+'<br>'+\\n '<strong>Hotel:<\\/strong> '+d.hotel+', '+d.stadt+'<br>'+\\n '<strong>E-Mail:<\\/strong> '+d.email+\\n (d.tel?'<br><strong>Telefon:<\\/strong> '+d.tel:'');\\n var gruss='Guten Tag Herr B\\\\u00f6hm,';\\n var zeile1='\\\\n\\\\nmein Name ist '+full+' vom '+d.hotel+' in '+d.stadt+'.';\\n var zeile2='\\\\n\\\\nIhr FK-Programm f\\\\u00fcr Hotels hat mein Interesse geweckt.\\\\n\\\\nBitte schicken Sie mir weitere Informationen zum Programm.';\\n var zeile3='\\\\n\\\\nSie erreichen mich unter:\\\\n\\\\nE-Mail: '+d.email+(d.tel?'\\\\nTelefon: '+d.tel:'');\\n var zeile4='\\\\n\\\\nMit freundlichen Gr\\\\u00fc\\\\u00dfen\\\\n\\\\n';\\n var subj=encodeURIComponent('LSC Hotel-Anfrage');\\n var body=encodeURIComponent(gruss+zeile1+zeile2+zeile3+zeile4);\\n document.getElementById('maillink').href='mailto:clarityleadlab@kajinga.com?subject='+subj+'&body='+body;\\n setStep(4);\\n}\\n<\\/script>\\n<\\/body>\\n<\\/html>\",\"css\":\"\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2026-03-27T10:47:57.198Z\",\"updated_at\":\"2026-03-27T10:48:41.635Z\",\"title\":\"Adressfenster Hotel\",\"description\":\"\",\"slug_hash\":\"vEXpMpV\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"94b31daa91a0888ea7bcf5d3177b1f6a\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"019d2ee8-6c0e-72ed-b5d7-9ccf59e80aa9\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null,\"hashid\":\"vEXpMpV\"}"}