Auto Stahl Erinnerungssystem — Pitch-Website (talient.ai)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+728
@@ -0,0 +1,728 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Auto Stahl — Automatisiertes Erinnerungssystem · Pitch | talient.ai</title>
|
||||
<meta name="description" content="Reifen, Service, §57a-Pickerl: Ihre Kunden verpassen keine Frist mehr — und Ihre Werkstatt keinen Termin. Ein Automatisierungs-Pitch von talient.ai für Auto Stahl.">
|
||||
<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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" defer></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.14/dist/lenis.min.js" defer></script>
|
||||
<style>
|
||||
:root{
|
||||
--ink:#171A26; --grey:#6A6D81; --grey-2:#3D425C;
|
||||
--border:#E9E9EC; --bg-soft:#F3F3F7; --bg-tint:#F1F1F9;
|
||||
--indigo:#463ACB; --indigo-08:rgba(70,58,203,.08); --indigo-15:rgba(70,58,203,.15); --indigo-25:rgba(70,58,203,.25);
|
||||
--dark:#0E0F16; --green:#1FA060;
|
||||
--radius:16px; --ease:cubic-bezier(.22,.8,.3,1);
|
||||
}
|
||||
*{margin:0;padding:0;box-sizing:border-box}
|
||||
html{scroll-behavior:smooth}
|
||||
body{background:#fff;color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;font-size:15.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
|
||||
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
|
||||
section{padding:76px 0}
|
||||
h2{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.7px;line-height:1.18;margin-bottom:8px}
|
||||
.eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo);margin-bottom:12px}
|
||||
.sec-note{color:var(--grey);font-size:14.5px;margin-bottom:32px;max-width:78ch}
|
||||
a{color:inherit}
|
||||
button{font-family:inherit}
|
||||
a:focus-visible,button:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:8px}
|
||||
.chip{display:inline-block;font-size:11.5px;font-weight:600;color:var(--indigo);background:var(--indigo-08);border:1px solid var(--indigo-15);border-radius:9999px;padding:3px 11px;white-space:nowrap}
|
||||
.chip.ext{color:var(--green);background:rgba(31,160,96,.07);border-color:rgba(31,160,96,.25)}
|
||||
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--indigo);color:#fff;font-size:14px;font-weight:700;text-decoration:none;border:none;cursor:pointer;padding:12px 22px;border-radius:9999px;box-shadow:0 8px 22px rgba(70,58,203,.28);transition:transform .2s var(--ease),box-shadow .25s,background .2s}
|
||||
.cta:hover{transform:translateY(-2px);background:#372CB0;box-shadow:0 12px 28px rgba(70,58,203,.36)}
|
||||
.cta.ghost{background:#fff;color:var(--grey-2);border:1px solid var(--border);box-shadow:none}
|
||||
.cta.ghost:hover{border-color:var(--indigo-25);color:var(--indigo);background:#fff}
|
||||
|
||||
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
|
||||
.reveal.in{opacity:1;transform:none}
|
||||
/* „Aus dem Scheinwerfer-Licht geboren" — Text der nächsten Seite entsteht aus Unschärfe + Glow */
|
||||
.glow-in{opacity:0;filter:blur(16px) brightness(1.6);transform:translateY(10px) scale(1.05);text-shadow:0 0 30px rgba(255,255,255,.9);transition:opacity 1s var(--ease),filter 1.15s var(--ease),transform 1.15s var(--ease),text-shadow 1.3s var(--ease)}
|
||||
.glow-in.in{opacity:1;filter:blur(0) brightness(1);transform:none;text-shadow:0 0 0 rgba(255,255,255,0)}
|
||||
|
||||
#progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--indigo);z-index:200;transition:width .1s linear}
|
||||
nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
|
||||
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
|
||||
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--ink);text-decoration:none}
|
||||
.logo svg{width:23px;height:23px;display:block;animation:spinIn 1.2s var(--ease) both}
|
||||
.logo-mark{width:27px;height:27px;object-fit:contain;display:block;animation:spinIn 1.2s var(--ease) both}
|
||||
.logo .x{color:var(--grey);font-weight:600}
|
||||
.logo .client{color:var(--grey-2)}
|
||||
@keyframes spinIn{from{transform:rotate(-120deg) scale(0);opacity:0}to{transform:rotate(0) scale(1);opacity:1}}
|
||||
.nav-links{display:flex;gap:4px;flex-wrap:wrap}
|
||||
.nav-links a{color:var(--grey);font-size:13px;font-weight:600;text-decoration:none;padding:7px 13px;border-radius:9999px;transition:color .2s,background .2s;cursor:pointer}
|
||||
.nav-links a:hover{color:var(--ink);background:var(--bg-soft)}
|
||||
.nav-links a.active{color:var(--indigo);background:var(--indigo-08)}
|
||||
.nav-cta{display:inline-flex}
|
||||
|
||||
/* HERO — scroll-gescrubter Kamera-Push-in IN die Scheinwerfer → natürliche Überstrahlung */
|
||||
/* --hlx/--hly = Scheinwerfer-Mitte, --hl1/--hl2 = einzelne Scheinwerfer (per JS bild-genau gesetzt) */
|
||||
.cover{position:relative;background:#0E0F16;height:auto;border-bottom:1px solid var(--border)}
|
||||
.cover.scrub-on{height:180vh}
|
||||
.cover-pin{position:relative;min-height:100svh;height:100svh;overflow:hidden;display:flex;align-items:center}
|
||||
.cover.scrub-on .cover-pin{position:sticky;top:0}
|
||||
.stage{position:absolute;inset:0;overflow:hidden}
|
||||
.stage-car{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1);transform-origin:var(--hlx,61%) var(--hly,73%);filter:saturate(1.03);z-index:1}
|
||||
.scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(9,10,16,.82) 0%,rgba(9,10,16,.5) 34%,rgba(9,10,16,.08) 60%,transparent 76%),linear-gradient(0deg,rgba(9,10,16,.6),transparent 46%)}
|
||||
.veil{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(9,10,16,.5),rgba(9,10,16,.72));opacity:.55}
|
||||
.lamp{position:absolute;z-index:5;width:8.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(214,232,255,.7) 18%,rgba(140,180,255,.28) 40%,rgba(90,140,255,.08) 60%,transparent 72%);mix-blend-mode:screen;filter:blur(1px);opacity:0;pointer-events:none}
|
||||
.lamp-1{left:var(--hl1x,59%);top:var(--hl1y,75%)}
|
||||
.lamp-2{left:var(--hl2x,63%);top:var(--hl2y,72%)}
|
||||
.streak{position:absolute;z-index:6;left:var(--hlx,61%);top:var(--hly,73%);width:46%;height:3%;transform:translate(-50%,-50%) scaleX(.4);border-radius:50%;background:linear-gradient(90deg,transparent,rgba(200,224,255,.5) 35%,rgba(255,255,255,.92) 50%,rgba(200,224,255,.5) 65%,transparent);mix-blend-mode:screen;filter:blur(4px);opacity:0;pointer-events:none}
|
||||
.bloom{position:absolute;z-index:7;left:var(--hlx,61%);top:var(--hly,73%);width:26%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.3);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.98) 0%,rgba(235,244,255,.75) 26%,rgba(170,200,255,.28) 50%,transparent 72%);mix-blend-mode:screen;filter:blur(3px);opacity:0;pointer-events:none}
|
||||
.cover-flash{position:absolute;inset:0;z-index:22;background:radial-gradient(58% 70% at var(--hlx,61%) var(--hly,73%),#fff 0%,#fff 32%,rgba(255,255,255,.92) 58%,rgba(243,243,247,.86) 100%);opacity:0;pointer-events:none}
|
||||
.cover-edge{position:absolute;left:0;right:0;bottom:0;height:28%;z-index:9;background:linear-gradient(180deg,transparent,#fff);opacity:0;pointer-events:none}
|
||||
.hero-content{position:relative;z-index:8;width:100%}
|
||||
.cover h1{color:#F5F5FA}
|
||||
.cover .hl{color:#B8B1FF}
|
||||
.cover .hl::after{background:rgba(150,142,234,.32)}
|
||||
.cover .lede{color:rgba(255,255,255,.85)}
|
||||
.cover .head-facts div{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.88)}
|
||||
.cover .head-facts b{color:#fff}
|
||||
.cover .cta.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
|
||||
.cover .cta.ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.15)}
|
||||
.scroll-cue{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B8B1FF}
|
||||
.scroll-cue b{animation:bob 1.6s ease-in-out infinite;font-weight:800}
|
||||
.blob{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.55}
|
||||
.blob.b1{width:520px;height:520px;background:var(--indigo-15);top:-240px;right:-120px;animation:drift1 14s ease-in-out infinite alternate}
|
||||
.blob.b2{width:380px;height:380px;background:rgba(70,58,203,.09);bottom:-220px;left:-120px;animation:drift2 18s ease-in-out infinite alternate}
|
||||
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,50px) scale(1.12)}}
|
||||
@keyframes drift2{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,-40px) scale(1.08)}}
|
||||
.hero .wrap{position:relative;z-index:1}
|
||||
.head-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
|
||||
.head-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--grey-2);border:1px solid var(--border);background:#fff;border-radius:9999px;padding:6px 16px}
|
||||
.head-badge i{width:7px;height:7px;border-radius:50%;background:var(--indigo);display:inline-block;animation:blink 2.4s ease-in-out infinite}
|
||||
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
|
||||
.doc-meta{font-size:12.5px;color:var(--grey);text-align:right;line-height:1.75}
|
||||
.doc-meta b{color:var(--ink);font-weight:700}
|
||||
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;margin-top:30px}
|
||||
header h1{font-size:clamp(32px,4.6vw,52px);font-weight:800;letter-spacing:-1.4px;line-height:1.08;max-width:16ch}
|
||||
header h1 span.hl{color:var(--indigo);position:relative;white-space:nowrap}
|
||||
header h1 span.hl::after{content:'';position:absolute;left:0;bottom:3px;height:10px;width:100%;background:var(--indigo-15);border-radius:4px;z-index:-1;transform:scaleX(0);transform-origin:left;animation:underline 1s .7s var(--ease) forwards}
|
||||
@keyframes underline{to{transform:scaleX(1)}}
|
||||
.h1-line{display:block;opacity:0;transform:translateY(22px);animation:rise .8s var(--ease) forwards}
|
||||
.h1-line:nth-child(2){animation-delay:.12s}.h1-line:nth-child(3){animation-delay:.24s}
|
||||
@keyframes rise{to{opacity:1;transform:none}}
|
||||
.lede{margin-top:20px;color:var(--grey);font-size:16px;max-width:46ch}
|
||||
.head-facts{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
|
||||
.head-facts div{font-size:12.5px;font-weight:600;color:var(--grey-2);border:1px solid var(--border);background:rgba(255,255,255,.8);border-radius:9999px;padding:7px 15px;opacity:0;transform:translateY(14px) scale(.96);animation:pop .55s var(--ease) forwards}
|
||||
.head-facts div:nth-child(1){animation-delay:.4s}.head-facts div:nth-child(2){animation-delay:.52s}.head-facts div:nth-child(3){animation-delay:.64s}
|
||||
@keyframes pop{to{opacity:1;transform:none}}
|
||||
.head-facts b{color:var(--ink);font-weight:800}
|
||||
.hero-actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
|
||||
.hero-visual{position:relative;border-radius:22px;border:1px solid var(--border);overflow:hidden;box-shadow:0 30px 60px rgba(23,26,38,.12);background:linear-gradient(135deg,#F3F3F7,#E7E7F3);aspect-ratio:16/10;opacity:0;transform:translateY(20px) scale(.98);animation:pop .8s .3s var(--ease) forwards}
|
||||
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
|
||||
.hero-visual .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--grey);font-size:13px;font-weight:600}
|
||||
.hero-visual .ph svg{width:40px;height:40px;color:var(--indigo-25)}
|
||||
.hero-visual figcaption{position:absolute;left:14px;bottom:12px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(14,15,22,.55);backdrop-filter:blur(6px);padding:5px 12px;border-radius:9999px}
|
||||
|
||||
/* CARDS */
|
||||
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
|
||||
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:box-shadow .3s var(--ease),border-color .3s,transform .3s var(--ease)}
|
||||
.card:hover{border-color:var(--indigo-25);box-shadow:0 14px 34px rgba(23,26,38,.08);transform:translateY(-4px)}
|
||||
.card .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--indigo-08);color:var(--indigo);margin-bottom:16px}
|
||||
.card .ico svg{width:22px;height:22px}
|
||||
.card h3{font-size:16px;font-weight:800}
|
||||
.card p{font-size:13.5px;color:var(--grey);margin-top:7px}
|
||||
|
||||
/* TABS */
|
||||
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
|
||||
.filterbar button{border:1px solid var(--border);background:#fff;color:var(--grey-2);font-size:12.5px;font-weight:700;padding:9px 18px;border-radius:9999px;cursor:pointer;transition:all .25s var(--ease)}
|
||||
.filterbar button:hover{border-color:var(--indigo-25);color:var(--ink)}
|
||||
.filterbar button.on{background:var(--indigo);border-color:var(--indigo);color:#fff;box-shadow:0 6px 18px rgba(70,58,203,.3)}
|
||||
.panel{display:none}.panel.on{display:block;animation:fade .4s var(--ease)}
|
||||
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
|
||||
.krit{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--indigo);background:var(--indigo-08);border:1px solid var(--indigo-15);border-radius:9999px;padding:4px 12px}
|
||||
.mini{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
|
||||
.mini div{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:#fff}
|
||||
.mini dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);font-weight:700}
|
||||
.mini dd{margin-top:4px;font-weight:700;font-size:14px}
|
||||
|
||||
/* PHONE */
|
||||
.phone{max-width:290px;margin:0 auto;border:9px solid var(--ink);border-radius:34px;background:var(--ink);box-shadow:0 24px 50px rgba(23,26,38,.18)}
|
||||
.phone .screen{border-radius:24px;background:var(--bg-soft);padding:16px}
|
||||
.phone .bar{display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--border);padding-bottom:11px}
|
||||
.phone .av{width:32px;height:32px;border-radius:50%;background:var(--indigo);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
|
||||
.phone .msg{margin-top:13px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px 15px;font-size:13.5px;line-height:1.5}
|
||||
.phone .send{margin-top:13px;width:100%;border:none;background:var(--indigo);color:#fff;font-weight:700;font-size:13.5px;padding:10px;border-radius:11px;cursor:pointer}
|
||||
|
||||
/* YEAR STRIP */
|
||||
.yearstrip{border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;background:#fff;box-shadow:0 10px 30px rgba(23,26,38,.04)}
|
||||
.yeartrack{height:6px;border-radius:9999px;background:linear-gradient(90deg,var(--indigo-15),var(--indigo) 50%,var(--indigo-15))}
|
||||
.yeargrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px;font-size:13.5px}
|
||||
.yeargrid b{color:var(--indigo)}
|
||||
.yeargrid p{color:var(--grey);font-size:12.5px}
|
||||
|
||||
/* STATS */
|
||||
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
|
||||
.stat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
|
||||
.stat:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(23,26,38,.08);border-color:var(--indigo-25)}
|
||||
.stat .num{font-size:40px;font-weight:800;letter-spacing:-1.5px;color:var(--indigo);line-height:1}
|
||||
.stat .num small{font-size:19px}
|
||||
.stat p{font-size:13px;color:var(--grey);margin-top:10px}
|
||||
.src{font-size:11.5px;color:var(--grey);margin-top:14px}
|
||||
|
||||
/* TABLE */
|
||||
.cmp{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
|
||||
.cmp th,.cmp td{padding:13px 16px;font-size:13.5px;text-align:left;border-bottom:1px solid var(--border)}
|
||||
.cmp thead th{background:var(--bg-tint);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey-2)}
|
||||
.cmp td:first-child{color:var(--grey)}
|
||||
.cmp tr:last-child td{border-bottom:none}
|
||||
.cmp .hot{color:var(--indigo);font-weight:800}
|
||||
.cmp col.on{background:var(--indigo-08)}
|
||||
|
||||
/* PRICE */
|
||||
.calc{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:0 10px 34px rgba(23,26,38,.05)}
|
||||
.slider-top{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
|
||||
.slider-val{font-size:38px;font-weight:800;color:var(--indigo);letter-spacing:-1px;line-height:1}
|
||||
input[type=range].rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:9999px;margin-top:18px;background:linear-gradient(90deg,var(--indigo) var(--p,40%),var(--border) var(--p,40%));outline:none}
|
||||
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--indigo);cursor:pointer;box-shadow:0 2px 8px rgba(70,58,203,.3)}
|
||||
input[type=range].rng::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:4px solid var(--indigo);cursor:pointer}
|
||||
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
|
||||
.tile{border:1px solid var(--border);border-radius:12px;padding:18px;background:var(--bg-soft)}
|
||||
.tile.hot{border-color:var(--indigo-25);background:var(--indigo-08)}
|
||||
.tile .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);font-weight:700}
|
||||
.tile .big{font-size:26px;font-weight:800;letter-spacing:-.5px;margin-top:8px}
|
||||
.tile.hot .big{color:var(--indigo)}
|
||||
.tile .sub{font-size:11.5px;color:var(--grey);margin-top:4px}
|
||||
.calc-grid.two{grid-template-columns:1fr 1fr;margin-top:12px}
|
||||
.disclaim{font-size:11.5px;color:var(--grey);margin-top:16px}
|
||||
|
||||
/* PHASE ACCORDION */
|
||||
.expand-all{border:1px solid var(--border);background:#fff;color:var(--grey-2);font-size:12.5px;font-weight:700;padding:8px 18px;border-radius:9999px;cursor:pointer;transition:all .25s var(--ease);margin-bottom:20px}
|
||||
.expand-all:hover{border-color:var(--indigo-25);color:var(--indigo)}
|
||||
.phase{background:#fff;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;transition:border-color .3s,box-shadow .3s var(--ease);overflow:hidden}
|
||||
.phase.open{border-color:var(--indigo-25);box-shadow:0 14px 40px rgba(70,58,203,.09)}
|
||||
.phase-head{width:100%;display:grid;grid-template-columns:70px 120px 1fr 28px;align-items:center;gap:18px;text-align:left;background:none;border:none;cursor:pointer;padding:20px 24px}
|
||||
.phase-head:hover .p-title{color:var(--indigo)}
|
||||
.p-num{font-size:32px;font-weight:800;letter-spacing:-1.5px;line-height:1;color:var(--indigo);transition:transform .3s var(--ease)}
|
||||
.phase.open .p-num{transform:scale(1.08)}
|
||||
.p-week{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
|
||||
.p-title{font-size:16px;font-weight:800;transition:color .2s}
|
||||
.p-chev{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--grey-2);transition:transform .4s var(--ease),background .3s,color .3s}
|
||||
.phase.open .p-chev{transform:rotate(180deg);background:var(--indigo);color:#fff}
|
||||
.phase-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
|
||||
.phase.open .phase-body{grid-template-rows:1fr}
|
||||
.phase-body>div{overflow:hidden;min-height:0}
|
||||
.phase-content{padding:2px 24px 24px 100px;color:var(--grey);font-size:13.5px}
|
||||
.phase-content .chip{margin:2px 4px 2px 0}
|
||||
@media(max-width:720px){.phase-head{grid-template-columns:52px 1fr 28px}.p-week{display:none}.phase-content{padding:2px 22px 22px 22px}}
|
||||
|
||||
/* FLOW (dark) */
|
||||
.flow{background:var(--dark);color:#fff;border-radius:24px;padding:42px;overflow:hidden;position:relative}
|
||||
.flow::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(70,58,203,.28);filter:blur(90px);top:-160px;right:-120px;animation:drift1 16s ease-in-out infinite alternate}
|
||||
.flow .eyebrow{color:#968EEA}
|
||||
.flow h2{color:#fff}
|
||||
.flow .sec-note{color:rgba(255,255,255,.55)}
|
||||
.flow-scroll{overflow-x:auto;position:relative;z-index:1}
|
||||
.flow-inner{min-width:820px;display:grid;grid-template-columns:1fr 52px 1.15fr 52px 1fr;align-items:center;margin-top:8px}
|
||||
.flow-col{display:grid;gap:10px}
|
||||
.flow-box{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);border-radius:12px;padding:13px 16px;transition:border-color .3s,background .3s,transform .3s var(--ease)}
|
||||
.flow-box:hover{border-color:rgba(150,142,234,.6);background:rgba(255,255,255,.09);transform:translateY(-3px)}
|
||||
.flow-box .t{font-size:13.5px;font-weight:700;color:#fff}
|
||||
.flow-box .d{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:3px}
|
||||
.flow-box.hub{border-color:rgba(150,142,234,.55);background:rgba(70,58,203,.22);padding:18px}
|
||||
.flow-box.hub .t{color:#C9C4F5;font-size:15px}
|
||||
.flow-box.hub ul{list-style:none;margin-top:10px;display:grid;gap:6px}
|
||||
.flow-box.hub li{font-size:12px;color:rgba(255,255,255,.75)}
|
||||
.flow-box.hub li::before{content:'→ ';color:#968EEA;font-weight:700}
|
||||
.conn{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
|
||||
.conn::before{content:'';position:absolute;left:6px;right:6px;top:50%;height:2px;background:repeating-linear-gradient(90deg,rgba(150,142,234,.5) 0 6px,transparent 6px 12px)}
|
||||
.conn i{position:absolute;top:50%;left:0;width:8px;height:8px;border-radius:50%;background:#968EEA;box-shadow:0 0 10px #968EEA;transform:translateY(-50%);animation:travel 1.8s linear infinite}
|
||||
.conn i:nth-child(2){animation-delay:.9s}
|
||||
@keyframes travel{from{left:2px;opacity:0}12%{opacity:1}88%{opacity:1}to{left:calc(100% - 8px);opacity:0}}
|
||||
.flow-note{margin-top:22px;font-size:12px;color:rgba(255,255,255,.45);position:relative;z-index:1}
|
||||
|
||||
/* CONTACT */
|
||||
.contact{background:var(--bg-tint);border:1px solid var(--border);border-radius:24px;padding:48px;text-align:center;position:relative;overflow:hidden}
|
||||
.contact h2{margin-bottom:6px}
|
||||
.contact .who{margin-top:18px;font-weight:800;font-size:18px}
|
||||
.contact a.mail{color:var(--indigo);font-weight:700;text-decoration:none}
|
||||
.contact .cta{margin-top:24px}
|
||||
|
||||
#toTop{position:fixed;right:22px;bottom:22px;z-index:150;width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;background:var(--indigo);color:#fff;font-size:18px;box-shadow:0 10px 26px rgba(70,58,203,.4);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease),background .2s}
|
||||
#toTop.show{opacity:1;transform:none;pointer-events:auto}
|
||||
#toTop:hover{background:#372CB0}
|
||||
|
||||
footer{border-top:1px solid var(--border);padding:26px 0 34px;font-size:12px;color:var(--grey)}
|
||||
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
|
||||
.foot-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:var(--ink)}
|
||||
.foot-logo svg{width:18px;height:18px}
|
||||
.foot-logo .logo-mark{width:21px;height:21px;animation:none}
|
||||
|
||||
@media(max-width:920px){
|
||||
.hero-grid{grid-template-columns:1fr;gap:28px}
|
||||
.grid-3{grid-template-columns:1fr}
|
||||
.stats{grid-template-columns:1fr 1fr}
|
||||
.nav-links{display:none}
|
||||
section{padding:54px 0}
|
||||
.flow,.contact{padding:26px}
|
||||
}
|
||||
@media(max-width:600px){
|
||||
.stats{grid-template-columns:1fr}
|
||||
.calc-grid{grid-template-columns:1fr}
|
||||
.mini,.yeargrid{grid-template-columns:1fr}
|
||||
}
|
||||
@media(prefers-reduced-motion:reduce){
|
||||
*,*::before,*::after{animation:none!important;transition:none!important}
|
||||
html{scroll-behavior:auto}
|
||||
.reveal,.glow-in,.head-facts div,.h1-line,.hero-content{opacity:1!important;transform:none!important;filter:none!important;text-shadow:none!important}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body id="top">
|
||||
|
||||
<div id="progress"></div>
|
||||
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||
<defs>
|
||||
<symbol id="sparkle" viewBox="0 0 100 100"><path d="M50 0 C54 32 68 46 100 50 C68 54 54 68 50 100 C46 68 32 54 0 50 C32 46 46 32 50 0 Z"/></symbol>
|
||||
<symbol id="chev" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/></symbol>
|
||||
<symbol id="car" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" d="M5 11l1.5-4A2 2 0 0 1 8.4 5.6h7.2a2 2 0 0 1 1.9 1.4L19 11m-14 0h14m-14 0a2 2 0 0 0-2 2v3h2m14-5a2 2 0 0 1 2 2v3h-2M7 16h10M6 16v2m12-2v2M7.5 13.5h.01M16.5 13.5h.01"/></symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<nav>
|
||||
<div class="wrap nav-inner">
|
||||
<a class="logo" data-goto="top">
|
||||
<img class="logo-mark" src="assets/img/talient-logo.png" alt="talient.ai Logo">
|
||||
talient.ai <span class="x">×</span> <span class="client">Auto Stahl</span>
|
||||
</a>
|
||||
<div class="nav-links">
|
||||
<a data-goto="problem" data-spy>Problem</a>
|
||||
<a data-goto="erinnerungen" data-spy>Erinnerungen</a>
|
||||
<a data-goto="warum" data-spy>Warum</a>
|
||||
<a data-goto="wege" data-spy>Betrieb</a>
|
||||
<a data-goto="preise" data-spy>Preise</a>
|
||||
<a data-goto="datenfluss" data-spy>Datenfluss</a>
|
||||
</div>
|
||||
<a class="cta nav-cta" href="mailto:niklas@talient.ai?subject=Terminanfrage%20Erinnerungssystem%20Auto%20Stahl">Termin anfragen</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header class="cover" id="cover">
|
||||
<div class="cover-pin">
|
||||
<div class="stage" aria-hidden="true">
|
||||
<img class="stage-car" src="assets/img/hero.jpg" alt="" onerror="this.style.opacity=0">
|
||||
<div class="scrim"></div>
|
||||
<div class="veil"></div>
|
||||
<div class="lamp lamp-1"></div>
|
||||
<div class="lamp lamp-2"></div>
|
||||
<div class="streak"></div>
|
||||
<div class="bloom"></div>
|
||||
</div>
|
||||
<div class="wrap hero-content">
|
||||
<span class="head-badge"><i></i>Automatisierungs-Pitch · Auto Stahl × talient.ai</span>
|
||||
<h1 style="margin-top:20px">
|
||||
<span class="h1-line">Reifen. Service.</span>
|
||||
<span class="h1-line">§57a-Pickerl.</span>
|
||||
<span class="h1-line"><span class="hl">Automatisch erinnert.</span></span>
|
||||
</h1>
|
||||
<p class="lede">Ihre Kunden verpassen keine Frist mehr — und Ihre Werkstatt keinen Termin.</p>
|
||||
<div class="head-facts">
|
||||
<div>4 Erinnerungs-Anlässe <b>vollautomatisch</b></div>
|
||||
<div>Kanal <b>E-Mail · SMS · WhatsApp</b></div>
|
||||
<div>DSGVO <b>EU-Hosting, Opt-in</b></div>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<button class="cta" data-goto="problem">Das Konzept ansehen <svg width="15" height="15" viewBox="0 0 24 24"><use href="#chev"/></svg></button>
|
||||
<button class="cta ghost" data-goto="preise">Direkt zu den Preisen</button>
|
||||
</div>
|
||||
<div><span class="scroll-cue">Scrollen <b>▼</b></span></div>
|
||||
</div>
|
||||
<div class="cover-edge" aria-hidden="true"></div>
|
||||
<div class="cover-flash" aria-hidden="true"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- 01 PROBLEM -->
|
||||
<section id="problem">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow glow-in">01 · Das Problem</span>
|
||||
<h2 class="glow-in">Niemand erinnert den Kunden.</h2>
|
||||
<p class="sec-note glow-in">Auto Stahl hat Online-Terminbuchung, Reifendepot und Servicehistorie — aber keine proaktive Ansprache. Der Kunde muss selbst dran denken. Und vergisst.</p>
|
||||
<div class="grid-3">
|
||||
<div class="card reveal">
|
||||
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span>
|
||||
<h3>Fristen werden vergessen</h3>
|
||||
<p>Reifenwechsel, Service, Pickerl — niemand hat die Termine im Kopf. Bis es zu spät ist.</p>
|
||||
</div>
|
||||
<div class="card reveal">
|
||||
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><line x1="9" y1="10" x2="15" y2="10"/></svg></span>
|
||||
<h3>Kein proaktiver Kontakt</h3>
|
||||
<p>Der Kunde muss aktiv werden statt erinnert zu werden — obwohl die Online-Terminbuchung längst existiert.</p>
|
||||
</div>
|
||||
<div class="card reveal">
|
||||
<span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span>
|
||||
<h3>Werkstatt-Umsatz entgeht</h3>
|
||||
<p>Jede vergessene Frist ist ein nicht gebuchter Termin — im margenstärksten Bereich des Autohauses.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 02 ERINNERUNGEN -->
|
||||
<section id="erinnerungen" style="background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow reveal">02 · Die Auslöser</span>
|
||||
<h2 class="reveal">Vier Erinnerungen, die sich rechnen.</h2>
|
||||
<p class="sec-note reveal">Jeder Anlass folgt einer klaren Regel — perfekt automatisierbar. Wählen Sie einen Anlass.</p>
|
||||
<div class="filterbar reveal" data-group="erm" role="group" aria-label="Erinnerungstypen">
|
||||
<button class="on" data-key="pickerl">§57a-Pickerl</button>
|
||||
<button data-key="reifen">Reifenwechsel</button>
|
||||
<button data-key="depot">Reifendepot</button>
|
||||
<button data-key="service">Service</button>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start" class="reveal erm-layout">
|
||||
<div>
|
||||
<div class="panel on" data-group="erm" data-key="pickerl">
|
||||
<span class="krit">Kritikalität: Hoch</span>
|
||||
<h3 style="font-size:22px;font-weight:800;margin-top:14px;letter-spacing:-.5px">Die §57a-Begutachtung läuft ab.</h3>
|
||||
<p style="color:var(--grey);margin-top:10px">Gesetzlich verpflichtend. Aus dem Erstzulassungsmonat berechenbar (3-2-1-Regel, ab Mai 2027 neu). Ein abgelaufenes Pickerl kostet bis <b style="color:var(--ink)">€ 10.000</b> — der stärkste Grund, rechtzeitig zu erinnern.</p>
|
||||
<dl class="mini"><div><dt>Auslöser</dt><dd>Erstzulassungsmonat + Intervall</dd></div><div><dt>Vorlauf</dt><dd>6 / 4 / 2 Wochen + Nachfrist</dd></div></dl>
|
||||
</div>
|
||||
<div class="panel" data-group="erm" data-key="reifen">
|
||||
<span class="krit">Kritikalität: Mittel-hoch</span>
|
||||
<h3 style="font-size:22px;font-weight:800;margin-top:14px;letter-spacing:-.5px">Die Saison wechselt.</h3>
|
||||
<p style="color:var(--grey);margin-top:10px">Vor der situativen Winterreifenpflicht (1.11.–15.4.) und im Frühjahr „von O bis O". Zweimal im Jahr ein perfekter Anlass für einen Werkstatttermin — inklusive Zusatzservice.</p>
|
||||
<dl class="mini"><div><dt>Auslöser</dt><dd>~1. Okt. / ~Ostern (7-°C-Regel)</dd></div><div><dt>Vorlauf</dt><dd>2–3 Wochen</dd></div></dl>
|
||||
</div>
|
||||
<div class="panel" data-group="erm" data-key="depot">
|
||||
<span class="krit">Kritikalität: Mittel</span>
|
||||
<h3 style="font-size:22px;font-weight:800;margin-top:14px;letter-spacing:-.5px">Die eingelagerten Reifen warten.</h3>
|
||||
<p style="color:var(--grey);margin-top:10px">Wer sein Reifendepot bei Auto Stahl hat, muss ohnehin zweimal im Jahr kommen. Die Erinnerung koppelt Depot-Rückholung an den Saisonwechsel — <b style="color:var(--ink)">garantierter Kundenkontakt</b>.</p>
|
||||
<dl class="mini"><div><dt>Auslöser</dt><dd>Depot-Status + Saisonwechsel</dd></div><div><dt>Vorlauf</dt><dd>mit Wechsel-Reminder</dd></div></dl>
|
||||
</div>
|
||||
<div class="panel" data-group="erm" data-key="service">
|
||||
<span class="krit">Kritikalität: Mittel</span>
|
||||
<h3 style="font-size:22px;font-weight:800;margin-top:14px;letter-spacing:-.5px">Das Service ist fällig.</h3>
|
||||
<p style="color:var(--grey);margin-top:10px">Nach Zeit oder Kilometern — je nachdem, was zuerst eintritt. Aus der Servicehistorie ableitbar, bei modernen Fahrzeugen sensorbasiert (Condition-Based Service).</p>
|
||||
<dl class="mini"><div><dt>Auslöser</dt><dd>≥ 11–12 Monate ODER km-Intervall</dd></div><div><dt>Vorlauf</dt><dd>~1 Monat</dd></div></dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="padding:22px">
|
||||
<span class="chip">So sieht's beim Kunden aus</span>
|
||||
<div class="phone" style="margin-top:18px">
|
||||
<div class="screen">
|
||||
<div class="bar"><span class="av">AS</span><div><div style="font-size:12px;font-weight:800">Auto Stahl</div><div style="font-size:10px;color:var(--grey)">SMS · jetzt</div></div></div>
|
||||
<p class="msg" id="msg-preview">Hallo Herr Stadler, das §57a-Pickerl Ihres Polestar (W-12345) läuft im September ab. Jetzt bequem Termin sichern: 👉 autostahl.at/termin</p>
|
||||
<button class="send">Termin buchen</button>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align:center;font-size:11.5px;color:var(--grey);margin-top:12px">Kanal & Text je Anlass automatisch.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="yearstrip reveal" style="margin-top:30px">
|
||||
<span class="eyebrow" style="margin-bottom:14px">Ein Jahr, automatisch getaktet</span>
|
||||
<div class="yeartrack"></div>
|
||||
<div class="yeargrid">
|
||||
<div><b>März–April</b><p>Sommerreifen + Depot</p></div>
|
||||
<div><b>laufend</b><p>Pickerl & Service (fahrzeugindividuell)</p></div>
|
||||
<div><b>Sept.–Okt.</b><p>Winterreifen + Depot</p></div>
|
||||
<div><b>vor 1.11.</b><p>Winterreifenpflicht-Hinweis</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 03 WARUM -->
|
||||
<section id="warum">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow reveal">03 · Warum das funktioniert</span>
|
||||
<h2 class="reveal">Mehr Termine. Bessere Auslastung.</h2>
|
||||
<p class="sec-note reveal">Erinnerungen wirken auf zwei Hebel: Sie holen vergessene Services zurück ins Haus — und verteilen die Termine gleichmäßiger übers Jahr.</p>
|
||||
|
||||
<p class="reveal" style="margin:26px 0 14px;font-size:13.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px"><span style="display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;font-size:12px">1</span> Mehr Servicetermine → mehr Umsatz</p>
|
||||
<div class="grid-3">
|
||||
<div class="stat reveal"><div class="num"><span data-count="54">54</span><small> %</small></div><p>der jungen Fahrzeughalter kommen noch zum Service zurück — 2023 waren es 72 %. Erinnerungen halten Kunden im Haus.</p></div>
|
||||
<div class="stat reveal"><div class="num">€ <span data-count="357">357</span></div><p>Ø-Umsatz je Wartung/Service in DE (2023, +8,5 %). Jeder zusätzlich gebuchte Termin zählt.</p></div>
|
||||
<div class="stat reveal"><div class="num"><span data-count="74">74</span><small> %</small></div><p>der Servicekunden kaufen ihr nächstes Auto beim selben Händler. Werkstattbindung sichert den Fahrzeugverkauf.</p></div>
|
||||
</div>
|
||||
|
||||
<p class="reveal" style="margin:30px 0 14px;font-size:13.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px"><span style="display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--indigo);color:#fff;font-size:12px">2</span> Bessere Auslastungssteuerung</p>
|
||||
<div class="grid-3">
|
||||
<div class="stat reveal"><div class="num"><span data-count="87">87</span><small> %</small></div><p>Ø-Werkstattauslastung in DE — rund 13 % Kapazität liegt ungenutzt. Gleichmäßige Terminverteilung hebt sie.</p></div>
|
||||
<div class="stat reveal"><div class="num">+15–20<small> %</small></div><p>höhere Technikerauslastung durch aktive Terminsteuerung, die saisonale Spitzen & Täler glättet. <span style="color:var(--grey)">(Richtwert)</span></p></div>
|
||||
<div class="stat reveal"><div class="num">5,2<small> Tage</small></div><p>Ø-Wartezeit auf einen Werkstatttermin (Volumenmarken) — 35 % wechseln deshalb zur freien Werkstatt. Verteilte Termine verkürzen sie.</p></div>
|
||||
</div>
|
||||
|
||||
<p class="src reveal">Quellen: Cox Automotive 2025 (US), ZDK/DAT-Report 2024 (DE), J.D. Power 2024 CSI (US). DACH-Zahlen (357 €, 87 %) regional belegt; US-Werte zeigen die Größenordnung — kein garantiertes Ergebnis.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 04 ZWEI WEGE -->
|
||||
<section id="wege" style="background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow reveal">04 · Betrieb</span>
|
||||
<h2 class="reveal">Rundum betreut — gehostet bei uns.</h2>
|
||||
<p class="sec-note reveal">Auto Stahl gibt die Daten frei — den kompletten Betrieb übernehmen wir. Kein internes IT-Team, kein Wartungsaufwand, keine Technik-Baustelle.</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start" class="reveal">
|
||||
<div class="card" style="padding:26px">
|
||||
<span class="chip">Komplett gehostet</span>
|
||||
<h3 style="font-size:20px;font-weight:800;margin-top:12px;letter-spacing:-.5px">Wir betreiben es für Sie.</h3>
|
||||
<p style="color:var(--grey);margin-top:9px">Hosting, Betrieb, Monitoring, Updates und Support laufen bei uns — in der EU, DSGVO-konform. Sie bekommen Ergebnisse, nicht noch ein System zum Warten.</p>
|
||||
<ul style="list-style:none;margin-top:16px;display:grid;gap:9px;font-size:13.5px">
|
||||
<li>✅ EU-Hosting inkl. Wartung & Monitoring</li>
|
||||
<li>✅ Kurze Time-to-Live — in wenigen Wochen live</li>
|
||||
<li>✅ Laufende Optimierung & Reporting</li>
|
||||
<li>✅ DSGVO-Auftragsverarbeitung (AVV nach Art. 28)</li>
|
||||
<li>✅ Fester Ansprechpartner & Support</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card" style="padding:26px">
|
||||
<span class="chip">So läuft's</span>
|
||||
<h3 style="font-size:20px;font-weight:800;margin-top:12px;letter-spacing:-.5px">Ihr Aufwand: minimal.</h3>
|
||||
<div style="margin-top:16px;display:grid;gap:12px">
|
||||
<div style="display:flex;gap:12px;align-items:flex-start"><span style="color:var(--indigo);font-weight:800;font-size:15px">01</span><div><b>Anbindung</b><div style="color:var(--grey);font-size:13px">Wir docken an Ihre Bestandsdaten bzw. Ihr DMS an.</div></div></div>
|
||||
<div style="display:flex;gap:12px;align-items:flex-start"><span style="color:var(--indigo);font-weight:800;font-size:15px">02</span><div><b>Betrieb</b><div style="color:var(--grey);font-size:13px">Erinnerungen laufen automatisch — wir überwachen & warten.</div></div></div>
|
||||
<div style="display:flex;gap:12px;align-items:flex-start"><span style="color:var(--indigo);font-weight:800;font-size:15px">03</span><div><b>Reporting</b><div style="color:var(--grey);font-size:13px">Sie sehen Termine, Auslastung & Wirkung — wir optimieren nach.</div></div></div>
|
||||
</div>
|
||||
<p style="margin-top:16px;padding:12px 14px;border-radius:12px;background:rgba(31,160,96,.06);border:1px solid rgba(31,160,96,.2);font-size:13px;color:var(--grey-2)"><b style="color:var(--green);font-weight:800">Ihr Part</b> — Daten freigeben. Den Rest machen wir.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 05 PREISE -->
|
||||
<section id="preise">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow reveal">05 · Richtwerte</span>
|
||||
<h2 class="reveal">Was es kostet.</h2>
|
||||
<p class="sec-note reveal">Bewegen Sie den Regler auf Ihre Fahrzeugzahl — die Richtwerte rechnen sich live. Alle Beträge sind Schätzungen, kein verbindliches Angebot.</p>
|
||||
<div class="calc reveal">
|
||||
<div class="slider-top">
|
||||
<div><label for="fleet" style="font-weight:700">Aktive Kundenfahrzeuge</label><div style="font-size:12px;color:var(--grey)">im Erinnerungs-System</div></div>
|
||||
<span class="slider-val" id="fleet-val">800</span>
|
||||
</div>
|
||||
<input id="fleet" class="rng" type="range" min="200" max="3000" step="50" value="800">
|
||||
<div style="display:flex;justify-content:space-between;font-size:11.5px;color:var(--grey);margin-top:6px"><span>200</span><span>3.000</span></div>
|
||||
<div class="calc-grid">
|
||||
<div class="tile"><div class="lbl">Erinnerungs-Anlässe / Jahr</div><div class="big" id="calc-events">3.200</div><div class="sub">≈ Werkstatt-Gelegenheiten</div></div>
|
||||
<div class="tile hot"><div class="lbl">Retainer · Richtwert / Monat</div><div class="big" id="calc-managed">€ 550</div><div class="sub">Betrieb, Hosting, Monitoring & Support inkl.</div></div>
|
||||
<div class="tile"><div class="lbl">Mehrumsatz-Potenzial / Jahr</div><div class="big" id="calc-revenue">€ 48.000</div><div class="sub">Annahme: 20 % buchen ein sonst verpasstes Service × Ø € 300</div></div>
|
||||
</div>
|
||||
<div class="calc-grid two">
|
||||
<div class="tile"><div class="lbl">Setup / Onboarding (einmalig)</div><div class="big">€ 4.500–9.000</div><div class="sub">Datenanbindung, Aufbau, DSGVO-Doku, Tests</div></div>
|
||||
<div class="tile"><div class="lbl">MVP-Aufwand</div><div class="big">~10–15 Tage</div><div class="sub">Start mit Pickerl + Reifenwechsel</div></div>
|
||||
</div>
|
||||
<p style="margin-top:14px;font-size:12.5px;color:var(--grey-2)"><b>Mehrere Standorte / SLA:</b> Retainer ab € 1.200/Monat. <b>SMS & WhatsApp-Versand</b> nach Verbrauch, separat durchgereicht.</p>
|
||||
<p class="disclaim">⚠️ Richtwerte zur Orientierung. Tatsächliche Kosten je nach Fahrzeugzahl, Standorten, DMS-Anbindung und Kanal-Mix.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 06 DATENFLUSS -->
|
||||
<section id="datenfluss">
|
||||
<div class="wrap">
|
||||
<div class="flow reveal">
|
||||
<span class="eyebrow">06 · Datenfluss</span>
|
||||
<h2>Wie das System arbeitet.</h2>
|
||||
<p class="sec-note">Bestehende Daten rein, Automatisierungs-Engine berechnet die Fälligkeiten, passende Nachricht raus — mit Opt-in-Prüfung vor jedem Versand.</p>
|
||||
<div class="flow-scroll">
|
||||
<div class="flow-inner">
|
||||
<div class="flow-col">
|
||||
<div class="flow-box"><div class="t">CRM / Kundendaten</div><div class="d">Kontakt + Opt-in je Kanal</div></div>
|
||||
<div class="flow-box"><div class="t">DMS / Servicehistorie</div><div class="d">km, letztes Service, Pickerl-Datum</div></div>
|
||||
<div class="flow-box"><div class="t">Reifendepot</div><div class="d">Einlagerungs-Status, Lagerplatz</div></div>
|
||||
</div>
|
||||
<div class="conn"><i></i><i></i></div>
|
||||
<div class="flow-col">
|
||||
<div class="flow-box hub">
|
||||
<div class="t">talient.ai · Automatisierungs-Engine</div>
|
||||
<ul>
|
||||
<li>Schedule-Trigger (täglich / monatlich)</li>
|
||||
<li>Fälligkeit je Anlass berechnen</li>
|
||||
<li>Opt-in-Gate: senden nur mit Einwilligung</li>
|
||||
<li>Nachricht personalisieren + Buchungslink</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="conn"><i></i><i></i></div>
|
||||
<div class="flow-col">
|
||||
<div class="flow-box"><div class="t">E-Mail (+ Kalender .ics)</div><div class="d">Details & Terminlink</div></div>
|
||||
<div class="flow-box"><div class="t">SMS</div><div class="d">dringende Erinnerung</div></div>
|
||||
<div class="flow-box"><div class="t">WhatsApp Business</div><div class="d">Rückfragen & Bestätigung</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="flow-note">Alle Zustellungen werden protokolliert (Compliance-Log). Kanal & Timing je Anlass regelbasiert.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 07 ROADMAP -->
|
||||
<section id="roadmap" style="background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)">
|
||||
<div class="wrap">
|
||||
<span class="eyebrow reveal">07 · Umsetzung</span>
|
||||
<h2 class="reveal">In vier Phasen live.</h2>
|
||||
<p class="sec-note reveal">Start mit dem größten Nutzen bei kleinstem Datenbedarf — Pickerl und Reifenwechsel sind rein datumsbasiert.</p>
|
||||
<button class="expand-all reveal" id="expand-all">Alle Phasen ausklappen</button>
|
||||
<div id="phases">
|
||||
<div class="phase open reveal"><button class="phase-head"><span class="p-num">1</span><span class="p-week">Discovery</span><span class="p-title">Daten & Machbarkeit</span><span class="p-chev"><svg width="15" height="15" viewBox="0 0 24 24"><use href="#chev"/></svg></span></button><div class="phase-body"><div><div class="phase-content">DMS-Zugriff & Datenqualität prüfen (Erstzulassung, Pickerl-Datum, km), Opt-in-Bestand klären, Kanäle festlegen. <span class="chip">Ergebnis: Machbarkeit & Datenlücken bekannt</span></div></div></div></div>
|
||||
<div class="phase reveal"><button class="phase-head"><span class="p-num">2</span><span class="p-week">MVP</span><span class="p-title">Pickerl + Reifenwechsel</span><span class="p-chev"><svg width="15" height="15" viewBox="0 0 24 24"><use href="#chev"/></svg></span></button><div class="phase-body"><div><div class="phase-content">Zwei Erinnerungstypen mit höchstem Nutzen — rein datumsbasiert, keine km-Daten nötig. Erste automatische Erinnerungen gehen live. <span class="chip">Ergebnis: System im Echtbetrieb</span></div></div></div></div>
|
||||
<div class="phase reveal"><button class="phase-head"><span class="p-num">3</span><span class="p-week">Rollout</span><span class="p-title">Service & Depot</span><span class="p-chev"><svg width="15" height="15" viewBox="0 0 24 24"><use href="#chev"/></svg></span></button><div class="phase-body"><div><div class="phase-content">Service (Zeit/km) und Reifendepot-Rückholung ergänzen, Kanäle SMS/WhatsApp erweitern. <span class="chip">Ergebnis: vollständige Abdeckung</span></div></div></div></div>
|
||||
<div class="phase reveal"><button class="phase-head"><span class="p-num">4</span><span class="p-week">Optimierung</span><span class="p-title">Reporting & Feinschliff</span><span class="p-chev"><svg width="15" height="15" viewBox="0 0 24 24"><use href="#chev"/></svg></span></button><div class="phase-body"><div><div class="phase-content">Timing-A/B, Reporting zu Buchungsrate & No-Shows, optionale Saison-Checks. <span class="chip">Ergebnis: messbare Aftersales-Wirkung</span></div></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- KONTAKT -->
|
||||
<section id="kontakt">
|
||||
<div class="wrap">
|
||||
<div class="contact reveal">
|
||||
<span class="eyebrow" style="text-align:center">Reden wir drüber</span>
|
||||
<h2>Kein Kunde, der eine Frist vergisst.</h2>
|
||||
<p style="color:var(--grey);max-width:52ch;margin:8px auto 0">Von der Datenlage bis zum ersten automatischen Reminder — wir setzen das MVP in wenigen Wochen auf.</p>
|
||||
<p class="who">Niklas Stadler · talient.ai</p>
|
||||
<a class="mail" href="mailto:niklas@talient.ai">niklas@talient.ai</a>
|
||||
<div><a class="cta" href="mailto:niklas@talient.ai?subject=Terminanfrage%20Erinnerungssystem%20Auto%20Stahl">Termin anfragen <svg width="15" height="15" viewBox="0 0 24 24"><use href="#chev"/></svg></a></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrap foot-inner">
|
||||
<span class="foot-logo"><img class="logo-mark" src="assets/img/talient-logo.png" alt=""> talient.ai <span style="color:var(--grey);font-weight:600">× Auto Stahl</span></span>
|
||||
<span>Automatisierungs-Pitch · Reifen · Service · §57a-Pickerl</span>
|
||||
<a href="mailto:niklas@talient.ai" style="text-decoration:none">niklas@talient.ai</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<button id="toTop" aria-label="Nach oben">↑</button>
|
||||
|
||||
<script>
|
||||
window.addEventListener('load', function(){
|
||||
const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
|
||||
|
||||
/* smooth scroll (Lenis) */
|
||||
let lenis=null;
|
||||
if(window.Lenis && !reduce){ lenis=new Lenis({lerp:.1}); const raf=t=>{lenis.raf(t);requestAnimationFrame(raf);}; requestAnimationFrame(raf); if(window.ScrollTrigger) lenis.on('scroll',()=>ScrollTrigger.update()); document.documentElement.style.scrollBehavior='auto'; }
|
||||
|
||||
/* nav / goto */
|
||||
function goto(id){ const el = id==='top'?document.body:document.getElementById(id); if(!el) return; const y = id==='top'?0:el.getBoundingClientRect().top+window.scrollY-56; if(lenis) lenis.scrollTo(y); else window.scrollTo({top:y, behavior: reduce?'auto':'smooth'}); }
|
||||
document.querySelectorAll('[data-goto]').forEach(b=>b.addEventListener('click',()=>goto(b.dataset.goto)));
|
||||
|
||||
/* progress */
|
||||
const prog=document.getElementById('progress');
|
||||
function setProg(){ const h=document.documentElement.scrollHeight-innerHeight; prog.style.width=(h>0?Math.min(1,Math.max(0,scrollY/h)):0)*100+'%'; }
|
||||
addEventListener('scroll',setProg,{passive:true}); setProg();
|
||||
|
||||
/* reveal */
|
||||
const rIO=new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');rIO.unobserve(e.target);}}),{threshold:.12,rootMargin:'0px 0px -6% 0px'});
|
||||
document.querySelectorAll('.reveal').forEach((el,i)=>{ el.style.transitionDelay=reduce?'0ms':Math.min((i%6)*70,300)+'ms'; rIO.observe(el); });
|
||||
/* glow-in (nächster Part) triggert früher — Text entsteht schon, während das Auto noch leicht sichtbar ist */
|
||||
const gIO=new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');gIO.unobserve(e.target);}}),{threshold:0,rootMargin:'0px 0px 14% 0px'});
|
||||
document.querySelectorAll('.glow-in').forEach((el,i)=>{ el.style.transitionDelay=reduce?'0ms':Math.min(i*90,270)+'ms'; gIO.observe(el); });
|
||||
|
||||
/* counters */
|
||||
function count(el){ const t=parseInt(el.dataset.count,10); if(reduce){el.textContent=t;return;} const s=performance.now(),d=1200; (function tick(n){const p=Math.min((n-s)/d,1);el.textContent=Math.round(t*(1-Math.pow(1-p,3)));if(p<1)requestAnimationFrame(tick);})(performance.now()); }
|
||||
const cIO=new IntersectionObserver((es)=>es.forEach(e=>{if(e.isIntersecting){count(e.target);cIO.unobserve(e.target);}}),{threshold:.6});
|
||||
document.querySelectorAll('[data-count]').forEach(el=>cIO.observe(el));
|
||||
|
||||
/* scroll-spy */
|
||||
const spies=[...document.querySelectorAll('.nav-links a[data-spy]')];
|
||||
const secs=spies.map(a=>document.getElementById(a.dataset.goto)).filter(Boolean);
|
||||
const sIO=new IntersectionObserver((es)=>es.forEach(e=>{ if(e.isIntersecting){ spies.forEach(a=>a.classList.toggle('active', a.dataset.goto===e.target.id)); } }),{rootMargin:'-45% 0px -50% 0px'});
|
||||
secs.forEach(s=>sIO.observe(s));
|
||||
|
||||
/* generic tabs */
|
||||
const msgs={
|
||||
pickerl:'Hallo Herr Stadler, das §57a-Pickerl Ihres Polestar (W-12345) läuft im September ab. Jetzt bequem Termin sichern: 👉 autostahl.at/termin',
|
||||
reifen:'Hallo Herr Stadler, die Winterreifen-Saison startet bald. Reifenwechsel für Ihren Polestar jetzt reservieren: 👉 autostahl.at/termin',
|
||||
depot:'Hallo Herr Stadler, Ihre eingelagerten Winterreifen sind bereit. Termin zum Umstecken sichern: 👉 autostahl.at/termin',
|
||||
service:'Hallo Herr Stadler, das Service Ihres Polestar ist fällig. Wunschtermin online wählen: 👉 autostahl.at/termin'
|
||||
};
|
||||
const msgEl=document.getElementById('msg-preview');
|
||||
document.querySelectorAll('.filterbar[data-group]').forEach(bar=>{
|
||||
const group=bar.dataset.group;
|
||||
bar.querySelectorAll('button').forEach(btn=>btn.addEventListener('click',()=>{
|
||||
bar.querySelectorAll('button').forEach(b=>b.classList.toggle('on',b===btn));
|
||||
const key=btn.dataset.key;
|
||||
document.querySelectorAll('.panel[data-group="'+group+'"]').forEach(p=>p.classList.toggle('on',p.dataset.key===key));
|
||||
if(group==='erm' && msgEl && msgs[key]) msgEl.textContent=msgs[key];
|
||||
}));
|
||||
});
|
||||
|
||||
/* price calc */
|
||||
const fleet=document.getElementById('fleet');
|
||||
if(fleet){
|
||||
const fv=document.getElementById('fleet-val'),ev=document.getElementById('calc-events'),mg=document.getElementById('calc-managed'),rev=document.getElementById('calc-revenue');
|
||||
const eur=n=>'€ '+Math.round(n).toLocaleString('de-DE');
|
||||
const fee=v=>v<=500?350:v<=1500?550:850;
|
||||
function upd(){ const v=+fleet.value; fleet.style.setProperty('--p',((v-200)/2800*100)+'%'); fv.textContent=v.toLocaleString('de-DE'); ev.textContent=(v*4).toLocaleString('de-DE'); mg.textContent=eur(fee(v)); rev.textContent=eur(v*0.20*300); }
|
||||
fleet.addEventListener('input',upd); upd();
|
||||
}
|
||||
|
||||
/* phase accordion */
|
||||
const phases=[...document.querySelectorAll('.phase')];
|
||||
phases.forEach(p=>p.querySelector('.phase-head').addEventListener('click',()=>p.classList.toggle('open')));
|
||||
const ea=document.getElementById('expand-all');
|
||||
if(ea) ea.addEventListener('click',()=>{ const allOpen=phases.every(p=>p.classList.contains('open')); phases.forEach(p=>p.classList.toggle('open',!allOpen)); ea.textContent=allOpen?'Alle Phasen ausklappen':'Alle Phasen einklappen'; });
|
||||
|
||||
/* back to top */
|
||||
const tt=document.getElementById('toTop');
|
||||
addEventListener('scroll',()=>tt.classList.toggle('show',scrollY>600),{passive:true});
|
||||
tt.addEventListener('click',()=>goto('top'));
|
||||
|
||||
/* ---- Cinematic Scroll-Scrub: Kamera-Push-in IN die Scheinwerfer → Überstrahlung ---- */
|
||||
(function(){
|
||||
const cover=document.getElementById('cover'); if(!cover) return;
|
||||
const pin=cover.querySelector('.cover-pin');
|
||||
const car=cover.querySelector('.stage-car'), veil=cover.querySelector('.veil'),
|
||||
streak=cover.querySelector('.streak'), bloom=cover.querySelector('.bloom'),
|
||||
flash=cover.querySelector('.cover-flash'), content=cover.querySelector('.hero-content'),
|
||||
cue=cover.querySelector('.scroll-cue'), edge=cover.querySelector('.cover-edge'), lamps=[...cover.querySelectorAll('.lamp')];
|
||||
const cl=x=>Math.max(0,Math.min(1,x));
|
||||
/* Scheinwerfer-Positionen als Bildanteile (2500×1407) → Glow/Bloom bild-genau, object-fit:cover-fest */
|
||||
const IW=2500, IH=1407, HL_L=[0.585,0.742], HL_R=[0.640,0.726], HL_M=[0.6125,0.734];
|
||||
function computeFX(){
|
||||
const r=pin.getBoundingClientRect(), W=r.width, H=r.height;
|
||||
if(!W||!H) return;
|
||||
const s=Math.max(W/IW,H/IH), rw=IW*s, rh=IH*s, Lx=(W-rw)/2, Ly=(H-rh)/2;
|
||||
const P=f=>[ (Lx+f[0]*rw)/W*100, (Ly+f[1]*rh)/H*100 ];
|
||||
const m=P(HL_M), l=P(HL_L), rr=P(HL_R), st=cover.style;
|
||||
st.setProperty('--hlx',m[0]+'%'); st.setProperty('--hly',m[1]+'%');
|
||||
st.setProperty('--hl1x',l[0]+'%'); st.setProperty('--hl1y',l[1]+'%');
|
||||
st.setProperty('--hl2x',rr[0]+'%');st.setProperty('--hl2y',rr[1]+'%');
|
||||
}
|
||||
computeFX();
|
||||
if(!(window.gsap && window.ScrollTrigger) || reduce) return; /* Fallback: statischer, lesbarer Hero */
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
cover.classList.add('scrub-on');
|
||||
computeFX();
|
||||
function apply(p){
|
||||
const s=1+1.12*Math.pow(p,1.06); /* Kamera-Push-in in die Scheinwerfer */
|
||||
car.style.transform='scale('+s+')';
|
||||
veil.style.opacity=String(0.82-0.34*cl(p/0.5));
|
||||
const lp=cl((p-0.10)/0.24); /* Scheinwerfer gehen früh an + wachsen mit */
|
||||
lamps.forEach(l=>{ l.style.opacity=String(lp); l.style.transform='translate(-50%,-50%) scale('+(0.5+s*0.5)+')'; });
|
||||
const gp=cl((p-0.32)/0.34); /* Überstrahlung wächst aus den Scheinwerfern */
|
||||
streak.style.opacity=String(gp*0.85); streak.style.transform='translate(-50%,-50%) scaleX('+(0.4+gp*1.5)+')';
|
||||
bloom.style.opacity=String(gp*0.9*(1-cl((p-0.92)/0.08)));
|
||||
bloom.style.transform='translate(-50%,-50%) scale('+(0.3+gp*3.0)+')';
|
||||
content.style.opacity=String(1-cl((p-0.18)/0.20)); /* Hero-Text blendet früh aus */
|
||||
content.style.transform='translateY('+(-p*34)+'px)';
|
||||
if(edge) edge.style.opacity=String(cl((p-0.30)/0.40)); /* unterer Weißverlauf → sanfter Übergang */
|
||||
flash.style.opacity=String(cl((p-0.48)/0.45)*0.5); /* gedeckelt: Auto bleibt leicht im Hintergrund sichtbar */
|
||||
if(cue) cue.style.opacity=String(cl(1-p*7));
|
||||
}
|
||||
apply(0);
|
||||
ScrollTrigger.create({trigger:cover,start:'top top',end:'bottom bottom',scrub:0.6,onUpdate:s=>apply(s.progress)});
|
||||
addEventListener('resize',()=>{ computeFX(); ScrollTrigger.refresh(); });
|
||||
if(document.fonts) document.fonts.ready.then(()=>{ computeFX(); ScrollTrigger.refresh(); });
|
||||
})();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user