Ruben/MitarbeiterPulsDashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

landingpage v1

Browse Source
This commit is contained in:
RubenRWU
2026-04-07 17:25:18 +02:00
commit 1692f31f51
13 changed files with 2270 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

797
stitch-landingpage.html Normal file
View File

@@ -0,0 +1,797 @@
<!DOCTYPE html>
<html class="dark" lang="de"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>mitarbeiterpuls | Industrial Pulse</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&amp;family=Manrope:wght@400;500;700;800&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"primary-container": "#ff7a2f",
"secondary": "#e5e2e1",
"outline-variant": "#494847",
"on-secondary-fixed-variant": "#5c5b5b",
"on-secondary-fixed": "#403f3f",
"on-primary": "#531e00",
"inverse-surface": "#fcf8f8",
"primary": "#ff9159",
"on-surface": "#ffffff",
"on-primary-container": "#401500",
"on-secondary-container": "#d2d0cf",
"surface-tint": "#ff9159",
"surface": "#0e0e0e",
"surface-bright": "#2c2c2c",
"tertiary-fixed-dim": "#eba60f",
"secondary-fixed-dim": "#d7d4d3",
"primary-fixed-dim": "#f66700",
"secondary-dim": "#d7d4d3",
"on-error": "#450900",
"background": "#0e0e0e",
"on-background": "#ffffff",
"surface-container": "#1a1919",
"surface-variant": "#262626",
"secondary-container": "#474646",
"on-tertiary-fixed": "#372400",
"tertiary": "#ffc562",
"surface-container-high": "#201f1f",
"tertiary-container": "#fbb423",
"on-primary-fixed": "#000000",
"on-surface-variant": "#adaaaa",
"primary-fixed": "#ff7a2f",
"surface-container-low": "#131313",
"error-dim": "#d53d18",
"surface-container-lowest": "#000000",
"inverse-on-surface": "#565554",
"error-container": "#b92902",
"on-primary-fixed-variant": "#4f1c00",
"on-secondary": "#525151",
"surface-dim": "#0e0e0e",
"on-tertiary-fixed-variant": "#5e4000",
"inverse-primary": "#a14100",
"error": "#ff7351",
"tertiary-dim": "#eba60f",
"on-tertiary-container": "#523700",
"secondary-fixed": "#e5e2e1",
"on-tertiary": "#5e4000",
"tertiary-fixed": "#fbb423",
"primary-dim": "#ff7524",
"surface-container-highest": "#262626",
"outline": "#777575",
"on-error-container": "#ffd2c8"
},
"borderRadius": {
"DEFAULT": "0.375rem",
"lg": "0.875rem",
"xl": "1.5rem",
"full": "999px"
},
"fontFamily": {
"headline": ["Manrope"],
"body": ["Manrope"],
"label": ["JetBrains Mono"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
display: inline-block;
line-height: 1;
}
.pulse-glow {
box-shadow: 0 0 20px rgba(255, 145, 89, 0.2);
}
.editorial-line-height {
line-height: 1.1;
}
.glass-header {
background: rgba(14, 14, 14, 0.7);
backdrop-filter: blur(24px);
}
.brandmark {
font-family: "Nunito", "Manrope", sans-serif;
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1;
color: #f4f4f2;
text-shadow: 0.015em 0.03em 0.03em rgba(0,0,0,0.18), 0.03em 0.08em 0.12em rgba(0,0,0,0.14), 0.05em 0.14em 0.25em rgba(0,0,0,0.1);
}
.brand-i {
position: relative;
display: inline-block;
}
.brand-i::after {
content: "";
position: absolute;
left: 50%;
top: -0.08em;
transform: translateX(-50%);
width: 0.22em;
height: 0.22em;
border-radius: 999px;
background: #ff7a1a;
box-shadow: 0 0 0.12em rgba(255,122,26,0.95), 0 0 0.28em rgba(255,122,26,0.72), 0 0 0.48em rgba(255,122,26,0.38);
}
.section-kicker {
font-family: "JetBrains Mono", monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.pill-btn {
border-radius: 999px;
}
.surface-card {
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), #1a1919;
border: 1px solid rgba(255,255,255,0.07);
box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.reveal {
opacity: 0;
transform: translateY(34px) scale(0.985);
filter: blur(8px);
transition: opacity 0.9s cubic-bezier(.16,1,.3,1), transform 0.9s cubic-bezier(.16,1,.3,1), filter 0.9s cubic-bezier(.16,1,.3,1);
will-change: opacity, transform, filter;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.float-orb {
animation: drift 18s ease-in-out infinite;
will-change: transform;
}
.float-orb.alt {
animation-duration: 22s;
animation-direction: reverse;
}
.hero-grid::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(rgba(255,145,89,0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(255,145,89,0.075) 1px, transparent 1px);
background-size: 68px 68px;
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
pointer-events: none;
opacity: 0.8;
}
.tilt-card {
transform-style: preserve-3d;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
will-change: transform;
}
.tilt-card::after {
content: "";
position: absolute;
inset: 1px;
border-radius: inherit;
background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,145,89,0.12), transparent 42%);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.tilt-card.is-hovered::after {
opacity: 1;
}
.magnetic {
transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease;
will-change: transform;
}
.stats-strip {
position: relative;
overflow: hidden;
}
.stats-strip::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
transform: translateX(-100%);
animation: sweep 9s linear infinite;
pointer-events: none;
}
.dashboard-shell {
animation: dashboardFloat 7s ease-in-out infinite;
transform-origin: center top;
}
.kpi-card {
position: relative;
overflow: hidden;
}
.kpi-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 15%, rgba(255,255,255,0.08) 50%, transparent 85%);
transform: translateX(-130%);
animation: shimmer 4.8s ease-in-out infinite;
pointer-events: none;
}
.chart-bar {
transform-origin: bottom center;
animation: bars 3.8s ease-in-out infinite;
}
.chart-bar:nth-of-type(2) { animation-delay: 0.15s; }
.chart-bar:nth-of-type(3) { animation-delay: 0.3s; }
.chart-bar:nth-of-type(4) { animation-delay: 0.45s; }
.status-pulse {
animation: statusPulse 2.4s ease-in-out infinite;
}
.marquee-track {
display: flex;
width: max-content;
will-change: transform;
}
.marquee-group {
display: flex;
align-items: center;
gap: 2rem;
flex-shrink: 0;
}
.testimonial-track {
animation: driftX 14s ease-in-out infinite;
}
details > p {
transform: translateY(6px);
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
}
details[open] > p {
transform: translateY(0);
opacity: 1;
}
@keyframes drift {
0%,100% { transform: translate3d(0,0,0) scale(1); }
33% { transform: translate3d(24px,-18px,0) scale(1.04); }
66% { transform: translate3d(-18px,20px,0) scale(0.97); }
}
@keyframes dashboardFloat {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes shimmer {
0%,18% { transform: translateX(-130%); }
48%,100% { transform: translateX(130%); }
}
@keyframes bars {
0%,100% { transform: scaleY(0.86); opacity: 0.72; }
50% { transform: scaleY(1.08); opacity: 1; }
}
@keyframes statusPulse {
0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.36); }
50% { box-shadow: 0 0 0 9px rgba(74,222,128,0); }
}
@keyframes sweep {
0% { transform: translateX(-110%); }
100% { transform: translateX(110%); }
}
@keyframes driftX {
0%,100% { transform: translateX(0); }
50% { transform: translateX(-10px); }
}
@media (prefers-reduced-motion: reduce) {
.reveal, .float-orb, .dashboard-shell, .chart-bar, .status-pulse, .testimonial-track, .stats-strip::after, .kpi-card::before {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
opacity: 1 !important;
}
}
@media (max-width: 767px) {
.marquee-group {
gap: 1.25rem;
padding-inline: 1rem;
}
.hero-grid::before {
opacity: 0.55;
background-size: 54px 54px;
}
.testimonial-track {
animation: none;
}
.surface-card {
box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}
}
</style>
<style>
html, body {
overflow-x: hidden;
width: 100%;
}
body {
min-height: max(884px, 100dvh);
}
.mobile-scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.mobile-scroll::-webkit-scrollbar {
height: 6px;
}
.mobile-scroll::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.14);
border-radius: 999px;
}
</style>
</head>
<body class="bg-background text-on-background font-body selection:bg-primary selection:text-on-primary overflow-x-hidden">
<nav class="md:hidden fixed top-0 left-0 right-0 z-50 glass-header border-b border-white/5">
<div class="flex items-center justify-center px-6 py-4">
<a class="brandmark text-[1.2rem]" href="#hero">m<span class="brand-i">ı</span>tarbeiterpuls</a>
</div>
</nav>
<nav class="hidden md:block fixed top-0 w-full z-50 glass-header border-b border-white/5">
<div class="flex justify-between items-center px-6 md:px-8 py-5 w-full max-w-7xl mx-auto">
<a class="brandmark text-[1.45rem] md:text-[1.7rem]" href="#hero">m<span class="brand-i">ı</span>tarbeiterpuls</a>
<div class="hidden md:flex gap-8 items-center">
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#problem">Warum</a>
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#features">Features</a>
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#pricing">Preise</a>
<a class="text-[#adaaaa] font-semibold hover:text-white transition-colors duration-300" href="#faq">FAQ</a>
<a class="magnetic bg-primary text-on-primary px-6 py-3 pill-btn font-bold hover:brightness-110 transition-all active:scale-95 shadow-lg shadow-primary/20" href="#demo">Demo buchen</a>
</div>
<a class="magnetic md:hidden bg-primary/10 border border-primary/20 text-primary px-4 py-2 pill-btn font-bold" href="#demo">Demo</a>
</div>
</nav>
<main class="pt-20 md:pt-24">
<section class="hero-grid relative px-6 md:px-8 py-24 md:py-32 max-w-7xl mx-auto" id="hero">
<div class="float-orb absolute right-[-10%] top-20 h-[28rem] w-[28rem] rounded-full bg-primary/15 blur-[120px] opacity-70" data-parallax="-18"></div>
<div class="float-orb alt absolute left-[-8%] bottom-10 h-[24rem] w-[24rem] rounded-full bg-emerald-500/10 blur-[120px] opacity-50" data-parallax="16"></div>
<div class="max-w-4xl mx-auto z-10 reveal text-center" data-delay="1">
<div class="magnetic mb-6 inline-flex items-center gap-2 px-4 py-2 bg-surface-container border border-primary/20 pill-btn">
<span class="status-pulse w-2 h-2 rounded-full bg-emerald-400"></span>
<span class="section-kicker text-[11px] font-bold text-primary">Jetzt verfügbar für KMUs mit 10-150 Mitarbeitenden</span>
</div>
<h1 class="text-4xl sm:text-5xl md:text-7xl font-extrabold editorial-line-height tracking-[-0.055em] mb-8 text-white">Der PULS deines Unternehmens in <span class="text-primary">30 Sekunden</span></h1>
<p class="text-lg md:text-xl text-on-surface-variant max-w-3xl mx-auto mb-12 font-medium leading-8">Mitarbeiterpuls gibt Geschäftsführern das, was bisher nur Konzernen vorbehalten war: ein KI-gestütztes Echtzeit-Dashboard für Mitarbeiter-Engagement, Stresslevel und Fluktuationsrisiko. Ohne HR-Abteilung. Ohne Aufwand.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a class="magnetic bg-primary text-on-primary px-8 sm:px-10 py-4 pill-btn font-bold text-base sm:text-lg hover:brightness-110 transition-all flex items-center justify-center gap-2 group shadow-xl shadow-primary/20" href="#demo">Kostenlose Demo buchen <span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span></a>
<a class="magnetic border border-outline-variant/30 text-on-surface px-8 sm:px-10 py-4 pill-btn font-bold text-base sm:text-lg hover:bg-surface-container transition-all" href="#leadmagnet">Whitepaper herunterladen</a>
</div>
</div>
</section>
<section class="w-full -mt-6 mb-6 reveal" data-delay="3">
<div class="max-w-7xl mx-auto px-6 md:px-8 flex flex-col items-center text-center">
<p class="section-kicker text-[11px] text-on-surface-variant/70 mb-4">Vertraut von zukunftsorientierten Mittelständlern</p>
<div class="w-full overflow-hidden">
<div class="marquee-track text-white/35 font-bold">
<div class="marquee-group px-8 md:px-10">
<span>TechVentures</span><span>ScaleUp GmbH</span><span>MittelstandDigital</span><span>InnoWerk AG</span><span>PrimeTeam</span>
</div>
<div class="marquee-group px-8 md:px-10" aria-hidden="true">
<span>TechVentures</span><span>ScaleUp GmbH</span><span>MittelstandDigital</span><span>InnoWerk AG</span><span>PrimeTeam</span>
</div>
</div>
</div>
</div>
</section>
<section class="stats-strip px-6 md:px-8 py-16 bg-surface-container-low">
<div class="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-10">
<div class="reveal"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="43000" data-suffix="€">43.000€</div><div class="text-sm text-on-surface-variant mt-2">Durchschnittliche Kosten pro Fluktuationsfall</div></div>
<div class="reveal" data-delay="1"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="9" data-suffix="%">9%</div><div class="text-sm text-on-surface-variant mt-2">der Beschäftigten in DE sind wirklich engagiert</div></div>
<div class="reveal" data-delay="2"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="118" data-suffix=" Mrd.">118 Mrd.</div><div class="text-sm text-on-surface-variant mt-2">Euro volkswirtschaftliche Kosten durch Fluktuation p.a.</div></div>
<div class="reveal" data-delay="3"><div class="counter text-4xl md:text-6xl font-extrabold tracking-tighter text-white font-label" data-counter="59" data-suffix="%">59%</div><div class="text-sm text-on-surface-variant mt-2">weniger Kündigungswunsch durch hohes Engagement</div></div>
</div>
</section>
<section class="px-6 md:px-8 py-28 max-w-7xl mx-auto" id="problem">
<div class="max-w-3xl mb-14 reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">Das Problem</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">Im Mittelstand fliegt die Stimmung <span class="text-primary">unter dem Radar</span></h2>
<p class="text-lg text-on-surface-variant">Große Konzerne haben HR-Abteilungen, Engagement-Plattformen und People-Analytics-Teams. Mittelständler haben: ein Bauchgefühl. Und das reicht nicht mehr.</p>
</div>
<div class="grid md:grid-cols-3 gap-6">
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-3xl mb-4">🔇</div><h3 class="text-white text-xl font-bold mb-3">Stille Kündigungen bleiben unsichtbar</h3><p class="text-on-surface-variant">Mitarbeitende, die innerlich bereits gekündigt haben, zeigen es oft erst, wenn die Kündigung auf dem Tisch liegt. Dann ist es zu spät und teuer.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-red-400/10 text-red-300 font-label text-xs">13% haben innerlich gekündigt</div></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-3xl mb-4">📊</div><h3 class="text-white text-xl font-bold mb-3">Jährliche Umfragen kommen zu spät</h3><p class="text-on-surface-variant">Die klassische Mitarbeiterbefragung einmal im Jahr ist wie ein Blutbild alle 12 Monate: Wenn man das Ergebnis hat, ist die Krankheit längst chronisch.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-amber-400/10 text-amber-300 font-label text-xs">73% denken monatlich an Jobwechsel</div></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-3xl mb-4">🏢</div><h3 class="text-white text-xl font-bold mb-3">Enterprise-Tools sind nichts für KMUs</h3><p class="text-on-surface-variant">Leapsome, Peakon, Qualtrics: starke Tools, aber gemacht für Konzerne. Als CEO eines KMU brauchen Sie etwas, das in 30 Sekunden funktioniert.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-primary/10 text-primary font-label text-xs">Ab 8€/User/Monat + Setup</div></div>
</div>
</section>
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="solution">
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">Die Lösung</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">So simpel wie ein <span class="text-primary">Daumen hoch</span></h2>
<p class="text-lg text-on-surface-variant">Mitarbeiterpuls komprimiert das, was bei Konzernen Monate dauert, auf einen Ablauf, der kürzer ist als ein Kaffee holen.</p>
</div>
<div class="max-w-7xl mx-auto grid md:grid-cols-3 gap-6">
<div class="surface-card tilt-card reveal rounded-[2rem] p-8 text-center" data-tilt><div class="text-primary/30 text-6xl font-extrabold font-label">01</div><h3 class="text-white text-xl font-bold mt-4 mb-3">Mitarbeitende geben Feedback</h3><p class="text-on-surface-variant">4 Fragen, 1-10 Skala, optional Freitext. Per E-Mail-Link, anonym, vom Smartphone. Kein Login, kein Aufwand.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-emerald-400/10 text-emerald-300 font-label text-xs">30 Sekunden</div></div>
<div class="surface-card tilt-card reveal rounded-[2rem] p-8 text-center" data-tilt data-delay="1"><div class="text-primary/30 text-6xl font-extrabold font-label">02</div><h3 class="text-white text-xl font-bold mt-4 mb-3">KI analysiert in Echtzeit</h3><p class="text-on-surface-variant">Die Daten fließen sofort in 5 KPIs: Engagement, Fluktuation, Führung, Belastung und Energie. Unsere KI erkennt Muster und Risiken.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-emerald-400/10 text-emerald-300 font-label text-xs">Sofort</div></div>
<div class="surface-card tilt-card reveal rounded-[2rem] p-8 text-center" data-tilt data-delay="2"><div class="text-primary/30 text-6xl font-extrabold font-label">03</div><h3 class="text-white text-xl font-bold mt-4 mb-3">CEO sieht den PULS</h3><p class="text-on-surface-variant">Ein Dashboard. Fünf Ampeln. Ein PULS-Gesamtwert. KI-Handlungsempfehlungen. Trend-Verläufe. Team-Heatmap. Alles auf einen Blick.</p><div class="mt-5 inline-flex px-4 py-2 rounded-full bg-emerald-400/10 text-emerald-300 font-label text-xs">Ein Blick genügt</div></div>
</div>
</section>
<section class="px-6 md:px-8 py-28 max-w-7xl mx-auto" id="features">
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">Features</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">Alles, was ein CEO braucht. <span class="text-primary">Nichts, was er nicht braucht.</span></h2>
<p class="text-lg text-on-surface-variant">Kein Feature-Bloat. Kein Consulting nötig. Mitarbeiterpuls konzentriert sich auf die Kennzahlen, die den Unterschied machen.</p>
</div>
<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-3xl mb-5">🔥</div><h3 class="text-white text-xl font-bold mb-3">5 KPI-Ampelsystem + PULS</h3><p class="text-on-surface-variant">Engagement, Fluktuation, Führung, Belastung, Energie. Dazu der PULS als Gesamtwert.</p></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-3xl mb-5">🤖</div><h3 class="text-white text-xl font-bold mb-3">KI-Handlungsempfehlungen</h3><p class="text-on-surface-variant">Keine Zahlen ohne Kontext: Die KI priorisiert Maßnahmen und sagt konkret, was als Nächstes zu tun ist.</p></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-3xl mb-5">📡</div><h3 class="text-white text-xl font-bold mb-3">Echtzeit-Dashboard für den Büro-Monitor</h3><p class="text-on-surface-variant">Eine öffentliche Ansicht zeigt dem Team den PULS live, ohne sensible Daten preiszugeben.</p></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-3xl mb-5">🚨</div><h3 class="text-white text-xl font-bold mb-3">Fluktuation-Frühwarnsystem</h3><p class="text-on-surface-variant">Unsere KI erkennt Muster, die auf erhöhtes Fluktuationsrisiko hindeuten, bevor die Kündigung kommt.</p></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-3xl mb-5">🔒</div><h3 class="text-white text-xl font-bold mb-3">100% anonym &amp; DSGVO-konform</h3><p class="text-on-surface-variant">Kein Tracking, keine Rückverfolgung. Anonymität ist technisch garantiert und schafft ehrliches Feedback.</p></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-3xl mb-5">📧</div><h3 class="text-white text-xl font-bold mb-3">Automatisierte Erinnerungen</h3><p class="text-on-surface-variant">Mitarbeitende werden automatisch erinnert. Null Admin-Aufwand, kein Nachhalten per Hand.</p></div>
</div>
</section>
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="preview">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16 reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">Dashboard Preview</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] mb-4 text-white">Ihr neues <span class="text-primary">Cockpit</span></h2>
<p class="text-on-surface-variant max-w-2xl mx-auto text-lg">Ein Blick genügt: Der PULS, 5 KPIs, Ampelsystem, Team-Heatmap und KI-Empfehlungen auf einem Screen.</p>
</div>
<div class="relative">
<div class="absolute inset-0 bg-primary/10 blur-3xl rounded-[2.5rem]"></div>
<div class="relative surface-card tilt-card reveal rounded-[2.2rem] overflow-hidden p-5 md:p-8" data-tilt>
<div class="flex items-center gap-2 pb-4 border-b border-white/5">
<span class="w-3 h-3 rounded-full bg-red-400"></span><span class="w-3 h-3 rounded-full bg-amber-400"></span><span class="w-3 h-3 rounded-full bg-emerald-400"></span>
<span class="ml-3 text-xs text-on-surface-variant font-label">mitarbeiterpuls - dashboard</span>
</div>
<div class="grid lg:grid-cols-5 gap-4 mt-6">
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Engagement</div><div class="text-3xl text-white font-extrabold mt-2">7.8</div><div class="text-sm text-emerald-400 mt-2 font-label">↑ 0.4</div></div>
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Fluktuation</div><div class="text-3xl text-white font-extrabold mt-2">12%</div><div class="text-sm text-amber-300 mt-2 font-label">↓ 2.1%</div></div>
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Führung</div><div class="text-3xl text-white font-extrabold mt-2">7.2</div><div class="text-sm text-emerald-400 mt-2 font-label">↑ 0.3</div></div>
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Belastung</div><div class="text-3xl text-white font-extrabold mt-2">6.4</div><div class="text-sm text-red-300 mt-2 font-label">↑ 0.6</div></div>
<div class="bg-[#111318] rounded-[1.4rem] border border-white/5 p-5"><div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant">Energie</div><div class="text-3xl text-white font-extrabold mt-2">7.5</div><div class="text-sm text-emerald-400 mt-2 font-label">↑ 0.2</div></div>
</div>
<div class="grid lg:grid-cols-[1fr_1.1fr] gap-5 mt-5">
<div class="bg-[#111318] rounded-[1.5rem] border border-white/5 p-5">
<div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant mb-4">KI-Empfehlungen</div>
<div class="space-y-3">
<div class="rounded-[1rem] border border-white/5 bg-white/[0.02] p-4"><p class="text-white font-semibold">Stresslevel steigt</p><p class="text-on-surface-variant text-sm mt-1">Seit 4 Wochen steigend. Team-Lead-Gespräche empfohlen.</p></div>
<div class="rounded-[1rem] border border-white/5 bg-white/[0.02] p-4"><p class="text-white font-semibold">Fluktuationsrisiko Ops</p><p class="text-on-surface-variant text-sm mt-1">3 von 10 Mitarbeitenden im Risikobereich.</p></div>
<div class="rounded-[1rem] border border-white/5 bg-white/[0.02] p-4"><p class="text-white font-semibold">Führung auf Allzeithoch</p><p class="text-on-surface-variant text-sm mt-1">Coaching-Programm zeigt Wirkung.</p></div>
</div>
</div>
<div class="bg-[#111318] rounded-[1.5rem] border border-white/5 p-5 mobile-scroll">
<div class="text-xs font-label uppercase tracking-[0.08em] text-on-surface-variant mb-4">Team-Übersicht</div>
<div class="space-y-3 text-sm min-w-[34rem]">
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 text-on-surface-variant font-label text-[10px] uppercase tracking-[0.08em]"><span>Team</span><span class="text-center">Eng</span><span class="text-center">Stress</span><span class="text-center">Enrg</span><span class="text-center">Fhrg</span><span class="text-center">Risiko</span></div>
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 items-center"><span class="text-white">Entwicklung</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.8</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">5.5</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.2</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">8.1</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">gut</span></div>
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 items-center"><span class="text-white">Vertrieb</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.1</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">6.8</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.5</span><span class="text-center rounded-full bg-emerald-400/10 text-emerald-300 py-1">7.2</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">mäßig</span></div>
<div class="grid grid-cols-[1.2fr_repeat(4,0.7fr)_0.9fr] gap-2 items-center"><span class="text-white">Operations</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">6.5</span><span class="text-center rounded-full bg-red-400/10 text-red-300 py-1">7.2</span><span class="text-center rounded-full bg-red-400/10 text-red-300 py-1">5.8</span><span class="text-center rounded-full bg-amber-400/10 text-amber-300 py-1">6.9</span><span class="text-center rounded-full bg-red-400/10 text-red-300 py-1">hoch</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="px-6 md:px-8 py-28 max-w-5xl mx-auto" id="comparison">
<div class="text-center mb-14 reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">Vergleich</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-4">Warum Mitarbeiterpuls <span class="text-primary">anders</span> ist</h2>
<p class="text-on-surface-variant text-lg max-w-3xl mx-auto">Die großen Plattformen sind für Konzerne. Mitarbeiterpuls ist für Geschäftsführer, die fünf Minuten pro Woche haben.</p>
</div>
<div class="surface-card reveal rounded-[2rem] overflow-hidden">
<div class="mobile-scroll">
<table class="w-full text-left min-w-[42rem]">
<thead class="bg-white/[0.02]">
<tr class="border-b border-white/5">
<th class="px-6 py-5 text-on-surface-variant font-label text-xs uppercase tracking-[0.08em]">Feature</th>
<th class="px-6 py-5 text-on-surface-variant font-label text-xs uppercase tracking-[0.08em]">Enterprise</th>
<th class="px-6 py-5 text-primary font-label text-xs uppercase tracking-[0.08em]">Mitarbeiterpuls</th>
</tr>
</thead>
<tbody class="divide-y divide-white/5">
<tr><td class="px-6 py-5 text-white">Setup-Zeit</td><td class="px-6 py-5 text-on-surface-variant">2-6 Wochen</td><td class="px-6 py-5 text-white font-bold">5 Min.</td></tr>
<tr><td class="px-6 py-5 text-white">Feedback-Dauer Mitarbeiter</td><td class="px-6 py-5 text-on-surface-variant">5-15 Min.</td><td class="px-6 py-5 text-white font-bold">30 Sek.</td></tr>
<tr><td class="px-6 py-5 text-white">HR-Abteilung nötig</td><td class="px-6 py-5 text-on-surface-variant">Ja</td><td class="px-6 py-5 text-white font-bold">Nein</td></tr>
<tr><td class="px-6 py-5 text-white">KI-Handlungsempfehlungen</td><td class="px-6 py-5 text-on-surface-variant">Teilweise</td><td class="px-6 py-5 text-white font-bold">Ja</td></tr>
<tr><td class="px-6 py-5 text-white">Live-Monitor fürs Büro</td><td class="px-6 py-5 text-on-surface-variant">Nein</td><td class="px-6 py-5 text-white font-bold">Ja</td></tr>
<tr><td class="px-6 py-5 text-white">Preis (50 MA)</td><td class="px-6 py-5 text-on-surface-variant">400-800€+</td><td class="px-6 py-5 text-white font-bold">200€/Mo</td></tr>
<tr><td class="px-6 py-5 text-white">Zielgruppe</td><td class="px-6 py-5 text-on-surface-variant">HR-Teams</td><td class="px-6 py-5 text-white font-bold">CEO direkt</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="pricing">
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">Preise</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-4">Ein Preis. <span class="text-primary">Keine Überraschungen.</span></h2>
<p class="text-on-surface-variant text-lg">Günstiger als eine einzige Kündigung. Wertvoller als jede Jahresbefragung.</p>
</div>
<div class="max-w-2xl mx-auto surface-card tilt-card reveal rounded-[2.2rem] p-8 md:p-12 text-center relative overflow-hidden" data-tilt>
<div class="absolute inset-x-0 -top-24 h-56 bg-primary/10 blur-3xl"></div>
<div class="relative">
<div class="inline-flex px-4 py-2 rounded-full bg-primary/10 text-primary font-label text-xs uppercase tracking-[0.08em]">Starter · Für KMUs</div>
<div class="mt-6 text-white"><span class="text-2xl align-top font-label">€</span><span class="counter text-7xl font-extrabold font-label" data-counter="4">4</span></div>
<div class="text-on-surface-variant text-lg mt-2">pro Mitarbeiter / Monat</div>
<div class="text-on-surface-variant font-label text-sm mt-4">50 Mitarbeitende × 4€ = 200€ / Monat</div>
<div class="mt-8 space-y-3 text-left">
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ PULS-Gesamtwert + 5 KPIs mit Ampelsystem &amp; Trendverlauf</div>
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ KI-Handlungsempfehlungen</div>
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ Anonymes Mitarbeiter-Feedback</div>
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ Team-Heatmap &amp; Vergleich</div>
<div class="rounded-[1rem] bg-white/[0.02] border border-white/5 px-4 py-3 text-white">✓ Live-Monitor, E-Mail-Erinnerungen, DSGVO-konform</div>
</div>
<a class="mt-8 inline-flex bg-primary text-on-primary px-10 py-4 pill-btn font-bold text-lg hover:brightness-110 transition-all shadow-xl shadow-primary/20" href="#demo">Kostenlose Demo vereinbaren</a>
</div>
</div>
</section>
<section class="px-6 md:px-8 py-28 max-w-7xl mx-auto" id="leadmagnet">
<div class="grid lg:grid-cols-2 gap-10 items-center">
<div class="surface-card tilt-card reveal rounded-[2rem] p-8" data-tilt>
<div class="inline-flex px-4 py-2 rounded-full bg-amber-400/10 text-amber-300 font-label text-xs uppercase tracking-[0.08em]">PDF · 15 Seiten</div>
<h3 class="text-3xl font-extrabold text-white tracking-[-0.04em] mt-6 mb-4">Der KMU-Guide für Mitarbeiter-Engagement</h3>
<p class="text-on-surface-variant">Warum 91% der deutschen Beschäftigten nicht engagiert sind und was Geschäftsführer jetzt dagegen tun können.</p>
<div class="flex gap-3 mt-8">
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5"></div>
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5 rotate-3"></div>
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5 rotate-6"></div>
<div class="w-14 h-20 rounded-lg bg-white/[0.04] border border-white/5 rotate-[9deg]"></div>
</div>
</div>
<div class="reveal" data-delay="1">
<div class="section-kicker text-primary text-xs font-bold mb-4">Kostenloses Whitepaper</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white mb-5">Die versteckten Kosten von Desengagement und wie KMUs sie eliminieren</h2>
<p class="text-lg text-on-surface-variant mb-6">15 Seiten mit aktuellen Zahlen, Praxisbeispielen und einer konkreten Roadmap für Geschäftsführer, die ihre besten Leute halten wollen.</p>
<ul class="space-y-3 text-on-surface-variant">
<li>Aktuelle Gallup-Zahlen für Deutschland 2024/25 erklärt</li>
<li>Die wahren Kosten einer Kündigung mit Rechenbeispiel für KMUs</li>
<li>5 Frühwarnsignale für stille Kündigungen</li>
<li>Konkrete Sofortmaßnahmen ohne HR-Abteilung</li>
<li>Wie Mitarbeiterpuls diese Insights automatisiert</li>
</ul>
<form class="mt-8 flex flex-col sm:flex-row gap-4" onsubmit="event.preventDefault(); this.innerHTML = '<div class=&quot;text-emerald-300 font-bold&quot;>✓ Whitepaper wird an Ihre E-Mail gesendet.</div>';">
<input class="flex-1 bg-surface-container border border-white/10 text-white px-6 py-4 pill-btn outline-none focus:border-primary" placeholder="Ihre E-Mail-Adresse" required="" type="email"/>
<button class="magnetic bg-primary text-on-primary px-8 py-4 pill-btn font-bold hover:brightness-110 transition-all" type="submit">Whitepaper senden</button>
</form>
<p class="text-sm text-on-surface-variant mt-4">Kein Spam, kein Abo. Sie erhalten das PDF und optional drei Follow-up-E-Mails mit Praxis-Tipps.</p>
</div>
</div>
</section>
<section class="px-6 md:px-8 py-28 bg-surface-container-low" id="testimonials">
<div class="max-w-3xl mx-auto text-center mb-14 reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">Stimmen</div>
<h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-[-0.045em] text-white">Was Geschäftsführer <span class="text-primary">sagen</span></h2>
</div>
<div class="testimonial-track max-w-7xl mx-auto grid md:grid-cols-3 gap-6">
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt><div class="text-amber-300 mb-4">★★★★★</div><p class="text-white italic">„Wir hatten vorher null Daten über die Stimmung im Team. Mitarbeiterpuls hat uns die Augen geöffnet und es hat genau eine Stunde gedauert, bis alles lief.“</p><div class="mt-6 text-on-surface-variant text-sm">Markus W. · Geschäftsführer, IT-Dienstleister (45 MA)</div></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="1"><div class="text-amber-300 mb-4">★★★★★</div><p class="text-white italic">„Die KI-Empfehlungen waren der Game-Changer. Ich wusste sofort, dass im Ops-Team etwas nicht stimmt, bevor jemand gekündigt hat.“</p><div class="mt-6 text-on-surface-variant text-sm">Sandra K. · CEO, E-Commerce-Agentur (28 MA)</div></div>
<div class="surface-card tilt-card reveal rounded-[1.75rem] p-8" data-tilt data-delay="2"><div class="text-amber-300 mb-4">★★★★★</div><p class="text-white italic">„Das Dashboard im Eingangsbereich hat unsere Feedbackkultur verändert. Die Leute reden jetzt über den PULS wie über den Umsatz.“</p><div class="mt-6 text-on-surface-variant text-sm">Thomas R. · Gründer, SaaS-Startup (72 MA)</div></div>
</div>
</section>
<section class="px-6 md:px-8 py-24" id="faq">
<div class="max-w-3xl mx-auto reveal">
<div class="section-kicker text-primary text-xs font-bold mb-4">FAQ</div>
<h2 class="text-3xl sm:text-4xl font-extrabold mb-12 text-white tracking-[-0.04em]">Häufig gestellte Fragen</h2>
<div class="space-y-4">
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer"><summary class="flex justify-between items-center font-bold list-none text-white">Wie anonym ist das Feedback wirklich?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Technisch garantiert anonym. Antworten werden ohne User-Bezug gespeichert. Bei Teams unter 5 Personen werden Daten automatisch aggregiert.</p></details>
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer" data-delay="1"><summary class="flex justify-between items-center font-bold list-none text-white">Brauche ich eine HR-Abteilung?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Nein. Mitarbeiterpuls ist für Geschäftsführer ohne HR-Team. Setup dauert 5 Minuten, die Auswertung maximal 2 Minuten.</p></details>
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer" data-delay="2"><summary class="flex justify-between items-center font-bold list-none text-white">Nervt das die Mitarbeitenden nicht?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">30 Sekunden alle zwei Wochen. Weniger als ein Kaffee holen. Die meisten empfinden es als Wertschätzung, regelmäßig gefragt zu werden.</p></details>
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer"><summary class="flex justify-between items-center font-bold list-none text-white">Ist Mitarbeiterpuls DSGVO-konform?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Ja. Alle Daten liegen in EU-Rechenzentren. Die Anonymisierung ist technisch umgesetzt. Ein AV-Vertrag wird bereitgestellt.</p></details>
<details class="group surface-card reveal p-6 rounded-[1.5rem] cursor-pointer" data-delay="1"><summary class="flex justify-between items-center font-bold list-none text-white">Ab wie vielen Mitarbeitenden macht es Sinn?<span class="material-symbols-outlined group-open:rotate-180 transition-transform">expand_more</span></summary><p class="mt-4 text-on-surface-variant">Ab 10 Mitarbeitenden. Optimal für 20 bis 150 Mitarbeitende, groß genug für Relevanz und klein genug für schnelles Handeln.</p></details>
</div>
</div>
</section>
<section class="px-6 md:px-8 py-28 text-center" id="demo">
<div class="max-w-5xl mx-auto bg-gradient-to-br from-surface-container to-surface-container-low p-10 md:p-16 rounded-[2.2rem] border border-primary/20 relative overflow-hidden reveal tilt-card" data-tilt>
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 blur-[80px] -mr-32 -mt-32"></div>
<div class="section-kicker text-primary text-xs font-bold mb-4 relative">Bereit?</div>
<h2 class="text-3xl sm:text-4xl md:text-6xl font-extrabold mb-6 text-white tracking-[-0.05em] relative">Verpassen Sie nicht den Moment, in dem Ihr bester Mitarbeiter <span class="text-primary">innerlich kündigt.</span></h2>
<p class="text-on-surface-variant text-xl mb-10 max-w-2xl mx-auto relative">30 Minuten Demo. Kein Verkaufsdruck. Wir zeigen Ihnen, wie Mitarbeiterpuls für Ihr Unternehmen aussehen würde.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center relative">
<a class="magnetic bg-primary text-on-primary px-12 py-5 pill-btn font-bold text-xl hover:brightness-110 shadow-lg shadow-primary/20 active:scale-95 transition-all" href="https://calendly.com/onyva" rel="noopener" target="_blank">Jetzt Demo-Termin buchen</a>
<a class="magnetic border border-outline-variant/30 text-on-surface px-10 py-5 pill-btn font-bold text-xl hover:bg-surface-container transition-all" href="#leadmagnet">Erstmal Whitepaper lesen</a>
</div>
</div>
</section>
</main>
<footer class="w-full border-t border-white/5 bg-[#0e0e0e] py-16">
<div class="flex flex-col md:flex-row justify-between items-center px-6 md:px-8 w-full max-w-7xl mx-auto gap-8">
<div>
<div class="brandmark text-2xl lowercase mb-2">m<span class="brand-i">ı</span>tarbeiterpuls</div>
<p class="text-[#adaaaa] text-sm max-w-xs">Ein Produkt von Onyva. KI-gestütztes Mitarbeiter-Feedback für Geschäftsführer im Mittelstand.</p>
</div>
<div class="flex flex-col items-center md:items-end gap-4">
<div class="flex gap-6 flex-wrap justify-center">
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="https://www.onyva.de/datenschutz" target="_blank">Datenschutz</a>
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="https://www.onyva.de/impressum" target="_blank">Impressum</a>
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="#">AV-Vertrag</a>
<a class="text-sm text-[#adaaaa] hover:text-[#FF6B00] transition-colors" href="mailto:info@onyva.de">info@onyva.de</a>
</div>
<div class="text-sm text-[#adaaaa]">© 2026 mitarbeiterpuls. Alle Rechte vorbehalten.</div>
</div>
</div>
</footer>
<script>
(() => {
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const revealObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
entry.target.classList.add('is-visible');
revealObserver.unobserve(entry.target);
}
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
document.querySelectorAll('.reveal').forEach((node) => revealObserver.observe(node));
const formatNumber = (value, suffix = '') => {
if (suffix === '€') return Math.round(value).toLocaleString('de-DE') + '€';
if (suffix === '%') return Math.round(value) + '%';
if (suffix === ' Mrd.') return Math.round(value) + ' Mrd.';
return Math.round(value).toLocaleString('de-DE') + suffix;
};
const counterObserver = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (!entry.isIntersecting) continue;
const el = entry.target;
const target = Number(el.dataset.counter || 0);
const suffix = el.dataset.suffix || '';
const duration = 1600;
const start = performance.now();
if (prefersReduced) {
el.textContent = formatNumber(target, suffix);
} else {
const tick = (now) => {
const progress = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3);
el.textContent = formatNumber(target * eased, suffix);
if (progress < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
counterObserver.unobserve(el);
}
}, { threshold: 0.4 });
document.querySelectorAll('.counter').forEach((counter) => counterObserver.observe(counter));
const marqueeStates = [];
const setupMarquee = () => {
if (prefersReduced) return;
marqueeStates.length = 0;
document.querySelectorAll('.marquee-track').forEach((track) => {
const groups = Array.from(track.querySelectorAll('.marquee-group'));
if (!groups.length) return;
while (track.scrollWidth < window.innerWidth * 2.2) {
groups.forEach((group) => {
const clone = group.cloneNode(true);
clone.setAttribute('aria-hidden', 'true');
track.appendChild(clone);
});
}
const firstGroup = track.querySelector('.marquee-group');
if (!firstGroup) return;
marqueeStates.push({
track,
width: firstGroup.getBoundingClientRect().width,
offset: 0,
speed: 0.45
});
});
};
const animateMarquee = () => {
if (!prefersReduced) {
marqueeStates.forEach((state) => {
state.offset -= state.speed;
if (Math.abs(state.offset) >= state.width) {
state.offset += state.width;
}
state.track.style.transform = `translate3d(${state.offset}px, 0, 0)`;
});
requestAnimationFrame(animateMarquee);
}
};
setupMarquee();
window.addEventListener('resize', () => {
document.querySelectorAll('.marquee-track').forEach((track) => {
track.style.transform = 'translate3d(0,0,0)';
});
setupMarquee();
});
animateMarquee();
if (!prefersReduced) {
const hero = document.querySelector('#hero');
const parallaxNodes = document.querySelectorAll('[data-parallax]');
let mouseX = 0;
let mouseY = 0;
let currentX = 0;
let currentY = 0;
const animateParallax = () => {
currentX += (mouseX - currentX) * 0.08;
currentY += (mouseY - currentY) * 0.08;
parallaxNodes.forEach((node) => {
const factor = Number(node.dataset.parallax || 0);
const x = currentX * factor;
const y = currentY * factor * 0.7;
node.style.transform = `translate3d(${x}px, ${y}px, 0)`;
});
requestAnimationFrame(animateParallax);
};
if (hero) {
hero.addEventListener('mousemove', (event) => {
const rect = hero.getBoundingClientRect();
mouseX = ((event.clientX - rect.left) / rect.width - 0.5) * 2;
mouseY = ((event.clientY - rect.top) / rect.height - 0.5) * 2;
});
hero.addEventListener('mouseleave', () => {
mouseX = 0;
mouseY = 0;
});
requestAnimationFrame(animateParallax);
}
}
document.querySelectorAll('[data-tilt]').forEach((card) => {
if (prefersReduced) return;
card.addEventListener('mousemove', (event) => {
const rect = card.getBoundingClientRect();
const px = (event.clientX - rect.left) / rect.width;
const py = (event.clientY - rect.top) / rect.height;
const rotateY = (px - 0.5) * 10;
const rotateX = (0.5 - py) * 10;
card.style.setProperty('--mx', `${px * 100}%`);
card.style.setProperty('--my', `${py * 100}%`);
card.style.transform = `perspective(1200px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-3px)`;
card.classList.add('is-hovered');
});
card.addEventListener('mouseleave', () => {
card.style.transform = '';
card.classList.remove('is-hovered');
});
});
document.querySelectorAll('.magnetic').forEach((button) => {
if (prefersReduced) return;
button.addEventListener('mousemove', (event) => {
const rect = button.getBoundingClientRect();
const x = event.clientX - rect.left - rect.width / 2;
const y = event.clientY - rect.top - rect.height / 2;
button.style.transform = `translate(${x * 0.12}px, ${y * 0.12}px)`;
});
button.addEventListener('mouseleave', () => {
button.style.transform = '';
});
});
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
anchor.addEventListener('click', (event) => {
const target = document.querySelector(anchor.getAttribute('href'));
if (!target) return;
event.preventDefault();
target.scrollIntoView({ behavior: prefersReduced ? 'auto' : 'smooth', block: 'start' });
});
});
})();
</script>
</body></html>