:root {
            --nav-height: 6rem;
        }

        /* bei Bedarf anpassen */
        html {

            scroll-behavior: smooth;
        }

        /* Navigation fixieren und über dem Hero halten */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
        }

        /* Hero-Inhalt unter der Navigationsleiste platzieren */
        header {
            padding-top: var(--nav-height);
            min-height: calc(100vh - var(--nav-height));
        }

        body {
            font-family: 'Inter', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Custom Animations */
        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(60px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-up {
            opacity: 0;
            animation: fadeUp 0.7s ease-out forwards;
        }

        #main-nav .container {
            transform: translateY(-100%);
            opacity: 0;
            animation: slideDown 0.7s ease-out forwards;
            animation-delay: 0.8s;
        }

        @keyframes slideDown {
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }


        .delay-100 {
            animation-delay: 0.1s;
        }

        .delay-300 {
            animation-delay: 0.3s;
        }

        .delay-800 {
            animation-delay: 0.8s;
        }

        .delay-1000 {
            animation-delay: 1s;
        }

        @keyframes reveal-left-to-right {
            0% {
                width: 100%;
                left: 0;
            }

            100% {
                width: 0;
                left: 100%;
            }
        }

        #page-reveal {
            animation: reveal-left-to-right 0.8s ease-out forwards;
        }