442 lines
19 KiB
HTML
442 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<!-- Cookiebot -->
|
||
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d6499c25-b3c2-41ac-8edf-60a4209f74c9" data-blockingmode="auto" type="text/javascript"></script>
|
||
<script>
|
||
window.addEventListener('CookiebotOnDialogDisplay', function() {
|
||
var dialog = document.getElementById('CybotCookiebotDialog');
|
||
if (dialog) {
|
||
dialog.style.setProperty('position', 'fixed', 'important');
|
||
dialog.style.setProperty('bottom', '0', 'important');
|
||
dialog.style.setProperty('top', 'auto', 'important');
|
||
dialog.style.setProperty('left', '0', 'important');
|
||
dialog.style.setProperty('right', '0', 'important');
|
||
dialog.style.setProperty('width', '100%', 'important');
|
||
dialog.style.setProperty('transform', 'none', 'important');
|
||
dialog.style.setProperty('margin', '0', 'important');
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- Google Tag Manager -->
|
||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||
})(window,document,'script','dataLayer','GTM-PNJK5FN7');</script>
|
||
<!-- End Google Tag Manager -->
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Kontaktieren Sie Profice für Ihre digitale Transformation. Webentwicklung, KI-Integration und Automatisierungslösungen.">
|
||
<meta name="keywords" content="Kontakt, Anfrage, Webentwicklung, KI, Automatisierung, Profice">
|
||
<meta name="author" content="Profice">
|
||
<meta property="og:title" content="Kontakt & Anfrage - Profice">
|
||
<meta property="og:description" content="Kontaktieren Sie uns für Ihre digitale Transformation">
|
||
<meta property="og:type" content="website">
|
||
<meta name="robots" content="index, follow">
|
||
<title>Kontakt & Anfrage - Profice</title>
|
||
|
||
<!-- Favicon with multiple sizes for better visibility -->
|
||
<link rel="icon" type="image/png" sizes="32x32" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="icon" type="image/png" sizes="512x512" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="152x152" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="144x144" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="120x120" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="114x114" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="72x72" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="60x60" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="57x57" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="shortcut icon" href="../images/logo/Appicon 1024X1024-01.png">
|
||
|
||
<!-- Preload critical resources -->
|
||
<link rel="preload" href="../style/design.css?v=20260304" as="style">
|
||
<link rel="preload" href="../style/cursor.css?v=20260304" as="style">
|
||
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
|
||
|
||
<!-- Stylesheets -->
|
||
<link rel="stylesheet" href="../style/design.css?v=20260304">
|
||
<link rel="stylesheet" href="../style/cursor.css?v=20260304">
|
||
|
||
<style>
|
||
.offers-main {
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
padding: 130px 24px 60px;
|
||
}
|
||
|
||
.offers-header {
|
||
text-align: center;
|
||
margin-bottom: 48px;
|
||
}
|
||
|
||
.offers-label {
|
||
display: inline-block;
|
||
color: var(--accent-orange);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 2.5px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.offers-title {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 14px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.offers-subtitle {
|
||
font-size: 17px;
|
||
color: var(--primary-mid);
|
||
max-width: 580px;
|
||
margin: 0 auto;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.form-card {
|
||
background: rgba(255, 255, 255, 0.92);
|
||
border-radius: 24px;
|
||
padding: 48px;
|
||
box-shadow: 0 15px 60px rgba(79, 71, 71, 0.12);
|
||
border: 1px solid rgba(79, 71, 71, 0.06);
|
||
}
|
||
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 24px;
|
||
}
|
||
|
||
.form-card .form-group textarea {
|
||
min-height: 140px;
|
||
}
|
||
|
||
.contact-strip {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 40px;
|
||
margin-bottom: 40px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.contact-strip-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
color: var(--primary-mid);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.contact-strip-item svg {
|
||
color: var(--accent-teal);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.field-error {
|
||
display: none;
|
||
color: #e05252;
|
||
font-size: 12px;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
#contact.invalid {
|
||
border-color: #e05252;
|
||
box-shadow: 0 0 0 4px rgba(224, 82, 82, 0.12);
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.offers-title { font-size: 28px; }
|
||
.form-card { padding: 28px 20px; }
|
||
.form-row { grid-template-columns: 1fr; gap: 0; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Google Tag Manager (noscript) -->
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNJK5FN7"
|
||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
<!-- End Google Tag Manager (noscript) -->
|
||
|
||
<!-- Hexagonal Background Canvas -->
|
||
<canvas id="hexCanvas"></canvas>
|
||
|
||
<!-- Top Banner -->
|
||
<header class="top-banner dark-theme">
|
||
<div class="top-banner-left">
|
||
<div class="banner-left">
|
||
<a href="../index.html" class="logo-link">
|
||
<img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="top-banner-center">
|
||
<nav class="main-nav">
|
||
<a href="../index.html#hero" class="nav-link">Start</a>
|
||
<a href="../index.html#systeme" class="nav-link">Systeme</a>
|
||
<a href="../index.html#qualification" class="nav-link">Für wen?</a>
|
||
<a href="../index.html#process" class="nav-link">Prozess</a>
|
||
<a href="../index.html#interaction" class="nav-link active">Kontakt</a>
|
||
<div class="nav-dropdown">
|
||
<a href="#" class="nav-link" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
|
||
<div class="dropdown-menu">
|
||
<a href="feed.html" class="dropdown-item">Google Feed</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="top-banner-right">
|
||
<button id="cursorToggle" aria-label="Cursor umschalten" title="Benutzerdefinierten Cursor umschalten">
|
||
<img src="../images/additional/cursor.png" alt="Standard Cursor" class="cursor-icon">
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Slide Menu -->
|
||
<nav class="slide-menu" id="slideMenu">
|
||
<a href="../index.html">Startseite</a>
|
||
<a href="offers.html" class="active">Kontakt & Anfrage</a>
|
||
<a href="leads.html">Leads Dashboard</a>
|
||
</nav>
|
||
|
||
<!-- Overlay -->
|
||
<div class="overlay" id="overlay"></div>
|
||
|
||
<!-- Main Content -->
|
||
<main class="offers-main">
|
||
|
||
<!-- Page Header -->
|
||
<div class="offers-header">
|
||
<span class="offers-label">Kontakt</span>
|
||
<h1 class="offers-title">Lassen Sie uns zusammenarbeiten</h1>
|
||
<p class="offers-subtitle">Schildern Sie uns Ihr Projekt — wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
|
||
</div>
|
||
|
||
<!-- Contact Strip -->
|
||
<div class="contact-strip">
|
||
<div class="contact-strip-item">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="3"/><polyline points="2,4 12,13 22,4"/></svg>
|
||
<a href="mailto:info@profice.de" style="color: inherit; text-decoration: none;">info@profice.de</a>
|
||
</div>
|
||
<div class="contact-strip-item">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.56 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.54a16 16 0 0 0 5.55 5.55l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||
<span>+49 000 0000000</span>
|
||
</div>
|
||
<div class="contact-strip-item">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
<span>Antwort innerhalb 24h</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Form Card -->
|
||
<div class="form-card">
|
||
<form id="contactForm">
|
||
<!-- Name + Organisation -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="name">Name *</label>
|
||
<input type="text" id="name" name="name" required placeholder="Ihr vollständiger Name">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="organisation">Organisation *</label>
|
||
<input type="text" id="organisation" name="organisation" required placeholder="Firmenname">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Email + Phone -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="contact">E-Mail *</label>
|
||
<input type="email" id="contact" name="contact" required placeholder="email@beispiel.de">
|
||
<span class="field-error" id="contactError">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Telefonnummer</label>
|
||
<input type="tel" id="phone" name="phone" placeholder="+49 000 0000000">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Service + Budget -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="service">Gewünschte Dienstleistung *</label>
|
||
<select id="service" name="service" required>
|
||
<option value="" disabled selected>Bitte wählen...</option>
|
||
<option value="google-feed">Google Feed</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="budget">Budget (€)</label>
|
||
<input type="text" id="budget" name="budget" placeholder="z.B. 5.000 – 10.000 €">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<div class="form-group">
|
||
<label for="description">Beschreibung</label>
|
||
<textarea id="description" name="description" placeholder="Beschreiben Sie Ihr Projekt oder Ihre Anfrage..."></textarea>
|
||
</div>
|
||
|
||
<button type="submit" class="submit-btn">Anfrage senden</button>
|
||
</form>
|
||
|
||
<div class="success-message" id="successMessage">
|
||
<h3>Vielen Dank!</h3>
|
||
<p>Ihre Anfrage wurde erfolgreich gesendet. Wir melden uns bald bei Ihnen.</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Footer Banner -->
|
||
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||
<style>
|
||
.footer-banner a { color: white !important; }
|
||
</style>
|
||
<div class="footer-container">
|
||
<div class="footer-content">
|
||
<!-- Company Info Section -->
|
||
<div class="footer-section">
|
||
<div class="footer-description">
|
||
<p>Intelligente Prozesse für nachhaltiges Wachstum</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Links Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Services</h4>
|
||
<nav class="footer-nav">
|
||
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Legal Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Rechtliches</h4>
|
||
<nav class="footer-nav">
|
||
<a href="datenschutz.html" class="footer-link">Datenschutzerklärung</a>
|
||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Contact Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Kontakt</h4>
|
||
<div class="footer-contact">
|
||
<div class="contact-item">
|
||
<img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
|
||
<span><a href="mailto:info@profice.de">info@profice.de</a></span>
|
||
</div>
|
||
</div>
|
||
<div class="social-media">
|
||
<div class="social-icons">
|
||
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||
<img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
|
||
</a>
|
||
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||
<img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<div class="footer-bottom-content">
|
||
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||
<div class="footer-bottom-links">
|
||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||
<span class="separator">•</span>
|
||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
var emailInput = document.getElementById('contact');
|
||
var emailError = document.getElementById('contactError');
|
||
var emailTimer = null;
|
||
|
||
function validateEmail(val) {
|
||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
|
||
}
|
||
|
||
function showEmailError() {
|
||
emailInput.classList.add('invalid');
|
||
emailError.style.display = 'block';
|
||
}
|
||
|
||
function clearEmailError() {
|
||
emailInput.classList.remove('invalid');
|
||
emailError.style.display = 'none';
|
||
}
|
||
|
||
emailInput.addEventListener('input', function() {
|
||
clearTimeout(emailTimer);
|
||
if (validateEmail(this.value)) {
|
||
clearEmailError();
|
||
} else {
|
||
var val = this.value;
|
||
emailTimer = setTimeout(function() {
|
||
if (val && !validateEmail(emailInput.value)) {
|
||
showEmailError();
|
||
}
|
||
}, 700);
|
||
}
|
||
});
|
||
|
||
emailInput.addEventListener('blur', function() {
|
||
clearTimeout(emailTimer);
|
||
if (this.value && !validateEmail(this.value)) {
|
||
showEmailError();
|
||
}
|
||
});
|
||
|
||
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
||
if (!validateEmail(emailInput.value)) {
|
||
e.stopImmediatePropagation();
|
||
e.preventDefault();
|
||
showEmailError();
|
||
emailInput.focus();
|
||
}
|
||
}, true);
|
||
|
||
document.getElementById('phone').addEventListener('input', function() {
|
||
var pos = this.selectionStart;
|
||
var before = this.value;
|
||
this.value = this.value.replace(/[^+\d ]/g, '');
|
||
if (before !== this.value) {
|
||
this.selectionStart = this.selectionEnd = pos - (before.length - this.value.length);
|
||
}
|
||
});
|
||
|
||
document.getElementById('budget').addEventListener('input', function() {
|
||
var pos = this.selectionStart;
|
||
var before = this.value;
|
||
this.value = this.value.replace(/[^\d,.\- ]/g, '');
|
||
if (before !== this.value) {
|
||
this.selectionStart = this.selectionEnd = pos - (before.length - this.value.length);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- Optimized script loading -->
|
||
<script src="../scripts/hex-background.js?v=20260304" defer></script>
|
||
<script src="../scripts/script.js?v=20260323" defer></script>
|
||
<script src="../scripts/cursor.js?v=20260304" defer></script>
|
||
<script src="../scripts/scroll-header.min.js?v=20260304" defer></script>
|
||
<script src="../scripts/console-image.js?v=20260304" defer></script>
|
||
|
||
</body>
|
||
</html>
|