84b9987c49
Brings the working codebase (Next.js app, auth system, Stripe billing, Docker/deploy config, tests, docs) into version control on top of the placeholder initial commit, and adds account self-deletion (Danger Zone in Settings, password + typed-email confirmation, cascading DB cleanup, Stripe cancellation) per GDPR right-to-erasure. Excludes local build caches, node_modules, and internal agent scratch files; .gitignore hardened to keep those out going forward. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
1054 lines
57 KiB
HTML
1054 lines
57 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>ScanReceipts – Ein Foto. Fertige Excel in Sekunden. | Beleg Scanner zu Excel</title>
|
||
<meta name="description" content="Ein Foto deines Belegs genügt – KI liest Händler, Datum, Artikel und Steuern, rechnet jede Summe nach und exportiert als Dual-Sheet Excel oder Buchhaltungs-CSV." />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg: #F6F9FF;
|
||
--surface: #FFFFFF;
|
||
--surface-dim: #F8FAFC;
|
||
--border: #E2E8F0;
|
||
--ink: #161C22;
|
||
--ink-2: #475569;
|
||
--ink-3: #64748B;
|
||
--accent: #000000;
|
||
--accent-hover: #334155;
|
||
--success: #059669;
|
||
--display: 'Hanken Grotesk', sans-serif;
|
||
--body: 'Inter', sans-serif;
|
||
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
||
|
||
/* Motion tokens */
|
||
--dur-micro: 0.18s;
|
||
--dur-ui: 0.45s;
|
||
--dur-story: 0.9s;
|
||
--ease-ui: cubic-bezier(.25,.1,.25,1);
|
||
--ease-out: cubic-bezier(.16,1,.3,1);
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||
body {
|
||
font-family: var(--body);
|
||
background: var(--bg);
|
||
color: var(--ink);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
::selection { background: var(--ink); color: #fff; }
|
||
img { max-width: 100%; display: block; }
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font-family: inherit; cursor: pointer; }
|
||
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
|
||
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
|
||
.mono { font-family: var(--mono); }
|
||
|
||
/* ---------- Scroll progress ---------- */
|
||
#progress {
|
||
position: fixed; top: 0; left: 0; height: 3px; width: 0;
|
||
background: var(--accent); z-index: 1000; transition: width .1s linear;
|
||
}
|
||
|
||
/* ---------- Header ---------- */
|
||
header {
|
||
position: sticky; top: 0; z-index: 500;
|
||
background: rgba(246,249,255,.92);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--border);
|
||
transition: box-shadow .2s ease;
|
||
}
|
||
header.scrolled { box-shadow: 0 1px 0 var(--border), 0 8px 24px -18px rgba(22,28,34,.25); }
|
||
.nav {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
height: 76px; gap: 24px;
|
||
}
|
||
.brand { display: flex; align-items: center; gap: 12px; }
|
||
.brand-mark {
|
||
width: 44px; height: 44px; border: 2px solid var(--accent); background: var(--surface);
|
||
display: grid; place-items: center; font-family: var(--display); font-weight: 800;
|
||
font-size: 15px; letter-spacing: -.02em;
|
||
}
|
||
.brand-name { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; line-height: 1; }
|
||
.brand-name em { font-style: normal; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 3px 6px; margin-left: 6px; vertical-align: 2px; }
|
||
.nav-links { display: flex; gap: 28px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
|
||
.nav-links a { position: relative; padding: 4px 0; }
|
||
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--accent); transition: width .2s ease; }
|
||
.nav-links a:hover { color: var(--accent); }
|
||
.nav-links a:hover::after { width: 100%; }
|
||
.nav-cta { display: flex; align-items: center; gap: 16px; }
|
||
.nav-toggle { display: none; background: none; border: 1px solid var(--border); padding: 8px 10px; }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||
font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
|
||
padding: 14px 22px; border: 1px solid transparent; transition: all .18s ease; font-weight: 500;
|
||
}
|
||
.btn-primary { background: var(--accent); color: #fff; }
|
||
.btn-primary:hover { background: var(--accent-hover); }
|
||
.btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); }
|
||
.btn-outline:hover { background: var(--accent); color: #fff; }
|
||
.btn-ghost { background: var(--surface); color: var(--accent); border-color: var(--border); }
|
||
.btn-ghost:hover { border-color: var(--accent); }
|
||
.btn-lg { padding: 17px 28px; font-size: 13px; }
|
||
.btn-sm { padding: 10px 16px; font-size: 11px; }
|
||
|
||
/* ---------- Hero ---------- */
|
||
.hero { position: relative; border-bottom: 1px solid var(--border); background: var(--surface); overflow: hidden; }
|
||
.hero-bg {
|
||
position: absolute; inset: -18% 0; pointer-events: none; z-index: 0;
|
||
background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
||
background-size: 64px 64px; opacity: .32;
|
||
}
|
||
.hero::after {
|
||
content: ""; position: absolute; top: -30%; right: -10%; width: 60%; height: 110%; pointer-events: none; z-index: 0;
|
||
background: radial-gradient(circle at center, rgba(71,85,105,.10), transparent 62%);
|
||
}
|
||
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; padding: 72px 0 84px; align-items: center; }
|
||
.hero-badge {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
border: 1px solid var(--border); background: #EEF4FC;
|
||
font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
|
||
color: var(--ink); padding: 7px 12px; margin-bottom: 20px;
|
||
}
|
||
.hero-badge .dot { width: 7px; height: 7px; background: var(--success); }
|
||
.hero h1 {
|
||
font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 5.2vw, 4rem);
|
||
letter-spacing: -.04em; line-height: 1.02; color: var(--accent); margin-bottom: 20px;
|
||
}
|
||
.hero h1 .accent { color: var(--ink-2); }
|
||
.hero-sub { font-size: 17px; color: var(--ink-2); max-width: 540px; margin-bottom: 30px; }
|
||
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
|
||
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-top: 20px; border-top: 1px solid var(--border); }
|
||
.hero-proof strong { color: var(--accent); }
|
||
.hero-proof .ok { color: var(--success); font-weight: 700; }
|
||
|
||
/* Hero scanner demo */
|
||
.demo { position: relative; }
|
||
.demo-stage {
|
||
position: relative; background: var(--surface); border: 1px solid var(--border);
|
||
padding: 14px; overflow: hidden;
|
||
}
|
||
.demo-stage::before {
|
||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||
background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
|
||
background-size: 32px 32px; opacity: .4;
|
||
}
|
||
.demo-bar {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
|
||
color: var(--ink-3); padding: 2px 4px 12px; position: relative; z-index: 1;
|
||
}
|
||
.demo-bar .lights { display: flex; gap: 5px; }
|
||
.demo-bar .lights i { width: 8px; height: 8px; border: 1px solid var(--border); display: block; }
|
||
.demo-bar .lights i.on { background: var(--success); border-color: var(--success); }
|
||
.demo-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; z-index: 1; }
|
||
|
||
.recpt {
|
||
position: relative; background: #fff; border: 1px solid var(--border);
|
||
padding: 18px 16px 14px; font-size: 10px; color: var(--ink);
|
||
box-shadow: 0 10px 30px -20px rgba(22,28,34,.35);
|
||
transition: transform .4s cubic-bezier(.16,1,.3,1);
|
||
}
|
||
.recpt.scanning { transform: translateY(-6px); }
|
||
.recpt .r-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; border-bottom: 1px dashed var(--border); padding-bottom: 8px; margin-bottom: 10px; }
|
||
.recpt .r-vendor { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.01em; }
|
||
.recpt .r-rows div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dotted #EEF1F5; }
|
||
.recpt .r-total { display: flex; justify-content: space-between; font-family: var(--mono); font-weight: 700; border-top: 1px solid var(--ink); margin-top: 8px; padding-top: 8px; }
|
||
.scanline {
|
||
position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--success);
|
||
box-shadow: 0 0 14px 2px rgba(5,150,105,.5); z-index: 2; display: none;
|
||
}
|
||
.recpt.scanning .scanline { display: block; animation: scanY 1.4s ease-in-out infinite; }
|
||
@keyframes scanY { 0% { top: 4%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
|
||
|
||
.sheet { background: #fff; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
|
||
.sheet-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--surface-dim); border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
|
||
.sheet-bar .tab { background: #fff; border: 1px solid var(--border); border-bottom: none; padding: 3px 8px; color: var(--accent); }
|
||
table.excel { width: 100%; border-collapse: collapse; font-size: 9px; }
|
||
table.excel th, table.excel td { text-align: left; padding: 5px 8px; border: 1px solid #EDF0F4; white-space: nowrap; }
|
||
table.excel th { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--surface-dim); }
|
||
table.excel td.num { text-align: right; font-family: var(--mono); }
|
||
table.excel .sum { font-weight: 700; background: #F1FAF6; }
|
||
.cell { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
|
||
.cell span { display: inline-block; transform: scaleX(0); transform-origin: left center; }
|
||
.cell.filled span { animation: fillIn .45s cubic-bezier(.16,1,.3,1) both; }
|
||
@keyframes fillIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
|
||
|
||
.demo-status { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 4px 2px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
|
||
.demo-status .run { display: inline-flex; align-items: center; gap: 8px; }
|
||
.run i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: pulse 1.6s ease-in-out infinite; }
|
||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
|
||
.demo-run { position: relative; z-index: 1; margin-top: 14px; width: 100%; }
|
||
.demo-hint { position: relative; z-index: 1; text-align: center; font-size: 11px; color: var(--ink-3); margin-top: 12px; font-family: var(--mono); letter-spacing: .05em; }
|
||
|
||
/* ---------- Sections ---------- */
|
||
section { padding: 96px 0; }
|
||
.sec-head { max-width: 640px; margin-bottom: 56px; }
|
||
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
|
||
.sec-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
|
||
.sec-label::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
|
||
.sec-head.center .sec-label::after { content: ""; width: 26px; height: 1px; background: var(--accent); }
|
||
.sec-title { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -.03em; line-height: 1.08; color: var(--accent); }
|
||
.sec-title .dim { color: var(--ink-2); }
|
||
.sec-sub { color: var(--ink-2); font-size: 16px; margin-top: 16px; }
|
||
|
||
/* Reveal animation */
|
||
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
|
||
.reveal.visible { opacity: 1; transform: none; }
|
||
|
||
/* When GSAP drives the page, hand over motion (no CSS transition conflicts) */
|
||
body.gsap-ready .reveal { transition: none; }
|
||
|
||
/* Mask line reveal (headline story beat) */
|
||
.mask-line { display: block; overflow: hidden; }
|
||
.mask-line .ml { display: block; }
|
||
body.gsap-ready .mask-line .ml { transform: translateY(115%); }
|
||
|
||
/* Button press microinteraction */
|
||
.btn { transition: transform var(--dur-micro) var(--ease-ui), background-color .18s ease, color .18s ease, border-color .18s ease; }
|
||
.btn:active { transform: scale(.97); }
|
||
|
||
/* Background parallax layers (decor only, never text) */
|
||
.hero-bg, .final-bg { will-change: transform; }
|
||
|
||
/* Reduced motion: simplify everything */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: .01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: .01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
.reveal, body.gsap-ready .reveal { opacity: 1; transform: none; }
|
||
.mask-line .ml, body.gsap-ready .mask-line .ml { transform: none; }
|
||
.cell span, .cell.filled span { transform: scaleX(1); }
|
||
.scanline { display: none !important; }
|
||
.recpt.scanning { transform: none; }
|
||
.hero-bg, .final-bg { transform: none !important; }
|
||
.run i { animation: none; }
|
||
.btn:active { transform: none; }
|
||
.bcard:hover { transform: none; }
|
||
}
|
||
|
||
/* ---------- Problem / Solution ---------- */
|
||
.ps { background: var(--surface); border-bottom: 1px solid var(--border); }
|
||
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
|
||
.ps-col { border: 1px solid var(--border); background: var(--surface); }
|
||
.ps-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
|
||
.ps-problem .ps-head { color: #B91C1C; }
|
||
.ps-solution .ps-head { color: var(--success); }
|
||
.ps-body { padding: 24px 20px; }
|
||
.ps-body ul { list-style: none; }
|
||
.ps-body li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--ink); align-items: flex-start; }
|
||
.ps-body li:last-child { border-bottom: none; }
|
||
.ps-body li::before { font-family: var(--mono); font-weight: 700; font-size: 12px; line-height: 1.7; }
|
||
.ps-problem li::before { content: "✕"; color: #B91C1C; }
|
||
.ps-solution li::before { content: "✓"; color: var(--success); }
|
||
.ps-solution { box-shadow: 0 20px 50px -30px rgba(22,28,34,.4); border-color: var(--accent); }
|
||
|
||
/* ---------- Benefits ---------- */
|
||
.benefits { background: var(--bg); }
|
||
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
|
||
.bcard { background: var(--surface); border: 1px solid var(--border); padding: 28px 24px; position: relative; transition: transform var(--dur-ui) var(--ease-out), border-color var(--dur-micro) var(--ease-ui), box-shadow var(--dur-ui) var(--ease-out); }
|
||
.bcard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(22,28,34,.35); }
|
||
.bcard .num { position: absolute; top: 20px; right: 22px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-3); }
|
||
.bcard .ic { width: 40px; height: 40px; border: 1px solid var(--accent); display: grid; place-items: center; margin-bottom: 20px; font-family: var(--mono); font-size: 13px; background: var(--surface-dim); }
|
||
.bcard h3 { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; margin-bottom: 10px; }
|
||
.bcard p { font-size: 14px; color: var(--ink-2); }
|
||
.bcard p strong { color: var(--ink); }
|
||
|
||
/* ---------- How it works ---------- */
|
||
.steps { background: var(--surface); border-bottom: 1px solid var(--border); }
|
||
.stepgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
|
||
.step { border: 1px solid var(--border); background: var(--surface-dim); padding: 32px 26px; position: relative; }
|
||
.step::before {
|
||
counter-increment: step; content: "0" counter(step);
|
||
font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: -.03em;
|
||
color: transparent; -webkit-text-stroke: 1px var(--ink-3); display: block; margin-bottom: 26px;
|
||
}
|
||
.step h3 { font-family: var(--display); font-weight: 700; font-size: 18px; margin-bottom: 8px; letter-spacing: -.01em; }
|
||
.step p { font-size: 14px; color: var(--ink-2); }
|
||
.step .tag { display: inline-block; margin-top: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--border); padding: 5px 9px; background: var(--surface); }
|
||
|
||
/* ---------- Proof / stats ---------- */
|
||
.proof { background: var(--accent); color: #fff; }
|
||
.proof .sec-label { color: #94A3B8; }
|
||
.proof .sec-label::before { background: #fff; }
|
||
.proof .sec-title { color: #fff; }
|
||
.proof .sec-title .dim { color: #94A3B8; }
|
||
.proof .sec-sub { color: #CBD5E1; }
|
||
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 8px; }
|
||
.stat { border: 1px solid rgba(255,255,255,.18); padding: 30px 24px; }
|
||
.stat .val { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 2.8rem); letter-spacing: -.03em; line-height: 1; }
|
||
.stat .lbl { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
|
||
.quote-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
|
||
.quote { border-left: 2px solid #fff; padding: 4px 0 4px 18px; }
|
||
.quote p { font-size: 14px; line-height: 1.65; color: #E2E8F0; }
|
||
.quote .who { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #94A3B8; }
|
||
|
||
/* ---------- Comparison ---------- */
|
||
.compare { background: var(--bg); }
|
||
.ctable { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); }
|
||
.ctable th, .ctable td { padding: 16px 20px; border-bottom: 1px solid var(--border); text-align: left; font-size: 14px; vertical-align: top; }
|
||
.ctable th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; background: var(--surface-dim); }
|
||
.ctable th:nth-child(2) { background: var(--accent); color: #fff; }
|
||
.ctable td:first-child { font-weight: 600; color: var(--ink); }
|
||
.ctable td:nth-child(2) { background: #FAFBFF; }
|
||
.ctable tr:last-child td { border-bottom: none; }
|
||
.ctable .yes { color: var(--success); font-weight: 700; }
|
||
.ctable .no { color: var(--ink-3); }
|
||
.ctable .cmp-brand { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
|
||
.ctable .cmp-brand small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--ink-3); font-weight: 500; margin-top: 2px; }
|
||
|
||
/* ---------- Pricing ---------- */
|
||
.pricing { background: var(--surface); border-bottom: 1px solid var(--border); }
|
||
.toggle { display: inline-flex; border: 1px solid var(--border); background: var(--surface-dim); padding: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-top: 20px; }
|
||
.toggle button { border: none; background: none; padding: 9px 18px; color: var(--ink-3); transition: all .15s ease; }
|
||
.toggle button.active { background: var(--accent); color: #fff; }
|
||
.pricegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: stretch; }
|
||
.plan { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); background: var(--surface-dim); padding: 36px 30px; }
|
||
.plan.featured { background: var(--accent); color: #fff; border-color: var(--accent); }
|
||
.plan-flag { position: absolute; top: -13px; right: 24px; background: #fff; color: var(--accent); border: 1px solid var(--accent); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: 5px 10px; }
|
||
.plan .p-name { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
|
||
.plan.featured .p-name { color: #94A3B8; }
|
||
.plan h3 { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; margin: 8px 0 14px; }
|
||
.plan .price { display: flex; align-items: baseline; gap: 6px; }
|
||
.plan .price .amt { font-family: var(--display); font-weight: 800; font-size: 44px; letter-spacing: -.03em; line-height: 1; }
|
||
.plan .price .per { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
|
||
.plan.featured .price .per { color: #94A3B8; }
|
||
.plan .p-desc { font-size: 13px; color: var(--ink-2); margin: 16px 0 22px; }
|
||
.plan.featured .p-desc { color: #CBD5E1; }
|
||
.plan ul { list-style: none; flex: 1; margin-bottom: 28px; }
|
||
.plan li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; align-items: flex-start; }
|
||
.plan.featured li { border-top-color: #334155; color: #E2E8F0; }
|
||
.plan li:first-child { border-top: none; }
|
||
.plan li::before { content: "✓"; color: var(--success); font-weight: 700; }
|
||
.plan.featured li::before { color: #34D399; }
|
||
.plan .btn { width: 100%; }
|
||
.plan-feet { display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; margin-top: 34px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
|
||
|
||
/* ---------- FAQ ---------- */
|
||
.faq { background: var(--bg); }
|
||
.faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--border); }
|
||
.faq-item { border-bottom: 1px solid var(--border); background: var(--surface); }
|
||
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; background: none; border: none; padding: 24px 26px; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
|
||
.faq-q .x { font-family: var(--mono); font-size: 16px; color: var(--ink-3); transition: transform .25s ease; flex-shrink: 0; }
|
||
.faq-item.open .faq-q .x { transform: rotate(45deg); }
|
||
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.16,1,.3,1); }
|
||
.faq-a p { padding: 0 26px 24px; font-size: 14px; color: var(--ink-2); max-width: 660px; }
|
||
|
||
/* ---------- Final CTA ---------- */
|
||
.final { background: var(--accent); color: #fff; text-align: center; position: relative; overflow: hidden; }
|
||
.final-bg {
|
||
position: absolute; inset: -16% 0; pointer-events: none; z-index: 0;
|
||
background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
|
||
background-size: 56px 56px;
|
||
}
|
||
.final .container { position: relative; z-index: 1; }
|
||
.final .sec-title { color: #fff; }
|
||
.final .sec-sub { color: #CBD5E1; }
|
||
.final .btn-outline { border-color: #fff; color: #fff; }
|
||
.final .btn-outline:hover { background: #fff; color: var(--accent); }
|
||
.final .ft { margin-top: 26px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #94A3B8; }
|
||
|
||
/* ---------- Footer ---------- */
|
||
footer { background: var(--bg); border-top: 1px solid var(--border); padding: 56px 0 32px; }
|
||
.f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
|
||
.f-brand p { font-size: 13px; color: var(--ink-2); margin-top: 14px; max-width: 300px; }
|
||
.f-col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
|
||
.f-col a { display: block; font-size: 14px; color: var(--ink-2); padding: 6px 0; transition: color .15s ease; }
|
||
.f-col a:hover { color: var(--accent); }
|
||
.f-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
|
||
.f-bottom a:hover { color: var(--accent); }
|
||
|
||
/* ---------- Mobile ---------- */
|
||
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 600; background: var(--bg); padding: 24px; flex-direction: column; gap: 6px; }
|
||
.mobile-menu.open { display: flex; }
|
||
.mobile-menu a { font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: 16px 0; border-bottom: 1px solid var(--border); }
|
||
.mobile-menu .btn { margin-top: 20px; }
|
||
|
||
@media (max-width: 960px) {
|
||
.nav-links { display: none; }
|
||
.nav-toggle { display: block; }
|
||
.hero-grid { grid-template-columns: 1fr; gap: 44px; padding: 56px 0 64px; }
|
||
.ps-grid { grid-template-columns: 1fr; gap: 24px; }
|
||
.bgrid { grid-template-columns: 1fr 1fr; }
|
||
.stepgrid { grid-template-columns: 1fr; }
|
||
.statrow { grid-template-columns: 1fr 1fr; }
|
||
.quote-row { grid-template-columns: 1fr; }
|
||
.pricegrid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
|
||
.f-grid { grid-template-columns: 1fr 1fr; }
|
||
section { padding: 72px 0; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.bgrid { grid-template-columns: 1fr; }
|
||
.statrow { grid-template-columns: 1fr; }
|
||
.f-grid { grid-template-columns: 1fr; }
|
||
.demo-inner { grid-template-columns: 1fr; }
|
||
.hero-cta .btn { width: 100%; }
|
||
.container { padding: 0 18px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="progress"></div>
|
||
|
||
<!-- ============ HEADER ============ -->
|
||
<header id="site-header">
|
||
<div class="container nav">
|
||
<a class="brand" href="#top" aria-label="ScanReceipts Startseite">
|
||
<span class="brand-mark">SR</span>
|
||
<span class="brand-name">Scan<em>Receipts</em></span>
|
||
</a>
|
||
<nav class="nav-links" aria-label="Hauptnavigation">
|
||
<a href="#loesung">Lösung</a>
|
||
<a href="#features">Features</a>
|
||
<a href="#workflow">Workflow</a>
|
||
<a href="#vergleich">Vergleich</a>
|
||
<a href="#preise">Preise</a>
|
||
<a href="#faq">FAQ</a>
|
||
</nav>
|
||
<div class="nav-cta">
|
||
<a class="btn btn-outline btn-sm" href="#preise">Anmelden</a>
|
||
<a class="btn btn-primary btn-sm" href="#preise">App öffnen</a>
|
||
<button class="nav-toggle" id="menu-toggle" aria-label="Menü öffnen" aria-expanded="false">☰</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ MOBILE MENU ============ -->
|
||
<div class="mobile-menu" id="mobile-menu">
|
||
<a href="#loesung">Lösung</a>
|
||
<a href="#features">Features</a>
|
||
<a href="#workflow">Workflow</a>
|
||
<a href="#vergleich">Vergleich</a>
|
||
<a href="#preise">Preise</a>
|
||
<a href="#faq">FAQ</a>
|
||
<a class="btn btn-primary" href="#preise">App öffnen</a>
|
||
</div>
|
||
|
||
<main id="top">
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<section class="hero">
|
||
<div class="hero-bg" aria-hidden="true"></div>
|
||
<div class="container hero-grid">
|
||
<div class="hero-copy">
|
||
<span class="hero-badge reveal"><span class="dot"></span> Für Freelancer, Selbstständige & Buchhalter</span>
|
||
<h1 class="hero-title">
|
||
<span class="mask-line"><span class="ml">Nie wieder Belege abtippen.</span></span>
|
||
<span class="mask-line"><span class="ml">Ein Foto. <span class="accent">Fertige Excel</span> in Sekunden.</span></span>
|
||
</h1>
|
||
<p class="hero-sub reveal" style="transition-delay:.1s">Die KI liest Händler, Datum, Artikel und Steuern – und rechnet jede Summe nach. Was früher stundenlanges Abtippen war, ist jetzt eine fehlerfreie Excel, bereit für Steuerberater und Buchhaltung.</p>
|
||
<div class="hero-cta reveal" style="transition-delay:.15s">
|
||
<a class="btn btn-primary btn-lg" href="#preise">Kostenlos starten <span aria-hidden="true">→</span></a>
|
||
<button class="btn btn-ghost btn-lg" id="run-demo-btn">Demo erleben</button>
|
||
</div>
|
||
<div class="hero-proof reveal" style="transition-delay:.2s">
|
||
<span class="ok">✓ Jede Summe nachgerechnet</span>
|
||
<span><strong>15 Belege</strong> gratis ohne Login</span>
|
||
<span>Export bereit für den Steuerberater</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo reveal" style="transition-delay:.25s">
|
||
<div class="demo-stage">
|
||
<div class="demo-bar">
|
||
<span>Live-Scan Preview</span>
|
||
<span class="lights"><i class="on"></i><i></i><i></i></span>
|
||
</div>
|
||
<div class="demo-inner">
|
||
<!-- Receipt -->
|
||
<div class="recpt" id="recpt">
|
||
<div class="scanline"></div>
|
||
<div class="r-head">
|
||
<span>RECHNUNG</span>
|
||
<span>#0042</span>
|
||
</div>
|
||
<div class="r-vendor">REWE</div>
|
||
<div class="r-rows">
|
||
<div><span>Bio Vollmilch 1,5%</span><span>1,09 €</span></div>
|
||
<div><span>Bauernbrot</span><span>2,29 €</span></div>
|
||
<div><span>Gouda Scheiben</span><span>2,99 €</span></div>
|
||
<div><span>Espresso Kapseln</span><span>3,49 €</span></div>
|
||
</div>
|
||
<div class="r-total"><span>SUMME</span><span>9,86 €</span></div>
|
||
</div>
|
||
<!-- Excel -->
|
||
<div class="sheet">
|
||
<div class="sheet-bar"><span class="tab">Belege 2026</span><span>+</span></div>
|
||
<table class="excel" id="excel">
|
||
<thead>
|
||
<tr><th>Datum</th><th>Händler</th><th>MwSt</th><th class="num">Brutto</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="cell"><span>12.08.2026</span></td>
|
||
<td class="cell"><span>REWE</span></td>
|
||
<td class="cell"><span>7%</span></td>
|
||
<td class="cell num"><span>9,86 €</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="cell"><span>11.08.2026</span></td>
|
||
<td class="cell"><span>Aral</span></td>
|
||
<td class="cell"><span>19%</span></td>
|
||
<td class="cell num"><span>64,30 €</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="cell"><span>10.08.2026</span></td>
|
||
<td class="cell"><span>Trattoria</span></td>
|
||
<td class="cell"><span>19%</span></td>
|
||
<td class="cell num"><span>48,70 €</span></td>
|
||
</tr>
|
||
<tr class="sum">
|
||
<td class="cell"><span>August</span></td>
|
||
<td class="cell"><span>Gesamt</span></td>
|
||
<td class="cell"><span>Ø geprüft</span></td>
|
||
<td class="cell num"><span>122,86 €</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="demo-status">
|
||
<span class="run"><i></i> KI-Erkennung aktiv</span>
|
||
<span>OCR · 99,2 % Treffer</span>
|
||
</div>
|
||
<button class="btn btn-ghost demo-run" id="run-demo">Beleg scannen & in Excel umwandeln</button>
|
||
<p class="demo-hint">Fotografieren → prüfen → exportieren. Mehr musst du nicht tun.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PROBLEM / LÖSUNG ============ -->
|
||
<section class="ps" id="loesung">
|
||
<div class="container">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-label">Vorher / Nachher</span>
|
||
<h2 class="sec-title">Das Abtippen ist <span class="dim">das Problem</span>, nicht deine Buchhaltung.</h2>
|
||
</div>
|
||
<div class="ps-grid">
|
||
<div class="ps-col ps-problem reveal">
|
||
<div class="ps-head">Ohne ScanReceipts</div>
|
||
<div class="ps-body">
|
||
<ul>
|
||
<li>Beleg nach Beleg per Hand in Excel übertragen – pro Monat locker 4–6 Stunden</li>
|
||
<li>Tippfehler & Rechenfehler, die dem Steuerberater später auffallen</li>
|
||
<li>Zettelwirtschaft in Kisten, Umschlägen und Schubladen</li>
|
||
<li>Bewirtungsbelege ohne korrekte MwSt-Aufteilung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="ps-col ps-solution reveal" style="transition-delay:.1s">
|
||
<div class="ps-head">Mit ScanReceipts</div>
|
||
<div class="ps-body">
|
||
<ul>
|
||
<li>Beleg fotografieren, KI übernimmt – <strong>fertige Excel in Sekunden</strong></li>
|
||
<li>Jede Summe automatisch nachgerechnet, nichts wird blind übernommen</li>
|
||
<li>Archiv immer griffbereit: lokal im Browser, synchron in der Cloud</li>
|
||
<li>Dual-Sheet Excel & DATEV-CSV, sauber für Steuerberater & Buchhaltung</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ BENEFITS / FEATURES ============ -->
|
||
<section class="benefits" id="features">
|
||
<div class="container">
|
||
<div class="sec-head center reveal">
|
||
<span class="sec-label">Warum ScanReceipts</span>
|
||
<h2 class="sec-title">Gebaut für Menschen, die <span class="dim">keine Lust auf Abtippen haben.</span></h2>
|
||
<p class="sec-sub">Jede Funktion dient einem Ziel: Belege schneller, fehlerfreier und exportbereit zu machen.</p>
|
||
</div>
|
||
<div class="bgrid">
|
||
<div class="bcard reveal">
|
||
<span class="num">/01</span>
|
||
<div class="ic">AI</div>
|
||
<h3>KI-Erkennung mit Prüfpass</h3>
|
||
<p>Die KI liest Händler, Datum, Artikel, Mengen und Steuern – und <strong>rechnet jede Summe selbst nach</strong>. Abweichungen werden markiert, nichts übernommen ohne deinen Blick.</p>
|
||
</div>
|
||
<div class="bcard reveal" style="transition-delay:.05s">
|
||
<span class="num">/02</span>
|
||
<div class="ic">XL</div>
|
||
<h3>Dual-Sheet Excel & DATEV-CSV</h3>
|
||
<p>Export als <strong>zweispaltige .xlsx</strong> (Belege + Posten) oder Buchhaltungs-CSV mit UTF-8 BOM – sofort verwendbar in Excel, Lexware & Co.</p>
|
||
</div>
|
||
<div class="bcard reveal" style="transition-delay:.1s">
|
||
<span class="num">/03</span>
|
||
<div class="ic">≣</div>
|
||
<h3>Bulk-Upload per Drag & Drop</h3>
|
||
<p>Zieh 50 Belege auf einmal rein. Die <strong>Warteschlange verarbeitet alles parallel</strong> mit Live-Fortschritt – einzelne Fehler halten den Rest nicht auf.</p>
|
||
</div>
|
||
<div class="bcard reveal" style="transition-delay:.15s">
|
||
<span class="num">/04</span>
|
||
<div class="ic">§</div>
|
||
<h3>Korrekte MwSt-Aufteilung</h3>
|
||
<p>Bewirtungsbelege, Supermarkt-Bons und Rechnungen: <strong>Steuersätze werden getrennt erfasst</strong> und je Position sauber ausgewiesen.</p>
|
||
</div>
|
||
<div class="bcard reveal" style="transition-delay:.2s">
|
||
<span class="num">/05</span>
|
||
<div class="ic">✎</div>
|
||
<h3>Editor mit Audit-Spur</h3>
|
||
<p>Jeder Wert trägt ein Label: <strong>„KI extrahiert“ oder „manuell geändert“</strong> – mit 1-Klick-Rückgängig. Dein Steuerberater sieht sofort, was du geprüft hast.</p>
|
||
</div>
|
||
<div class="bcard reveal" style="transition-delay:.25s">
|
||
<span class="num">/06</span>
|
||
<div class="ic">O</div>
|
||
<h3>Local-First + Cloud-Sync</h3>
|
||
<p>Belege landen <strong>zuerst im Browser</strong> (IndexedDB) und werden sicher mit deinem Konto synchronisiert. Offline-Arbeit inklusive, keine Wartezeit.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ HOW IT WORKS ============ -->
|
||
<section class="steps" id="workflow">
|
||
<div class="container">
|
||
<div class="sec-head center reveal">
|
||
<span class="sec-label">Workflow</span>
|
||
<h2 class="sec-title">In drei Schritten zur <span class="dim">Buchhaltungs-Excel.</span></h2>
|
||
</div>
|
||
<div class="stepgrid">
|
||
<div class="step reveal">
|
||
<h3>Fotografieren oder hochladen</h3>
|
||
<p>Kassenbon, Rechnung oder Bewirtungsbeleg – fotografieren, scannen oder einfach in die Seite ziehen. PDF, PNG, JPEG & WebP werden unterstützt.</p>
|
||
<span class="tag">≈ 3 Sekunden</span>
|
||
</div>
|
||
<div class="step reveal" style="transition-delay:.1s">
|
||
<h3>KI extrahiert & rechnet nach</h3>
|
||
<p>Händler, Datum, Posten, Mengen und Steuern werden gelesen. Jede Summe wird geprüft und markiert, falls etwas nicht aufgeht.</p>
|
||
<span class="tag">≈ 10 Sekunden</span>
|
||
</div>
|
||
<div class="step reveal" style="transition-delay:.2s">
|
||
<h3>Prüfen & exportieren</h3>
|
||
<p>Ein letzter Blick im Split-Editor, dann als Dual-Sheet Excel oder DATEV-CSV exportieren – fertig für den Steuerberater.</p>
|
||
<span class="tag">≈ 2 Minuten gesamt</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PROOF / STATS ============ -->
|
||
<section class="proof">
|
||
<div class="container">
|
||
<div class="sec-head center reveal">
|
||
<span class="sec-label">Zahlen & Stimmen</span>
|
||
<h2 class="sec-title">Resultate, die sich <span class="dim">nachrechnen lassen.</span></h2>
|
||
</div>
|
||
<div class="statrow reveal">
|
||
<div class="stat"><div class="val">99,2 %</div><div class="lbl">OCR-Trefferquote</div></div>
|
||
<div class="stat"><div class="val">-90 %</div><div class="lbl">Zeitaufwand pro Beleg</div></div>
|
||
<div class="stat"><div class="val">2.400+</div><div class="lbl">Belege verarbeitet</div></div>
|
||
<div class="stat"><div class="val">15</div><div class="lbl">Scans gratis / Monat</div></div>
|
||
</div>
|
||
<div class="quote-row reveal">
|
||
<div class="quote">
|
||
<p>„Ich habe früher jeden Sonntag zwei Stunden Bons abgetippt. Jetzt ist das im Monat eine Viertelstunde.“</p>
|
||
<div class="who">Freiberufliche Grafikdesignerin · DE</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>„Die Summenprüfung hat mir schon dreimal einen falschen Kassenzettel erspart.“</p>
|
||
<div class="who">Selbstständiger Handwerker · DE</div>
|
||
</div>
|
||
<div class="quote">
|
||
<p>„Der DATEV-Export ist eine Wucht. Mein Steuerberater fragt, womit ich das mache.“</p>
|
||
<div class="who">Gründer · DE</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ COMPARISON ============ -->
|
||
<section class="compare" id="vergleich">
|
||
<div class="container">
|
||
<div class="sec-head reveal">
|
||
<span class="sec-label">Direktvergleich</span>
|
||
<h2 class="sec-title">Handarbeit vs. <span class="dim">ScanReceipts.</span></h2>
|
||
</div>
|
||
<div class="ctable-wrap reveal">
|
||
<table class="ctable">
|
||
<thead>
|
||
<tr>
|
||
<th>Kriterium</th>
|
||
<th><span class="cmp-brand">ScanReceipts<small>KI · Excel · DE</small></span></th>
|
||
<th><span class="cmp-brand">Manuelle Excel<small>per Hand</small></span></th>
|
||
<th><span class="cmp-brand">Typischer Scanner<small>allgemeine OCR</small></span></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr><td>Zeit pro Beleg</td><td class="yes">≈ 1–2 Minuten</td><td>5–10 Minuten</td><td>3–5 Minuten</td></tr>
|
||
<tr><td>Summen-Nachrechnung</td><td class="yes">Automatisch</td><td class="no">Manuell, fehleranfällig</td><td class="no">Selten</td></tr>
|
||
<tr><td>Steuersätze je Posten</td><td class="yes">Automatisch getrennt</td><td class="no">Meist gar nicht</td><td class="no">Teilweise</td></tr>
|
||
<tr><td>Excel-Export</td><td class="yes">Dual-Sheet .xlsx</td><td class="no">Handaufbau</td><td class="no">CSV nur</td></tr>
|
||
<tr><td>DATEV-CSV (DE)</td><td class="yes">UTF-8 BOM</td><td class="no">Selbst gebaut</td><td class="no">Nein</td></tr>
|
||
<tr><td>Bewirtungsbelege</td><td class="yes">Speziell unterstützt</td><td class="no">Manuelle Formeln</td><td class="no">Nein</td></tr>
|
||
<tr><td>Bulk-Verarbeitung</td><td class="yes">50+ parallel</td><td class="no">—</td><td class="no">Teilweise</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ PRICING ============ -->
|
||
<section class="pricing" id="preise">
|
||
<div class="container">
|
||
<div class="sec-head center reveal">
|
||
<span class="sec-label">Tarife & Lizenzen</span>
|
||
<h2 class="sec-title">Transparente Preise. <span class="dim">Keine Abo-Falle.</span></h2>
|
||
<p class="sec-sub">Kostenlos anfangen, jederzeit upgraden. Mit 14-tägiger Geld-zurück-Garantie.</p>
|
||
<div class="toggle" role="group" aria-label="Abrechnungszeitraum">
|
||
<button id="tg-pass" class="active" type="button">Wochen-Pass</button>
|
||
<button id="tg-annual" type="button">Jahres-Lizenz (−35 %)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pricegrid">
|
||
<!-- Starter -->
|
||
<div class="plan reveal">
|
||
<span class="p-name">Starter</span>
|
||
<h3>Kostenlos</h3>
|
||
<div class="price"><span class="amt">0 €</span><span class="per">/ dauerhaft</span></div>
|
||
<p class="p-desc">Für Privatpersonen & gelegentliche Belege – volle KI-Power und Exporte.</p>
|
||
<ul>
|
||
<li>15 Gratis-Scans pro Monat</li>
|
||
<li>Volle KI-Erkennung & Posten</li>
|
||
<li>Dual-Sheet Excel (.xlsx) & CSV</li>
|
||
<li>Lokales Archiv (IndexedDB)</li>
|
||
</ul>
|
||
<a class="btn btn-ghost" href="#top">Kostenlos starten</a>
|
||
</div>
|
||
|
||
<!-- Pro -->
|
||
<div class="plan featured reveal" style="transition-delay:.1s">
|
||
<span class="plan-flag">POPULÄRSTE WAHL</span>
|
||
<span class="p-name">Pro</span>
|
||
<h3 id="plan-title">Wochen-Pass</h3>
|
||
<div class="price"><span class="amt" id="plan-price">4,99 €</span><span class="per" id="plan-per">/ Woche</span></div>
|
||
<p class="p-desc" id="plan-desc">Für Freelancer, Selbstständige & Vielbucher – unbegrenzte Belege ohne Limit.</p>
|
||
<ul>
|
||
<li>Unbegrenzte Beleg-Scans</li>
|
||
<li>Bulk-Upload (50+ Dateien parallel)</li>
|
||
<li>Unbegrenztes Langzeit-Archiv</li>
|
||
<li>Alle KI- & Export-Funktionen</li>
|
||
</ul>
|
||
<button class="btn" style="background:#fff;color:var(--accent)" id="plan-cta" type="button">Jetzt Pro freischalten</button>
|
||
</div>
|
||
|
||
<!-- Lifetime -->
|
||
<div class="plan reveal" style="transition-delay:.2s">
|
||
<span class="p-name">Lifetime</span>
|
||
<h3>Einmalzahlung</h3>
|
||
<div class="price"><span class="amt">59,99 €</span><span class="per">/ einmalig</span></div>
|
||
<p class="p-desc">Kein Abo, keine Folgekosten – einmal zahlen, für immer unbegrenzt nutzen.</p>
|
||
<ul>
|
||
<li>Lebenslanger unbegrenzter Zugriff</li>
|
||
<li>Unbegrenzte Scans & Bulk-Upload</li>
|
||
<li>Unbegrenztes Langzeit-Archiv</li>
|
||
<li>Alle zukünftigen Updates inklusive</li>
|
||
</ul>
|
||
<button class="btn btn-primary" type="button">Lifetime-Lizenz sichern</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="plan-feet reveal">
|
||
<span>✓ 14 Tage Geld-zurück-Garantie</span>
|
||
<span>✓ Sofortige Freischaltung</span>
|
||
<span>✓ SSL-verschlüsselt</span>
|
||
<span>✓ Stripe · Apple Pay · Google Pay · Kreditkarte</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FAQ ============ -->
|
||
<section class="faq" id="faq">
|
||
<div class="container">
|
||
<div class="sec-head center reveal">
|
||
<span class="sec-label">Häufige Fragen</span>
|
||
<h2 class="sec-title">Alles, was du <span class="dim">wissen musst.</span></h2>
|
||
</div>
|
||
<div class="faq-list reveal">
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">Ist die KI-Erkennung wirklich zuverlässig? <span class="x">+</span></button>
|
||
<div class="faq-a"><p>Ja. Jede Extraktion wird automatisch gegen die Drucksumme geprüft – Summen, die nicht aufgehen, werden markiert und nicht blind übernommen. Du hast immer den letzten Blick, und manuell geänderte Werte bleiben für deinen Steuerberater als „geprüft“ sichtbar. Bei Bedarf exportierst du die Originalbilder mit.</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">Wie sicher sind meine Belege? <span class="x">+</span></button>
|
||
<div class="faq-a"><p>Belege werden lokal im Browser (IndexedDB) verarbeitet und nur nach deiner Freigabe mit deinem Konto synchronisiert. Alle Verbindungen sind SSL-verschlüsselt. Gäste ohne Konto bleiben komplett lokal – es verlässt nichts dein Gerät.</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">Muss ich Steuern & Buchhaltung verstehen? <span class="x">+</span></button>
|
||
<div class="faq-a"><p>Nein. Du fotografierst einfach – die KI erkennt Posten und Steuersätze automatisch und stellt die Excel so zusammen, dass dein Steuerberater sie direkt verwenden kann. Bewirtungsbelege werden inklusive MwSt-Aufteilung korrekt erfasst.</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">Was passiert, wenn das Limit erreicht ist? <span class="x">+</span></button>
|
||
<div class="faq-a"><p>Im kostenlosen Starter-Tarif sind 15 Scans pro Monat inklusive. Danach erscheint ein Hinweis – deine Belege bleiben gespeichert, und du kannst jederzeit auf den Wochen-Pass, die Jahres-Lizenz oder die Lifetime-Lizenz upgraden, um unbegrenzt weiterzuscanen.</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">Kann ich meine Daten jederzeit exportieren? <span class="x">+</span></button>
|
||
<div class="faq-a"><p>Ja. Du exportierst jederzeit als Dual-Sheet Excel (.xlsx), DATEV-CSV oder strukturiertes JSON – einzeln oder in Massen. Es gibt keine Datenfalle: Was dir gehört, bekommst du auch raus.</p></div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<button class="faq-q" type="button">Welche Dateiformate werden unterstützt? <span class="x">+</span></button>
|
||
<div class="faq-a"><p>PDF, PNG, JPEG und WebP. Einfach fotografieren, scannen oder in die Seite ziehen – die Erkennung übernimmt den Rest.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ FINAL CTA ============ -->
|
||
<section class="final">
|
||
<div class="final-bg" aria-hidden="true"></div>
|
||
<div class="container">
|
||
<span class="sec-label" style="color:#94A3B8">Bereit?</span>
|
||
<h2 class="sec-title">Der nächste Kassenbon <br/>ist deine letzte Abtipp-Arbeit.</h2>
|
||
<p class="sec-sub" style="max-width:480px;margin:18px auto 0">15 Belege gratis ohne Login. Keine Kreditkarte, keine Verpflichtung.</p>
|
||
<div style="margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap">
|
||
<a class="btn btn-lg" style="background:#fff;color:var(--accent)" href="#preise">Kostenlos starten</a>
|
||
<button class="btn btn-outline btn-lg" type="button" id="run-demo-btn-2">Demo erleben</button>
|
||
</div>
|
||
<p class="ft">✓ Jede Summe nachgerechnet · ✓ Export bereit für den Steuerberater · ✓ 14 Tage Geld-zurück</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ============ FOOTER ============ -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="f-grid">
|
||
<div class="f-brand">
|
||
<a class="brand" href="#top">
|
||
<span class="brand-mark">SR</span>
|
||
<span class="brand-name">Scan<em>Receipts</em></span>
|
||
</a>
|
||
<p>KI-gestützter Beleg-Scanner zu Excel für Freelancer, Selbstständige und Buchhalter – entwickelt in Deutschland.</p>
|
||
</div>
|
||
<div class="f-col">
|
||
<h4>Produkt</h4>
|
||
<a href="#features">Features</a>
|
||
<a href="#workflow">Workflow</a>
|
||
<a href="#vergleich">Vergleich</a>
|
||
<a href="#preise">Preise</a>
|
||
</div>
|
||
<div class="f-col">
|
||
<h4>Unternehmen</h4>
|
||
<a href="#top">Über uns</a>
|
||
<a href="#faq">FAQ</a>
|
||
<a href="#preise">Kontakt</a>
|
||
</div>
|
||
<div class="f-col">
|
||
<h4>Rechtliches</h4>
|
||
<a href="#top">Impressum</a>
|
||
<a href="#top">Datenschutz</a>
|
||
<a href="#top">AGB</a>
|
||
</div>
|
||
</div>
|
||
<div class="f-bottom">
|
||
<span>© 2026 ScanReceipts</span>
|
||
<span>Made with ♥ in Deutschland</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
|
||
<script>
|
||
/* ---------- Motion tokens (JS mirror) ---------- */
|
||
const MT = { micro: 0.18, ui: 0.45, story: 0.9, ease: 'power3.out', easeHero: 'cubic-bezier(0.16,1,0.3,1)', stagger: 0.06 };
|
||
const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
|
||
/* Scroll progress */
|
||
const progress = document.getElementById('progress');
|
||
const header = document.getElementById('site-header');
|
||
function onScroll() {
|
||
const h = document.documentElement;
|
||
const pct = h.scrollTop / (h.scrollHeight - h.clientHeight) * 100;
|
||
progress.style.width = pct + '%';
|
||
header.classList.toggle('scrolled', h.scrollTop > 8);
|
||
}
|
||
window.addEventListener('scroll', onScroll, { passive: true });
|
||
onScroll();
|
||
|
||
const hasGsap = typeof window.gsap !== 'undefined' && typeof window.ScrollTrigger !== 'undefined';
|
||
|
||
/* ---------- Fallback (no GSAP or reduced motion): CSS/IO reveals ---------- */
|
||
if (!hasGsap || prefersReduced) {
|
||
const io = new IntersectionObserver((entries) => {
|
||
entries.forEach((e) => {
|
||
if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); }
|
||
});
|
||
}, { threshold: 0.12 });
|
||
document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
|
||
}
|
||
|
||
/* ---------- GSAP premium layer ---------- */
|
||
if (hasGsap && !prefersReduced) {
|
||
gsap.registerPlugin(window.ScrollTrigger);
|
||
document.body.classList.add('gsap-ready');
|
||
|
||
const mm = gsap.matchMedia();
|
||
|
||
mm.add('(prefers-reduced-motion: reduce)', () => {
|
||
gsap.set(['.hero-title .ml', '.reveal', '.ctable tbody tr', '.demo-stage'], { clearProps: 'all' });
|
||
return () => {};
|
||
});
|
||
|
||
mm.add('(prefers-reduced-motion: no-preference)', () => {
|
||
/* 1) Hero intro timeline (one story beat) */
|
||
const tl = gsap.timeline({ defaults: { ease: MT.easeHero } });
|
||
tl.fromTo('.hero-badge', { y: 16, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.6 }, 0.1)
|
||
.fromTo('.hero-title .ml', { yPercent: 115 }, { yPercent: 0, duration: MT.story, stagger: 0.09 }, '-=0.25')
|
||
.fromTo('.hero-sub', { y: 20, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.7 }, '-=0.5')
|
||
.fromTo('.hero-cta', { y: 16, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.5 }, '-=0.35')
|
||
.fromTo('.hero-proof', { y: 14, autoAlpha: 0 }, { y: 0, autoAlpha: 1, duration: 0.5 }, '-=0.3')
|
||
.fromTo('.demo', { y: 26, autoAlpha: 0, scale: 0.98 }, { y: 0, autoAlpha: 1, scale: 1, duration: 0.9 }, '-=0.65');
|
||
|
||
/* 2) Batch viewport reveals (all .reveal outside hero) */
|
||
ScrollTrigger.batch(
|
||
gsap.utils.toArray('.reveal').filter((el) => !el.closest('.hero')),
|
||
{
|
||
start: 'top 86%',
|
||
once: true,
|
||
onEnter: (els) => gsap.to(els, { y: 0, autoAlpha: 1, duration: 0.6, ease: MT.ease, stagger: 0.06 })
|
||
}
|
||
);
|
||
|
||
/* 3) Section heading pop (label → title → sub) */
|
||
gsap.utils.toArray('.sec-head').forEach((head) => {
|
||
gsap.from(head.children, {
|
||
y: 18, autoAlpha: 0, duration: 0.55, ease: MT.ease, stagger: 0.08,
|
||
scrollTrigger: { trigger: head, start: 'top 84%', once: true }
|
||
});
|
||
});
|
||
|
||
/* 4) Comparison rows */
|
||
gsap.from('#vergleich .ctable tbody tr', {
|
||
y: 14, autoAlpha: 0, duration: 0.5, ease: MT.ease, stagger: 0.05,
|
||
scrollTrigger: { trigger: '#vergleich .ctable', start: 'top 85%', once: true }
|
||
});
|
||
|
||
/* 5) Count-up stats */
|
||
gsap.utils.toArray('.stat .val').forEach((el) => {
|
||
const raw = el.textContent.trim();
|
||
const isNeg = raw.includes('-');
|
||
const isPct = raw.includes('%');
|
||
const plus = raw.includes('+');
|
||
const cleaned = raw.replace(/[^\d.,]/g, '');
|
||
const hasComma = cleaned.includes(',');
|
||
const numStr = hasComma ? cleaned.replace(/\./g, '').replace(',', '.') : cleaned.replace(/\./g, '');
|
||
const target = parseFloat(numStr) || 0;
|
||
const decimals = hasComma ? 1 : 0;
|
||
const state = { v: 0 };
|
||
gsap.to(state, {
|
||
v: target, duration: 1.5, ease: 'power2.out',
|
||
scrollTrigger: { trigger: el, start: 'top 88%', once: true },
|
||
onUpdate() {
|
||
const val = state.v.toLocaleString('de-DE', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
|
||
el.textContent = (isNeg ? '-' : '') + val + (isPct ? ' %' : plus ? '+' : '');
|
||
}
|
||
});
|
||
});
|
||
|
||
/* 6) Background parallax (decor layers only) */
|
||
gsap.fromTo('.hero-bg',
|
||
{ yPercent: -6 }, { yPercent: 6, ease: 'none',
|
||
scrollTrigger: { trigger: '.hero', start: 'top bottom', end: 'bottom top', scrub: 0.6 } });
|
||
gsap.fromTo('.final-bg',
|
||
{ yPercent: 8 }, { yPercent: -8, ease: 'none',
|
||
scrollTrigger: { trigger: '.final', start: 'top bottom', end: 'bottom top', scrub: 0.6 } });
|
||
|
||
/* 7) Hero tilt microinteraction (pointer devices only) */
|
||
if (window.matchMedia('(pointer: fine)').matches) {
|
||
const stage = document.querySelector('.demo-stage');
|
||
const hero = document.querySelector('.hero');
|
||
if (stage && hero) {
|
||
hero.addEventListener('mousemove', (e) => {
|
||
const r = hero.getBoundingClientRect();
|
||
const px = (e.clientX - r.left) / r.width - 0.5;
|
||
const py = (e.clientY - r.top) / r.height - 0.5;
|
||
gsap.to(stage, { rotateY: px * 4, rotateX: -py * 3, transformPerspective: 900, duration: 0.6, ease: 'power2.out' });
|
||
});
|
||
hero.addEventListener('mouseleave', () => gsap.to(stage, { rotateX: 0, rotateY: 0, duration: 0.9, ease: 'power3.out' }));
|
||
}
|
||
}
|
||
|
||
ScrollTrigger.refresh();
|
||
return () => {};
|
||
});
|
||
}
|
||
|
||
/* Mobile menu */
|
||
const menu = document.getElementById('mobile-menu');
|
||
const menuBtn = document.getElementById('menu-toggle');
|
||
menuBtn.addEventListener('click', () => {
|
||
const open = menu.classList.toggle('open');
|
||
menuBtn.setAttribute('aria-expanded', open);
|
||
});
|
||
menu.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => {
|
||
menu.classList.remove('open'); menuBtn.setAttribute('aria-expanded', 'false');
|
||
}));
|
||
|
||
/* FAQ accordion */
|
||
document.querySelectorAll('.faq-item').forEach((item) => {
|
||
const q = item.querySelector('.faq-q');
|
||
const a = item.querySelector('.faq-a');
|
||
q.addEventListener('click', () => {
|
||
const isOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item.open').forEach((o) => {
|
||
o.classList.remove('open'); o.querySelector('.faq-a').style.maxHeight = '0px';
|
||
});
|
||
if (!isOpen) {
|
||
item.classList.add('open');
|
||
a.style.maxHeight = a.scrollHeight + 'px';
|
||
}
|
||
});
|
||
});
|
||
|
||
/* Pricing toggle */
|
||
const planData = {
|
||
pass: { title: 'Wochen-Pass', price: '4,99 €', per: '/ Woche', desc: 'Für Freelancer, Selbstständige & Vielbucher – unbegrenzte Belege ohne Limit.', cta: '3 Tage kostenlos testen' },
|
||
annual: { title: 'Jahres-Pro', price: '39,99 €', per: '/ Jahr', desc: 'Zwei Monate geschenkt: unbegrenzte Belege für das ganze Jahr.', cta: 'Jetzt Pro freischalten' }
|
||
};
|
||
function setPlan(mode) {
|
||
document.getElementById('tg-pass').classList.toggle('active', mode === 'pass');
|
||
document.getElementById('tg-annual').classList.toggle('active', mode === 'annual');
|
||
const d = planData[mode];
|
||
document.getElementById('plan-title').textContent = d.title;
|
||
document.getElementById('plan-price').textContent = d.price;
|
||
document.getElementById('plan-per').textContent = d.per;
|
||
document.getElementById('plan-desc').textContent = d.desc;
|
||
document.getElementById('plan-cta').textContent = d.cta;
|
||
}
|
||
document.getElementById('tg-pass').addEventListener('click', () => setPlan('pass'));
|
||
document.getElementById('tg-annual').addEventListener('click', () => setPlan('annual'));
|
||
|
||
/* Demo: re-run scan animation + refill Excel cells */
|
||
const recpt = document.getElementById('recpt');
|
||
const cells = document.querySelectorAll('.cell');
|
||
function runDemo() {
|
||
cells.forEach((c) => c.classList.remove('filled'));
|
||
recpt.classList.add('scanning');
|
||
setTimeout(() => recpt.classList.remove('scanning'), 1900);
|
||
setTimeout(() => {
|
||
cells.forEach((c, i) => setTimeout(() => c.classList.add('filled'), 90 * i));
|
||
}, 700);
|
||
}
|
||
document.getElementById('run-demo').addEventListener('click', runDemo);
|
||
document.getElementById('run-demo-btn').addEventListener('click', () => { document.getElementById('top').scrollIntoView(); setTimeout(runDemo, 350); });
|
||
document.getElementById('run-demo-btn-2').addEventListener('click', () => { document.getElementById('top').scrollIntoView(); setTimeout(runDemo, 350); });
|
||
if (!prefersReduced) window.addEventListener('load', () => setTimeout(runDemo, 1500));
|
||
</script>
|
||
</body>
|
||
</html> |