810 lines
38 KiB
HTML
810 lines
38 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">
|
||
|
||
<style>
|
||
/* Feed Page Styles */
|
||
.feed-content {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 130px 30px 60px;
|
||
}
|
||
|
||
.feed-header {
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.feed-label {
|
||
display: inline-block;
|
||
color: var(--accent-orange);
|
||
font-size: 13px;
|
||
font-weight: 700;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.feed-title {
|
||
font-size: 42px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 16px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.feed-subtitle {
|
||
font-size: 18px;
|
||
color: var(--primary-mid);
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Hero Visual — side by side */
|
||
.hero-visual {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
align-items: center;
|
||
margin-bottom: 70px;
|
||
background: rgba(255,255,255,0.85);
|
||
border-radius: 24px;
|
||
padding: 48px;
|
||
border: 1px solid rgba(79,71,71,0.08);
|
||
}
|
||
.hero-visual-text h2 {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 14px;
|
||
line-height: 1.3;
|
||
}
|
||
.hero-visual-text p {
|
||
font-size: 15px;
|
||
color: var(--primary-mid);
|
||
line-height: 1.7;
|
||
}
|
||
.hero-visual-graphic { text-align: center; }
|
||
|
||
/* Section Block */
|
||
.feed-section {
|
||
margin-bottom: 24px;
|
||
}
|
||
.feed-section.spaced { margin-bottom: 60px; }
|
||
|
||
.feed-section-label {
|
||
display: inline-block;
|
||
color: var(--accent-orange);
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 2px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.feed-section-title {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 8px;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.feed-section-text {
|
||
font-size: 16px;
|
||
color: var(--primary-mid);
|
||
line-height: 1.7;
|
||
max-width: 800px;
|
||
}
|
||
|
||
/* Feature Grid */
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 24px;
|
||
margin-bottom: 70px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: rgba(255, 255, 255, 0.85);
|
||
border: 1px solid rgba(79, 71, 71, 0.08);
|
||
border-radius: 18px;
|
||
padding: 32px 28px;
|
||
text-align: center;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 14px 35px rgba(79, 71, 71, 0.1);
|
||
}
|
||
|
||
.feature-card .feature-icon-wrap {
|
||
width: 64px;
|
||
height: 64px;
|
||
border-radius: 16px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 18px;
|
||
}
|
||
.feature-icon-wrap.teal { background: rgba(90,158,150,0.12); }
|
||
.feature-icon-wrap.orange { background: rgba(212,134,74,0.12); }
|
||
.feature-icon-wrap.green { background: rgba(127,184,130,0.12); }
|
||
|
||
.feature-card h3 {
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.feature-card p {
|
||
font-size: 14px;
|
||
color: var(--primary-mid);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Segment Visual */
|
||
.segment-visual {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48px;
|
||
align-items: center;
|
||
margin-bottom: 70px;
|
||
}
|
||
.segment-graphic { text-align: center; }
|
||
|
||
.segment-cards {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
}
|
||
|
||
.seg-card {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18px;
|
||
background: rgba(255,255,255,0.9);
|
||
border-radius: 16px;
|
||
padding: 22px 24px;
|
||
border-left: 4px solid;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.seg-card:hover {
|
||
transform: translateX(6px);
|
||
box-shadow: 0 8px 24px rgba(79,71,71,0.08);
|
||
}
|
||
.seg-card.core { border-color: var(--accent-green); }
|
||
.seg-card.longtail { border-color: var(--accent-orange); }
|
||
.seg-card.feeder { border-color: var(--accent-teal); }
|
||
|
||
.seg-card .seg-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.seg-card.core .seg-icon { background: rgba(127,184,130,0.15); }
|
||
.seg-card.longtail .seg-icon { background: rgba(212,134,74,0.15); }
|
||
.seg-card.feeder .seg-icon { background: rgba(90,158,150,0.15); }
|
||
|
||
.seg-card .seg-text h3 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 3px;
|
||
}
|
||
.seg-card .seg-text p {
|
||
font-size: 13px;
|
||
color: var(--primary-mid);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Pipeline Visual */
|
||
.pipeline-wrap {
|
||
margin-bottom: 70px;
|
||
}
|
||
.pipeline {
|
||
display: flex;
|
||
align-items: stretch;
|
||
gap: 0;
|
||
position: relative;
|
||
}
|
||
.pipeline-step {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 36px 20px;
|
||
background: rgba(255,255,255,0.88);
|
||
border: 1px solid rgba(79,71,71,0.08);
|
||
position: relative;
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
}
|
||
.pipeline-step:first-child { border-radius: 18px 0 0 18px; }
|
||
.pipeline-step:last-child { border-radius: 0 18px 18px 0; }
|
||
.pipeline-step:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 30px rgba(79,71,71,0.08);
|
||
z-index: 2;
|
||
}
|
||
|
||
.pipeline-step .pipe-icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 14px;
|
||
}
|
||
.pipeline-step:nth-child(1) .pipe-icon { background: rgba(212,134,74,0.12); }
|
||
.pipeline-step:nth-child(2) .pipe-icon { background: rgba(90,158,150,0.12); }
|
||
.pipeline-step:nth-child(3) .pipe-icon { background: rgba(127,184,130,0.12); }
|
||
|
||
.pipeline-step h3 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 6px;
|
||
}
|
||
.pipeline-step p {
|
||
font-size: 13px;
|
||
color: var(--primary-mid);
|
||
line-height: 1.5;
|
||
}
|
||
.pipeline-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
z-index: 3;
|
||
margin: 0 -8px;
|
||
}
|
||
|
||
/* Highlight Section */
|
||
.feed-highlight {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border: 2px solid var(--accent-green);
|
||
border-radius: 24px;
|
||
padding: 48px;
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.feed-highlight h2 {
|
||
font-size: 28px;
|
||
font-weight: 700;
|
||
color: var(--primary-dark);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.feed-highlight p {
|
||
font-size: 16px;
|
||
color: var(--primary-mid);
|
||
max-width: 600px;
|
||
margin: 0 auto 28px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.feed-highlight .highlight-btn {
|
||
display: inline-block;
|
||
padding: 14px 32px;
|
||
background: var(--accent-teal);
|
||
color: white;
|
||
text-decoration: none;
|
||
border-radius: 12px;
|
||
font-weight: 600;
|
||
font-size: 15px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feed-highlight .highlight-btn:hover {
|
||
background: #4a8e86;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 25px rgba(90, 158, 150, 0.3);
|
||
}
|
||
|
||
/* ROI Section */
|
||
.roi-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
gap: 0;
|
||
align-items: center;
|
||
margin-bottom: 70px;
|
||
background: rgba(255,255,255,0.9);
|
||
border-radius: 24px;
|
||
border: 1px solid rgba(79,71,71,0.08);
|
||
overflow: hidden;
|
||
}
|
||
.roi-box {
|
||
padding: 44px 36px;
|
||
text-align: center;
|
||
}
|
||
.roi-box .roi-label {
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 1.5px;
|
||
text-transform: uppercase;
|
||
margin-bottom: 10px;
|
||
}
|
||
.roi-box .roi-amount {
|
||
font-size: 40px;
|
||
font-weight: 700;
|
||
line-height: 1.1;
|
||
margin-bottom: 6px;
|
||
}
|
||
.roi-box .roi-desc {
|
||
font-size: 14px;
|
||
color: var(--primary-mid);
|
||
}
|
||
.roi-box.cost .roi-label { color: var(--accent-orange); }
|
||
.roi-box.cost .roi-amount { color: var(--primary-dark); }
|
||
.roi-box.profit .roi-label { color: var(--accent-green); }
|
||
.roi-box.profit .roi-amount { color: var(--accent-green); }
|
||
.roi-arrow {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 10px;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
.feed-content { padding: 110px 20px 40px; }
|
||
.feed-title { font-size: 30px; }
|
||
.hero-visual { grid-template-columns: 1fr; padding: 32px 24px; }
|
||
.hero-visual-graphic { order: -1; }
|
||
.feature-grid { grid-template-columns: 1fr; }
|
||
.segment-visual { grid-template-columns: 1fr; }
|
||
.segment-graphic { order: -1; }
|
||
.pipeline { flex-direction: column; }
|
||
.pipeline-step:first-child { border-radius: 18px 18px 0 0; }
|
||
.pipeline-step:last-child { border-radius: 0 0 18px 18px; }
|
||
.pipeline-arrow { transform: rotate(90deg); margin: -8px 0; justify-content: center; }
|
||
.roi-section { grid-template-columns: 1fr; }
|
||
.roi-arrow { transform: rotate(90deg); padding: 10px 0; }
|
||
.roi-box .roi-amount { font-size: 30px; }
|
||
.feed-highlight { padding: 32px 24px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Google Tag Manager (noscript) -->
|
||
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNJK5FN7"
|
||
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
|
||
<!-- End Google Tag Manager (noscript) -->
|
||
|
||
<!-- Hexagonal Background Canvas -->
|
||
<canvas id="hexCanvas"></canvas>
|
||
|
||
<!-- Top Banner -->
|
||
<header class="top-banner dark-theme">
|
||
<div class="top-banner-left">
|
||
<div class="banner-left">
|
||
<a href="../index.html" class="logo-link">
|
||
<img src="../images/logo/logo-01-complete.png" alt="Profice Logo" class="logo">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="top-banner-center">
|
||
<nav class="main-nav">
|
||
<a href="../index.html#hero" class="nav-link">Start</a>
|
||
<a href="../index.html#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>
|
||
|
||
<!-- ROI Section -->
|
||
<div class="feed-section">
|
||
<span class="feed-section-label">Investition</span>
|
||
<h2 class="feed-section-title">Kleine Investition. Großer Effekt.</h2>
|
||
</div>
|
||
<div class="roi-section">
|
||
<div class="roi-box cost">
|
||
<div class="roi-label">Investition</div>
|
||
<div class="roi-amount">ab 1.000 €</div>
|
||
<div class="roi-desc">Einrichtung & Optimierung</div>
|
||
</div>
|
||
<div class="roi-arrow">
|
||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none">
|
||
<circle cx="24" cy="24" r="22" fill="rgba(127,184,130,0.1)" stroke="#7fb882" stroke-width="1.5"/>
|
||
<line x1="14" y1="24" x2="34" y2="24" stroke="#7fb882" stroke-width="2.5" stroke-linecap="round"/>
|
||
<polyline points="28,18 34,24 28,30" fill="none" stroke="#7fb882" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="roi-box profit">
|
||
<div class="roi-label">Ergebnis</div>
|
||
<div class="roi-amount">+527 %</div>
|
||
<div class="roi-desc">Mehr Gewinn aus dem gleichen Werbebudget</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;">
|
||
<style>
|
||
.footer-banner a { color: white !important; }
|
||
</style>
|
||
<div class="footer-container">
|
||
<div class="footer-content">
|
||
<!-- Company Info Section -->
|
||
<div class="footer-section">
|
||
<div class="footer-description">
|
||
<p>Intelligente Prozesse für nachhaltiges Wachstum</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Links Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Services</h4>
|
||
<nav class="footer-nav">
|
||
<a href="../index.html#systeme" class="footer-link">KI Systeme</a>
|
||
<a href="../index.html#interaction" class="footer-link">Demo</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Legal Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Rechtliches</h4>
|
||
<nav class="footer-nav">
|
||
<a href="datenschutz.html" class="footer-link">Datenschutzerklärung</a>
|
||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- Contact Section -->
|
||
<div class="footer-section">
|
||
<h4 class="footer-title">Kontakt</h4>
|
||
<div class="footer-contact">
|
||
<div class="contact-item">
|
||
<img src="../images/icons/email_white.png" alt="Email" class="contact-icon-image" style="width: 46px; height: 46px;">
|
||
<span><a href="mailto:info@profice.de">info@profice.de</a></span>
|
||
</div>
|
||
</div>
|
||
<div class="social-media">
|
||
<div class="social-icons">
|
||
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer" class="social-link instagram">
|
||
<img src="../images/icons/instagram.png" alt="Instagram" width="40" height="40">
|
||
</a>
|
||
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer" class="social-link facebook">
|
||
<img src="../images/icons/facebook.png" alt="Facebook" width="40" height="40">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<div class="footer-bottom-content">
|
||
<p>© 2026 Profice. Alle Rechte vorbehalten.</p>
|
||
<div class="footer-bottom-links">
|
||
<a href="datenschutz.html" class="footer-link">Datenschutz</a>
|
||
<span class="separator">•</span>
|
||
<a href="impressum.html" class="footer-link">Impressum</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- 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>
|
||
|
||
</body>
|
||
</html>
|