.reveal{ opacity:0; transform: translateY(12px); will-change: opacity, transform; } .reveal.is-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); } @media (prefers-reduced-motion: reduce){ .reveal,.reveal.is-in{ transition:none; } } (()=>{const els=[...document.querySelectorAll('.reveal')]; const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('is-in');io.unobserve(e.target);}})},{threshold:.15}); els.forEach(el=>io.observe(el));})(); (()=> { // bewegt den Tint relativ zum Element function updateVars(el, clientX, clientY){ const r = el.getBoundingClientRect(); el.style.setProperty('--mx', (clientX - r.left) + 'px'); el.style.setProperty('--my', (clientY - r.top) + 'px'); } // Delegation: reagiert nur, wenn über .sv-hover-grid let raf = null, last = null, currentEl = null; function onPointerMove(e){ const el = e.target.closest('.sv-hover-grid'); if(!el) return; currentEl = el; last = { el, x:e.clientX, y:e.clientY }; if(raf) return; raf = requestAnimationFrame(() => { if (last) updateVars(last.el, last.x, last.y); raf = null; }); } // Bei Eintritt kurz initialisieren (sonst beginnt der Tint in der Mitte) function onEnter(e){ const el = e.target.closest('.sv-hover-grid'); if(!el) return; updateVars(el, e.clientX, e.clientY); } // Listener (passive = true für Scroll-Perf) window.addEventListener('pointermove', onPointerMove, { passive:true }); window.addEventListener('pointerenter', onEnter, { capture:true, passive:true }); })();

Projekt anfragen <!-- Backdrop (will be portaled to ) --> <!-- Panel (will be portaled to ) -->

Kontaktanfrage (Leistungsseite)

Contact

Vorname

Nachname

Telefonnummer

E-Mail

Ich erzähle Ihnen mal kurz etwas zu meinem Vorhaben...

Ich möchte gleich einen Termin für ein Erstgespräch (via Teams) festlegen:

Ja

Nein

Wählen Sie hier einen passenden Termin aus:

Mit dem Absenden des Formulars sind Sie damit einverstanden, dass Ihre Daten zur Beantwortung Ihrer Anfrage verarbeitet und zu Dokumentationszwecken gespeichert werden. Weitere Informationen finden Sie in unserer Datenschutzerklärung.

Anfrage jetzt sendenform.fluent_form_16 .wpf_has_custom_css.ff-btn-submit { background-color:rgba(0, 143, 191, 1);border-color:rgba(0, 143, 191, 1);color:#ffffff;border-radius:10px;min-width:100%; }form.fluent_form_16 .wpf_has_custom_css.ff-btn-submit:hover { background-color:rgba(47, 191, 239, 1);border-color:rgba(47, 191, 239, 1);color:#FFFFFF;min-width:100%; }

window.fluent_form_ff_form_instance_16_2 = {"id":"16","ajaxUrl":"https:\/\/servit.dev\/wp-admin\/admin-ajax.php","settings":{"layout":{"labelPlacement":"top","helpMessagePlacement":"with_label","errorMessagePlacement":"inline","asteriskPlacement":"asterisk-right"},"restrictions":{"denyEmptySubmission":{"enabled":false}}},"form_instance":"ff_form_instance_16_2","form_id_selector":"fluentform_16","rules":{"names[first_name]":{"required":{"value":true,"message":"Dieses Feld ist erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"}},"names[middle_name]":{"required":{"value":false,"message":"Dieses Feld ist erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"}},"names[last_name]":{"required":{"value":true,"message":"Dieses Feld ist erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"}},"phone":{"required":{"value":true,"message":"Dieses Feld ist erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"},"valid_phone_number":{"value":true,"message":"Telefonnummer ist nicht g\u00fcltig","global":false,"global_message":"Telefonnummer ist nicht g\u00fcltig"}},"email":{"required":{"value":true,"message":"Dieses Feld ist erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"},"email":{"value":true,"message":"Dieses Feld muss eine g\u00fcltige E-Mail-Adresse enthalten","global":false,"global_message":"Dieses Feld muss eine g\u00fcltige E-Mail-Adresse enthalten"}},"description_1":{"required":{"value":false,"message":"Dieses Feld ist erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"}},"input_radio_1":{"required":{"value":false,"message":"Dieses Feld ist erforderlich","global_message":"Dieses Feld ist erforderlich","global":true}},"fcal_booking":{"required":{"value":true,"message":"Datum und Uhrzeit des Termins sind erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"}},"gdpr-agreement":{"required":{"value":true,"message":"Dieses Feld ist erforderlich","global":false,"global_message":"Dieses Feld ist erforderlich"}}},"debounce_time":300,"conditionals":{"fcal_booking":{"type":"any","status":true,"conditions":[{"field":"input_radio_1","value":"Ja","operator":"="}],"condition_groups":[{"rules":[{"field":"","value":"","operator":""}],"title":"","isEditingTitle":false,"isPreviewOpen":false,"isGroupOpen":true}]}},"file_upload_settings":[]};

:root{ --sc-accent:#008fbf; --sc-text:#0f172a; --sc-bg:#ffffff; --sc-muted:#64748b; /* sehr hoher z-index (oberhalb typischer Header/Footer/Sticky) */ --sc-z-cta: 2147482000; --sc-z-backdrop: 2147483000; --sc-z-panel: 2147483500; } label { color:black;} .sc-wrap{ position:relative; isolation:isolate; } /* ===== Floating CTA (rechts, Mitte) ===== */ /* ===== Floating CTA – Update ===== */ .sc-cta-fab{ position: fixed; right: max(16px, env(safe-area-inset-right)); /* vertikal exakt zentriert */ top: 0; bottom: 0; /* erzeugt einen Block in voller Höhe */ margin-block: auto; /* zentriert das Element in diesem Block */ transform: none; /* kein translateY mehr nötig */ display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-radius: 10px; box-sizing: border-box; /* wichtig für exakte Höhe */ background: var(--sc-accent); color: #fff; font-weight: 700; font-size: 16px; line-height: 1.2; /* genug Platz für Unterlängen */ z-index: var(--sc-z-cta); box-shadow: 0 10px 30px rgba(0,0,0,.18); clip-path: inset(0 0 0 0 round 10px); transition: width .25s ease, box-shadow .2s ease, opacity .2s ease; white-space: nowrap; width: 58px; padding-bottom: 0; /* kein optischer Versatz mehr */ } .sc-cta-fab:active{ transform: translateY(1px); } /* kleiner Klick-Feedback ohne Center-Verschiebung */ .sc-cta-fab:hover { background:#2fbfef; } .sc-cta-icon{ display:inline-grid; place-items:center; flex:0 0 auto; } .sc-cta-label{ opacity:0; width:0; overflow:hidden; transition:opacity .2s ease, width .25s ease; } .sc-cta-arrow{ opacity:0; transform:translateX(-4px); transition:opacity .2s ease, transform .25s ease; flex:0 0 auto; } .sc-cta-icon svg{ display:block; } /* entfernt extra Inline-Space */ .sc-cta-label{ display:block; padding-top:1px; } /* minimaler Ausgleich für optische Mitte */ .sc-cta-arrow{ display:block; } /* Expand bei Hover + nach Scroll (.sc-expanded setzt JS) */ .sc-cta-fab:hover, .sc-cta-fab.sc-expanded{ width:240px; } .sc-cta-fab:hover .sc-cta-label, .sc-cta-fab.sc-expanded .sc-cta-label{ opacity:1; width:auto; } .sc-cta-fab:hover .sc-cta-arrow, .sc-cta-fab.sc-expanded .sc-cta-arrow{ opacity:1; transform:translateX(0); } @media (max-width:640px){ .sc-cta-fab{ top: auto; bottom: 16px; margin-block: 0; right: max(12px, env(safe-area-inset-right)); width: 58px; height: 56px; } .sc-cta-fab:hover{ width:58px; } /* mobil nur Icon */ } /* ===== Backdrop & Panel ===== */ .sc-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.48); opacity:0; transition: opacity .25s ease; z-index:var(--sc-z-backdrop); } .sc-panel{ position:fixed; top:0; right:0; height:100dvh; width:min(560px, 100vw); background:var(--sc-bg); color:var(--sc-text); box-shadow:-20px 0 60px rgba(0,0,0,.26); transform: translate3d(100%,0,0) rotateZ(.3deg) scale(.98); transition: transform .45s cubic-bezier(.22,1,.36,1); z-index:var(--sc-z-panel); display:flex; flex-direction:column; border-top-left-radius:12px; border-bottom-left-radius:12px; will-change: transform; } @media (max-width:640px){ .sc-panel{ width:100vw; border-radius:12px 12px 0 0; bottom:0; top:auto; right:auto; left:0; transform: translate3d(0,100%,0) scale(.98); } } .sc-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid #e5e7eb; position:sticky; top:0; background:var(--sc-bg); z-index:1; } .sc-head h3{ font-size:18px; margin:0; } .sc-close{ appearance:none; background:none; border:0; font-size:28px; line-height:1; cursor:pointer; color:var(--sc-muted); } .sc-body{ padding:16px 20px 28px; overflow:auto; } .sc-highlights{ display:flex; flex-wrap:wrap; gap:8px 12px; margin:0 0 16px; padding:0; list-style:none; color:var(--sc-muted); } .sc-highlights li{ display:flex; align-items:center; gap:6px; font-size:14px; background:#f6f8fb; padding:8px 10px; border-radius:10px; } .sc-form :where(form){ margin-top:8px; } .sc-trust{ margin-top:16px; display:grid; gap:6px; color:var(--sc-muted); font-size:12px; } .sc-noscript{ margin-top:16px; border:1px solid #e5e7eb; border-radius:10px; padding:16px; } .sc-backdrop[data-open]{ opacity:1; } .sc-panel[data-open-desktop]{ transform: translate3d(0,0,0) rotateZ(0) scale(1); } @media (max-width:640px){ .sc-panel[data-open-mobile]{ transform: translate3d(0,0,0) scale(1); } } @media (prefers-reduced-motion: reduce){ .sc-backdrop, .sc-panel, .sc-cta-fab{ transition:none !important; } } /* expandiert WÄHREND gescrollt wird */ .sc-cta-fab.sc-scrolling { width: 240px; } .sc-cta-fab.sc-scrolling .sc-cta-label, .sc-cta-fab.sc-scrolling .sc-cta-arrow{ opacity: 1; width: auto; transform: translateX(0); } /* optional: sobald der User ganz oben ist, immer kompakt */ body.at-top .sc-cta-fab{ width: 58px; } .ff_t_c{ font-size:1rem; } .hero-bg{ position:absolute; inset:-20% -10% -10% -10%; background-image: linear-gradient(#eceff3 1px, transparent 1px), linear-gradient(90deg, #eceff3 1px, transparent 1px); background-size:40px 40px; } @media (prefers-reduced-motion:no-preference){ .hero-bg{ animation:gridShift 20s linear infinite; } @keyframes gridShift{ 0%{ background-position:0 0, 0 0; } 100%{ background-position:80px 40px, 40px 80px; } } } /* Mobile: unten rechts, Hide/Show beim Scrollen */ @media (max-width:640px){ .sc-cta-fab{ position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; margin-block: 0; transform: none; width: 58px; height: 56px; padding: 0 14px; border-radius: 10px; transition: transform .28s ease, opacity .2s ease; z-index: var(--sc-z-cta); } .sc-cta-fab.is-hidden{ transform: translateY(140%); /* sauber aus dem Bild */ opacity: 0; } /* Mobile: niemals automatisch breit werden */ .sc-cta-fab.sc-scrolling{ width:58px; } } /* ========== Mobile FAB Verhaten ========== */ @media (max-width:640px){ .sc-cta-fab{ position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); top: auto; margin-block: 0; transform: none; width: 58px; height: 56px; padding: 0 14px; border-radius: 10px; transition: transform .28s ease, opacity .2s ease, width .25s ease; z-index: var(--sc-z-cta); } /* runter scrollen -> ausblenden */ .sc-cta-fab.is-hidden{ transform: translateY(140%); opacity: 0; } /* hoch scrollen -> einblenden + AUFKLAPPEN */ .sc-cta-fab.is-expanded{ width: 236px; /* gleiche Breite wie Desktop-Expand */ } .sc-cta-fab .sc-cta-label, .sc-cta-fab .sc-cta-arrow{ opacity: 0; width: 0; overflow: hidden; transform: translateX(-4px); transition: opacity .2s ease, transform .25s ease, width .25s ease; } .sc-cta-fab.is-expanded .sc-cta-label, .sc-cta-fab.is-expanded .sc-cta-arrow{ opacity: 1; width: auto; transform: translateX(0); } } /* ========== Mobile: Verläufe ausblenden ========== */ /* 1) Generisch: überall, wo du Gradient-Hintergründe nutzt */ @media (max-width:640px){ .no-mobile-gradient{ background-image: none !important; } } /* 2) Spezifisch: Hero-/Band-Verlaufe falls vorhanden */ @media (max-width:640px){ .hero{ background: #fff !important; } /* statt Verlauf */ .hero-bg{ display: none !important; } /* Deko-Grid/Verlauf-Layer abschalten */ .band{ background: var(--sv-bg-alt) !important; } /* ohne Verlauf */ } /* 3) Falls dein Button selbst einen Verlauf hat */ @media (max-width:640px){ .sc-cta-fab{ background-image: none !important; } } (()=>{ const fab = document.querySelector('.sc-cta-fab'); if (!fab) return; const mqMobile = window.matchMedia('(max-width: 640px)'); const passive = { passive: true }; let rafId = null; let idleTimer = null; let lastY = window.scrollY; /* ---------- Desktop: expand while scrolling ---------- */ function desktopTick(){ fab.classList.add('sc-scrolling'); // deine Desktop-Expand-Klasse clearTimeout(idleTimer); idleTimer = setTimeout(()=> fab.classList.remove('sc-scrolling'), 600); rafId = null; } function onDesktopScroll(){ if (rafId) return; rafId = requestAnimationFrame(desktopTick); } /* ---------- Mobile: down=hide, up=show+expand, idle=collapse ---------- */ function mobileTick(){ const y = window.scrollY; const dy = y - lastY; if (Math.abs(dy) > 6){ // Schwelle gegen Jitter if (dy > 0){ // Runter: ausblenden + sicher einklappen fab.classList.add('is-hidden'); fab.classList.remove('is-expanded'); } else { // Rauf: einblenden + AUFKLAPPEN fab.classList.remove('is-hidden'); fab.classList.add('is-expanded'); // Nach Idle wieder einklappen, aber sichtbar bleiben clearTimeout(idleTimer); idleTimer = setTimeout(()=> fab.classList.remove('is-expanded'), 700); } lastY = y; } rafId = null; } function onMobileScroll(){ if (rafId) return; rafId = requestAnimationFrame(mobileTick); } /* ---------- Mode switching ---------- */ function enableDesktop(){ window.removeEventListener('scroll', onMobileScroll, passive); window.addEventListener('scroll', onDesktopScroll, passive); fab.classList.remove('is-hidden','is-expanded'); // initialer „aktiv“-Kick fab.classList.add('sc-scrolling'); clearTimeout(idleTimer); idleTimer = setTimeout(()=> fab.classList.remove('sc-scrolling'), 800); } function enableMobile(){ window.removeEventListener('scroll', onDesktopScroll, passive); window.addEventListener('scroll', onMobileScroll, passive); fab.classList.remove('sc-scrolling'); // Desktop-Expand nie auf Mobile fab.classList.remove('is-hidden'); // start sicht- & tappbar fab.classList.remove('is-expanded'); lastY = window.scrollY; } function applyMode(){ mqMobile.matches ? enableMobile() : enableDesktop(); } mqMobile.addEventListener?.('change', applyMode); applyMode(); // Optional: „am Seitenanfang“-State fürs Styling function markTop(){ document.body.classList.toggle('at-top', window.scrollY matchMedia('(max-width:640px)').matches; /* ----- Portal: Panel & Backdrop in verschieben, um Z-Index/Stacking zu entkoppeln ----- */ function portalize(node){ if (!node || node.dataset.scPortaled) return node; const clone = node; // wir verschieben das Original (keine Klone nötig) document.body.appendChild(clone); clone.dataset.scPortaled = 'true'; return clone; } backdrop = portalize(localBackdrop); panel = portalize(localPanel); function openPanel(){ lastFocus = document.activeElement; backdrop.hidden = false; panel.hidden = false; requestAnimationFrame(() => { backdrop.setAttribute('data-open',''); if (isMobile()) panel.setAttribute('data-open-mobile',''); else panel.setAttribute('data-open-desktop',''); cta.setAttribute('aria-expanded','true'); trapFocus(panel); }); } function closePanel(){ backdrop.removeAttribute('data-open'); panel.removeAttribute('data-open-desktop'); panel.removeAttribute('data-open-mobile'); cta.setAttribute('aria-expanded','false'); setTimeout(() => { backdrop.hidden = true; panel.hidden = true; if (lastFocus) lastFocus.focus({preventScroll:true}); }, 250); } cta.addEventListener('click', openPanel); backdrop.addEventListener('click', closePanel); panel.querySelector('[data-sc-close]').addEventListener('click', closePanel); window.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePanel(); }); // Focus trap function trapFocus(modal){ const focusables = modal.querySelectorAll('a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])'); const first = focusables[0], last = focusables[focusables.length - 1]; if (first) first.focus(); function onKey(e){ if (e.key !== 'Tab') return; if (e.shiftKey && document.activeElement === first){ e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last){ e.preventDefault(); first.focus(); } } modal.addEventListener('keydown', onKey); } // CTA dezent erweitern nach Scroll (einmal) let expandedOnce = false; function onScrollExpand(){ if (expandedOnce) return; if (window.scrollY > 300){ cta.classList.add('sc-expanded'); expandedOnce = true; window.removeEventListener('scroll', onScrollExpand); if (!isMobile()) setTimeout(()=>cta.classList.remove('sc-expanded'), 3500); } } window.addEventListener('scroll', onScrollExpand, { passive:true }); // Deep-link: #projekt-anfragen öffnet Panel (load + hashchange + Klicks auf Links) function checkHashOpen(){ if (location.hash === '#projekt-anfragen'){ openPanel(); } } window.addEventListener('hashchange', checkHashOpen); checkHashOpen(); document.addEventListener('click', (e)=>{ const a = e.target.closest('a[href="#projekt-anfragen"]'); if (!a) return; e.preventDefault(); if (!panel.hidden) return; openPanel(); history.pushState(null, '', '#projekt-anfragen'); }); window.addEventListener('popstate', ()=>{ if (location.hash !== '#projekt-anfragen' && !panel.hidden){ closePanel(); } }); })();