/* Inter (SIL Open Font License 1.1), lokal ausgeliefert, siehe fonts/LICENSE-Inter.txt */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/inter-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400.woff2') format('woff2'); }
        /* Grundlegende Reset- und Fullscreen-Styles für maximale Immersion */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #050506;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            user-select: none;
            -webkit-user-select: none;
        }

        /* Kompakter, sanfter Glow in warmem Sandton hinter dem schwarzen Logo */
        @keyframes cosmicPulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.78;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.06);
                opacity: 0.94;
            }
        }

        @keyframes coreGlowPulse {
            0%, 100% {
                filter: drop-shadow(0 0 12px rgba(214, 194, 168, 0.55))
                        drop-shadow(0 0 28px rgba(196, 173, 144, 0.28));
            }
            50% {
                filter: drop-shadow(0 0 16px rgba(226, 207, 182, 0.72))
                        drop-shadow(0 0 38px rgba(204, 182, 154, 0.38));
            }
        }

        .ambient-sand-halo {
            position: absolute;
            top: 46%;
            left: 50%;
            width: min(76vw, 560px);
            height: min(26vw, 175px);
            transform: translate(-50%, -50%);
            background: radial-gradient(
                ellipse at center,
                rgba(222, 203, 178, 0.42) 0%,
                rgba(206, 185, 158, 0.22) 38%,
                rgba(185, 164, 138, 0.06) 62%,
                rgba(5, 5, 6, 0) 76%
            );
            filter: blur(18px);
            pointer-events: none;
            animation: cosmicPulse 7s ease-in-out infinite;
            z-index: 5;
        }

        .logo-wrapper {
            animation: coreGlowPulse 7s ease-in-out infinite;
            transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* Exakt auf Logobreite gesperrte Kapitälchen */
        .marketing-justified {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-top: clamp(0.85rem, 2.2vw, 1.35rem);
            padding-left: 1.4%;
            padding-right: 1.4%;
            font-size: clamp(0.62rem, 1.15vw, 0.85rem);
            font-weight: 300;
            color: rgba(222, 206, 185, 0.72);
            text-transform: uppercase;
            text-shadow: 0 0 14px rgba(214, 194, 168, 0.3);
        }
    

/* Ersatz fuer die vorher per Tailwind gesetzten Klassen */
body { position: relative; width: 100vw; height: 100vh; background-color: #050506; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#cosmosCanvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#logoContainer { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 1.5rem; pointer-events: none; }
.logo-block { width: 74vw; max-width: 540px; min-width: 230px; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 640px)  { .logo-block { width: 58vw; } }
@media (min-width: 768px)  { .logo-block { width: 46vw; } }
@media (min-width: 1024px) { .logo-block { width: 38vw; } }
.logo-wrapper { width: 100%; }
.logo-wrapper svg { width: 100%; height: auto; overflow: visible; }

/* Hintergrund langsam einblenden: schwarzer Vorhang liegt ueber Canvas und Glow, unter Logo und Untertitel */
#vorhang { position: fixed; inset: 0; z-index: 8; background: #050506; pointer-events: none; animation: vorhangAus 4.5s ease-in-out 0.4s forwards; }
@keyframes vorhangAus { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #vorhang { display: none; } }