feat: Hintergrund-Animation 'Background Grey Wave' als Fullscreen-Layer

Lottie-Animation fixed hinter allen Inhalten, 100vw/100vh skaliert.
Header mit Glassmorphism-Effekt (backdrop-filter blur) damit Inhalt
beim Scrollen lesbar bleibt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Ferdinand
2026-04-03 16:33:52 +02:00
parent cf31d6bbd2
commit c63dfbace4
2 changed files with 30 additions and 1 deletions

View File

@@ -9,8 +9,24 @@ body {
min-height: 100vh;
}
#lottie-bg {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
}
#lottie-bg svg {
width: 100% !important;
height: 100% !important;
}
header {
background: #fff;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid #ddd;
padding: 1rem 1.5rem;
position: sticky;
@@ -18,6 +34,11 @@ header {
z-index: 10;
}
main {
position: relative;
z-index: 1;
}
header h1 { font-size: 3rem; margin-bottom: 0; }
nav { display: flex; gap: 0.5rem; }