gewinn rechner feed page
This commit is contained in:
84
Profice WebSite/scripts/feed-calculator.js
Normal file
84
Profice WebSite/scripts/feed-calculator.js
Normal file
@@ -0,0 +1,84 @@
|
||||
/**
|
||||
* Gewinn-Calculator — Feed Page
|
||||
* Real-time profit calculator with synchronized sliders and number inputs.
|
||||
*/
|
||||
(function () {
|
||||
function fmt(n) {
|
||||
return n.toLocaleString('de-DE', { maximumFractionDigits: 0 }) + ' €';
|
||||
}
|
||||
|
||||
function fmtPct(n) {
|
||||
return (n >= 0 ? '+' : '') + n.toLocaleString('de-DE', { maximumFractionDigits: 0 }) + ' %';
|
||||
}
|
||||
|
||||
function calc() {
|
||||
var B = +document.getElementById('sl-budget').value;
|
||||
var U = +document.getElementById('sl-umsatz').value;
|
||||
var m = +document.getElementById('sl-marge').value / 100;
|
||||
var w = +document.getElementById('sl-waste').value / 100;
|
||||
|
||||
var P_alt = U * m - B;
|
||||
var roas_core = U / (B * (1 - w));
|
||||
var U_neu = U + B * w * roas_core;
|
||||
var P_neu = U_neu * m - B;
|
||||
var wachstum = P_alt !== 0 ? ((P_neu - P_alt) / Math.abs(P_alt)) * 100 : 0;
|
||||
var hebel = P_neu - P_alt;
|
||||
|
||||
document.getElementById('out-profit-alt').textContent = fmt(Math.round(P_alt));
|
||||
document.getElementById('out-profit-neu').textContent = fmt(Math.round(P_neu));
|
||||
document.getElementById('out-hebel-eur').textContent = (hebel >= 0 ? '+' : '') + fmt(Math.round(hebel)).replace(' €', '') + ' €';
|
||||
document.getElementById('out-hebel-pct').textContent = fmtPct(Math.round(wachstum));
|
||||
}
|
||||
|
||||
function syncFromSlider(slId, numId, lblId, unit) {
|
||||
var sl = document.getElementById(slId);
|
||||
var num = document.getElementById(numId);
|
||||
var lbl = document.getElementById(lblId);
|
||||
|
||||
function updateLbl(v) {
|
||||
if (unit === '€') {
|
||||
lbl.textContent = Number(v).toLocaleString('de-DE') + ' €';
|
||||
} else {
|
||||
lbl.textContent = v + ' %';
|
||||
}
|
||||
}
|
||||
|
||||
sl.addEventListener('input', function () {
|
||||
num.value = sl.value;
|
||||
updateLbl(sl.value);
|
||||
calc();
|
||||
});
|
||||
|
||||
num.addEventListener('input', function () {
|
||||
var v = Math.min(+num.max, Math.max(+num.min, +num.value || +num.min));
|
||||
sl.value = v;
|
||||
updateLbl(v);
|
||||
calc();
|
||||
});
|
||||
|
||||
num.addEventListener('change', function () {
|
||||
var v = Math.min(+num.max, Math.max(+num.min, +num.value || +num.min));
|
||||
num.value = v;
|
||||
sl.value = v;
|
||||
updateLbl(v);
|
||||
calc();
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!document.getElementById('sl-budget')) return;
|
||||
|
||||
syncFromSlider('sl-budget', 'num-budget', 'lbl-budget', '€');
|
||||
syncFromSlider('sl-umsatz', 'num-umsatz', 'lbl-umsatz', '€');
|
||||
syncFromSlider('sl-marge', 'num-marge', 'lbl-marge', '%');
|
||||
syncFromSlider('sl-waste', 'num-waste', 'lbl-waste', '%');
|
||||
|
||||
calc();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
@@ -64,373 +64,8 @@
|
||||
<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;
|
||||
}
|
||||
<link rel="stylesheet" href="../style/feed.css?v=20260320">
|
||||
|
||||
.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) -->
|
||||
@@ -699,28 +334,70 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ROI Section -->
|
||||
<!-- Gewinn-Calculator -->
|
||||
<div class="feed-section">
|
||||
<span class="feed-section-label">Investition</span>
|
||||
<h2 class="feed-section-title">Kleine Investition. Großer Effekt.</h2>
|
||||
<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="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 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>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@@ -734,9 +411,6 @@
|
||||
|
||||
<!-- 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 -->
|
||||
@@ -804,6 +478,7 @@
|
||||
<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>
|
||||
|
||||
473
Profice WebSite/style/feed.css
Normal file
473
Profice WebSite/style/feed.css
Normal file
@@ -0,0 +1,473 @@
|
||||
/* 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);
|
||||
}
|
||||
|
||||
/* Gewinn-Calculator */
|
||||
.calculator-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 32px;
|
||||
align-items: start;
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
.calc-inputs {
|
||||
background: rgba(255,255,255,0.9);
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(79,71,71,0.08);
|
||||
padding: 36px 32px;
|
||||
}
|
||||
.calc-inputs h3 {
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark);
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.calc-field {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.calc-field:last-child { margin-bottom: 0; }
|
||||
.calc-field label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-mid);
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
.calc-field label span {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
.calc-slider-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.calc-slider-row input[type=range] {
|
||||
flex: 1;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: #e8e6e0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.calc-slider-row input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-teal);
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 6px rgba(90,158,150,0.35);
|
||||
}
|
||||
.calc-slider-row input[type=range]::-moz-range-thumb {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-teal);
|
||||
cursor: pointer;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 6px rgba(90,158,150,0.35);
|
||||
}
|
||||
.calc-num-input {
|
||||
width: 80px;
|
||||
padding: 6px 10px;
|
||||
border: 1.5px solid rgba(79,71,71,0.15);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-dark);
|
||||
text-align: right;
|
||||
background: white;
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
.calc-num-input:focus {
|
||||
border-color: var(--accent-teal);
|
||||
}
|
||||
.calc-outputs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.calc-out-card {
|
||||
background: rgba(255,255,255,0.9);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(79,71,71,0.08);
|
||||
padding: 28px 28px 24px;
|
||||
}
|
||||
.calc-out-card.highlight {
|
||||
background: rgba(90,158,150,0.07);
|
||||
border: 2px solid var(--accent-teal);
|
||||
}
|
||||
.calc-out-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1.8px;
|
||||
text-transform: uppercase;
|
||||
color: var(--primary-mid);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.calc-out-card.highlight .calc-out-label {
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
.calc-out-value {
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.calc-out-card.highlight .calc-out-value {
|
||||
color: var(--accent-teal);
|
||||
}
|
||||
.calc-out-sub {
|
||||
font-size: 13px;
|
||||
color: var(--primary-mid);
|
||||
}
|
||||
.calc-out-sub strong {
|
||||
color: var(--accent-green);
|
||||
}
|
||||
.calc-hebel-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.calc-hebel-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
background: rgba(127,184,130,0.12);
|
||||
border-radius: 8px;
|
||||
padding: 5px 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
/* Footer override */
|
||||
.footer-banner a { color: white !important; }
|
||||
|
||||
/* 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; }
|
||||
.calculator-section { grid-template-columns: 1fr; }
|
||||
.calc-out-value { font-size: 26px; }
|
||||
.feed-highlight { padding: 32px 24px; }
|
||||
}
|
||||
Reference in New Issue
Block a user