951 lines
54 KiB
HTML
951 lines
54 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
|
||
<!-- Cookiebot — consent management -->
|
||
<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 d = document.getElementById('CybotCookiebotDialog');
|
||
if (d) {
|
||
d.style.setProperty('position', 'fixed', 'important');
|
||
d.style.setProperty('bottom', '0', 'important');
|
||
d.style.setProperty('top', 'auto', 'important');
|
||
d.style.setProperty('left', '0', 'important');
|
||
d.style.setProperty('right', '0', 'important');
|
||
d.style.setProperty('width', '100%', 'important');
|
||
d.style.setProperty('transform','none', 'important');
|
||
d.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>
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<meta name="theme-color" content="#2E2929">
|
||
<meta name="description" content="Feedgine — Profit Intelligence Platform. Verbindet JTL-Wawi-Margen mit Google Shopping, Meta & Microsoft Ads. POAS statt ROAS. Server-Side Tracking. Ab €999/Monat.">
|
||
<meta name="keywords" content="Feedgine, POAS, Profit Intelligence, Google Shopping, Server Side Tracking, Feed Optimierung, E-Commerce">
|
||
<meta name="author" content="Profice GmbH">
|
||
<meta property="og:title" content="Feedgine — Profit Intelligence Platform">
|
||
<meta property="og:description" content="ROAS lügt. Profit zählt. Feedgine berechnet echte Produktmargen und optimiert Feeds für POAS. +31% profitabler Umsatz bei lkw-teile24.de.">
|
||
<meta property="og:type" content="website">
|
||
<meta name="robots" content="index, follow">
|
||
<title>Feedgine — Profit Intelligence Platform by Profice</title>
|
||
|
||
<!-- Favicons -->
|
||
<link rel="icon" type="image/png" sizes="32x32" href="images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="shortcut icon" href="images/logo/Appicon 1024X1024-01.png">
|
||
|
||
<link rel="stylesheet" href="style/fonts.css">
|
||
|
||
<style>
|
||
/* ================================================================
|
||
FEEDGINE — Profice Home Design System
|
||
Palette: Warm Dark · Amber · Teal · Green
|
||
================================================================ */
|
||
|
||
/* ─── ROOT ─── */
|
||
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
||
:root{
|
||
--charcoal:#4F4747;--slate:#777764;--ivory:#EBEBDE;
|
||
--amber:#F57C00;--teal:#26A69A;--green:#66BB6A;
|
||
--bg:#0e0d0c;--bg2:#161514;--bg3:#1c1b19;
|
||
--text:#d4d0c8;--text-dim:#7a7668;--text-bright:#f5f2ea;
|
||
--mono:'Consolas','Courier New',monospace;
|
||
--head:'Segoe UI',system-ui,-apple-system,sans-serif;
|
||
--body:system-ui,-apple-system,'Segoe UI',sans-serif;
|
||
}
|
||
html{scroll-behavior:smooth;font-size:16px}
|
||
body{background:var(--bg);color:var(--text);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
|
||
::selection{background:var(--amber);color:var(--bg)}
|
||
|
||
/* ─── GRAIN OVERLAY ─── */
|
||
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
|
||
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
|
||
opacity:.35}
|
||
|
||
/* ─── NAV ─── */
|
||
nav{position:fixed;top:0;left:0;right:0;z-index:100;height:80px;padding:0 3rem;display:flex;justify-content:space-between;align-items:center;
|
||
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
|
||
background:rgba(14,13,12,.8);border-bottom:1px solid rgba(235,235,222,.06);
|
||
transition:height .4s,box-shadow .4s}
|
||
nav.scrolled{height:62px;box-shadow:0 2px 30px rgba(0,0,0,.5);border-bottom-color:rgba(245,124,0,.3)}
|
||
.nav-logo{text-decoration:none;display:flex;align-items:center;gap:.75rem}
|
||
.nav-logo img{height:32px;display:block;width:auto}
|
||
.nav-logo-name{font-family:var(--head);font-size:1.2rem;font-weight:900;letter-spacing:.15em;color:var(--ivory);text-transform:uppercase;border-left:1px solid rgba(235,235,222,.15);padding-left:.75rem}
|
||
.nav-logo-name em{font-style:normal;color:var(--amber)}
|
||
nav ul{list-style:none;display:flex;gap:2rem;align-items:center}
|
||
nav a{color:var(--text-dim);text-decoration:none;font-family:var(--head);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
|
||
nav a:hover{color:var(--amber)}
|
||
.nav-cta{background:var(--amber);color:#0e0d0c!important;border:1px solid var(--amber);padding:.55rem 1.4rem;font-weight:700;transition:background .2s,transform .2s}
|
||
.nav-cta:hover{background:#e06500;transform:translateY(-1px)}
|
||
|
||
/* Hamburger */
|
||
.hamburger{display:none;flex-direction:column;gap:5px;background:transparent;border:1px solid rgba(235,235,222,.25);
|
||
border-radius:6px;cursor:pointer;padding:8px 10px;width:42px;height:42px;transition:border-color .2s}
|
||
.hamburger:hover{border-color:var(--amber)}
|
||
.hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:1px;transition:transform .3s,opacity .3s;transform-origin:center}
|
||
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
|
||
.hamburger.open span:nth-child(2){opacity:0}
|
||
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
|
||
|
||
/* Mobile nav */
|
||
.mobile-nav{display:none;position:fixed;top:62px;left:0;right:0;background:rgba(14,13,12,.97);
|
||
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
|
||
z-index:99;flex-direction:column;gap:0;border-bottom:1px solid rgba(235,235,222,.08);
|
||
padding:1rem 1.5rem 1.5rem}
|
||
.mobile-nav.open{display:flex}
|
||
.mobile-nav a{display:block;padding:.8rem .5rem;color:var(--text-dim);text-decoration:none;font-family:var(--head);
|
||
font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(235,235,222,.04);transition:color .2s}
|
||
.mobile-nav a:hover{color:var(--amber)}
|
||
.mobile-nav .mobile-cta{margin-top:.75rem;text-align:center;border:1px solid var(--amber);
|
||
color:var(--amber)!important;border-bottom:1px solid var(--amber)!important;padding:.8rem!important}
|
||
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:90}
|
||
.overlay.active{display:block}
|
||
|
||
/* ─── HERO ─── */
|
||
.hero{min-height:100vh;display:grid;grid-template-columns:1fr 400px;gap:4rem;align-items:center;
|
||
padding:8rem 3rem 4rem;max-width:1240px;margin:0 auto;position:relative}
|
||
.hero::before{content:'';position:absolute;top:-20%;right:-10%;width:70vw;height:70vw;
|
||
background:radial-gradient(circle,rgba(245,124,0,.05) 0%,transparent 65%);pointer-events:none}
|
||
.hero-label{font-family:var(--head);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);
|
||
margin-bottom:2rem;display:flex;align-items:center;gap:1rem}
|
||
.hero-label::before{content:'';width:3rem;height:1px;background:var(--amber)}
|
||
.hero h1{font-family:var(--head);font-weight:900;font-size:clamp(2.8rem,7vw,5.5rem);line-height:1.05;
|
||
color:var(--text-bright);max-width:14ch;margin-bottom:2rem}
|
||
.hero h1 em{font-style:normal;color:var(--amber);position:relative}
|
||
.hero h1 em::after{content:'';position:absolute;bottom:.08em;left:0;right:0;height:3px;background:var(--amber);opacity:.35}
|
||
.hero-sub{font-family:var(--body);font-size:1.1rem;line-height:1.8;color:var(--text-dim);max-width:44ch;margin-bottom:2.5rem;font-weight:300}
|
||
.hero-sub strong{color:var(--text);font-weight:600}
|
||
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
|
||
|
||
/* Buttons */
|
||
.cta-btn{display:inline-block;font-family:var(--head);font-weight:700;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
|
||
text-decoration:none;color:var(--bg);background:var(--amber);padding:1rem 2.5rem;transition:all .3s;border:none;cursor:pointer}
|
||
.cta-btn:hover{background:var(--text-bright);color:var(--bg)}
|
||
.cta-btn::after{content:'→';margin-left:.75rem;transition:transform .3s;display:inline-block}
|
||
.cta-btn:hover::after{transform:translateX(4px)}
|
||
.btn-ghost{display:inline-block;font-family:var(--head);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
|
||
text-decoration:none;color:var(--text-dim);border:1px solid rgba(235,235,222,.2);padding:1rem 2rem;transition:all .3s}
|
||
.btn-ghost:hover{color:var(--amber);border-color:var(--amber)}
|
||
|
||
/* ─── TERMINAL CARD (hero right) ─── */
|
||
.hero-terminal{background:var(--bg2);border:1px solid rgba(235,235,222,.08);padding:1.75rem;border-radius:4px}
|
||
.t-header{display:flex;align-items:center;gap:.45rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(235,235,222,.06)}
|
||
.t-dot{width:8px;height:8px;border-radius:50%}
|
||
.t-dot.r{background:#FF5F57}.t-dot.y{background:#FEBC2E}.t-dot.g{background:#28C840}
|
||
.t-label{font-family:var(--mono);font-size:.62rem;color:var(--text-dim);margin-left:auto;letter-spacing:.08em}
|
||
.t-row{display:flex;justify-content:space-between;align-items:center;padding:.65rem 0;
|
||
border-bottom:1px solid rgba(235,235,222,.04);font-family:var(--mono);font-size:.73rem}
|
||
.t-row:last-of-type{border-bottom:none}
|
||
.t-key{color:var(--text-dim)}.t-val{font-weight:700;color:var(--text)}
|
||
.t-val.g{color:var(--green)}.t-val.a{color:var(--amber)}.t-val.r{color:#ef9a9a}
|
||
.t-tag{font-family:var(--mono);font-size:.58rem;padding:2px 7px;font-weight:700;letter-spacing:.04em;margin-left:6px;border-radius:2px}
|
||
.t-tag.pos{background:rgba(102,187,106,.12);color:var(--green)}
|
||
.t-tag.warn{background:rgba(245,124,0,.12);color:var(--amber)}
|
||
.t-tag.neg{background:rgba(239,154,154,.12);color:#ef9a9a}
|
||
.t-footer{margin-top:1.25rem;padding-top:1rem;border-top:1px solid rgba(235,235,222,.06);
|
||
display:flex;justify-content:space-between;font-family:var(--mono);font-size:.65rem}
|
||
.t-footer .key{color:var(--text-dim)}.t-footer .val{color:var(--teal);font-weight:700}
|
||
|
||
/* ─── PROOF STRIP ─── */
|
||
.proof-strip{background:var(--bg3);border-top:1px solid rgba(235,235,222,.04);border-bottom:1px solid rgba(235,235,222,.04);padding:4rem 3rem}
|
||
.proof-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
|
||
.proof-label{width:100%;text-align:center;font-family:var(--mono);font-size:.68rem;color:var(--text-dim);
|
||
margin-bottom:1.5rem;letter-spacing:.08em;text-transform:uppercase;grid-column:1/-1}
|
||
.proof-stat{}
|
||
.proof-num{font-family:var(--head);font-size:2.4rem;font-weight:900;color:var(--amber);letter-spacing:-.03em;line-height:1;margin-bottom:.4rem}
|
||
.proof-desc{font-family:var(--body);font-size:.83rem;color:var(--text-dim);line-height:1.5;font-weight:300}
|
||
|
||
/* ─── DIVIDER ─── */
|
||
hr.divider{border:none;border-top:1px solid rgba(235,235,222,.06);margin:0}
|
||
|
||
/* ─── SECTIONS ─── */
|
||
.section{max-width:1240px;margin:0 auto;padding:6rem 3rem}
|
||
.label-tag{font-family:var(--head);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);
|
||
margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}
|
||
.label-tag::before{content:'';width:3rem;height:1px;background:var(--amber)}
|
||
.section-title{font-family:var(--head);font-weight:800;font-size:clamp(1.8rem,4vw,3rem);color:var(--text-bright);
|
||
line-height:1.15;margin-bottom:1.25rem}
|
||
.section-title em{font-style:normal;color:var(--amber)}
|
||
.section-lead{font-family:var(--body);font-size:1.05rem;color:var(--text-dim);max-width:52ch;line-height:1.8;
|
||
font-weight:300;margin-bottom:3.5rem}
|
||
|
||
/* ─── PROBLEM / PROFILE CARDS ─── */
|
||
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
|
||
.prob-card{border-left:2px solid var(--slate);padding:2rem 2rem 2rem 2.5rem;transition:border-color .3s}
|
||
.prob-card:hover{border-color:var(--amber)}
|
||
.prob-num{font-family:var(--head);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);
|
||
opacity:.75;margin-bottom:1.25rem}
|
||
.prob-icon{width:52px;height:52px;border-radius:6px;background:rgba(245,124,0,.06);border:1px solid rgba(245,124,0,.15);
|
||
display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;color:var(--amber)}
|
||
.prob-title{font-family:var(--head);font-weight:700;font-size:1.1rem;color:var(--text-bright);margin-bottom:.75rem}
|
||
.prob-text{font-family:var(--body);font-size:.88rem;color:var(--text-dim);line-height:1.75;font-weight:300}
|
||
|
||
/* ─── HOW IT WORKS ─── */
|
||
.how-grid{display:grid;grid-template-columns:1fr 360px;gap:4rem;align-items:start;margin-top:3rem}
|
||
.how-step{display:flex;gap:1.5rem;padding:1.25rem 0;border-bottom:1px solid rgba(235,235,222,.05);transition:border-color .2s}
|
||
.how-step:last-child{border-bottom:none}
|
||
.how-step:hover{border-color:rgba(245,124,0,.2)}
|
||
.step-num{font-family:var(--mono);font-size:.62rem;color:var(--amber);min-width:22px;padding-top:4px;letter-spacing:.06em}
|
||
.step-title{font-family:var(--head);font-weight:700;font-size:.95rem;color:var(--text-bright);margin-bottom:.35rem}
|
||
.step-desc{font-family:var(--body);font-size:.87rem;color:var(--text-dim);line-height:1.65;font-weight:300}
|
||
|
||
/* Visual / POAS panel */
|
||
.how-visual{background:var(--bg2);border:1px solid rgba(235,235,222,.07);padding:2rem;position:sticky;top:5rem}
|
||
.vis-label{font-family:var(--mono);font-size:.6rem;color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.5rem}
|
||
.poas-wrap{margin-bottom:1.1rem}
|
||
.poas-bar-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;color:var(--text-dim);margin-bottom:.4rem}
|
||
.poas-bar-label span:last-child{color:var(--text)}
|
||
.poas-track{height:4px;background:rgba(235,235,222,.07);overflow:hidden;border-radius:2px}
|
||
.poas-fill{height:100%;border-radius:2px;transition:width 1.4s cubic-bezier(.16,1,.3,1)}
|
||
.poas-fill.g{background:var(--green)}
|
||
.poas-fill.a{background:var(--amber)}
|
||
.poas-fill.r{background:#ef9a9a;width:18%!important}
|
||
.vis-divider{height:1px;background:rgba(235,235,222,.06);margin:1.5rem 0}
|
||
.vis-row{display:flex;justify-content:space-between;padding:.38rem 0;font-family:var(--mono);font-size:.7rem}
|
||
.vis-k{color:var(--text-dim)}.vis-v{color:var(--text);font-weight:700}
|
||
.vis-v.g{color:var(--green)}.vis-v.r{color:#ef9a9a}
|
||
|
||
/* ─── MODULES ─── */
|
||
.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(235,235,222,.06)}
|
||
.module-card{background:var(--bg);padding:3rem 2.5rem;position:relative;transition:background .3s}
|
||
.module-card:hover{background:var(--bg2)}
|
||
.module-num{font-family:var(--head);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);opacity:.7;margin-bottom:1.5rem}
|
||
.module-stack-num{font-family:var(--head);font-weight:800;font-size:3rem;color:rgba(245,124,0,.08);
|
||
position:absolute;top:1.5rem;right:1.5rem;line-height:1;user-select:none}
|
||
.module-title{font-family:var(--head);font-weight:700;font-size:1.1rem;color:var(--text-bright);margin-bottom:.75rem}
|
||
.module-desc{font-family:var(--body);font-size:.87rem;color:var(--text-dim);line-height:1.75;font-weight:300;margin-bottom:1.25rem}
|
||
.module-features{list-style:none;display:flex;flex-direction:column;gap:.4rem}
|
||
.module-features li{font-family:var(--mono);font-size:.75rem;color:var(--text-dim);padding-left:1.25rem;position:relative;font-weight:400}
|
||
.module-features li::before{content:'→';position:absolute;left:0;color:var(--amber)}
|
||
|
||
/* ─── COMPARE TABLE ─── */
|
||
.compare-wrap{background:var(--bg2);border:1px solid rgba(235,235,222,.06);overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch}
|
||
.compare-table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:420px}
|
||
.compare-table th{padding:1rem 1.5rem;text-align:left;font-family:var(--head);font-size:.65rem;font-weight:700;
|
||
color:var(--text-dim);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid rgba(235,235,222,.06);background:rgba(235,235,222,.02)}
|
||
.compare-table th.accent{color:var(--amber);background:rgba(245,124,0,.04)}
|
||
.compare-table td{padding:1rem 1.5rem;border-bottom:1px solid rgba(235,235,222,.04);color:var(--text-dim);font-size:.85rem}
|
||
.compare-table tr:last-child td{border-bottom:none}
|
||
.compare-table td:first-child{color:var(--text);font-family:var(--head);font-weight:600}
|
||
.compare-table td.accent-col{background:rgba(245,124,0,.03)}
|
||
.chk{color:var(--green);font-weight:700}.crs{color:#ef9a9a;font-weight:700}
|
||
|
||
/* ─── PRICING ─── */
|
||
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
|
||
.price-card{border-left:2px solid var(--slate);padding:2.5rem 2rem;position:relative;transition:border-color .3s}
|
||
.price-card:hover{border-color:var(--text-dim)}
|
||
.price-card.featured{border-left-color:var(--amber)}
|
||
.price-badge{position:absolute;top:0;right:0;background:var(--amber);color:var(--bg);
|
||
font-family:var(--head);font-size:.6rem;font-weight:800;padding:4px 10px;letter-spacing:.08em;text-transform:uppercase}
|
||
.price-tier{font-family:var(--head);font-size:.65rem;font-weight:700;color:var(--text-dim);
|
||
letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.25rem}
|
||
.price-amount{font-family:var(--head);font-size:3rem;font-weight:900;letter-spacing:-.03em;color:var(--text-bright);line-height:1;margin-bottom:.2rem}
|
||
.price-period{font-family:var(--mono);font-size:.68rem;color:var(--text-dim);margin-bottom:.4rem}
|
||
.price-setup{font-family:var(--mono);font-size:.68rem;color:var(--amber);margin-bottom:2rem}
|
||
.price-features{list-style:none;display:flex;flex-direction:column;gap:.55rem;margin-bottom:2rem}
|
||
.price-features li{font-family:var(--body);font-size:.85rem;color:var(--text-dim);display:flex;gap:.6rem;align-items:flex-start;font-weight:300}
|
||
.price-features li span:first-child{color:var(--green);font-weight:700;flex-shrink:0;margin-top:1px}
|
||
.price-cta{display:block;text-align:center;padding:.85rem;font-family:var(--head);font-size:.75rem;font-weight:700;
|
||
letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(235,235,222,.15);
|
||
color:var(--text-dim);transition:all .3s}
|
||
.price-cta:hover{border-color:var(--amber);color:var(--amber)}
|
||
.price-card.featured .price-cta{border-color:var(--amber);color:var(--amber)}
|
||
.price-card.featured .price-cta:hover{background:var(--amber);color:var(--bg)}
|
||
|
||
/* ─── CALCULATOR ─── */
|
||
.calculator-wrapper{max-width:1100px;margin:0 auto;padding:6rem 3rem}
|
||
.calculator-section{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start;margin-top:2.5rem}
|
||
.calc-inputs{background:var(--bg2);border:1px solid rgba(235,235,222,.07);padding:2.5rem 2rem}
|
||
.calc-inputs h3{font-family:var(--head);font-size:1rem;font-weight:700;color:var(--text-bright);margin-bottom:2rem}
|
||
.calc-field{margin-bottom:1.5rem}
|
||
.calc-field:last-child{margin-bottom:0}
|
||
.calc-field label{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--head);
|
||
font-size:.78rem;font-weight:600;color:var(--text-dim);margin-bottom:.6rem;letter-spacing:.02em}
|
||
.calc-field label span{font-size:.82rem;font-weight:700;color:var(--text-bright)}
|
||
.calc-slider-row{display:flex;align-items:center;gap:.75rem}
|
||
.calc-slider-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;
|
||
background:rgba(235,235,222,.1);outline:none;cursor:pointer}
|
||
.calc-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
|
||
background:var(--amber);cursor:pointer;border:2px solid rgba(0,0,0,.3)}
|
||
.calc-slider-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
|
||
background:var(--amber);cursor:pointer;border:2px solid rgba(0,0,0,.3)}
|
||
.calc-num-input{width:80px;padding:6px 10px;border:1px solid rgba(235,235,222,.12);font-size:.82rem;font-weight:600;
|
||
color:var(--text-bright);text-align:right;background:rgba(235,235,222,.04);outline:none;font-family:inherit}
|
||
.calc-num-input:focus{border-color:var(--amber)}
|
||
.calc-outputs{display:flex;flex-direction:column;gap:1rem}
|
||
.calc-out-card{background:var(--bg2);border:1px solid rgba(235,235,222,.07);padding:1.75rem}
|
||
.calc-out-card.highlight{background:var(--bg3);border-color:rgba(38,166,154,.3)}
|
||
.calc-out-label{font-family:var(--head);font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
|
||
color:var(--text-dim);margin-bottom:.5rem}
|
||
.calc-out-card.highlight .calc-out-label{color:var(--teal)}
|
||
.calc-out-value{font-family:var(--head);font-size:2.2rem;font-weight:700;color:var(--text-bright);line-height:1.1;margin-bottom:.25rem}
|
||
.calc-out-card.highlight .calc-out-value{color:var(--teal)}
|
||
.calc-out-sub{font-size:.8rem;color:var(--text-dim)}
|
||
.calc-hebel-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
|
||
.calc-hebel-chip{display:inline-flex;align-items:center;background:rgba(102,187,106,.08);border:1px solid rgba(102,187,106,.2);
|
||
padding:5px 12px;font-size:.87rem;font-weight:700;color:var(--green)}
|
||
|
||
/* ─── CTA SECTION ─── */
|
||
.cta-section{padding:8rem 3rem;text-align:center;position:relative;background:var(--bg3)}
|
||
.cta-section::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60vw;height:60vw;
|
||
background:radial-gradient(circle,rgba(245,124,0,.04) 0%,transparent 60%);pointer-events:none}
|
||
.cta-section h2{font-family:var(--head);font-weight:900;font-size:clamp(2rem,5vw,3.2rem);color:var(--text-bright);
|
||
margin-bottom:1.5rem;line-height:1.1}
|
||
.cta-section h2 em{font-style:normal;color:var(--amber)}
|
||
.cta-section p{font-size:1rem;color:var(--text-dim);max-width:44ch;margin:0 auto 3rem;line-height:1.8;font-weight:300}
|
||
.cta-eyebrow{font-family:var(--head);font-size:.65rem;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:1.5rem}
|
||
|
||
/* ─── FOOTER ─── */
|
||
footer{background:var(--bg3);border-top:1px solid rgba(235,235,222,.05);padding:4rem 3rem 2rem}
|
||
.footer-grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;margin-bottom:3rem}
|
||
.footer-brand img{height:40px;display:block;filter:brightness(0) invert(1);opacity:.8;margin-bottom:1rem}
|
||
.footer-brand p{font-family:var(--body);font-size:.85rem;color:var(--text-dim);line-height:1.6;font-weight:300}
|
||
.footer-col h4{font-family:var(--head);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:1.25rem;font-weight:700}
|
||
.footer-col a{display:block;color:var(--text-dim);text-decoration:none;font-size:.85rem;margin-bottom:.6rem;transition:color .3s}
|
||
.footer-col a:hover{color:var(--amber)}
|
||
.footer-contact-item{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;font-size:.85rem;color:var(--text-dim)}
|
||
.footer-contact-item a{color:var(--text-dim);text-decoration:none;transition:color .3s}
|
||
.footer-contact-item a:hover{color:var(--amber)}
|
||
.social-icons{display:flex;gap:1rem;margin-top:.5rem}
|
||
.social-link{color:var(--text-dim);transition:color .3s,transform .3s;opacity:.6}
|
||
.social-link:hover{color:var(--amber);opacity:1;transform:translateY(-2px)}
|
||
.footer-bottom{max-width:1240px;margin:0 auto;padding-top:2rem;border-top:1px solid rgba(235,235,222,.05);
|
||
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
|
||
.footer-bottom p{font-size:.78rem;color:var(--text-dim);opacity:.5}
|
||
.footer-bottom-links{display:flex;gap:1.5rem}
|
||
.footer-bottom-links a{font-size:.78rem;color:var(--text-dim);text-decoration:none;transition:color .3s}
|
||
.footer-bottom-links a:hover{color:var(--amber)}
|
||
|
||
/* ─── REVEAL ANIMATIONS ─── */
|
||
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
|
||
.reveal.visible{opacity:1;transform:translateY(0)}
|
||
.reveal-delay-1{transition-delay:.1s}
|
||
.reveal-delay-2{transition-delay:.2s}
|
||
|
||
/* ─── RESPONSIVE ─── */
|
||
@media(max-width:1024px){
|
||
nav ul{gap:1.2rem}
|
||
.how-grid{grid-template-columns:1fr;gap:2.5rem}
|
||
.how-visual{position:static}
|
||
.footer-grid{grid-template-columns:repeat(2,1fr);gap:2rem}
|
||
}
|
||
@media(max-width:900px){
|
||
nav{padding:.6rem 1.5rem}
|
||
nav ul{display:none}
|
||
.hamburger{display:flex}
|
||
.hero{grid-template-columns:1fr;gap:2.5rem;padding:7rem 1.5rem 3rem}
|
||
.proof-strip{padding:3rem 1.5rem}
|
||
.proof-inner{grid-template-columns:repeat(2,1fr)}
|
||
.section{padding:4rem 1.5rem}
|
||
.problem-grid{grid-template-columns:1fr;gap:1.25rem}
|
||
.modules-grid{grid-template-columns:1fr;gap:1px}
|
||
.pricing-grid{grid-template-columns:1fr;gap:1.25rem}
|
||
}
|
||
@media(max-width:768px){
|
||
nav{padding:.5rem 1.25rem}
|
||
.hero{padding:6.5rem 1.25rem 3rem}
|
||
.hero h1{font-size:clamp(2.2rem,8vw,3.5rem)}
|
||
.section{padding:3.5rem 1.25rem}
|
||
.calculator-wrapper{padding:3.5rem 1.25rem}
|
||
.calculator-section{grid-template-columns:1fr;gap:1.25rem}
|
||
.cta-section{padding:5rem 1.25rem}
|
||
footer{padding:3rem 1.25rem 1.5rem}
|
||
.footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem}
|
||
.footer-bottom{flex-direction:column;align-items:flex-start}
|
||
}
|
||
@media(max-width:480px){
|
||
.proof-inner{grid-template-columns:1fr 1fr}
|
||
.hero-actions{flex-direction:column;align-items:stretch}
|
||
.hero-actions .cta-btn,.hero-actions .btn-ghost{text-align:center}
|
||
.footer-grid{grid-template-columns:1fr;gap:1.5rem}
|
||
}
|
||
</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>
|
||
|
||
<!-- ── NAV ── -->
|
||
<nav>
|
||
<a href="https://profice.ai/" class="nav-logo" title="Profice GmbH">
|
||
<img src="images/logo/logo-01-complete.png" alt="Profice">
|
||
<span class="nav-logo-name">FEED<em>GINE</em></span>
|
||
</a>
|
||
<ul>
|
||
<li><a href="/problem">Problem</a></li>
|
||
<li><a href="/solution">Lösung</a></li>
|
||
<li><a href="/modules">Module</a></li>
|
||
<li><a href="/pricing">Pricing</a></li>
|
||
<li><a href="/calculator">Kalkulator</a></li>
|
||
<li><a href="https://profice.ai/">↗ Profice</a></li>
|
||
<li><a href="https://termine.profice.de" target="_blank" rel="noopener" class="nav-cta">Profit-Analyse buchen</a></li>
|
||
</ul>
|
||
<button class="hamburger" id="hamburger" aria-label="Menü öffnen">
|
||
<span></span><span></span><span></span>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- Mobile Nav -->
|
||
<div class="mobile-nav" id="mobileNav">
|
||
<a href="/problem">Problem</a>
|
||
<a href="/solution">Lösung</a>
|
||
<a href="/modules">Module</a>
|
||
<a href="/pricing">Pricing</a>
|
||
<a href="/calculator">Kalkulator</a>
|
||
<a href="https://profice.ai/" target="_blank" rel="noopener">↗ KI Systeme (Profice)</a>
|
||
<a href="https://termine.profice.de" target="_blank" rel="noopener" class="mobile-cta">Profit-Analyse buchen →</a>
|
||
</div>
|
||
<div class="overlay" id="overlay"></div>
|
||
|
||
<!-- ── HERO ── -->
|
||
<section>
|
||
<div class="hero">
|
||
<div class="hero-left">
|
||
<div class="hero-label">Profit Intelligence Platform</div>
|
||
<h1>ROAS lügt.<br><em>Profit zählt.</em></h1>
|
||
<p class="hero-sub">
|
||
Feedgine verbindet deine <strong>JTL-Wawi-Margen</strong> mit Google Shopping, Meta und Microsoft Ads. Ergebnis bei lkw-teile24.de: <strong>+31 % profitabler Umsatz</strong>, −23 % verschwendetes Budget.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="https://termine.profice.de" target="_blank" rel="noopener" class="cta-btn">Profit-Analyse buchen</a>
|
||
<a href="/solution" class="btn-ghost">Wie es funktioniert</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-terminal">
|
||
<div class="t-header">
|
||
<div class="t-dot r"></div>
|
||
<div class="t-dot y"></div>
|
||
<div class="t-dot g"></div>
|
||
<span class="t-label">LIVE · feedgine.engine</span>
|
||
</div>
|
||
<div class="t-row">
|
||
<span class="t-key">Produkt A — Werkzeug</span>
|
||
<span class="t-val g">POAS 4.2 <span class="t-tag pos">SKALIEREN</span></span>
|
||
</div>
|
||
<div class="t-row">
|
||
<span class="t-key">Produkt B — Zubehör</span>
|
||
<span class="t-val a">POAS 1.1 <span class="t-tag warn">PRÜFEN</span></span>
|
||
</div>
|
||
<div class="t-row">
|
||
<span class="t-key">Produkt C — Sonder</span>
|
||
<span class="t-val r">POAS 0.6 <span class="t-tag neg">PAUSIEREN</span></span>
|
||
</div>
|
||
<div class="t-row">
|
||
<span class="t-key">Produkt D — OEM-Teil</span>
|
||
<span class="t-val g">POAS 3.8 <span class="t-tag pos">+BUDGET</span></span>
|
||
</div>
|
||
<div class="t-footer">
|
||
<span class="key">Tracking Coverage (SST)</span>
|
||
<span class="val">97.4 %</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── PROOF STRIP ── -->
|
||
<div class="proof-strip">
|
||
<div class="proof-inner">
|
||
<div class="proof-label">Live-Referenz: lkw-teile24.de — 230.000 Produkte · JTL-Wawi · Google PMax</div>
|
||
<div class="proof-stat">
|
||
<div class="proof-num">230k</div>
|
||
<div class="proof-desc">Produkte live in Referenz-Deployment lkw-teile24.de</div>
|
||
</div>
|
||
<div class="proof-stat">
|
||
<div class="proof-num">97%</div>
|
||
<div class="proof-desc">Tracking-Coverage durch Server Side Tracking</div>
|
||
</div>
|
||
<div class="proof-stat">
|
||
<div class="proof-num">−23%</div>
|
||
<div class="proof-desc">Ads-Budget auf unprofitable Produkte nach POAS-Umstellung</div>
|
||
</div>
|
||
<div class="proof-stat">
|
||
<div class="proof-num">+31%</div>
|
||
<div class="proof-desc">Umsatz mit profitablen Produkten im selben Zeitraum</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ── PROBLEM ── -->
|
||
<section id="problem" class="section">
|
||
<div class="label-tag reveal">Das Problem</div>
|
||
<h2 class="section-title reveal">Dein ROAS <em>lügt dich an.</em></h2>
|
||
<p class="section-lead reveal">Klassische Tools zeigen dir Umsatz — nicht Marge. Du weißt nicht welche Produkte wirklich Geld verdienen, und welche dein Budget verbrennen.</p>
|
||
|
||
<div class="problem-grid">
|
||
<div class="prob-card reveal">
|
||
<div class="prob-num">01 — PROBLEM</div>
|
||
<div class="prob-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
|
||
</div>
|
||
<div class="prob-title">Feed-Tools kennen keinen EK</div>
|
||
<p class="prob-text">Channable, DataFeedWatch & Co. syndizieren Daten. Sie wissen nichts über deine Einkaufspreise, Versandkosten oder echte Marge pro Produkt.</p>
|
||
</div>
|
||
<div class="prob-card reveal reveal-delay-1">
|
||
<div class="prob-num">02 — PROBLEM</div>
|
||
<div class="prob-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M16.72 11.06A10.94 10.94 0 0 1 19 12.55"/><path d="M5 12.55a10.94 10.94 0 0 1 5.17-2.39"/><path d="M10.71 5.05A16 16 0 0 1 22.56 9"/><path d="M1.42 9a15.91 15.91 0 0 1 4.7-2.88"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/><line x1="12" y1="20" x2="12.01" y2="20"/></svg>
|
||
</div>
|
||
<div class="prob-title">Tracking bricht täglich</div>
|
||
<p class="prob-text">Adblocker, ITP, Cookie-Verweigerer. Client-Side Tracking verliert 20–40% der Conversions. Du optimierst auf Phantomdaten.</p>
|
||
</div>
|
||
<div class="prob-card reveal reveal-delay-2">
|
||
<div class="prob-num">03 — PROBLEM</div>
|
||
<div class="prob-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="9" x2="19" y2="9"/><line x1="5" y1="15" x2="19" y2="15"/><line x1="18" y1="4" x2="6" y2="20"/></svg>
|
||
</div>
|
||
<div class="prob-title">ROAS ≠ Profitabilität</div>
|
||
<p class="prob-text">ROAS 5 auf einem Produkt mit 8% Marge. Minus. Du weißt es nicht — und Google bietet weiter drauf. Das ist das eigentliche Problem.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ── SOLUTION ── -->
|
||
<section id="solution" class="section">
|
||
<div class="label-tag reveal">Die Lösung</div>
|
||
<h2 class="section-title reveal">Profit-Intelligenz,<br><em>nicht Feed-Sync.</em></h2>
|
||
|
||
<div class="how-grid">
|
||
<div class="how-steps reveal">
|
||
<div class="how-step">
|
||
<span class="step-num">01</span>
|
||
<div>
|
||
<div class="step-title">Datenbasis aus deinem WaWi</div>
|
||
<p class="step-desc">Feedgine liest EK, Versandkosten und alle relevanten Margen-Felder direkt aus JTL-Wawi. Keine manuelle Pflege.</p>
|
||
</div>
|
||
</div>
|
||
<div class="how-step">
|
||
<span class="step-num">02</span>
|
||
<div>
|
||
<div class="step-title">Bereinigung & Margenkalkulation</div>
|
||
<p class="step-desc">Jedes Produkt bekommt eine echte Deckungsbeitragsberechnung. Daten werden bereinigt, normiert und POAS-tauglich gemacht.</p>
|
||
</div>
|
||
</div>
|
||
<div class="how-step">
|
||
<span class="step-num">03</span>
|
||
<div>
|
||
<div class="step-title">POAS Custom Labels</div>
|
||
<p class="step-desc">Produkte werden automatisch in Profit-Tiers eingeteilt. Google Shopping und PMax bieten auf Basis echter Marge — nicht Umsatz.</p>
|
||
</div>
|
||
</div>
|
||
<div class="how-step">
|
||
<span class="step-num">04</span>
|
||
<div>
|
||
<div class="step-title">Server Side Tracking</div>
|
||
<p class="step-desc">Cookie-optional. First-Party. Tracking-Coverage über 95% — unabhängig von Browser, Adblocker oder Consent-Rate.</p>
|
||
</div>
|
||
</div>
|
||
<div class="how-step">
|
||
<span class="step-num">05</span>
|
||
<div>
|
||
<div class="step-title">Multi-Channel Ausgabe</div>
|
||
<p class="step-desc">Google Shopping, Meta CAPI und Microsoft Ads — täglich aktualisiert, ohne Drittanbieter-Abo.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="how-visual reveal">
|
||
<div class="vis-label">Profit-Analyse · Live</div>
|
||
<div class="poas-wrap">
|
||
<div class="poas-bar-label"><span>Top-Seller → Werkzeuge</span><span>POAS 4.2</span></div>
|
||
<div class="poas-track"><div class="poas-fill g" style="width:84%"></div></div>
|
||
</div>
|
||
<div class="poas-wrap">
|
||
<div class="poas-bar-label"><span>Mittelfeld → Zubehör</span><span>POAS 2.8</span></div>
|
||
<div class="poas-track"><div class="poas-fill a" style="width:56%"></div></div>
|
||
</div>
|
||
<div class="poas-wrap">
|
||
<div class="poas-bar-label"><span>Verlust → Sonderartikel</span><span>POAS 0.6</span></div>
|
||
<div class="poas-track"><div class="poas-fill r"></div></div>
|
||
</div>
|
||
<div class="vis-divider"></div>
|
||
<div class="vis-row"><span class="vis-k">Tracking vorher</span><span class="vis-v r">61%</span></div>
|
||
<div class="vis-row"><span class="vis-k">Tracking nachher (SST)</span><span class="vis-v g">97%</span></div>
|
||
<div class="vis-row"><span class="vis-k">Ads-Budget eingespart</span><span class="vis-v g">−23%</span></div>
|
||
<div class="vis-row"><span class="vis-k">Profit. Umsatz</span><span class="vis-v g">+31%</span></div>
|
||
<div class="vis-divider"></div>
|
||
<div style="font-family:var(--mono);font-size:.6rem;color:var(--text-dim);line-height:1.6">
|
||
Referenz: lkw-teile24.de<br>230.000 Produkte · JTL-Wawi · Google PMax
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ── MODULES ── -->
|
||
<section id="modules" class="section">
|
||
<div class="label-tag reveal">Was enthalten ist</div>
|
||
<h2 class="section-title reveal">Drei Module.<br><em>Ein System.</em></h2>
|
||
<p class="section-lead reveal">Kein Flickenteppich aus Einzellösungen. Feedgine verbindet Profitdaten, Feed-Intelligence und Tracking in einer Pipeline.</p>
|
||
|
||
<div class="modules-grid">
|
||
<div class="module-card reveal">
|
||
<div class="module-stack-num">01</div>
|
||
<div class="module-num">MODUL 01 — PROFIT ENGINE</div>
|
||
<div class="module-title">Margenkalkulation</div>
|
||
<p class="module-desc">EK, Versand, Gebühren — alles berücksichtigt. POAS Custom Labels für Google Shopping und PMax auf Basis echter Deckungsbeiträge.</p>
|
||
<ul class="module-features">
|
||
<li>EK-Daten aus JTL-Wawi / MSSQL</li>
|
||
<li>Automatische DB-Berechnung</li>
|
||
<li>POAS-Tiering (Skala 1–5)</li>
|
||
<li>Täglicher Update-Zyklus</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card reveal reveal-delay-1">
|
||
<div class="module-stack-num">02</div>
|
||
<div class="module-num">MODUL 02 — FEED INTELLIGENCE</div>
|
||
<div class="module-title">Datenpipeline</div>
|
||
<p class="module-desc">Datenbereinigungs-Pipeline für Google, Meta und Microsoft. Kein Channable. Direkt aus deiner Datenbasis — täglich, automatisch.</p>
|
||
<ul class="module-features">
|
||
<li>Google Shopping / PMax</li>
|
||
<li>Meta Product Catalog (CAPI)</li>
|
||
<li>Microsoft Shopping Ads</li>
|
||
<li>OE/OEM Nummer-Handling</li>
|
||
</ul>
|
||
</div>
|
||
<div class="module-card reveal reveal-delay-2">
|
||
<div class="module-stack-num">03</div>
|
||
<div class="module-num">MODUL 03 — SERVER SIDE TRACKING</div>
|
||
<div class="module-title">First-Party Tracking</div>
|
||
<p class="module-desc">Cookie-optionales Tracking auf EU-Infrastruktur. Kein Datenverlust durch Adblocker oder ITP. DSGVO-konform by design.</p>
|
||
<ul class="module-features">
|
||
<li>Google Ads Conversions (enhanced)</li>
|
||
<li>Meta Conversion API</li>
|
||
<li>GA4 Server Container</li>
|
||
<li>Consent Mode v2 ready</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ── COMPARISON ── -->
|
||
<section class="section">
|
||
<div class="label-tag reveal">Marktvergleich</div>
|
||
<h2 class="section-title reveal">Was andere kosten.<br><em>Was du bekommst.</em></h2>
|
||
|
||
<div class="compare-wrap reveal" style="margin-top:2.5rem">
|
||
<table class="compare-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Feature</th>
|
||
<th>Klassische Agentur</th>
|
||
<th class="accent">Feedgine</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Echte Margenkalkulation (EK)</td>
|
||
<td><span class="crs">✕</span></td>
|
||
<td class="accent-col"><span class="chk">✓</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>POAS Custom Labels</td>
|
||
<td>Manuell</td>
|
||
<td class="accent-col"><span class="chk">✓ Automatisch</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Server Side Tracking</td>
|
||
<td>Extra Kosten</td>
|
||
<td class="accent-col"><span class="chk">✓ Enthalten</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Multi-Channel (Google + Meta + MS)</td>
|
||
<td>Teilweise</td>
|
||
<td class="accent-col"><span class="chk">✓</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>JTL-Wawi Integration</td>
|
||
<td><span class="crs">✕</span></td>
|
||
<td class="accent-col"><span class="chk">✓ Nativ</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>EU-Hosting / DSGVO</td>
|
||
<td>Teilweise</td>
|
||
<td class="accent-col"><span class="chk">✓ 100%</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Monatliche Kosten</td>
|
||
<td>€2.000–5.000+</td>
|
||
<td class="accent-col" style="color:var(--amber);font-weight:700">ab €999</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ── PRICING ── -->
|
||
<section id="pricing" class="section">
|
||
<div class="label-tag reveal">Pricing</div>
|
||
<h2 class="section-title reveal">Kein Lock-in.<br><em>Kein Bullshit.</em></h2>
|
||
<p class="section-lead reveal">Managed oder Self-Hosted — du entscheidest. Alle Preise netto zzgl. MwSt.</p>
|
||
|
||
<div class="pricing-grid">
|
||
<div class="price-card featured reveal">
|
||
<div class="price-badge">Empfohlen</div>
|
||
<div class="price-tier">Gewinn-Check</div>
|
||
<div class="price-amount">€1.000</div>
|
||
<div class="price-period">einmalig</div>
|
||
<ul class="price-features">
|
||
<li><span>✓</span><span>Analyse deiner Ads & Daten</span></li>
|
||
<li><span>✓</span><span>Identifikation von Verlusten</span></li>
|
||
<li><span>✓</span><span>konkrete Maßnahmen</span></li>
|
||
</ul>
|
||
<a href="https://termine.profice.de" target="_blank" rel="noopener" class="price-cta">Jetzt starten →</a>
|
||
</div>
|
||
<div class="price-card reveal reveal-delay-1">
|
||
<div class="price-tier">Feedgine Setup</div>
|
||
<div class="price-amount">€4.999</div>
|
||
<div class="price-period">einmalig</div>
|
||
<ul class="price-features">
|
||
<li><span>✓</span><span>Feed + POAS Setup</span></li>
|
||
<li><span>✓</span><span>Tracking Fix</span></li>
|
||
<li><span>✓</span><span>Margensteuerung</span></li>
|
||
</ul>
|
||
<a href="https://termine.profice.de" target="_blank" rel="noopener" class="price-cta">Setup anfragen →</a>
|
||
</div>
|
||
<div class="price-card reveal reveal-delay-2">
|
||
<div class="price-tier">Feedgine Betrieb</div>
|
||
<div class="price-amount">ab €1.500</div>
|
||
<div class="price-period">/Monat</div>
|
||
<ul class="price-features">
|
||
<li><span>✓</span><span>Monitoring</span></li>
|
||
<li><span>✓</span><span>Optimierung</span></li>
|
||
<li><span>✓</span><span>Skalierung</span></li>
|
||
</ul>
|
||
<a href="https://termine.profice.de" target="_blank" rel="noopener" class="price-cta">Starten →</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ── TARGET AUDIENCE ── -->
|
||
<section class="section">
|
||
<div class="label-tag reveal">Zielgruppe</div>
|
||
<h2 class="section-title reveal">Feedgine ist gebaut für<br><em>E-Commerce mit Ambition.</em></h2>
|
||
|
||
<div class="problem-grid" style="margin-top:2rem">
|
||
<div class="prob-card reveal">
|
||
<div class="prob-num">PROFIL 01</div>
|
||
<div class="prob-title">JTL-Shop mit >10k Produkten</div>
|
||
<p class="prob-text">Du nutzt JTL-Wawi und hast einen aktiven Google-Shopping-Feed. Du weißt, dass dein Feed besser sein könnte — aber dir fehlt die Marge-Transparenz.</p>
|
||
</div>
|
||
<div class="prob-card reveal reveal-delay-1">
|
||
<div class="prob-num">PROFIL 02</div>
|
||
<div class="prob-title">Adspend >€5k/Monat</div>
|
||
<p class="prob-text">Du investierst signifikant in Google Ads oder Meta — und willst endlich wissen, welche Produkte echten Profit liefern und welche Budget verbrennen.</p>
|
||
</div>
|
||
<div class="prob-card reveal reveal-delay-2">
|
||
<div class="prob-num">PROFIL 03</div>
|
||
<div class="prob-title">ROAS-Reporting reicht nicht mehr</div>
|
||
<p class="prob-text">Du hast das Gefühl, dass deine Agentur auf Umsatz optimiert statt auf Gewinn. Du brauchst Transparenz — keine Dashboards mit Vanity-Metriken.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<hr class="divider">
|
||
|
||
<!-- ── CALCULATOR ── -->
|
||
<section id="calculator">
|
||
<div class="calculator-wrapper">
|
||
<div class="label-tag reveal">Kalkulator</div>
|
||
<h2 class="section-title reveal">Ihr persönlicher <em>Gewinn-Rechner</em></h2>
|
||
<p class="section-lead reveal" style="margin-bottom:0">Geben Sie Ihre Zahlen ein — und sehen Sie sofort, wie viel mehr Profit durch optimierte Feed-Steuerung möglich ist.</p>
|
||
|
||
<div class="calculator-section">
|
||
<div class="calc-inputs">
|
||
<h3>Ihre Kennzahlen</h3>
|
||
<div class="calc-field">
|
||
<label>Werbebudget <span id="lbl-budget">10.000 €</span></label>
|
||
<div class="calc-slider-row">
|
||
<input type="range" id="sl-budget" min="1000" max="100000" step="500" value="10000">
|
||
<input type="number" class="calc-num-input" id="num-budget" min="1000" max="100000" step="500" value="10000">
|
||
</div>
|
||
</div>
|
||
<div class="calc-field">
|
||
<label>Monatlicher Umsatz <span id="lbl-umsatz">50.000 €</span></label>
|
||
<div class="calc-slider-row">
|
||
<input type="range" id="sl-umsatz" min="5000" max="500000" step="1000" value="50000">
|
||
<input type="number" class="calc-num-input" id="num-umsatz" min="5000" max="500000" step="1000" value="50000">
|
||
</div>
|
||
</div>
|
||
<div class="calc-field">
|
||
<label>Bruttomarge <span id="lbl-marge">30 %</span></label>
|
||
<div class="calc-slider-row">
|
||
<input type="range" id="sl-marge" min="10" max="80" step="1" value="30">
|
||
<input type="number" class="calc-num-input" id="num-marge" min="10" max="80" step="1" value="30">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="calc-outputs">
|
||
<div class="calc-out-card">
|
||
<div class="calc-out-label">Bisheriger Profit</div>
|
||
<div class="calc-out-value" id="out-profit-alt">5.000 €</div>
|
||
<div class="calc-out-sub">Vor der Feed-Optimierung</div>
|
||
</div>
|
||
<div class="calc-out-card highlight">
|
||
<div class="calc-out-label">Neuer Profit</div>
|
||
<div class="calc-out-value" id="out-profit-neu">—</div>
|
||
<div class="calc-out-sub">Mit optimiertem Feed</div>
|
||
</div>
|
||
<div class="calc-out-card">
|
||
<div class="calc-out-label">Ihr Hebel</div>
|
||
<div class="calc-hebel-row">
|
||
<div class="calc-hebel-chip" id="out-hebel-eur">—</div>
|
||
<div class="calc-hebel-chip" id="out-hebel-pct">—</div>
|
||
</div>
|
||
<div class="calc-out-sub" style="margin-top:10px">Mehr Gewinn — gleiches Budget</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ── CTA ── -->
|
||
<div id="contact" class="cta-section">
|
||
<div class="cta-eyebrow">Bereit?</div>
|
||
<h2>Wisse endlich, welche<br>Produkte <em>Geld verdienen.</em></h2>
|
||
<p>Kein Sales-Funnel. Kein Massen-Onboarding. Wir arbeiten mit ausgewählten E-Commerce-Betreibern — direkt, konkret, auf Augenhöhe.</p>
|
||
<a href="https://termine.profice.de" target="_blank" rel="noopener" class="cta-btn" style="margin-top:2rem">Profit-Analyse buchen</a>
|
||
</div>
|
||
|
||
<!-- ── FOOTER ── -->
|
||
<footer>
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<img src="images/logo/logo-01-complete.png" alt="Profice Logo">
|
||
<p>Profit Intelligence für E-Commerce.<br>POAS · Feed · Server-Side Tracking.</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Feedgine</h4>
|
||
<a href="/problem">Das Problem</a>
|
||
<a href="/solution">Die Lösung</a>
|
||
<a href="/modules">Module</a>
|
||
<a href="/pricing">Pricing</a>
|
||
<a href="/calculator">POAS-Kalkulator</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Rechtliches</h4>
|
||
<a href="https://profice.ai/datenschutz" target="_blank" rel="noopener">Datenschutzerklärung</a>
|
||
<a href="https://profice.ai/impressum" target="_blank" rel="noopener">Impressum</a>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>Kontakt</h4>
|
||
<div class="footer-contact-item">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
|
||
<a href="mailto:hello@profice.ai">hello@profice.ai</a>
|
||
</div>
|
||
<div class="social-icons">
|
||
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link" title="Instagram">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
|
||
</a>
|
||
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link" title="Facebook">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p>© 2026 Profice GmbH. Alle Rechte vorbehalten.</p>
|
||
<div class="footer-bottom-links">
|
||
<a href="https://profice.ai/datenschutz" target="_blank" rel="noopener">Datenschutz</a>
|
||
<a href="https://profice.ai/impressum" target="_blank" rel="noopener">Impressum</a>
|
||
<a href="https://profice.ai/" target="_blank" rel="noopener">profice.ai</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ── SCRIPTS ── -->
|
||
<script src="scripts/feed-calculator.js" defer></script>
|
||
|
||
<script>
|
||
// Reveal on scroll
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible') });
|
||
}, { threshold: 0.12 });
|
||
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||
|
||
// Nav scroll shrink
|
||
const navEl = document.querySelector('nav');
|
||
window.addEventListener('scroll', () => {
|
||
navEl.classList.toggle('scrolled', window.scrollY > 40);
|
||
}, { passive: true });
|
||
|
||
// Mobile nav toggle
|
||
const hamburger = document.getElementById('hamburger');
|
||
const mobileNav = document.getElementById('mobileNav');
|
||
const overlay = document.getElementById('overlay');
|
||
|
||
function toggleNav() {
|
||
hamburger.classList.toggle('open');
|
||
mobileNav.classList.toggle('open');
|
||
overlay.classList.toggle('active');
|
||
}
|
||
|
||
hamburger?.addEventListener('click', toggleNav);
|
||
overlay?.addEventListener('click', toggleNav);
|
||
mobileNav?.querySelectorAll('a').forEach(a => a.addEventListener('click', () => {
|
||
if (mobileNav.classList.contains('open')) toggleNav();
|
||
}));
|
||
|
||
// Clean URL navigation
|
||
const sections = { problem: true, solution: true, modules: true, pricing: true, calculator: true };
|
||
|
||
// On direct load (e.g. feedgine.de/pricing), scroll to matching section
|
||
(function() {
|
||
const seg = window.location.pathname.replace(/^\//, '');
|
||
if (sections[seg]) {
|
||
const el = document.getElementById(seg);
|
||
if (el) setTimeout(() => el.scrollIntoView({ behavior: 'smooth' }), 50);
|
||
}
|
||
})();
|
||
|
||
// Intercept internal nav clicks — smooth scroll + pushState
|
||
document.querySelectorAll('a[href^="/"]').forEach(function(link) {
|
||
const seg = link.getAttribute('href').replace(/^\//, '');
|
||
if (sections[seg]) {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
history.pushState(null, '', '/' + seg);
|
||
document.getElementById(seg).scrollIntoView({ behavior: 'smooth' });
|
||
});
|
||
}
|
||
});
|
||
|
||
// Update URL as sections scroll into view
|
||
const urlObserver = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(e) {
|
||
if (e.isIntersecting) {
|
||
history.replaceState(null, '', sections[e.target.id] ? '/' + e.target.id : '/');
|
||
}
|
||
});
|
||
}, { threshold: 0.4 });
|
||
document.querySelectorAll('section[id]').forEach(function(s) { urlObserver.observe(s); });
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|