Daniel/ndsolutionswebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor hero bento grid and integrate WaaS ROI calculator

Browse Source
This commit is contained in:
DanielS
2026-07-18 23:58:39 +02:00
parent 31007040e5
commit 0e3688c431
1 changed files with 76 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/HeroAndLiquidGlass.astro
View File

@@ -16,7 +16,7 @@ const heroTemplates = [
--- ---
<!-- Hero-Sektion: Hybrid Liquid Glass Style & Aurora Glow --> <!-- Hero-Sektion: Hybrid Liquid Glass Style & Aurora Glow -->
<section class="relative pt-36 pb-24 overflow-hidden bg-slate-50 dark:bg-[#070A13] transition-colors duration-300"> <section class="relative pt-36 pb-24 overflow-hidden bg-slate-50 dark:bg-[#0B0F19] transition-colors duration-300">
<!-- Weiche, pastellfarbene Aurora Glows im Hintergrund (Light/Dark angepasst) --> <!-- Weiche, pastellfarbene Aurora Glows im Hintergrund (Light/Dark angepasst) -->
<div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-sky-200/50 dark:bg-sky-500/10 blur-[130px] rounded-full pointer-events-none transition-colors duration-300 animate-drift"></div> <div class="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-sky-200/50 dark:bg-sky-500/10 blur-[130px] rounded-full pointer-events-none transition-colors duration-300 animate-drift"></div>
<div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-indigo-200/40 dark:bg-indigo-500/10 blur-[150px] rounded-full pointer-events-none transition-colors duration-300 animate-drift-delayed"></div> <div class="absolute bottom-[-10%] right-[-10%] w-[60%] h-[60%] bg-indigo-200/40 dark:bg-indigo-500/10 blur-[150px] rounded-full pointer-events-none transition-colors duration-300 animate-drift-delayed"></div>
@@ -31,9 +31,9 @@ const heroTemplates = [
<div class="lg:col-span-7 space-y-8"> <div class="lg:col-span-7 space-y-8">
<h1 class="text-4xl sm:text-7xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1] transition-colors duration-300"> <h1 class="text-4xl sm:text-7xl font-extrabold tracking-tight text-slate-900 dark:text-white leading-[1.1] transition-colors duration-300">
Sorgenfreies Hosting <br/> Ihre Premium-Website. <br/>
<span class="text-sky-600 dark:text-sky-400"> <span class="text-sky-600 dark:text-sky-400">
für Ihre Website. Im WaaS-Abonnement.
</span> </span>
</h1> </h1>
@@ -164,7 +164,7 @@ const heroTemplates = [
</section> </section>
<!-- Hauptinhalte: Elegantes Hybrid-Liquid Layout (Echtes Handwerk, kein KI-Standard-Raster) --> <!-- Hauptinhalte: Elegantes Hybrid-Liquid Layout (Echtes Handwerk, kein KI-Standard-Raster) -->
<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300"> <section class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
<div class="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div> <div class="absolute inset-0 opacity-[0.02] pointer-events-none bg-[radial-gradient(#000_1px,transparent_1px)] dark:bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
@@ -197,11 +197,11 @@ const heroTemplates = [
</div> </div>
</div> </div>
<!-- Liquid Glass Service Grid --> <!-- Liquid Glass Bento Grid (3-Säulen-Architektur) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1: Webdesign --> <!-- Card 1: WaaS Premium Webdesign (Breit: col-span-2) -->
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal"> <div class="relative md:col-span-2 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
@@ -209,16 +209,19 @@ const heroTemplates = [
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6"> <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
<svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg> <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24V488c0 13.3 10.7 24 24 24s24-10.7 24-24V24zM128 64c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V256c0-17.7-14.3-32-32-32H128zm0 160c-17.7 0-32 14.3-32 32v48c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V416c0-17.7-14.3-32-32-32H128z"/></svg>
</div> </div>
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Sorgenfrei-Hosting</h3> <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Website-as-a-Service (WaaS)</h3>
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300"> <p class="text-slate-600 dark:text-zinc-400 text-sm leading-relaxed transition-colors duration-300">
Deutsche Server, tägliche Backups und SSL-Verschlüsselung. Ihr Internetauftritt ist rundum abgesichert im monatlichen Abo. Wir erstellen Ihre neue, verkaufsstarke Premium-Website komplett schlüsselfertig. Keine hohen Einmalkosten. Für eine faire monatliche Pauschale erhalten Sie Design, Programmierung, Hosting, SSL-Verschlüsselung sowie tägliche Datensicherungen und Updates.
</p> </p>
</div> </div>
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">100% Regelkonform</span> <div class="flex justify-between items-center mt-6 pt-4 border-t border-slate-100 dark:border-white/5">
<span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">All-Inclusive ab 49€ / Monat</span>
<span class="text-xs font-bold text-sky-600 dark:text-sky-400">Festpreisgarantie</span>
</div>
</div> </div>
<!-- Card 2: SEO --> <!-- Card 2: Lokale Sichtbarkeit (Schmal: col-span-1) -->
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal"> <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
@@ -226,73 +229,94 @@ const heroTemplates = [
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6"> <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
<svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> <svg class="w-5 h-5 fill-current" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
</div> </div>
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokale Sichtbarkeit</h3> <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lokales SEO</h3>
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300"> <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
Google-Optimierung für Ihre Stadt. Damit Kunden Sie finden und nicht die Konkurrenz. Wir optimieren Ihre Präsenz gezielt für Ihre Region. Kunden finden Sie direkt bei der Google-Suche vor Ort.
</p> </p>
</div> </div>
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Google-Dominanz</span> <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Lokale Dominanz</span>
</div> </div>
<!-- Card 3: Hosting --> <!-- Card 3: DSGVO-Sicherheit (Schmal: col-span-1) -->
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal"> <div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal">
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
<div> <div>
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6"> <div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6">
<svg class="w-5 h-5 fill-current" viewBox="0 0 640 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M64 96c0-35.3 28.7-64 64-64H512c35.3 0 64 28.7 64 64V352H512V96H128V352H64V96zM0 403.2C0 392.6 8.6 384 19.2 384H620.8c10.6 0 19.2 8.6 19.2 19.2c0 42.4-34.4 76.8-76.8 76.8H76.8C34.4 480 0 445.6 0 403.2zM288 432c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304c-8.8 0-16 7.2-16 16z"/></svg> <svg class="w-5 h-5 fill-current" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>
</div> </div>
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Webdesign Inklusive</h3> <h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">100% DSGVO-sicher</h3>
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300"> <p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
Noch keine eigene Website? Wir erstellen Ihren neuen, optimierten Internetauftritt direkt passend zum Hosting dazu. Absolute Rechtssicherheit durch <i>Zero Third-Party Requests</i>. Alle Assets werden lokal geladen. Keine US-Serverabfragen, keine Abmahnfallen.
</p> </p>
</div> </div>
<span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Codeschreinerei</span> <span class="text-[9px] font-mono text-slate-400 dark:text-zinc-600 mt-6 tracking-wider">Zero Third-Party</span>
</div> </div>
<!-- Card 4: Lighthouse Perfekt --> <!-- Card 4: ROI-Rechner (Breit: col-span-2) -->
<div class="relative rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-transparent p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[260px] shadow-sm hover:shadow-md reveal"> <div class="relative md:col-span-2 rounded-2xl border border-white/80 dark:border-white/[0.06] bg-white/40 dark:bg-slate-900/10 p-8 backdrop-blur-xl hover:border-sky-300 dark:hover:border-sky-500/20 hover:bg-white/60 dark:hover:bg-slate-950/20 transition-all duration-300 group flex flex-col justify-between min-h-[380px] shadow-sm hover:shadow-md reveal">
<span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 left-3 w-1.5 h-1.5 border-t border-l border-slate-300 dark:border-zinc-700/50"></span>
<span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span> <span class="absolute top-3 right-3 w-1.5 h-1.5 border-t border-r border-slate-300 dark:border-zinc-700/50"></span>
<div> <div>
<div class="w-10 h-10 rounded bg-sky-50 border border-sky-100 dark:bg-sky-400/5 dark:border-sky-400/10 flex items-center justify-center text-sky-600 dark:text-sky-400 group-hover:border-sky-300 dark:group-hover:border-sky-400/30 transition-all duration-300 mb-6"> <h3 class="text-xl font-bold text-slate-950 dark:text-white mb-4 uppercase tracking-tight">WaaS ROI-Rechner</h3>
<svg class="w-5 h-5 text-sky-600 dark:text-sky-400 stroke-[1.5]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"> <p class="text-slate-600 dark:text-zinc-400 text-xs mb-6 leading-relaxed">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 21m0 0l-.813-5.096L3 15.187m6 5.813a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5zM19.071 5.929a10 10 0 00-14.142 0M17.657 7.343a8 8 0 00-11.314 0M16.243 8.757a6 6 0 00-8.486 0M19.071 19.071L12 12" /> Rechnen Sie aus, wie viel Geld und wertvolle Zeit Sie im Vergleich zu traditionellen Einmalkäufen sparen.
</svg>
</div>
<h3 class="text-lg font-bold text-slate-950 dark:text-white mb-2 uppercase tracking-tight transition-colors duration-300">Lighthouse Perfekt</h3>
<p class="text-slate-600 dark:text-zinc-400 text-xs leading-relaxed transition-colors duration-300">
Wir programmieren so sauber, dass wir regelmäßig die Bestnote 100/100 im Google Speed Index erzielen.
</p> </p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="space-y-4">
<div>
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-cost">Aktuelle Web-Kosten (Jahr in €):</label>
<input type="number" id="roi-cost" value="600" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
</div>
<div>
<label class="block text-[10px] font-bold text-slate-500 dark:text-zinc-400 uppercase mb-1" for="roi-hours">Eigenleistung Wartung (Std/Monat):</label>
<input type="number" id="roi-hours" value="4" class="w-full bg-white dark:bg-zinc-950 border border-slate-200 dark:border-brand-darkBorder rounded p-2.5 text-xs text-slate-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-sky-500" />
</div>
</div>
<div class="bg-sky-500/5 border border-sky-500/10 dark:border-sky-500/5 p-6 rounded-xl flex flex-col justify-center">
<span class="text-[10px] font-mono text-slate-400 dark:text-zinc-500 uppercase tracking-wider">Ersparnis mit N&D WaaS:</span>
<p class="text-3xl font-extrabold text-sky-600 dark:text-sky-400 mt-2" id="roi-result">0 € / Jahr</p>
<p class="text-xs text-emerald-600 dark:text-emerald-400 mt-1 font-medium" id="roi-time">0 Stunden Lebenszeit zurück</p>
</div>
</div>
</div> </div>
<div class="flex justify-between items-baseline mt-6 pt-4 border-t border-slate-100 dark:border-white/5"> <script is:inline>
<span class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">100 / 100</span> (function() {
<span class="text-[9px] font-mono text-emerald-600 dark:text-emerald-400 uppercase tracking-widest font-bold">BEST SCORE</span> const costInput = document.getElementById('roi-cost');
</div> const hoursInput = document.getElementById('roi-hours');
</div> const resultText = document.getElementById('roi-result');
const timeText = document.getElementById('roi-time');
</div> function calc() {
const cost = parseFloat(costInput.value) || 0;
const hours = parseFloat(hoursInput.value) || 0;
const waasYear = 99 * 12;
const currentTotalYear = cost + (hours * 50 * 12);
const saving = Math.max(0, currentTotalYear - waasYear);
<!-- Showcase-Link Callout --> resultText.textContent = `${saving.toLocaleString('de-DE')} € / Jahr`;
<div class="mt-16 text-center reveal"> timeText.textContent = `${hours * 12} Stunden Lebenszeit zurück / Jahr`;
<div class="inline-flex flex-col sm:flex-row items-center gap-4 p-4 rounded-2xl border border-white/80 dark:border-white/5 bg-white/30 dark:bg-slate-950/20 backdrop-blur-md shadow-sm"> }
<span class="text-xs text-slate-600 dark:text-zinc-400">
Sie suchen Inspiration? Entdecken Sie unsere 20 maßgeschneiderten Design-Vorlagen. if (costInput && hoursInput && resultText && timeText) {
</span> costInput.addEventListener('input', calc);
<a href="/templates" class="inline-flex items-center gap-2 text-xs font-bold text-sky-600 dark:text-sky-400 hover:text-sky-700 dark:hover:text-white transition-colors duration-300"> hoursInput.addEventListener('input', calc);
Design-Vorlagen ansehen calc();
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 h-3 fill-current" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg> }
</a> })();
</script>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<!-- FAQ Sektion im Hybrid Liquid Glass Look --> <!-- FAQ Sektion im Hybrid Liquid Glass Look -->
<section class="py-24 bg-slate-50 dark:bg-[#070A13] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300"> <section class="py-24 bg-slate-50 dark:bg-[#0B0F19] relative border-t border-slate-100 dark:border-white/5 transition-colors duration-300">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="text-center mb-16"> <div class="text-center mb-16">
<h2 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase"> <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white tracking-tight uppercase">