485 lines
29 KiB
HTML
485 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<!-- Cookiebot -->
|
||
<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d6499c25-b3c2-41ac-8edf-60a4209f74c9" data-blockingmode="auto" type="text/javascript"></script>
|
||
<script>
|
||
window.addEventListener('CookiebotOnDialogDisplay', function() {
|
||
var dialog = document.getElementById('CybotCookiebotDialog');
|
||
if (dialog) {
|
||
dialog.style.setProperty('position', 'fixed', 'important');
|
||
dialog.style.setProperty('bottom', '0', 'important');
|
||
dialog.style.setProperty('top', 'auto', 'important');
|
||
dialog.style.setProperty('left', '0', 'important');
|
||
dialog.style.setProperty('right', '0', 'important');
|
||
dialog.style.setProperty('width', '100%', 'important');
|
||
dialog.style.setProperty('transform', 'none', 'important');
|
||
dialog.style.setProperty('margin', '0', 'important');
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<!-- Google Tag Manager -->
|
||
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||
})(window,document,'script','dataLayer','GTM-PNJK5FN7');</script>
|
||
<!-- End Google Tag Manager -->
|
||
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Profice Feed - Aktuelle Einblicke in KI-Automatisierung, digitale Prozesse und intelligente Lösungen für Unternehmen.">
|
||
<meta name="keywords" content="Profice, KI, Automatisierung, Feed, Neuigkeiten, digitale Mitarbeiter, Prozessoptimierung">
|
||
<meta name="author" content="Profice">
|
||
<meta property="og:title" content="Feed - Profice">
|
||
<meta property="og:description" content="Aktuelle Einblicke und Impulse rund um KI-Automatisierung und digitale Prozesse.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:image" content="https://profice.de/images/logo/logo-01-complete.png">
|
||
<meta name="robots" content="index, follow">
|
||
<title>Feed - Profice</title>
|
||
|
||
<!-- Favicon with multiple sizes for better visibility -->
|
||
<link rel="icon" type="image/png" sizes="32x32" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="icon" type="image/png" sizes="192x192" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="icon" type="image/png" sizes="512x512" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="180x180" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="152x152" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="144x144" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="120x120" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="114x114" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="76x76" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="72x72" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="60x60" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="apple-touch-icon" sizes="57x57" href="../images/logo/Appicon 1024X1024-01.png">
|
||
<link rel="shortcut icon" href="../images/logo/Appicon 1024X1024-01.png">
|
||
|
||
<!-- Preload critical resources -->
|
||
<link rel="preload" href="../style/design.css?v=20260304" as="style">
|
||
<link rel="preload" href="../style/cursor.css?v=20260304" as="style">
|
||
<link rel="preload" href="../images/logo/logo-01-complete.png" as="image">
|
||
|
||
<!-- Stylesheets -->
|
||
<link rel="stylesheet" href="../style/design.css?v=20260304">
|
||
<link rel="stylesheet" href="../style/cursor.css?v=20260304">
|
||
|
||
<link rel="stylesheet" href="../style/feed.css?v=20260320">
|
||
|
||
</head>
|
||
<body>
|
||
<!-- Google Tag Manager (noscript) -->
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNJK5FN7"
|
||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
<!-- End Google Tag Manager (noscript) -->
|
||
|
||
<!-- Hexagonal Background Canvas -->
|
||
<canvas id="hexCanvas"></canvas>
|
||
|
||
<!-- Top Banner -->
|
||
<header class="top-banner dark-theme">
|
||
<div class="top-banner-left">
|
||
<div class="banner-left">
|
||
<a href="../index.html" class="logo-link">
|
||
<img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="top-banner-center">
|
||
<nav class="main-nav">
|
||
<a href="../index.html#hero" class="nav-link">Start</a>
|
||
<a href="../index.html#problems" class="nav-link">Systeme</a>
|
||
<a href="../index.html#fit" class="nav-link">Für wen?</a>
|
||
<a href="../index.html#process" class="nav-link">Prozess</a>
|
||
<a href="../index.html#demo-section" class="nav-link">Kontakt</a>
|
||
<div class="nav-dropdown">
|
||
<a href="#" class="nav-link active" onclick="return false;">Services <span class="dropdown-arrow"></span></a>
|
||
<div class="dropdown-menu">
|
||
<a href="feed.html" class="dropdown-item">Google Feed</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="top-banner-right">
|
||
<button id="cursorToggle">
|
||
<img src="../images/icons/spider.png?v=20260303" alt="Spider" class="cursor-icon" style="width: 46px; height: 46px;">
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="overlay" id="overlay"></div>
|
||
|
||
<!-- Feed Content -->
|
||
<main class="feed-content">
|
||
<div class="feed-header">
|
||
<span class="feed-label">Profice Feed</span>
|
||
<h1 class="feed-title">Intelligentes Feed-Management für Google Shopping</h1>
|
||
<p class="feed-subtitle">Mehr Profit aus Ihren Google-Shopping-Kampagnen — durch automatisierte, datenbasierte Steuerung Ihres Produktfeeds.</p>
|
||
</div>
|
||
|
||
<!-- Hero Visual: Text + Graphic -->
|
||
<div class="hero-visual">
|
||
<div class="hero-visual-text">
|
||
<h2>Ihr Produktfeed — auf Profitabilität optimiert</h2>
|
||
<p>Feed erkennt automatisch, welche Produkte Gewinn bringen und welche Budget verbrennen. Ihr Werbebudget fließt gezielt in die Artikel, die sich wirklich lohnen.</p>
|
||
</div>
|
||
<div class="hero-visual-graphic">
|
||
<svg width="320" height="200" viewBox="0 0 320 200" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Bar chart showing budget optimization -->
|
||
<rect x="20" y="160" width="280" height="1" rx="0.5" fill="#8a8a7a" opacity="0.3"/>
|
||
<!-- Before bars -->
|
||
<text x="70" y="190" font-size="11" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Vorher</text>
|
||
<rect x="30" y="60" width="28" height="100" rx="6" fill="#d4864a" opacity="0.35"/>
|
||
<rect x="62" y="40" width="28" height="120" rx="6" fill="#d4864a" opacity="0.55"/>
|
||
<rect x="94" y="80" width="28" height="80" rx="6" fill="#d4864a" opacity="0.25"/>
|
||
<!-- Arrow -->
|
||
<path d="M145 100 L175 100" stroke="#8a8a7a" stroke-width="2" stroke-dasharray="4 3"/>
|
||
<path d="M172 94 L180 100 L172 106" stroke="#8a8a7a" stroke-width="2" fill="none"/>
|
||
<!-- After bars — optimized -->
|
||
<text x="250" y="190" font-size="11" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Nachher</text>
|
||
<rect x="200" y="25" width="28" height="135" rx="6" fill="#7fb882" opacity="0.8"/>
|
||
<rect x="232" y="55" width="28" height="105" rx="6" fill="#d4864a" opacity="0.7"/>
|
||
<rect x="264" y="120" width="28" height="40" rx="6" fill="#4a7db8" opacity="0.3"/>
|
||
<!-- Labels -->
|
||
<text x="214" y="18" font-size="9" fill="#7fb882" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Core</text>
|
||
<text x="246" y="48" font-size="9" fill="#d4864a" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Feeder</text>
|
||
<text x="278" y="114" font-size="9" fill="#4a7db8" text-anchor="middle" font-weight="600" font-family="Montserrat,sans-serif">Longtail</text>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Features with SVG icons -->
|
||
<div class="feed-section">
|
||
<span class="feed-section-label">Vorteile</span>
|
||
<h2 class="feed-section-title">Was Feed für Sie leistet</h2>
|
||
</div>
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap teal">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="14" width="4" height="6" rx="1"/><rect x="10" y="9" width="4" height="11" rx="1"/><rect x="16" y="4" width="4" height="16" rx="1"/></svg>
|
||
</div>
|
||
<h3>Profitabilität pro Produkt</h3>
|
||
<p>Jedes Produkt wird individuell bewertet — basierend auf echtem Gewinn.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap orange">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||
</div>
|
||
<h3>Intelligente Segmentierung</h3>
|
||
<p>Automatische Einteilung in profitable, neue und unprofitable Gruppen.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap green">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="2 12 6 12 8 5 11 19 14 9 16 14 18 12 22 12"/></svg>
|
||
</div>
|
||
<h3>Live-Daten</h3>
|
||
<p>Performance-Daten werden automatisch abgerufen — immer aktuell.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap teal">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="3"/><polyline points="7 13 10.5 16.5 17 9"/></svg>
|
||
</div>
|
||
<h3>Feed-Qualität gesichert</h3>
|
||
<p>Fehlerhafte Produktdaten werden automatisch korrigiert.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap orange">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
|
||
</div>
|
||
<h3>Voll automatisiert</h3>
|
||
<p>Läuft eigenständig — mit Benachrichtigungen bei Bedarf.</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon-wrap green">
|
||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
|
||
</div>
|
||
<h3>Direkt einsatzbereit</h3>
|
||
<p>Sofort kompatibel mit Google Merchant Center.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Segment Visual: Donut Chart + Cards -->
|
||
<div class="feed-section">
|
||
<span class="feed-section-label">Strategie</span>
|
||
<h2 class="feed-section-title">Drei Segmente. Eine klare Logik.</h2>
|
||
</div>
|
||
<div class="segment-visual">
|
||
<div class="segment-graphic">
|
||
<svg width="260" height="260" viewBox="0 0 260 260" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Background track -->
|
||
<circle cx="130" cy="130" r="95" stroke="#EBEBDE" stroke-width="30" fill="none"/>
|
||
<!--
|
||
Woven donut: each arc split at its midpoint into two halves.
|
||
Render order (back → front) creates the over/under effect at each junction:
|
||
Teal over Green (at top / 0°)
|
||
Green over Orange (at ~144°)
|
||
Orange over Teal (at ~270°)
|
||
Circumference ≈ 597 units.
|
||
Green: 0–239 | Orange: 239–448 | Teal: 448–597
|
||
-->
|
||
<g>
|
||
<animateTransform
|
||
attributeName="transform"
|
||
attributeType="XML"
|
||
type="rotate"
|
||
from="0 130 130"
|
||
to="360 130 130"
|
||
dur="20s"
|
||
repeatCount="indefinite"/>
|
||
|
||
<!-- BACK halves (rendered first = underneath at their far junction) -->
|
||
|
||
<!-- Green back half: units 0 → 119.5 -->
|
||
<circle cx="130" cy="130" r="95" stroke="#7fb882" stroke-width="30" fill="none"
|
||
stroke-dasharray="119.5 477.5" stroke-dashoffset="0"
|
||
transform="rotate(-90 130 130)" stroke-linecap="round"/>
|
||
|
||
<!-- Orange back half: units 239 → 343.5 -->
|
||
<circle cx="130" cy="130" r="95" stroke="#d4864a" stroke-width="30" fill="none"
|
||
stroke-dasharray="104.5 492.5" stroke-dashoffset="-239"
|
||
transform="rotate(-90 130 130)" stroke-linecap="round"/>
|
||
|
||
<!-- Teal back half: units 448 → 522.5 -->
|
||
<circle cx="130" cy="130" r="95" stroke="#5a9e96" stroke-width="30" fill="none"
|
||
stroke-dasharray="74.5 522.5" stroke-dashoffset="-448"
|
||
transform="rotate(-90 130 130)" stroke-linecap="round"/>
|
||
|
||
<!-- FRONT halves (rendered last = on top at their leading junction) -->
|
||
|
||
<!-- Green front half: units 119.5 → 239 → Green over Orange at 144° -->
|
||
<circle cx="130" cy="130" r="95" stroke="#7fb882" stroke-width="30" fill="none"
|
||
stroke-dasharray="119.5 477.5" stroke-dashoffset="-119.5"
|
||
transform="rotate(-90 130 130)" stroke-linecap="round"/>
|
||
|
||
<!-- Orange front half: units 343.5 → 448 → Orange over Teal at 270° -->
|
||
<circle cx="130" cy="130" r="95" stroke="#d4864a" stroke-width="30" fill="none"
|
||
stroke-dasharray="104.5 492.5" stroke-dashoffset="-343.5"
|
||
transform="rotate(-90 130 130)" stroke-linecap="round"/>
|
||
|
||
<!-- Teal front half: units 522.5 → 597 → Teal over Green at 0°/top -->
|
||
<circle cx="130" cy="130" r="95" stroke="#5a9e96" stroke-width="30" fill="none"
|
||
stroke-dasharray="74.5 522.5" stroke-dashoffset="-522.5"
|
||
transform="rotate(-90 130 130)" stroke-linecap="round"/>
|
||
</g>
|
||
<!-- Center text (static, outside animated group) -->
|
||
<text x="130" y="122" font-size="28" fill="#5a5252" text-anchor="middle" font-weight="700" font-family="Montserrat,sans-serif">POAS</text>
|
||
<text x="130" y="146" font-size="12" fill="#8a8a7a" text-anchor="middle" font-family="Montserrat,sans-serif">Segmentierung</text>
|
||
</svg>
|
||
</div>
|
||
<div class="segment-cards">
|
||
<div class="seg-card core">
|
||
<div class="seg-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
|
||
</div>
|
||
<div class="seg-text">
|
||
<h3>Core — Gewinnbringer</h3>
|
||
<p>Maximale Sichtbarkeit und höchstes Budget</p>
|
||
</div>
|
||
</div>
|
||
<div class="seg-card longtail">
|
||
<div class="seg-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
|
||
</div>
|
||
<div class="seg-text">
|
||
<h3>Feeder — Neue Chancen</h3>
|
||
<p>Gezieltes Testing nach Preisniveau</p>
|
||
</div>
|
||
</div>
|
||
<div class="seg-card feeder">
|
||
<div class="seg-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
|
||
</div>
|
||
<div class="seg-text">
|
||
<h3>Longtail — Budgetfresser</h3>
|
||
<p>Budget begrenzen oder umleiten</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pipeline Visual -->
|
||
<div class="feed-section">
|
||
<span class="feed-section-label">Ablauf</span>
|
||
<h2 class="feed-section-title">So funktioniert es</h2>
|
||
</div>
|
||
<div class="pipeline-wrap">
|
||
<div class="pipeline">
|
||
<div class="pipeline-step">
|
||
<div class="pipe-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
|
||
</div>
|
||
<h3>Daten verbinden</h3>
|
||
<p>Shop-Feed, Einkaufspreise und Google-Ads-Daten</p>
|
||
</div>
|
||
<div class="pipeline-arrow">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||
</div>
|
||
<div class="pipeline-step">
|
||
<div class="pipe-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
|
||
</div>
|
||
<h3>Gewinn berechnen</h3>
|
||
<p>POAS-Wert pro Produkt ermitteln</p>
|
||
</div>
|
||
<div class="pipeline-arrow">
|
||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8a8a7a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
|
||
</div>
|
||
<div class="pipeline-step">
|
||
<div class="pipe-icon">
|
||
<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#4a4645" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
|
||
</div>
|
||
<h3>Feed optimieren</h3>
|
||
<p>Optimierter Feed für Google Merchant Center</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gewinn-Calculator -->
|
||
<div class="feed-section">
|
||
<span class="feed-section-label">Kalkulator</span>
|
||
<h2 class="feed-section-title">Ihr persönlicher Gewinn-Rechner</h2>
|
||
<p class="feed-section-text">Geben Sie Ihre Zahlen ein — und sehen Sie sofort, wie viel mehr Profit durch optimierte Feed-Steuerung möglich ist.</p>
|
||
</div>
|
||
<div class="calculator-section">
|
||
<!-- Inputs -->
|
||
<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 class="calc-field">
|
||
<label>Anteil Budget-Fresser <span id="lbl-waste">20 %</span></label>
|
||
<div class="calc-slider-row">
|
||
<input type="range" id="sl-waste" min="5" max="50" step="1" value="20">
|
||
<input type="number" class="calc-num-input" id="num-waste" min="5" max="50" step="1" value="20">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Outputs -->
|
||
<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>
|
||
|
||
<!-- CTA -->
|
||
<div class="feed-highlight">
|
||
<h2>Feed-Optimierung für Ihren Shop?</h2>
|
||
<p>Wir richten das System für Ihren Google-Shopping-Account ein — vollautomatisiert und auf Ihre Produkte abgestimmt.</p>
|
||
<a href="offers.html" class="highlight-btn">Unverbindlich anfragen</a>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- Footer Banner -->
|
||
<footer class="footer-banner" style="background: #4F4747 !important; color: white !important;">
|
||
<div class="footer-container">
|
||
<div class="footer-content">
|
||
<!-- Company Info Section -->
|
||
<div class="footer-section">
|
||
<div class="footer-description">
|
||
<p>Intelligente Prozesse für nachhaltiges Wachstum</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Links Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Services</h4>
|
||
<nav class="footer-nav">
|
||
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Legal Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Rechtliches</h4>
|
||
<nav class="footer-nav">
|
||
<a href="datenschutz.html" class="footer-link">Datenschutzerklärung</a>
|
||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Contact Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Kontakt</h4>
|
||
<div class="footer-contact">
|
||
<div class="contact-item">
|
||
<img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
|
||
<span><a href="mailto:info@profice.de">info@profice.de</a></span>
|
||
</div>
|
||
</div>
|
||
<div class="social-media">
|
||
<div class="social-icons">
|
||
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||
<img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
|
||
</a>
|
||
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||
<img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<div class="footer-bottom-content">
|
||
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||
<div class="footer-bottom-links">
|
||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||
<span class="separator">•</span>
|
||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Optimized script loading -->
|
||
<script src="../scripts/hex-background.js?v=20260304" defer></script>
|
||
<script src="../scripts/script.js?v=20260304" defer></script>
|
||
<script src="../scripts/cursor.js?v=20260304" defer></script>
|
||
<script src="../scripts/scroll-header.min.js?v=20260304" defer></script>
|
||
<script src="../scripts/feed-calculator.js?v=20260320" defer></script>
|
||
|
||
</body>
|
||
</html>
|