/* ========================================
   Waves of Infinity - Cinematic Stylesheet
   Enhanced Edition
   ======================================== */

:root {
    --color-bg: #05050a;
    --color-bg-secondary: #0d0d15;
    --color-bg-tertiary: #141420;
    --color-text: #f0f0f5;
    --color-text-muted: #7a7a8c;
    --color-accent: #d4af37;
    --color-accent-light: #f0d060;
    --color-accent-glow: rgba(212, 175, 55, 0.4);
    --color-cosmic: #0f0f1a;
    --color-cosmic-purple: #1a1025;
    --color-cosmic-blue: #0a1520;
    --font-display: 'Cinzel', serif;
    --font-body: 'Raleway', sans-serif;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: #020204;
    color: var(--color-text);
    line-height: 1.7;
    overflow-x: hidden;
}

/* Logo Cursor - versteckt wenn custom cursor aktiv */
body.cursor-active {
    cursor: none;
}

body.cursor-active a,
body.cursor-active button:not(.enter-btn),
body.cursor-active .platform-link,
body.cursor-active .social-link,
body.cursor-active .sound-toggle,
body.cursor-active [role="button"],
body.cursor-active [style*="cursor"],
body.cursor-active svg {
    cursor: none !important;
}

/* Custom Cursor mit Glow und Atmen-Effekt */
.custom-cursor {
    position: fixed;
    width: 64px;
    height: 64px;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    background-image: url('../img/cursor-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8))
            drop-shadow(0 0 15px rgba(240, 208, 96, 0.5))
            drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));
    animation: cursorBreathing 3s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.custom-cursor.visible {
    opacity: 1;
}

/* Keine Transition auf Position - Cursor folgt Maus sofort */

.custom-cursor.hover {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 1))
            drop-shadow(0 0 20px rgba(240, 208, 96, 0.7))
            drop-shadow(0 0 35px rgba(212, 175, 55, 0.5));
}

@keyframes cursorBreathing {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.8))
                drop-shadow(0 0 15px rgba(240, 208, 96, 0.5))
                drop-shadow(0 0 25px rgba(212, 175, 55, 0.3));
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(212, 175, 55, 1))
                drop-shadow(0 0 22px rgba(240, 208, 96, 0.7))
                drop-shadow(0 0 35px rgba(212, 175, 55, 0.5));
        transform: translate(-50%, -50%) scale(1.05);
    }
}

/* Cursor Trail - Goldener Kometenschweif */
.cursor-trail-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99999;
    overflow: hidden;
}

.cursor-trail {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(240, 208, 96, 0.9) 0%,
        rgba(212, 175, 55, 0.6) 40%,
        rgba(212, 175, 55, 0) 100%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 8px rgba(240, 208, 96, 0.8),
        0 0 16px rgba(212, 175, 55, 0.4);
}

/* Permanente Spur - feine goldene Linie die sanft verblasst */
.cursor-trail-permanent {
    position: absolute;
    width: 0.5px;
    height: 0.5px;
    border-radius: 50%;
    background: rgba(240, 208, 96, 0.5);
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0.5px rgba(240, 208, 96, 0.4),
        0 0 1px rgba(212, 175, 55, 0.15);
    opacity: 0.45;
    animation: trailFadeOut 1.75s ease-in-out forwards;
}

@keyframes trailFadeOut {
    0% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
    }
    40% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }
}

/* Intensiver Trail für finalen Abstieg */
.cursor-trail-intense {
    width: 2px;
    height: 2px;
    background: rgba(240, 208, 96, 0.9);
    box-shadow:
        0 0 3px rgba(240, 208, 96, 0.8),
        0 0 6px rgba(212, 175, 55, 0.5),
        0 0 10px rgba(212, 175, 55, 0.3);
    opacity: 1;
    animation: trailFadeOutIntense 2.5s ease-in-out forwards;
}

@keyframes trailFadeOutIntense {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    30% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
}

/* ========================================
   Cosmic Universe Background
   ======================================== */

.stars-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background:
        /* Deep space base */
        radial-gradient(ellipse at 20% 20%, rgba(25, 10, 40, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(10, 25, 50, 0.8) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(5, 5, 15, 1) 0%, #030308 100%);
}

/* Nebula Layer 1 - Purple/Magenta */
.stars-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 15% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse at 85% 20%, rgba(75, 0, 130, 0.12) 0%, transparent 35%),
        radial-gradient(ellipse at 60% 70%, rgba(148, 0, 211, 0.1) 0%, transparent 45%),
        radial-gradient(ellipse at 30% 80%, rgba(186, 85, 211, 0.08) 0%, transparent 30%);
    animation: nebulaMove1 120s ease-in-out infinite;
}

/* Nebula Layer 2 - Blue/Cyan */
.stars-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse at 70% 40%, rgba(0, 100, 150, 0.12) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 60%, rgba(0, 150, 200, 0.1) 0%, transparent 35%),
        radial-gradient(ellipse at 90% 70%, rgba(30, 144, 255, 0.08) 0%, transparent 30%),
        radial-gradient(ellipse at 40% 20%, rgba(0, 191, 255, 0.06) 0%, transparent 25%);
    animation: nebulaMove2 150s ease-in-out infinite;
}

@keyframes nebulaMove1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-5%, -3%) rotate(1deg); }
    50% { transform: translate(-8%, -5%) rotate(0deg); }
    75% { transform: translate(-3%, -2%) rotate(-1deg); }
}

@keyframes nebulaMove2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-10%, -5%) rotate(-1deg); }
    66% { transform: translate(-5%, -8%) rotate(1deg); }
}

/* Stars Layer - Small */
.stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        /* White stars */
        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 200px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 250px 150px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 350px 180px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 380px 30px, rgba(255,255,255,0.7), transparent),
        /* Gold accent stars */
        radial-gradient(1.5px 1.5px at 180px 100px, rgba(212,175,55,0.8), transparent),
        radial-gradient(1.5px 1.5px at 320px 200px, rgba(212,175,55,0.6), transparent),
        /* Blue stars */
        radial-gradient(1px 1px at 70px 160px, rgba(100,149,237,0.7), transparent),
        radial-gradient(1px 1px at 280px 60px, rgba(135,206,250,0.6), transparent);
    background-repeat: repeat;
    background-size: 400px 250px;
    animation: twinkle 6s ease-in-out infinite;
}

/* Stars Layer - Medium */
.stars:nth-child(2) {
    background-image:
        radial-gradient(2px 2px at 50px 50px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 150px 100px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 280px 180px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 100px 200px, rgba(212,175,55,0.7), transparent),
        radial-gradient(2px 2px at 350px 80px, rgba(255,220,180,0.6), transparent),
        radial-gradient(2px 2px at 220px 250px, rgba(200,200,255,0.7), transparent);
    background-position: 0 0;
    background-size: 500px 300px;
    animation: twinkle 8s ease-in-out infinite;
    animation-delay: -3s;
    opacity: 0.9;
}

/* Stars Layer - Large/Bright */
.stars:nth-child(3) {
    background-image:
        radial-gradient(3px 3px at 100px 100px, rgba(255,255,255,1), rgba(255,255,255,0.3), transparent),
        radial-gradient(2.5px 2.5px at 300px 150px, rgba(212,175,55,0.9), rgba(212,175,55,0.2), transparent),
        radial-gradient(3px 3px at 200px 280px, rgba(255,255,255,0.95), rgba(200,200,255,0.2), transparent),
        radial-gradient(2px 2px at 400px 50px, rgba(255,200,150,0.8), transparent);
    background-position: 0 0;
    background-size: 600px 350px;
    animation: twinkleBright 10s ease-in-out infinite;
    animation-delay: -5s;
    opacity: 1;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.5; }
}

@keyframes twinkleBright {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.7; }
    50% { opacity: 0.9; }
    75% { opacity: 0.6; }
}

/* Stardust/Galaxy Dust Overlay */
.stars-container .stardust {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(138, 43, 226, 0.02) 0%, transparent 40%);
    animation: stardust 30s ease-in-out infinite;
}

@keyframes stardust {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
}

/* ========================================
   Aurora Borealis - Soft & Round
   Keine Kanten, sehr subtil, fließend
   ======================================== */

.stars-container .aurora {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Aurora Wolke 1 - Neon Grün */
.stars-container .aurora::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -30%;
    width: 160%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(ellipse 50% 35% at 35% 40%,
        rgba(0, 255, 180, 0.22) 0%,
        rgba(0, 255, 200, 0.12) 35%,
        rgba(0, 220, 180, 0.05) 60%,
        transparent 80%);
    filter: blur(80px);
    animation: auroraDrift1 25s ease-in-out infinite;
}

/* Aurora Wolke 2 - Neon Cyan */
.stars-container .aurora::after {
    content: '';
    position: absolute;
    top: -35%;
    left: -20%;
    width: 140%;
    height: 110%;
    border-radius: 50%;
    background: radial-gradient(ellipse 45% 30% at 65% 35%,
        rgba(0, 220, 255, 0.2) 0%,
        rgba(0, 200, 255, 0.1) 40%,
        rgba(50, 180, 255, 0.04) 65%,
        transparent 85%);
    filter: blur(90px);
    animation: auroraDrift2 30s ease-in-out infinite;
    animation-delay: -10s;
}

/* Aurora Streaks - Weiche runde Wolken */
.stars-container .aurora-streaks {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    overflow: visible;
}

/* Grüne Wolke links */
.stars-container .aurora-streaks::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 70%;
    height: 130%;
    border-radius: 50%;
    background: radial-gradient(ellipse 60% 45% at 50% 50%,
        rgba(0, 255, 170, 0.18) 0%,
        rgba(0, 255, 200, 0.08) 40%,
        rgba(50, 220, 180, 0.03) 70%,
        transparent 90%);
    filter: blur(70px);
    animation: auroraFloat1 18s ease-in-out infinite;
}

/* Cyan Wolke rechts */
.stars-container .aurora-streaks::after {
    content: '';
    position: absolute;
    top: -25%;
    left: 30%;
    width: 80%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(ellipse 55% 40% at 50% 50%,
        rgba(0, 230, 255, 0.16) 0%,
        rgba(0, 255, 255, 0.07) 45%,
        rgba(80, 220, 255, 0.025) 75%,
        transparent 92%);
    filter: blur(75px);
    animation: auroraFloat2 22s ease-in-out infinite;
    animation-delay: -7s;
}

/* Aurora Schimmer */
.stars-container .aurora-shimmer {
    position: absolute;
    top: -20%;
    left: -15%;
    width: 130%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(ellipse 70% 50% at 50% 40%,
        rgba(0, 255, 200, 0.12) 0%,
        rgba(50, 255, 220, 0.05) 50%,
        transparent 80%);
    filter: blur(60px);
    animation: auroraShimmer 15s ease-in-out infinite;
}

/* Sanfte fließende Animationen */
@keyframes auroraDrift1 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.8;
    }
    33% {
        transform: translate(3%, -2%) scale(1.08);
        opacity: 1;
    }
    66% {
        transform: translate(-2%, 1.5%) scale(0.95);
        opacity: 0.7;
    }
}

@keyframes auroraDrift2 {
    0%, 100% {
        transform: translate(0%, 0%) scale(1);
        opacity: 0.75;
    }
    50% {
        transform: translate(-3%, -1.5%) scale(1.06);
        opacity: 0.9;
    }
}

@keyframes auroraFloat1 {
    0%, 100% {
        transform: translateX(0%) translateY(0%) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translateX(4%) translateY(-3%) scale(1.1);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-2%) translateY(2%) scale(0.95);
        opacity: 0.6;
    }
    75% {
        transform: translateX(2%) translateY(-1%) scale(1.05);
        opacity: 0.8;
    }
}

@keyframes auroraFloat2 {
    0%, 100% {
        transform: translateX(0%) translateY(0%) scale(1);
        opacity: 0.65;
    }
    33% {
        transform: translateX(-3%) translateY(-2%) scale(1.08);
        opacity: 0.85;
    }
    66% {
        transform: translateX(2%) translateY(1.5%) scale(0.94);
        opacity: 0.55;
    }
}

@keyframes auroraShimmer {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

/* Legacy galaxy class - now unused */
.stars-container .galaxy {
    display: none;
}

/* Old galaxy styles removed - using Aurora Borealis instead */

/* Milky Way Band - softer */
.stars-container .milkyway {
    position: absolute;
    top: 0;
    left: -20%;
    width: 140%;
    height: 100%;
    background:
        linear-gradient(
            140deg,
            transparent 0%,
            transparent 30%,
            rgba(180, 160, 220, 0.02) 38%,
            rgba(160, 140, 200, 0.04) 44%,
            rgba(140, 130, 180, 0.05) 48%,
            rgba(160, 140, 200, 0.04) 52%,
            rgba(180, 160, 220, 0.02) 58%,
            transparent 65%,
            transparent 100%
        );
    filter: blur(2px);
    opacity: 0.7;
    animation: milkywayShimmer 25s ease-in-out infinite;
}

@keyframes milkywayShimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Shooting Stars - seltener, manche größer als Kometen */
.stars-container .shooting-star {
    position: absolute;
    width: 80px;
    height: 2px;
    background: linear-gradient(-90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.4), transparent);
    border-radius: 2px;
    opacity: 0;
    filter: blur(0.3px);
    box-shadow: 0 0 4px rgba(255,255,255,0.4);
}

/* Kleine Sternschnuppe - rechts nach links */
.stars-container .shooting-star:nth-child(5) {
    top: 12%;
    right: 10%;
    animation: shootingStarLeft 25s ease-out infinite;
    animation-delay: 5s;
}

/* Großer Komet mit Feuerschweif - rechts nach links */
.stars-container .shooting-star:nth-child(6) {
    top: 30%;
    right: 5%;
    width: 150px;
    height: 3px;
    background: linear-gradient(-90deg,
        rgba(255, 255, 255, 1),
        rgba(255, 220, 150, 0.9),
        rgba(255, 180, 100, 0.6),
        rgba(255, 150, 50, 0.3),
        transparent
    );
    box-shadow:
        0 0 8px rgba(255, 200, 100, 0.6),
        0 0 15px rgba(255, 150, 50, 0.3);
    animation: shootingStarLeft 35s ease-out infinite;
    animation-delay: 20s;
}

/* Kleine Sternschnuppe - links nach rechts (gespiegelt) */
.stars-container .shooting-star:nth-child(7) {
    top: 40%;
    left: 10%;
    transform: scaleX(-1);
    animation: shootingStarMirrored 30s ease-out infinite;
    animation-delay: 15s;
}

/* Großer Komet links→rechts entfernt (falsche Rotation) */
.stars-container .shooting-star:nth-child(11) {
    display: none;
}

/* Extra kleine Sternschnuppe */
.stars-container .shooting-star:nth-child(12) {
    top: 65%;
    right: 20%;
    width: 60px;
    animation: shootingStarLeft 28s ease-out infinite;
    animation-delay: 45s;
}

/* Nicht verwendet */
.stars-container .shooting-star:nth-child(13) {
    display: none;
}

@keyframes shootingStarLeft {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(135deg);
    }
    2% {
        opacity: 1;
    }
    15% {
        opacity: 0;
        transform: translate(-80vw, 45vh) rotate(135deg);
    }
    100% {
        opacity: 0;
        transform: translate(-80vw, 45vh) rotate(135deg);
    }
}

/* Gespiegelte Sternschnuppe - links nach rechts */
@keyframes shootingStarMirrored {
    0% {
        opacity: 0;
        transform: scaleX(-1) translate(0, 0) rotate(135deg);
    }
    2% {
        opacity: 1;
    }
    15% {
        opacity: 0;
        transform: scaleX(-1) translate(-80vw, 45vh) rotate(135deg);
    }
    100% {
        opacity: 0;
        transform: scaleX(-1) translate(-80vw, 45vh) rotate(135deg);
    }
}

/* ========================================
   Enter Screen
   ======================================== */

.enter-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(100, 100, 180, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at center, #08080f 0%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}

.enter-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.enter-content {
    text-align: center;
    animation: fadeInUp 1.2s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.enter-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 50%, var(--color-text) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 4s linear infinite;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 80px var(--color-accent-glow);
}

@keyframes shimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.enter-subtitle {
    font-size: 1.2rem;
    color: var(--color-text-muted);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 3.5rem;
    font-weight: 300;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.5s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.enter-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 3rem;
    background: linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.1) 100%);
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
    border-radius: 60px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1s ease-out 0.8s forwards;
    /* Mobile Touch Fix */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.enter-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3), transparent);
    transition: 0.5s;
    pointer-events: none;
}

/* Mobile Active State */
.enter-btn:active {
    transform: scale(0.98);
    background: var(--color-accent);
    color: var(--color-bg);
}

.enter-btn:hover::before {
    left: 100%;
}

.enter-btn:hover {
    background: var(--color-accent);
    color: var(--color-bg);
    box-shadow:
        0 0 30px var(--color-accent-glow),
        0 0 60px rgba(212, 175, 55, 0.2),
        inset 0 0 20px rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
    letter-spacing: 0.3em;
}

.enter-btn svg {
    width: 22px;
    height: 22px;
    transition: var(--transition-smooth);
}

.enter-btn:hover svg {
    transform: translateX(5px);
}

.enter-hint {
    margin-top: 2.5rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0;
    animation: fadeIn 1s ease-out 1.2s forwards;
    letter-spacing: 0.15em;
}

/* ========================================
   Mode Selection (Lite vs Full)
   ======================================== */

.mode-selection {
    margin-top: 2rem;
    opacity: 0;
    animation: fadeIn 0.8s ease-out 0.5s forwards;
}

.mode-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--color-text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.mode-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 2rem;
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 180px;
}

.mode-btn:hover {
    border-color: var(--color-accent);
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-3px);
}

.mode-btn .mode-icon {
    font-size: 2rem;
}

.mode-btn .mode-name {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-accent);
    letter-spacing: 0.1em;
}

.mode-btn .mode-desc {
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.mode-btn.mode-full:hover {
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
}

.mode-btn.mode-lite:hover {
    box-shadow: 0 0 30px rgba(100, 255, 100, 0.2);
    border-color: rgba(100, 255, 100, 0.5);
}

.mode-btn.mode-lite:hover .mode-name {
    color: rgba(100, 255, 100, 0.9);
}

/* ========================================
   Intro / Brand Video Section
   ======================================== */

.intro {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    overflow: hidden;
}

/* Fallback-Hintergrund falls Video verschwindet */
.intro::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center bottom, #0a0a12 0%, #000 70%);
    z-index: 0;
}

#brand-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    /* Video skalieren und nach oben verschieben um Wasserzeichen unten rechts abzuschneiden */
    transform: scale(1.15) translateY(-4%);
}

.logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.logo-overlay.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.logo-text {
    font-family: var(--font-display);
    font-size: clamp(2rem, 8vw, 5rem);
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    background: linear-gradient(
        90deg,
        var(--color-text) 0%,
        var(--color-text) 40%,
        var(--color-accent-light) 50%,
        var(--color-text) 60%,
        var(--color-text) 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
    padding: 0 1rem;
    position: relative;
    z-index: 6;
    filter: drop-shadow(0 0 30px var(--color-accent-glow));
}

.logo-overlay.visible .logo-text {
    animation: textSunbeam 3.75s ease-in-out 0s forwards;
}

/* Synchronisierter Glow-Effekt mit dem Blitz */
.logo-text.glow-sync {
    animation:
        textSunbeam 3.75s ease-in-out 0s forwards,
        textGlowSync 3.5s ease-in-out forwards !important;
}

/* Atmendes Schrift nach Animationen */
.logo-text.breathing {
    animation: textBreathing 8s ease-in-out infinite !important;
}

@keyframes textBreathing {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 25px var(--color-accent-glow));
    }
    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 35px var(--color-accent-glow));
    }
}

@keyframes textGlowSync {
    0% {
        filter: drop-shadow(0 0 30px var(--color-accent-glow));
    }
    20% {
        filter: drop-shadow(0 0 50px var(--color-accent))
                drop-shadow(0 0 80px var(--color-accent-light));
    }
    40% {
        filter: drop-shadow(0 0 80px var(--color-accent))
                drop-shadow(0 0 120px rgba(255, 255, 255, 0.5))
                drop-shadow(0 0 150px var(--color-accent-light));
    }
    60% {
        filter: drop-shadow(0 0 60px var(--color-accent))
                drop-shadow(0 0 100px var(--color-accent));
    }
    100% {
        filter: drop-shadow(0 0 40px var(--color-accent-glow));
    }
}

/* Flash Ripple Effekt - dramatische einmalige Wellen beim Blitz */
.flash-ripples {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    width: 200vh;
    height: 200vh;
    pointer-events: none;
    z-index: 6;
}

.flash-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.02);
    backface-visibility: hidden;
}

.flash-ripple.gold {
    border: 4px solid rgba(212, 175, 55, 0.9);
    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.8),
        0 0 40px rgba(212, 175, 55, 0.6),
        inset 0 0 20px rgba(212, 175, 55, 0.4);
}

.flash-ripple.silver {
    border: 3px solid rgba(220, 220, 230, 0.9);
    box-shadow:
        0 0 25px rgba(255, 255, 255, 0.8),
        0 0 50px rgba(220, 220, 230, 0.5),
        inset 0 0 15px rgba(255, 255, 255, 0.3);
}

.flash-ripple.black {
    border: 5px solid rgba(20, 20, 30, 0.8);
    box-shadow:
        0 0 30px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(20, 20, 30, 0.6),
        inset 0 0 25px rgba(0, 0, 0, 0.5);
}

.flash-ripples.active .flash-ripple {
    animation: flashRippleExpand 3.5s ease-out forwards;
}

.flash-ripples.active .flash-ripple:nth-child(1) {
    animation-delay: 0s;
}

.flash-ripples.active .flash-ripple:nth-child(2) {
    animation-delay: 0.2s;
}

.flash-ripples.active .flash-ripple:nth-child(3) {
    animation-delay: 0.4s;
}

.flash-ripples.active .flash-ripple:nth-child(4) {
    animation-delay: 0.6s;
}

.flash-ripples.active .flash-ripple:nth-child(5) {
    animation-delay: 0.8s;
}

.flash-ripples.active .flash-ripple:nth-child(6) {
    animation-delay: 1.0s;
}

.flash-ripples.active .flash-ripple:nth-child(7) {
    animation-delay: 1.2s;
}

.flash-ripples.active .flash-ripple:nth-child(8) {
    animation-delay: 1.4s;
}

.flash-ripples.active .flash-ripple:nth-child(9) {
    animation-delay: 1.6s;
}

.flash-ripples.active .flash-ripple:nth-child(10) {
    animation-delay: 1.8s;
}

@keyframes flashRippleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.02);
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Goldener Blitz Effekt */
.golden-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center,
        rgba(240, 208, 96, 1) 0%,
        rgba(212, 175, 55, 0.9) 30%,
        rgba(212, 175, 55, 0) 70%);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
}

.golden-flash.active {
    animation: goldenFlashAnim 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes goldenFlashAnim {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    20% {
        opacity: 0.25;
        transform: scale(1.3);
    }
    40% {
        opacity: 0.35;
        transform: scale(1.8);
    }
    70% {
        opacity: 0.5;
        transform: scale(2.5);
        background: radial-gradient(ellipse at center,
            rgba(212, 175, 55, 0.15) 0%,
            rgba(0, 0, 0, 0.6) 50%,
            rgba(0, 0, 0, 0.9) 100%);
    }
    100% {
        opacity: 1;
        transform: scale(3);
        background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 100%);
    }
}

/* Video Iris-Out Effekt - schrumpfender Kreis von außen nach innen */
#brand-video.fade-out {
    animation: videoIrisOut 3.5s ease-in-out forwards;
}

@keyframes videoIrisOut {
    0% {
        clip-path: circle(150% at 50% 42%);
        opacity: 1;
    }
    90% {
        clip-path: circle(0% at 50% 42%);
        opacity: 1;
    }
    100% {
        clip-path: circle(0% at 50% 42%);
        opacity: 0;
    }
}

/* Logo Bild - initial versteckt */
.logo-image {
    position: relative;
    width: auto;
    height: 52vh;
    max-width: 95vw;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    order: -1;
}

/* Logo mit Wellen-Animation einblenden */
.logo-image.visible {
    visibility: visible;
    animation: logoWaveIn 8s ease-in-out forwards;
}

@keyframes logoWaveIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
        filter: blur(8px);
    }
    15% {
        opacity: 1;
        transform: scale(1.0);
        filter: blur(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* Sanftes Schweben und Atmen nach Einblendung */
.logo-image.visible.floating {
    animation: logoWaveIn 8s ease-in-out forwards,
               logoBreathing 8s ease-in-out 8s infinite;
}

@keyframes logoBreathing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Logo Container - nicht mehr verwendet */

/* Kreisförmiger pulsierender Glow - goldenes Leuchten in tiefer Nacht */
.logo-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vh;
    height: 80vh;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(212, 175, 55, 0.5) 0%,
        rgba(212, 175, 55, 0.35) 20%,
        rgba(180, 140, 40, 0.2) 40%,
        rgba(140, 100, 20, 0.12) 60%,
        rgba(100, 70, 10, 0.05) 80%,
        transparent 100%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}

/* Glow aktivieren wenn Logo sichtbar */
.logo-glow.visible {
    opacity: 1;
    transition: opacity 2s ease-in-out;
}

/* Glow pulsieren wenn Logo schwebt */
.logo-glow.pulsing {
    animation: circularGlowPulse 8s ease-in-out infinite;
}

@keyframes circularGlowPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
}

/* Ripple Effekt - Wassertropfen Wellen */
.logo-ripples {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vh;
    height: 60vh;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
}

.logo-ripples.visible {
    opacity: 1;
}

.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 20%;
    border: 2px solid rgba(212, 175, 55, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.4),
                0 0 15px rgba(212, 175, 55, 0.2);
    opacity: 0;
}

.logo-ripples.active .ripple {
    animation: rippleExpand 4s ease-out infinite;
}

.logo-ripples.active .ripple:nth-child(1) {
    animation-delay: 0s;
}

.logo-ripples.active .ripple:nth-child(2) {
    animation-delay: 1.33s;
}

.logo-ripples.active .ripple:nth-child(3) {
    animation-delay: 2.66s;
}

@keyframes rippleExpand {
    0% {
        width: 10%;
        height: 10%;
        opacity: 1;
        border-width: 3px;
    }
    100% {
        width: 100%;
        height: 100%;
        opacity: 0;
        border-width: 1px;
    }
}

@keyframes glowPulse {
    0% {
        filter: drop-shadow(0 0 30px var(--color-accent-glow));
    }
    40% {
        filter:
            drop-shadow(0 0 60px var(--color-accent))
            drop-shadow(0 0 100px var(--color-accent))
            drop-shadow(0 0 140px var(--color-accent-light));
    }
    50% {
        filter:
            drop-shadow(0 0 60px var(--color-accent))
            drop-shadow(0 0 100px var(--color-accent))
            drop-shadow(0 0 140px var(--color-accent-light));
    }
    100% {
        filter: drop-shadow(0 0 30px var(--color-accent-glow));
    }
}

@keyframes textSunbeam {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0% 0;
    }
}

.sound-toggle {
    position: absolute;
    bottom: 100px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.sound-toggle:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--color-accent);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(212, 175, 55, 0.2);
}

.sound-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--color-text);
    transition: var(--transition-smooth);
}

.sound-toggle:hover svg {
    color: var(--color-accent);
}

.sound-toggle .icon-unmuted {
    display: none;
}

.sound-toggle.unmuted .icon-muted {
    display: none;
}

.sound-toggle.unmuted .icon-unmuted {
    display: block;
}

.scroll-hint {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    z-index: 10;
    opacity: 0;
    transition: opacity 1s ease-in-out 0.5s, color var(--transition-smooth);
    animation: float 3s ease-in-out infinite;
}

.scroll-hint.visible {
    opacity: 1;
}

.scroll-hint:hover {
    color: var(--color-accent);
}

.scroll-hint svg {
    width: 28px;
    height: 28px;
}

@keyframes float {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* ========================================
   Navigation
   ======================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.5rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: transparent;
    transition: var(--transition-smooth);
    /* Eigene GPU-Ebene für stabiles Rendering während Animationen */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    isolation: isolate;
}

.navbar.scrolled {
    background: rgba(5, 5, 10, 0.9);
    backdrop-filter: blur(20px);
    padding: 1rem 4rem;
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-logo {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--color-text);
    text-decoration: none;
    text-transform: uppercase;
    transition: var(--transition-smooth);
    position: relative;
}

.nav-logo::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    transition: var(--transition-smooth);
}

.nav-logo:hover {
    color: var(--color-accent);
}

.nav-logo:hover::after {
    width: 100%;
}

.nav-logo.golden {
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 50%, var(--color-accent-light) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
    filter: drop-shadow(0 0 10px var(--color-accent-glow));
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 3rem;
}

.nav-links a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: var(--transition-smooth);
    position: relative;
    padding: 0.5rem 0;
}

.nav-links a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: var(--transition-smooth);
    transform: translateX(-50%);
}

.nav-links a:hover {
    color: var(--color-accent);
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
}

.nav-links a:hover::before {
    width: 100%;
}

/* Language Toggle */
.lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.lang-toggle:hover {
    border-color: var(--color-accent);
    background: rgba(212, 175, 55, 0.1);
    transform: scale(1.05);
}

.lang-current {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    transition: var(--transition-smooth);
}

.lang-toggle:hover .lang-current {
    color: var(--color-accent);
}

/* ========================================
   Sections - General
   ======================================== */

.section {
    position: relative;
    padding: 10rem 2rem;
    min-height: 100vh;
    display: flex;
    align-items: center;
    z-index: 1;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
    background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section.visible .section-title {
    opacity: 1;
    transform: translateY(0);
}

.section-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-muted);
    text-align: center;
    margin-bottom: 5rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
}

.section.visible .section-subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Wave Divider - Organic Ocean Effect */
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 280px;
    pointer-events: none;
    overflow: hidden;
    /* Sanftes Atmen des gesamten Ozeans */
    animation: oceanBreath 8s ease-in-out infinite;
}

@keyframes oceanBreath {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Layer 1: Tiefe Ozeanschicht (ganz hinten) - sanft wogend */
.wave-divider .wave-layer-1 {
    position: absolute;
    bottom: 70px;
    left: 0;
    width: 400%;
    height: 120px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 120'%3E%3Cdefs%3E%3Cfilter id='ob1' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23ob1)' fill='%23d4af37' fill-opacity='0.08' d='M0,60 C150,80 300,40 450,65 C600,90 750,50 900,70 C1050,90 1200,55 1350,75 C1500,95 1650,60 1800,80 L1800,120 L0,120 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 1800px 100%;
    animation:
        wave1 60s linear infinite,
        waveFloat1 10s ease-in-out infinite;
    opacity: 0.7;
    filter: blur(3px);
}

/* Layer 2: Mittlere goldene Welle - organisches Wogen */
.wave-divider .wave-layer-2 {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 350%;
    height: 110px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 110'%3E%3Cdefs%3E%3Cfilter id='ob2' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23ob2)' fill='%23d4af37' fill-opacity='0.12' d='M0,55 C100,75 200,35 350,60 C500,85 650,45 800,65 C950,85 1100,50 1250,70 C1400,90 1500,55 1600,75 L1600,110 L0,110 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 1600px 100%;
    animation:
        wave2 50s linear infinite reverse,
        waveFloat2 8s ease-in-out infinite;
    opacity: 0.85;
    filter: blur(2px);
}

/* Layer 3: Lichtreflexionen auf der Oberfläche */
.wave-divider .wave-layer-3 {
    position: absolute;
    bottom: 35px;
    left: 0;
    width: 300%;
    height: 90px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90'%3E%3Cdefs%3E%3Cfilter id='ob3' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Cpath filter='url(%23ob3)' fill='%23f0d060' fill-opacity='0.1' d='M0,45 C120,30 240,55 360,40 C480,25 600,50 720,35 C840,20 960,45 1080,30 C1200,15 1320,40 1440,25 L1440,90 L0,90 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 1440px 100%;
    animation:
        wave3 40s linear infinite,
        waveFloat3 7s ease-in-out infinite;
    filter: blur(1.5px);
}

/* Layer 4: Dunkle Tiefenwelle mit Schatten */
.wave-divider .wave-layer-4 {
    position: absolute;
    bottom: 15px;
    left: 0;
    width: 280%;
    height: 130px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 130'%3E%3Cdefs%3E%3Cfilter id='ob4' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='5'/%3E%3C/filter%3E%3ClinearGradient id='depthGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231a1a24' stop-opacity='0.3'/%3E%3Cstop offset='50%25' stop-color='%231a1a24' stop-opacity='0.7'/%3E%3Cstop offset='100%25' stop-color='%231a1a24' stop-opacity='0.95'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23ob4)' fill='url(%23depthGrad)' d='M0,65 C200,85 400,45 600,70 C800,95 1000,55 1200,75 C1350,90 1450,60 1500,80 L1500,130 L0,130 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 1500px 100%;
    animation:
        wave4 45s linear infinite reverse,
        waveFloat4 12s ease-in-out infinite;
    filter: blur(2.5px);
}

/* Layer 5: Vorderste Welle mit Gischt-Effekt */
.wave-divider .wave-layer-5 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 250%;
    height: 110px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110'%3E%3Cdefs%3E%3Cfilter id='ob5' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2'/%3E%3C/filter%3E%3ClinearGradient id='frontGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2305050a' stop-opacity='0'/%3E%3Cstop offset='30%25' stop-color='%2305050a' stop-opacity='0.5'/%3E%3Cstop offset='60%25' stop-color='%2305050a' stop-opacity='0.85'/%3E%3Cstop offset='100%25' stop-color='%2305050a' stop-opacity='1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23ob5)' fill='url(%23frontGrad)' d='M0,40 C120,55 240,30 360,50 C480,70 600,35 720,55 C840,75 960,40 1080,60 C1200,80 1320,45 1440,65 L1440,110 L0,110 Z'/%3E%3C/svg%3E") repeat-x;
    background-size: 1440px 100%;
    animation:
        wave5 35s linear infinite,
        waveFloat5 9s ease-in-out infinite;
    filter: blur(1px);
}

/* Gischt/Schaum-Effekt auf Wellenkämmen */
.wave-divider .wave-shimmer {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 400%;
    height: 100px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 175, 55, 0.04) 15%,
            rgba(240, 208, 96, 0.08) 25%,
            transparent 40%,
            transparent 60%,
            rgba(212, 175, 55, 0.06) 75%,
            rgba(240, 208, 96, 0.05) 85%,
            transparent 100%
        );
    background-size: 50% 100%;
    animation:
        shimmerWave 25s linear infinite,
        foamFloat 6s ease-in-out infinite;
    filter: blur(4px);
    opacity: 0.8;
}

/* Vertikale Wogen-Animationen für organische Bewegung */
@keyframes waveFloat1 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-8px) scaleY(1.05); }
}

@keyframes waveFloat2 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    30% { transform: translateY(-6px) scaleY(1.08); }
    70% { transform: translateY(3px) scaleY(0.97); }
}

@keyframes waveFloat3 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    25% { transform: translateY(-4px) scaleY(1.06); }
    75% { transform: translateY(2px) scaleY(0.98); }
}

@keyframes waveFloat4 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    40% { transform: translateY(-7px) scaleY(1.04); }
    80% { transform: translateY(4px) scaleY(0.96); }
}

@keyframes waveFloat5 {
    0%, 100% { transform: translateY(0) scaleY(1); }
    35% { transform: translateY(-5px) scaleY(1.07); }
    65% { transform: translateY(3px) scaleY(0.95); }
}

@keyframes foamFloat {
    0%, 100% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(-6px); opacity: 1; }
}

/* Ambiente Ozean-Glühen */
.wave-divider .ocean-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background:
        radial-gradient(ellipse 80% 50% at 20% 100%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(240, 208, 96, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 100% 60% at 50% 100%, rgba(212, 175, 55, 0.04) 0%, transparent 70%);
    animation: glowPulse 15s ease-in-out infinite;
    pointer-events: none;
}

/* Farbakzente auf den Wellen - Rosa, Violett, Orange, Blau */
.wave-divider .wave-colors {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    pointer-events: none;
    overflow: hidden;
}

/* Rosa/Pink Akzent - links */
.wave-divider .wave-colors::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: -10%;
    width: 50%;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(ellipse 70% 50% at 50% 70%,
        rgba(255, 100, 150, 0.12) 0%,
        rgba(255, 80, 130, 0.06) 40%,
        transparent 70%);
    filter: blur(40px);
    animation: waveColorDrift1 20s ease-in-out infinite;
}

/* Violett/Blau Akzent - rechts */
.wave-divider .wave-colors::after {
    content: '';
    position: absolute;
    bottom: 30px;
    right: -5%;
    width: 45%;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(ellipse 65% 55% at 50% 65%,
        rgba(130, 80, 200, 0.1) 0%,
        rgba(100, 120, 220, 0.05) 45%,
        transparent 75%);
    filter: blur(45px);
    animation: waveColorDrift2 25s ease-in-out infinite;
    animation-delay: -8s;
}

/* Orange Akzent - Mitte */
.wave-divider .wave-color-orange {
    position: absolute;
    bottom: 40px;
    left: 30%;
    width: 40%;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(ellipse 60% 45% at 50% 60%,
        rgba(255, 150, 50, 0.1) 0%,
        rgba(255, 180, 80, 0.05) 40%,
        transparent 70%);
    filter: blur(35px);
    animation: waveColorDrift3 18s ease-in-out infinite;
    animation-delay: -5s;
}

/* Cyan/Blau Akzent - wandernd */
.wave-divider .wave-color-blue {
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 35%;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(ellipse 55% 50% at 50% 55%,
        rgba(50, 180, 255, 0.09) 0%,
        rgba(80, 150, 220, 0.04) 45%,
        transparent 75%);
    filter: blur(40px);
    animation: waveColorDrift4 22s ease-in-out infinite;
    animation-delay: -12s;
}

@keyframes waveColorDrift1 {
    0%, 100% {
        transform: translateX(0%) translateY(0%);
        opacity: 0.8;
    }
    33% {
        transform: translateX(8%) translateY(-10px);
        opacity: 1;
    }
    66% {
        transform: translateX(-5%) translateY(5px);
        opacity: 0.7;
    }
}

@keyframes waveColorDrift2 {
    0%, 100% {
        transform: translateX(0%) translateY(0%);
        opacity: 0.75;
    }
    50% {
        transform: translateX(-10%) translateY(-8px);
        opacity: 0.95;
    }
}

@keyframes waveColorDrift3 {
    0%, 100% {
        transform: translateX(0%) translateY(0%) scale(1);
        opacity: 0.7;
    }
    25% {
        transform: translateX(15%) translateY(-5px) scale(1.1);
        opacity: 0.9;
    }
    50% {
        transform: translateX(-10%) translateY(3px) scale(0.95);
        opacity: 0.6;
    }
    75% {
        transform: translateX(5%) translateY(-8px) scale(1.05);
        opacity: 0.85;
    }
}

@keyframes waveColorDrift4 {
    0%, 100% {
        transform: translateX(0%) translateY(0%);
        opacity: 0.7;
    }
    40% {
        transform: translateX(-20%) translateY(-6px);
        opacity: 0.9;
    }
    70% {
        transform: translateX(10%) translateY(4px);
        opacity: 0.6;
    }
}

@keyframes glowPulseOcean {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Glitzernde Lichtreflexe auf dem Wasser */
.wave-divider .wave-sparkles {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 200%;
    height: 150px;
    background-image:
        radial-gradient(circle at 10% 50%, rgba(255, 223, 100, 0.6) 0%, transparent 3px),
        radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.5) 0%, transparent 2px),
        radial-gradient(circle at 40% 70%, rgba(212, 175, 55, 0.7) 0%, transparent 2.5px),
        radial-gradient(circle at 55% 40%, rgba(255, 223, 100, 0.5) 0%, transparent 2px),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.6) 0%, transparent 3px),
        radial-gradient(circle at 85% 35%, rgba(240, 208, 96, 0.5) 0%, transparent 2px),
        radial-gradient(circle at 15% 65%, rgba(255, 255, 255, 0.4) 0%, transparent 2px),
        radial-gradient(circle at 60% 25%, rgba(212, 175, 55, 0.6) 0%, transparent 2.5px),
        radial-gradient(circle at 95% 55%, rgba(255, 223, 100, 0.5) 0%, transparent 2px),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.5) 0%, transparent 2px);
    background-size: 800px 150px;
    animation:
        sparkleMove 25s linear infinite,
        sparkleTwinkle 3s ease-in-out infinite;
    opacity: 0.7;
    filter: blur(0.5px);
}

@keyframes sparkleMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-800px); }
}

@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0.5; }
    25% { opacity: 0.9; }
    50% { opacity: 0.6; }
    75% { opacity: 1; }
}

/* Schwebende Yin-Yang Symbole - klassisches Design mit korrekten Punkten */
.wave-divider .floating-yinyang {
    position: absolute;
    left: -120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='yylight' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23fffaed'/%3E%3Cstop offset='50%25' stop-color='%23f0d060'/%3E%3Cstop offset='100%25' stop-color='%23d4af37'/%3E%3C/linearGradient%3E%3ClinearGradient id='yydark' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%232a2a38'/%3E%3Cstop offset='50%25' stop-color='%23121218'/%3E%3Cstop offset='100%25' stop-color='%23050508'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='49' fill='url(%23yydark)'/%3E%3Cpath d='M50,1 A49,49 0 0,1 50,99 A24.5,24.5 0 0,1 50,50 A24.5,24.5 0 0,0 50,1' fill='url(%23yylight)'/%3E%3Ccircle cx='50' cy='25.5' r='10' fill='%23f0d060'/%3E%3Ccircle cx='50' cy='25.5' r='4' fill='%23fffaed'/%3E%3Ccircle cx='50' cy='74.5' r='10' fill='%23121218'/%3E%3Ccircle cx='50' cy='74.5' r='4' fill='%23050508'/%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23d4af37' stroke-width='1.5' opacity='0.7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 8;
    pointer-events: none;
}

/* Yin-Yang 1: Synchronisiert mit Riesenwelle 1 (45s - meditativ) */
.wave-divider .yinyang-1 {
    width: 70px;
    height: 70px;
    bottom: 60px;
    filter: blur(0.5px) drop-shadow(0 0 20px rgba(212, 175, 55, 0.5));
    animation: yinyangSync1 45s linear infinite;
}

/* Yin-Yang 2: Synchronisiert mit Riesenwelle 2 (35s - meditativ) */
.wave-divider .yinyang-2 {
    width: 45px;
    height: 45px;
    bottom: 70px;
    filter: blur(1px) drop-shadow(0 0 12px rgba(212, 175, 55, 0.4));
    animation: yinyangSync2 35s linear infinite;
}

/* Synchronisierte Starts - gleiche Delays wie die Riesenwellen */
.section-musik .yinyang-1 { animation-delay: 0s; }
.section-musik .yinyang-2 { animation-delay: -4s; }

.section-video .yinyang-1 { animation-delay: -8s; }
.section-video .yinyang-2 { animation-delay: -12s; }

.section-about .yinyang-1 { animation-delay: -16s; }
.section-about .yinyang-2 { animation-delay: -7s; }

/* Synchronisierte Animation 1 - variierende Rotationsgeschwindigkeit */
@keyframes yinyangSync1 {
    0% {
        left: -110%;
        opacity: 0;
        transform: translateY(0) rotate(0deg) scale(0.7);
    }
    4% {
        opacity: 0.4;
        transform: translateY(-20px) rotate(120deg) scale(0.85);  /* schnell */
    }
    8% {
        opacity: 0.55;
        transform: translateY(8px) rotate(160deg) scale(0.92);    /* langsam */
    }
    12% {
        opacity: 0.65;
        transform: translateY(-28px) rotate(320deg) scale(1);     /* schnell */
    }
    16% {
        opacity: 0.6;
        transform: translateY(5px) rotate(380deg) scale(0.95);    /* langsam */
    }
    20% {
        opacity: 0.7;
        transform: translateY(-32px) rotate(540deg) scale(1.02);  /* schnell */
    }
    24% {
        opacity: 0.65;
        transform: translateY(10px) rotate(590deg) scale(0.93);   /* langsam */
    }
    28% {
        opacity: 0.75;
        transform: translateY(-25px) rotate(780deg) scale(1);     /* schnell */
    }
    32% {
        opacity: 0.7;
        transform: translateY(6px) rotate(830deg) scale(0.96);    /* langsam */
    }
    36% {
        opacity: 0.8;
        transform: translateY(-30px) rotate(980deg) scale(1.04);  /* schnell */
    }
    40% {
        opacity: 0.75;
        transform: translateY(8px) rotate(1020deg) scale(0.94);   /* langsam */
    }
    44% {
        opacity: 0.8;
        transform: translateY(-26px) rotate(1200deg) scale(1);    /* schnell */
    }
    48% {
        opacity: 0.75;
        transform: translateY(5px) rotate(1250deg) scale(0.95);   /* langsam */
    }
    52% {
        opacity: 0.8;
        transform: translateY(-32px) rotate(1420deg) scale(1.03); /* schnell */
    }
    56% {
        opacity: 0.75;
        transform: translateY(10px) rotate(1470deg) scale(0.92);  /* langsam */
    }
    60% {
        opacity: 0.78;
        transform: translateY(-28px) rotate(1620deg) scale(1);    /* schnell */
    }
    64% {
        opacity: 0.72;
        transform: translateY(6px) rotate(1660deg) scale(0.96);   /* langsam */
    }
    68% {
        opacity: 0.7;
        transform: translateY(-24px) rotate(1800deg) scale(0.98); /* schnell */
    }
    72% {
        opacity: 0.6;
        transform: translateY(8px) rotate(1840deg) scale(0.93);   /* langsam */
    }
    76% {
        opacity: 0.55;
        transform: translateY(-20px) rotate(1950deg) scale(0.95); /* schnell */
    }
    80% {
        opacity: 0.45;
        transform: translateY(5px) rotate(1990deg) scale(0.9);    /* langsam */
    }
    85% {
        opacity: 0.35;
        transform: translateY(-15px) rotate(2080deg) scale(0.85); /* schnell */
    }
    92% {
        opacity: 0.2;
        transform: translateY(0) rotate(2120deg) scale(0.78);     /* langsam */
    }
    100% {
        left: 115%;
        opacity: 0;
        transform: translateY(0) rotate(2200deg) scale(0.7);
    }
}

/* Wellenförmiges Yin-Yang - Bildschirmbreite sanfte Sinuswelle */
.wave-divider .wave-yinyang {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='waveyyblur' x='-20%25' y='-50%25' width='140%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='10'/%3E%3C/filter%3E%3ClinearGradient id='goldWave' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23f0d060' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%23d4af37' stop-opacity='0.3'/%3E%3C/linearGradient%3E%3ClinearGradient id='darkWave' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%231a1a24' stop-opacity='0.5'/%3E%3Cstop offset='100%25' stop-color='%23050508' stop-opacity='0.7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23waveyyblur)' d='M0,100 Q180,40 360,100 Q540,160 720,100 Q900,40 1080,100 Q1260,160 1440,100 L1440,0 L0,0 Z' fill='url(%23goldWave)'/%3E%3Cpath filter='url(%23waveyyblur)' d='M0,100 Q180,40 360,100 Q540,160 720,100 Q900,40 1080,100 Q1260,160 1440,100 L1440,200 L0,200 Z' fill='url(%23darkWave)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 10;
    filter: blur(6px);
    animation: waveYinyangFull 60s ease-in-out infinite;
    pointer-events: none;
}

/* Versetzte Starts für verschiedene Sections */
.section-musik .wave-yinyang { animation-delay: 0s; }
.section-video .wave-yinyang { animation-delay: -20s; }
.section-about .wave-yinyang { animation-delay: -40s; }

/* Animation für bildschirmbreites Yin-Yang - ultra transparent */
@keyframes waveYinyangFull {
    0%, 100% {
        opacity: 0;
        transform: translateY(50px) scaleY(0.5);
    }
    5% {
        opacity: 0;
    }
    15% {
        opacity: 0.12;
        transform: translateY(20px) scaleY(0.8);
    }
    25% {
        opacity: 0.18;
        transform: translateY(-10px) scaleY(1.1);
    }
    35% {
        opacity: 0.22;
        transform: translateY(5px) scaleY(0.95);
    }
    45% {
        opacity: 0.25;
        transform: translateY(-15px) scaleY(1.05);
    }
    50% {
        opacity: 0.25;
        transform: translateY(0) scaleY(1);
    }
    55% {
        opacity: 0.25;
        transform: translateY(-10px) scaleY(1.08);
    }
    65% {
        opacity: 0.22;
        transform: translateY(8px) scaleY(0.92);
    }
    75% {
        opacity: 0.18;
        transform: translateY(-5px) scaleY(1.02);
    }
    85% {
        opacity: 0.12;
        transform: translateY(15px) scaleY(0.85);
    }
    95% {
        opacity: 0;
        transform: translateY(40px) scaleY(0.6);
    }
}

/* Synchronisierte Animation 2 - variierende Rotationsgeschwindigkeit (gegenläufig) */
@keyframes yinyangSync2 {
    0% {
        left: -85%;
        opacity: 0;
        transform: translateY(0) rotate(0deg) scale(0.6);
    }
    5% {
        opacity: 0.4;
        transform: translateY(-22px) rotate(-150deg) scale(0.8);   /* schnell */
    }
    10% {
        opacity: 0.55;
        transform: translateY(10px) rotate(-190deg) scale(0.88);   /* langsam */
    }
    15% {
        opacity: 0.65;
        transform: translateY(-30px) rotate(-380deg) scale(0.95);  /* schnell */
    }
    20% {
        opacity: 0.6;
        transform: translateY(8px) rotate(-430deg) scale(0.9);     /* langsam */
    }
    25% {
        opacity: 0.72;
        transform: translateY(-35px) rotate(-620deg) scale(1);     /* schnell */
    }
    30% {
        opacity: 0.68;
        transform: translateY(12px) rotate(-680deg) scale(0.92);   /* langsam */
    }
    35% {
        opacity: 0.75;
        transform: translateY(-28px) rotate(-880deg) scale(1.02);  /* schnell */
    }
    40% {
        opacity: 0.7;
        transform: translateY(6px) rotate(-940deg) scale(0.94);    /* langsam */
    }
    45% {
        opacity: 0.78;
        transform: translateY(-32px) rotate(-1140deg) scale(1);    /* schnell */
    }
    50% {
        opacity: 0.75;
        transform: translateY(10px) rotate(-1190deg) scale(0.93);  /* langsam */
    }
    55% {
        opacity: 0.8;
        transform: translateY(-30px) rotate(-1380deg) scale(1.02); /* schnell */
    }
    60% {
        opacity: 0.72;
        transform: translateY(8px) rotate(-1430deg) scale(0.95);   /* langsam */
    }
    65% {
        opacity: 0.7;
        transform: translateY(-25px) rotate(-1600deg) scale(0.98); /* schnell */
    }
    70% {
        opacity: 0.6;
        transform: translateY(5px) rotate(-1650deg) scale(0.92);   /* langsam */
    }
    75% {
        opacity: 0.5;
        transform: translateY(-20px) rotate(-1800deg) scale(0.9);  /* schnell */
    }
    80% {
        opacity: 0.4;
        transform: translateY(8px) rotate(-1850deg) scale(0.85);   /* langsam */
    }
    85% {
        opacity: 0.3;
        transform: translateY(-15px) rotate(-1980deg) scale(0.8);  /* schnell */
    }
    92% {
        opacity: 0.15;
        transform: translateY(0) rotate(-2020deg) scale(0.72);     /* langsam */
    }
    100% {
        left: 120%;
        opacity: 0;
        transform: translateY(0) rotate(-2100deg) scale(0.6);
    }
}

@keyframes wave1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1440px); }
}

@keyframes wave2 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1440px); }
}

@keyframes wave3 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1440px); }
}

@keyframes wave4 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1440px); }
}

@keyframes wave5 {
    0% { transform: translateX(0); }
    100% { transform: translateX(-1440px); }
}

@keyframes shimmerWave {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

/* Riesenwellen - Giant Waves in 4 different sizes */
.wave-divider .giant-wave {
    position: absolute;
    bottom: 0;
    left: -100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none;
}

/* Riesenwelle 1: Größte Welle - meditativ langsam */
.wave-divider .giant-wave-1 {
    width: 100%;
    height: 220px;
    bottom: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 220'%3E%3Cdefs%3E%3Cfilter id='gb1' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='10'/%3E%3C/filter%3E%3ClinearGradient id='gg1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='20%25' stop-color='%23d4af37' stop-opacity='0.1'/%3E%3Cstop offset='40%25' stop-color='%23f0d060' stop-opacity='0.22'/%3E%3Cstop offset='60%25' stop-color='%23f0d060' stop-opacity='0.22'/%3E%3Cstop offset='80%25' stop-color='%23d4af37' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23gb1)' fill='url(%23gg1)' d='M0,160 C150,60 300,120 500,40 C700,100 850,30 1000,80 L1000,220 L0,220 Z'/%3E%3C/svg%3E");
    animation: giantWave1 45s cubic-bezier(0.35, 0, 0.65, 1) infinite;
    filter: blur(5px);
    z-index: 6;
}

/* Riesenwelle 2: Große Welle - meditativ */
.wave-divider .giant-wave-2 {
    width: 75%;
    height: 160px;
    bottom: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 160'%3E%3Cdefs%3E%3Cfilter id='gb2' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='8'/%3E%3C/filter%3E%3ClinearGradient id='gg2' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='25%25' stop-color='%23d4af37' stop-opacity='0.1'/%3E%3Cstop offset='50%25' stop-color='%23f0d060' stop-opacity='0.2'/%3E%3Cstop offset='75%25' stop-color='%23d4af37' stop-opacity='0.1'/%3E%3Cstop offset='100%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23gb2)' fill='url(%23gg2)' d='M0,120 C130,50 260,100 380,40 C500,80 620,30 750,70 L750,160 L0,160 Z'/%3E%3C/svg%3E");
    animation: giantWave2 35s cubic-bezier(0.35, 0, 0.65, 1) infinite;
    filter: blur(4px);
    z-index: 5;
}

/* Riesenwelle 3: Mittlere Welle - meditativ */
.wave-divider .giant-wave-3 {
    width: 55%;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 550 120'%3E%3Cdefs%3E%3Cfilter id='gb3' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='6'/%3E%3C/filter%3E%3ClinearGradient id='gg3' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='30%25' stop-color='%23d4af37' stop-opacity='0.08'/%3E%3Cstop offset='50%25' stop-color='%23f0d060' stop-opacity='0.18'/%3E%3Cstop offset='70%25' stop-color='%23d4af37' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23gb3)' fill='url(%23gg3)' d='M0,85 C90,40 180,75 275,30 C370,60 460,25 550,55 L550,120 L0,120 Z'/%3E%3C/svg%3E");
    animation: giantWave3 28s cubic-bezier(0.35, 0, 0.65, 1) infinite;
    filter: blur(3px);
    z-index: 4;
}

/* Riesenwelle 4: Kleine Welle - meditativ */
.wave-divider .giant-wave-4 {
    width: 40%;
    height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90'%3E%3Cdefs%3E%3Cfilter id='gb4' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='5'/%3E%3C/filter%3E%3ClinearGradient id='gg4' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3Cstop offset='30%25' stop-color='%23d4af37' stop-opacity='0.06'/%3E%3Cstop offset='50%25' stop-color='%23f0d060' stop-opacity='0.15'/%3E%3Cstop offset='70%25' stop-color='%23d4af37' stop-opacity='0.06'/%3E%3Cstop offset='100%25' stop-color='%23d4af37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath filter='url(%23gb4)' fill='url(%23gg4)' d='M0,60 C70,30 140,55 200,25 C260,50 330,20 400,45 L400,90 L0,90 Z'/%3E%3C/svg%3E");
    animation: giantWave4 22s cubic-bezier(0.35, 0, 0.65, 1) infinite;
    filter: blur(2px);
    z-index: 3;
}

/* Versetzter Start für verschiedene Sections */
.section-musik .giant-wave-1 { animation-delay: 0s; }
.section-musik .giant-wave-2 { animation-delay: -4s; }
.section-musik .giant-wave-3 { animation-delay: -2s; }
.section-musik .giant-wave-4 { animation-delay: -1s; }

.section-video .giant-wave-1 { animation-delay: -8s; }
.section-video .giant-wave-2 { animation-delay: -12s; }
.section-video .giant-wave-3 { animation-delay: -6s; }
.section-video .giant-wave-4 { animation-delay: -3s; }

.section-about .giant-wave-1 { animation-delay: -16s; }
.section-about .giant-wave-2 { animation-delay: -7s; }
.section-about .giant-wave-3 { animation-delay: -10s; }
.section-about .giant-wave-4 { animation-delay: -5s; }

/* Animation für größte Welle - majestätisch mit organischem Wogen */
@keyframes giantWave1 {
    0% {
        left: -110%;
        opacity: 0;
        transform: scaleY(0.7) translateY(0);
    }
    8% {
        opacity: 0.5;
        transform: scaleY(0.9) translateY(-5px);
    }
    20% {
        opacity: 0.85;
        transform: scaleY(1.15) translateY(-12px);
    }
    35% {
        transform: scaleY(1.05) translateY(-8px);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.1) translateY(-15px);
    }
    65% {
        transform: scaleY(1) translateY(-10px);
    }
    80% {
        opacity: 0.85;
        transform: scaleY(1.12) translateY(-8px);
    }
    92% {
        opacity: 0.5;
        transform: scaleY(0.95) translateY(-3px);
    }
    100% {
        left: 115%;
        opacity: 0;
        transform: scaleY(0.7) translateY(0);
    }
}

/* Animation für große Welle */
@keyframes giantWave2 {
    0% {
        left: -85%;
        opacity: 0;
        transform: scaleY(0.75) translateY(0);
    }
    12% {
        opacity: 0.6;
        transform: scaleY(1) translateY(-8px);
    }
    30% {
        opacity: 0.9;
        transform: scaleY(1.18) translateY(-14px);
    }
    50% {
        opacity: 1;
        transform: scaleY(1.05) translateY(-10px);
    }
    70% {
        opacity: 0.9;
        transform: scaleY(1.15) translateY(-12px);
    }
    88% {
        opacity: 0.6;
        transform: scaleY(0.95) translateY(-4px);
    }
    100% {
        left: 120%;
        opacity: 0;
        transform: scaleY(0.75) translateY(0);
    }
}

/* Animation für mittlere Welle */
@keyframes giantWave3 {
    0% {
        left: -65%;
        opacity: 0;
        transform: scaleY(0.8) translateY(0);
    }
    15% {
        opacity: 0.7;
        transform: scaleY(1.1) translateY(-10px);
    }
    35% {
        opacity: 1;
        transform: scaleY(1.22) translateY(-16px);
    }
    55% {
        opacity: 0.95;
        transform: scaleY(1.08) translateY(-12px);
    }
    75% {
        opacity: 0.85;
        transform: scaleY(1.18) translateY(-8px);
    }
    90% {
        opacity: 0.5;
        transform: scaleY(0.9) translateY(-3px);
    }
    100% {
        left: 125%;
        opacity: 0;
        transform: scaleY(0.8) translateY(0);
    }
}

/* Animation für kleine schnelle Welle */
@keyframes giantWave4 {
    0% {
        left: -50%;
        opacity: 0;
        transform: scaleY(0.85) translateY(0);
    }
    18% {
        opacity: 0.8;
        transform: scaleY(1.15) translateY(-12px);
    }
    40% {
        opacity: 1;
        transform: scaleY(1.25) translateY(-18px);
    }
    60% {
        opacity: 0.95;
        transform: scaleY(1.1) translateY(-14px);
    }
    80% {
        opacity: 0.7;
        transform: scaleY(1.2) translateY(-8px);
    }
    100% {
        left: 130%;
        opacity: 0;
        transform: scaleY(0.85) translateY(0);
    }
}

/* ========================================
   Music Section
   ======================================== */

.section-musik {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(100, 100, 200, 0.05) 0%, transparent 50%),
        transparent;
}

.music-platforms {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

.section.visible .music-platforms {
    opacity: 1;
    transform: translateY(0);
}

.platform-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.5rem 3.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    text-decoration: none;
    color: var(--color-text-muted);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.platform-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition-smooth);
}

.platform-link:hover::before {
    opacity: 1;
}

.platform-link:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--color-text);
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(212, 175, 55, 0.1);
}

.platform-link svg {
    width: 52px;
    height: 52px;
    transition: var(--transition-smooth);
    filter: drop-shadow(0 0 0 transparent);
}

.platform-link:hover svg {
    color: var(--color-accent);
    filter: drop-shadow(0 0 15px var(--color-accent-glow));
    transform: scale(1.1);
}

.platform-link span {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ========================================
   Video Section
   ======================================== */

.section-video {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(100, 100, 200, 0.05) 0%, transparent 60%),
        transparent;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 175, 55, 0.05);
    opacity: 0;
    transform: translateY(30px) scale(0.98);
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

.section.visible .video-container {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.video-container iframe,
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    color: var(--color-text-muted);
    background:
        radial-gradient(circle at center, rgba(212, 175, 55, 0.03) 0%, transparent 60%),
        var(--color-bg-secondary);
}

.video-placeholder svg {
    width: 80px;
    height: 80px;
    opacity: 0.3;
    transition: var(--transition-smooth);
}

.video-placeholder:hover svg {
    opacity: 0.5;
    transform: scale(1.1);
    color: var(--color-accent);
}

.video-placeholder p {
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* ========================================
   About Section
   ======================================== */

.section-about {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(100, 100, 200, 0.05) 0%, transparent 50%),
        transparent;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

.section.visible .about-content {
    opacity: 1;
    transform: translateY(0);
}

.about-text .lead {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 2rem;
    line-height: 1.9;
    position: relative;
}

.about-text .lead::first-letter {
    font-family: var(--font-display);
    font-size: 3.5rem;
    float: left;
    margin-right: 0.5rem;
    line-height: 1;
    color: var(--color-accent);
}

.about-text p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.9;
}

.about-tagline {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-style: italic;
    font-weight: 400;
    color: var(--color-accent) !important;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    letter-spacing: 0.05em;
}

.about-image {
    display: flex;
    justify-content: center;
}

.image-placeholder {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, var(--color-cosmic-purple) 0%, var(--color-bg) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    transition: var(--transition-smooth);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.image-placeholder:hover {
    transform: scale(1.02);
    border-color: rgba(212, 175, 55, 0.2);
}

.about-img {
    width: 100%;
    max-width: 500px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    transition: var(--transition-smooth);
}

.about-img:hover {
    transform: scale(1.02);
    border-color: rgba(212, 175, 55, 0.3);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(212, 175, 55, 0.1);
}

/* ========================================
   Contact Section
   ======================================== */

.section-kontakt {
    background: transparent;
    min-height: auto;
    padding-bottom: 6rem;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}

.section.visible .social-links {
    opacity: 1;
    transform: translateY(0);
}

.social-link {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: var(--color-text-muted);
    transition: var(--transition-bounce);
    position: relative;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transition-smooth);
    z-index: -1;
}

.social-link:hover::before {
    width: 120%;
    height: 120%;
}

.social-link:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2);
}

.social-link svg {
    width: 26px;
    height: 26px;
    transition: var(--transition-smooth);
}

.social-link:hover svg {
    filter: drop-shadow(0 0 8px var(--color-accent-glow));
}

.contact-email {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    opacity: 0;
    transition: opacity 0.8s ease-out 0.6s;
}

.section.visible .contact-email {
    opacity: 1;
}

.contact-email:hover {
    color: var(--color-accent);
}

/* ========================================
   Footer
   ======================================== */

.footer {
    padding: 3rem 2rem;
    text-align: center;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    z-index: 1;
}

.footer p {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 968px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .about-image {
        order: -1;
    }

    .image-placeholder {
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 1rem 1.5rem;
    }

    .nav-links {
        display: none;
    }

    .section {
        padding: 6rem 1.5rem;
    }

    .platform-link {
        padding: 2rem 2.5rem;
    }

    .music-platforms {
        gap: 1.5rem;
    }

    .social-links {
        gap: 1rem;
    }

    .social-link {
        width: 56px;
        height: 56px;
    }

    .enter-title {
        letter-spacing: 0.2em;
    }

    /* Mobile: Flash Ripples optimieren - maximale Performance */
    .flash-ripples {
        width: 120vh;
        height: 120vh;
    }

    .flash-ripple.gold,
    .flash-ripple.silver,
    .flash-ripple.black {
        border-width: 2px;
        box-shadow: none;
    }

    /* Nur 4 Ripples auf Mobile */
    .flash-ripple:nth-child(n+5) {
        display: none;
    }

    .flash-ripples.active .flash-ripple {
        animation-duration: 2.5s;
    }

    /* Mobile: Kein Enter Screen, kein Video - direkt Logo */
    .enter-screen {
        display: none !important;
    }

    #brand-video {
        display: none !important;
        animation: none !important;
        clip-path: none !important;
    }

    /* Mobile: Logo sofort sichtbar */
    .logo-overlay {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .logo-image {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Mobile: Keine Ripples */
    .logo-ripples {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .logo-text {
        letter-spacing: 0.15em;
    }

    .section-title {
        letter-spacing: 0.15em;
    }

    .platform-link {
        flex: 1 1 calc(50% - 0.75rem);
        padding: 1.5rem 1rem;
    }

    .platform-link svg {
        width: 40px;
        height: 40px;
    }

    .enter-btn {
        padding: 1rem 2rem;
        font-size: 0.9rem;
    }
}

/* ========================================
   Sonic Orbits - Planetary Music Player
   ======================================== */

.sonic-orbits {
    margin-top: 5rem;
    padding: 3rem 0;
    text-align: center;
}

.orbits-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-accent);
    letter-spacing: 0.2em;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
}

.orbits-subtitle {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
    margin-bottom: 3rem;
}

.solar-system {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    flex-wrap: wrap;
    padding: 4rem 2rem;
    min-height: 450px;
    position: relative;
}

/* Planet Base Styles */
.planet {
    position: relative;
    cursor: pointer;
    transition: transform 0.5s ease;
}

/* Custom Cursor aktiv - kein Standard-Cursor auf Planeten und deren Elemente */
body.cursor-active .planet,
body.cursor-active .planet *,
body.cursor-active .play-indicator,
body.cursor-active .play-indicator *,
body.cursor-active .planet-body,
body.cursor-active .planet-glow,
body.cursor-active .planet-label,
body.cursor-active .progress-ring,
body.cursor-active .progress-ring *,
body.cursor-active .easter-earth,
body.cursor-active .easter-earth *,
body.cursor-active .easter-moon,
body.cursor-active .easter-moon *,
body.cursor-active .easter-jupiter,
body.cursor-active .easter-jupiter *,
body.cursor-active .easter-saturn,
body.cursor-active .easter-saturn * {
    cursor: none !important;
}

/* Räumliche Verteilung der Planeten */
.planet-1 {
    width: 100px;
    height: 100px;
    transform: translateY(-40px);
}

.planet-2 {
    width: 110px;
    height: 110px;
    margin-top: 300px;
}

.planet-3 {
    width: 130px;
    height: 130px;
    transform: translateY(-20px);
}

.planet:hover {
    transform: scale(1.1);
}

.planet-1:hover {
    transform: translateY(-40px) scale(1.1);
}

.planet-2:hover {
    transform: scale(1.1);
}

.planet-3:hover {
    transform: translateY(-20px) scale(1.1);
}

.planet-body {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.5s ease;
}

.planet-glow {
    display: none !important;
}

.planet:hover .planet-glow,
.planet.playing .planet-glow {
    display: none !important;
}

/* Planet 1: Floating Forms - Blauer Neptun */
.planet-1 .planet-body {
    background: url('../img/40.png') center/cover no-repeat;
    filter: drop-shadow(0 0 15px rgba(126, 200, 227, 0.8)) drop-shadow(0 0 30px rgba(126, 200, 227, 0.5));
}

.planet-1 {
    animation: planetFloat 6s ease-in-out infinite;
}

.planet-1 .planet-glow {
    display: none;
}

.planet-1 .planet-ring,
.planet-2 .planet-ring,
.planet-3 .planet-ring,
.planet .saturn-ring {
    display: none;
}

/* Planet 2: Cloudy Vibes - Roter Mars */
.planet-2 .planet-body {
    background: url('../img/42.png') center/cover no-repeat;
    filter: drop-shadow(0 0 15px rgba(199, 62, 29, 0.8)) drop-shadow(0 0 30px rgba(199, 62, 29, 0.5));
}

.planet-2 {
    animation: planetFloat 5s ease-in-out infinite 0.5s;
}

.planet-2 .planet-glow {
    display: none;
}

/* Planet 3: Vintage Steel - Goldener Saturn */
.planet-3 .planet-body {
    background: url('../img/41.png') center/cover no-repeat;
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.8)) drop-shadow(0 0 40px rgba(212, 175, 55, 0.5));
}

.planet-3 {
    animation: planetFloat 7s ease-in-out infinite 1s;
}

.planet-3 .planet-glow {
    display: none;
}

.planet-3 .saturn-ring {
    display: none;
}

/* Planet Labels */
.planet-label {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
}

.planet:hover .planet-label,
.planet.playing .planet-label {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

.track-title {
    display: block;
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--color-text);
    letter-spacing: 0.1em;
}

.track-duration {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Play Indicator */
.play-indicator {
    display: none;
}

.play-indicator svg {
    width: 20px;
    height: 20px;
    fill: var(--color-accent);
    margin-left: 3px;
}

.planet:hover .play-indicator {
    opacity: 1;
}

.planet.playing .play-indicator svg {
    display: none;
}

.planet.playing .play-indicator::before,
.planet.playing .play-indicator::after {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--color-accent);
    border-radius: 2px;
}

.planet.playing .play-indicator::before {
    margin-right: 4px;
}

/* Progress Ring */
.progress-ring {
    display: none !important;
}

.planet.playing .progress-ring {
    display: none !important;
}

.planet-1 .progress-ring svg {
    width: 120px;
    height: 120px;
}

.planet-2 .progress-ring svg {
    width: 100px;
    height: 100px;
}

.planet-3 .progress-ring svg {
    width: 150px;
    height: 150px;
}

.progress-ring circle {
    fill: none;
    stroke-width: 3;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.progress-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

.progress-bar {
    stroke: var(--color-accent);
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 283;
    filter: drop-shadow(0 0 5px var(--color-accent));
    transition: stroke-dashoffset 0.1s linear;
}

/* Planet Animations */
@keyframes planetFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

@keyframes planetPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.8;
    }
}

/* Playing State Animations */
.planet.playing .planet-body {
    animation: planetPlaying 1s ease-in-out infinite;
}

@keyframes planetPlaying {
    0%, 100% {
        box-shadow: 0 0 40px currentColor;
    }
    50% {
        box-shadow: 0 0 60px currentColor;
    }
}

.planet-1.playing .planet-body {
    color: rgba(126, 200, 227, 0.6);
}

.planet-2.playing .planet-body {
    color: rgba(232, 168, 124, 0.6);
}

.planet-3.playing .planet-body {
    color: rgba(240, 208, 96, 0.6);
}

/* Sonic Orbits Responsive */
@media (max-width: 768px) {
    .solar-system {
        gap: 2rem;
    }

    .planet-1 .planet-body {
        width: 70px;
        height: 70px;
    }

    .planet-2 .planet-body {
        width: 75px;
        height: 75px;
    }

    .planet-3 .planet-body {
        width: 90px;
        height: 90px;
    }

    .planet-3 .saturn-ring {
        width: 140px;
        height: 35px;
    }

    .orbits-title {
        font-size: 1.5rem;
    }
}

/* ========================================
   Easter Eggs - Hidden Discoveries
   ======================================== */

/* Hidden Moon Easter Egg */
.easter-moon {
    position: fixed;
    top: 19%;
    right: 21%;
    width: 55px;
    height: 55px;
    cursor: pointer;
    z-index: 51;
    opacity: 0;
    transition: all 0.8s ease;
    pointer-events: none;
    animation: moonOrbit 60s linear infinite;
}

/* Erst sichtbar wenn von Logo-Page weggescrollt */
body.easter-eggs-visible .easter-moon {
    opacity: 0.8;
    pointer-events: auto;
}

@keyframes moonOrbit {
    0% { transform: rotate(0deg) translateX(8px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(8px) rotate(-360deg); }
}

.easter-moon:hover {
    opacity: 0.7;
    transform: scale(1.3);
    animation-play-state: paused;
}

.easter-moon .moon-body {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('/img/moon.png') center/cover no-repeat;
}

.easter-moon .moon-crescent {
    position: absolute;
    top: 3px;
    right: 2px;
    width: 70%;
    height: 85%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, transparent 50%, rgba(0, 0, 0, 0.15) 100%);
    box-shadow: inset -5px -3px 10px rgba(180, 170, 130, 0.4);
}

.easter-moon .moon-glow {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 250, 200, 0.5) 0%,
        rgba(255, 240, 180, 0.3) 40%,
        transparent 70%);
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.easter-moon:hover .moon-glow {
    opacity: 1;
}

/* Buddha Container */
.buddha-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Floating Buddha in Golden Sphere */
.floating-buddha {
    position: absolute;
    width: 240px;
    height: 240px;
    pointer-events: none;
    /* Buddha ist am langsamsten - verlässt als Letzter das Bild */
    animation: buddhaFloat 26s linear forwards;
    transform-style: preserve-3d;
}

/* Buddha Silhouette rotiert schneller um eigene Achse */
.floating-buddha .buddha-silhouette {
    animation: buddhaInnerFloat 4s ease-in-out infinite, buddhaRotate 10s linear infinite;
}

@keyframes buddhaRotate {
    0% { transform: translate(-50%, -50%) rotateY(0deg); }
    100% { transform: translate(-50%, -50%) rotateY(360deg); }
}

/* Buddha: einheitliches Schweben von links nach rechts */
@keyframes buddhaFloat {
    /* Eintritt - fast unsichtbar */
    0% {
        transform: translate(-150px, 45vh) scale(0.85);
        opacity: 0;
    }
    /* Ins Bild gleiten - noch kaum sichtbar */
    5% {
        transform: translate(-50px, 45vh) scale(0.87);
        opacity: 0.03;
    }
    /* Links verweilen - langsam sichtbar werden */
    12% {
        transform: translate(3vw, 45vh) scale(0.88);
        opacity: 0.1;
    }
    20% {
        transform: translate(6vw, 45vh) scale(0.9);
        opacity: 0.25;
    }
    28% {
        transform: translate(9vw, 45vh) scale(0.9);
        opacity: 0.45;
    }
    /* Jetzt sichtbar - einheitlich durchschweben */
    35% {
        transform: translate(20vw, 45vh) scale(0.92);
        opacity: 0.6;
    }
    45% {
        transform: translate(35vw, 45vh) scale(0.93);
        opacity: 0.65;
    }
    55% {
        transform: translate(50vw, 45vh) scale(0.93);
        opacity: 0.65;
    }
    65% {
        transform: translate(65vw, 45vh) scale(0.92);
        opacity: 0.6;
    }
    75% {
        transform: translate(80vw, 45vh) scale(0.9);
        opacity: 0.5;
    }
    75% {
        transform: translate(84vw, 50vh) scale(0.89);
        opacity: 0.4;
    }
    80% {
        transform: translate(90vw, 42vh) scale(0.88);
        opacity: 0.45;
    }
    85% {
        transform: translate(92vw, 45vh) scale(0.88);
        opacity: 0.25;
    }
    92% {
        transform: translate(102vw, 45vh) scale(0.86);
        opacity: 0.1;
    }
    100% {
        transform: translate(115vw, 45vh) scale(0.85);
        opacity: 0;
    }
}

/* Sternschnuppen sanft ausblenden wenn Buddha kommt */
body.buddha-preparing .shooting-star {
    opacity: 0 !important;
    transition: opacity 2s ease-out;
}

/* Sternschnuppen komplett versteckt während Buddha fliegt */
body.buddha-flying .shooting-star {
    opacity: 0 !important;
    visibility: hidden;
}

/* Mystische Nebelschwaden um Buddha */
.buddha-mist {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320%;
    height: 320%;
    pointer-events: none;
    opacity: 0.85;
}

.mist-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: blur(20px);
}

.mist-layer-1 {
    background: radial-gradient(ellipse at 30% 40%,
        rgba(212, 175, 55, 0.3) 0%,
        rgba(255, 223, 120, 0.15) 30%,
        transparent 60%);
    animation: mistSwirl1 8s ease-in-out infinite;
}

.mist-layer-2 {
    background: radial-gradient(ellipse at 70% 60%,
        rgba(255, 248, 220, 0.25) 0%,
        rgba(212, 175, 55, 0.1) 40%,
        transparent 65%);
    animation: mistSwirl2 10s ease-in-out infinite;
}

.mist-layer-3 {
    background: radial-gradient(ellipse at 50% 30%,
        rgba(255, 215, 0, 0.2) 0%,
        rgba(218, 165, 32, 0.1) 35%,
        transparent 55%);
    animation: mistSwirl3 12s ease-in-out infinite;
}

.mist-layer-4 {
    background: radial-gradient(ellipse at 40% 70%,
        rgba(255, 255, 240, 0.2) 0%,
        rgba(212, 175, 55, 0.08) 45%,
        transparent 70%);
    animation: mistSwirl4 9s ease-in-out infinite;
}

@keyframes mistSwirl1 {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: rotate(15deg) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes mistSwirl2 {
    0%, 100% {
        transform: rotate(0deg) scale(1.05);
        opacity: 0.5;
    }
    50% {
        transform: rotate(-20deg) scale(0.95);
        opacity: 0.7;
    }
}

@keyframes mistSwirl3 {
    0%, 100% {
        transform: rotate(5deg) scale(0.95) translateX(0);
        opacity: 0.6;
    }
    33% {
        transform: rotate(-10deg) scale(1.05) translateX(5%);
        opacity: 0.8;
    }
    66% {
        transform: rotate(10deg) scale(1) translateX(-5%);
        opacity: 0.5;
    }
}

@keyframes mistSwirl4 {
    0%, 100% {
        transform: rotate(-5deg) scale(1);
        opacity: 0.5;
    }
    50% {
        transform: rotate(12deg) scale(1.08);
        opacity: 0.7;
    }
}

/* Bläulich-grauer ätherischer Nebel */
.mist-layer-blue-1 {
    background: radial-gradient(ellipse at 60% 50%,
        rgba(150, 180, 220, 0.35) 0%,
        rgba(120, 150, 200, 0.2) 35%,
        rgba(100, 130, 180, 0.1) 55%,
        transparent 75%);
    animation: blueMistSwirl1 11s ease-in-out infinite;
    filter: blur(25px);
}

.mist-layer-blue-2 {
    background: radial-gradient(ellipse at 35% 60%,
        rgba(180, 200, 230, 0.3) 0%,
        rgba(140, 170, 210, 0.18) 40%,
        rgba(110, 140, 190, 0.08) 60%,
        transparent 80%);
    animation: blueMistSwirl2 14s ease-in-out infinite;
    filter: blur(30px);
}

.mist-layer-blue-3 {
    background: radial-gradient(ellipse at 50% 40%,
        rgba(160, 190, 225, 0.28) 0%,
        rgba(130, 160, 200, 0.15) 45%,
        transparent 70%);
    animation: blueMistSwirl3 9s ease-in-out infinite;
    filter: blur(22px);
}

@keyframes blueMistSwirl1 {
    0%, 100% {
        transform: rotate(10deg) scale(1.1) translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: rotate(-15deg) scale(1.2) translateX(8%);
        opacity: 0.7;
    }
}

@keyframes blueMistSwirl2 {
    0%, 100% {
        transform: rotate(-8deg) scale(1.15);
        opacity: 0.4;
    }
    33% {
        transform: rotate(12deg) scale(1.05) translateY(-5%);
        opacity: 0.6;
    }
    66% {
        transform: rotate(-5deg) scale(1.2) translateY(5%);
        opacity: 0.5;
    }
}

@keyframes blueMistSwirl3 {
    0%, 100% {
        transform: rotate(5deg) scale(1);
        opacity: 0.45;
    }
    50% {
        transform: rotate(-12deg) scale(1.15);
        opacity: 0.65;
    }
}

.buddha-sphere {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 223, 120, 0.6) 0%,
        rgba(212, 175, 55, 0.45) 40%,
        rgba(180, 140, 40, 0.3) 70%,
        rgba(150, 110, 30, 0.15) 100%);
    box-shadow:
        0 0 40px rgba(212, 175, 55, 0.4),
        0 0 80px rgba(212, 175, 55, 0.25),
        0 0 120px rgba(212, 175, 55, 0.12),
        inset 0 0 30px rgba(255, 255, 255, 0.2);
    animation: spherePulse 3s ease-in-out infinite;
    opacity: 0.85;
}

@keyframes spherePulse {
    0%, 100% {
        box-shadow:
            0 0 40px rgba(212, 175, 55, 0.6),
            0 0 80px rgba(212, 175, 55, 0.4),
            0 0 120px rgba(212, 175, 55, 0.2),
            inset 0 0 30px rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 0 60px rgba(212, 175, 55, 0.8),
            0 0 100px rgba(212, 175, 55, 0.5),
            0 0 150px rgba(212, 175, 55, 0.3),
            inset 0 0 40px rgba(255, 255, 255, 0.4);
    }
}

.buddha-silhouette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: buddhaInnerFloat 4s ease-in-out infinite;
}

.buddha-silhouette img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0.8;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.85))
            drop-shadow(0 0 25px rgba(212, 175, 55, 0.6))
            drop-shadow(0 0 40px rgba(212, 175, 55, 0.35));
}

/* Buddha Inner Aura */
.buddha-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 223, 120, 0.4) 0%,
        rgba(212, 175, 55, 0.2) 40%,
        transparent 70%);
    animation: auraBreath 3s ease-in-out infinite;
}

@keyframes auraBreath {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

@keyframes buddhaInnerFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-5px);
    }
}

/* Sparkle Trail hinter dem Buddha */
.buddha-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 223, 120, 1) 0%, rgba(212, 175, 55, 0) 70%);
    pointer-events: none;
    animation: sparkle 1.5s ease-out forwards;
}

@keyframes sparkle {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.2);
    }
}

/* ========================================
   Kleine Goldene Mönche (Buddha Begleiter)
   ======================================== */

.floating-monk {
    position: absolute;
    width: 55px;
    height: 55px;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* Verschiedene Flugbahnen für die Mönche */
.floating-monk.monk-1 { animation: monkFloat1 20s linear forwards; }
.floating-monk.monk-2 { animation: monkFloat2 22s linear forwards; }
.floating-monk.monk-3 { animation: monkFloat3 19s linear forwards; }
.floating-monk.monk-4 { animation: monkFloat4 21s linear forwards; }
.floating-monk.monk-5 { animation: monkFloat5 23s linear forwards; }
.floating-monk.monk-6 { animation: monkFloat6 18s linear forwards; }

/* Mönch 1: Oben links nach rechts */
@keyframes monkFloat1 {
    0% { transform: translate(-80px, 15vh) scale(0.8); opacity: 0; }
    8% { transform: translate(5vw, 18vh) scale(0.85); opacity: 0.15; }
    25% { transform: translate(25vw, 12vh) scale(0.9); opacity: 0.7; }
    50% { transform: translate(55vw, 20vh) scale(0.9); opacity: 0.75; }
    75% { transform: translate(85vw, 15vh) scale(0.85); opacity: 0.5; }
    100% { transform: translate(115vw, 18vh) scale(0.8); opacity: 0; }
}

/* Mönch 2: Unten diagonal */
@keyframes monkFloat2 {
    0% { transform: translate(-60px, 75vh) scale(0.75); opacity: 0; }
    10% { transform: translate(8vw, 72vh) scale(0.8); opacity: 0.2; }
    30% { transform: translate(30vw, 78vh) scale(0.85); opacity: 0.65; }
    55% { transform: translate(58vw, 70vh) scale(0.88); opacity: 0.7; }
    80% { transform: translate(88vw, 75vh) scale(0.82); opacity: 0.4; }
    100% { transform: translate(118vw, 72vh) scale(0.75); opacity: 0; }
}

/* Mönch 3: Mitte-oben, schneller */
@keyframes monkFloat3 {
    0% { transform: translate(-70px, 28vh) scale(0.82); opacity: 0; }
    6% { transform: translate(3vw, 25vh) scale(0.85); opacity: 0.1; }
    20% { transform: translate(22vw, 30vh) scale(0.92); opacity: 0.6; }
    45% { transform: translate(48vw, 25vh) scale(0.95); opacity: 0.8; }
    70% { transform: translate(75vw, 32vh) scale(0.9); opacity: 0.55; }
    100% { transform: translate(112vw, 28vh) scale(0.82); opacity: 0; }
}

/* Mönch 4: Unten-Mitte */
@keyframes monkFloat4 {
    0% { transform: translate(-90px, 62vh) scale(0.78); opacity: 0; }
    12% { transform: translate(10vw, 65vh) scale(0.82); opacity: 0.18; }
    35% { transform: translate(38vw, 58vh) scale(0.88); opacity: 0.68; }
    60% { transform: translate(65vw, 65vh) scale(0.9); opacity: 0.72; }
    85% { transform: translate(92vw, 60vh) scale(0.84); opacity: 0.35; }
    100% { transform: translate(120vw, 62vh) scale(0.78); opacity: 0; }
}

/* Mönch 5: Ganz oben */
@keyframes monkFloat5 {
    0% { transform: translate(-50px, 8vh) scale(0.7); opacity: 0; }
    15% { transform: translate(12vw, 5vh) scale(0.75); opacity: 0.12; }
    40% { transform: translate(42vw, 10vh) scale(0.82); opacity: 0.55; }
    65% { transform: translate(72vw, 6vh) scale(0.8); opacity: 0.6; }
    90% { transform: translate(98vw, 8vh) scale(0.75); opacity: 0.25; }
    100% { transform: translate(125vw, 7vh) scale(0.7); opacity: 0; }
}

/* Mönch 6: Ganz unten, am schnellsten */
@keyframes monkFloat6 {
    0% { transform: translate(-65px, 85vh) scale(0.8); opacity: 0; }
    5% { transform: translate(2vw, 88vh) scale(0.85); opacity: 0.1; }
    18% { transform: translate(18vw, 82vh) scale(0.9); opacity: 0.6; }
    40% { transform: translate(42vw, 88vh) scale(0.92); opacity: 0.75; }
    65% { transform: translate(68vw, 83vh) scale(0.88); opacity: 0.6; }
    85% { transform: translate(90vw, 87vh) scale(0.82); opacity: 0.3; }
    100% { transform: translate(115vw, 85vh) scale(0.8); opacity: 0; }
}

/* Goldene Sphäre um den Mönch - kleiner als Buddha */
.monk-sphere {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 250, 240, 0.7) 0%,
        rgba(255, 223, 120, 0.5) 35%,
        rgba(212, 175, 55, 0.35) 65%,
        rgba(180, 140, 40, 0.2) 100%);
    box-shadow:
        0 0 20px rgba(255, 223, 120, 0.5),
        0 0 40px rgba(212, 175, 55, 0.3),
        0 0 60px rgba(212, 175, 55, 0.15),
        inset 0 0 15px rgba(255, 255, 255, 0.4);
    animation: monkSpherePulse 2.5s ease-in-out infinite;
}

@keyframes monkSpherePulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(255, 223, 120, 0.5),
            0 0 40px rgba(212, 175, 55, 0.3),
            0 0 60px rgba(212, 175, 55, 0.15),
            inset 0 0 15px rgba(255, 255, 255, 0.4);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 223, 120, 0.7),
            0 0 55px rgba(212, 175, 55, 0.45),
            0 0 80px rgba(212, 175, 55, 0.25),
            inset 0 0 20px rgba(255, 255, 255, 0.5);
    }
}

/* Yin Yang Container */
.monk-silhouette {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: yinYangFloat 3s ease-in-out infinite, yinYangRotate 6s linear infinite;
    transform-style: preserve-3d;
}

@keyframes yinYangRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes yinYangFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-3px); }
}

/* Bestimmte Yin Yangs mit 3D Y-Achsen-Rotation (wie Buddha) */
.floating-monk.monk-2 .monk-silhouette,
.floating-monk.monk-5 .monk-silhouette {
    animation: yinYangFloat 3s ease-in-out infinite, yinYang3DRotate 8s linear infinite;
}

@keyframes yinYang3DRotate {
    0% { transform: translate(-50%, -50%) rotateY(0deg); }
    100% { transform: translate(-50%, -50%) rotateY(360deg); }
}

/* Yin Yang Symbol - Pure CSS */
.monk-figure {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(20, 20, 20, 0.95) 50%);
    box-shadow:
        0 0 12px rgba(255, 215, 0, 0.9),
        0 0 25px rgba(212, 175, 55, 0.6),
        inset 0 0 5px rgba(255, 215, 0, 0.4);
    overflow: hidden;
}

/* Obere Hälfte S-Kurve (weiß) */
.monk-head {
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
}

/* Untere Hälfte S-Kurve (schwarz) */
.monk-body {
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.98);
}

/* Kleiner weißer Punkt im schwarzen Bereich */
.monk-figure::before {
    content: '';
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 2;
}

/* Kleiner schwarzer Punkt im weißen Bereich */
.monk-figure::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.98);
    z-index: 2;
}

/* Goldene Aura um den Mönch */
.monk-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 250, 240, 0.3) 0%,
        rgba(255, 223, 120, 0.2) 40%,
        transparent 70%);
    animation: monkAuraBreath 2.5s ease-in-out infinite;
}

@keyframes monkAuraBreath {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

/* Subtiler Nebel um jeden Mönch */
.monk-mist {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    pointer-events: none;
    opacity: 0.5;
}

.monk-mist-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    filter: blur(12px);
}

.monk-mist-layer-1 {
    background: radial-gradient(ellipse at 30% 40%,
        rgba(255, 250, 240, 0.25) 0%,
        rgba(255, 223, 120, 0.12) 40%,
        transparent 65%);
    animation: monkMistSwirl1 6s ease-in-out infinite;
}

.monk-mist-layer-2 {
    background: radial-gradient(ellipse at 70% 60%,
        rgba(255, 235, 200, 0.2) 0%,
        rgba(212, 175, 55, 0.1) 45%,
        transparent 70%);
    animation: monkMistSwirl2 8s ease-in-out infinite;
}

@keyframes monkMistSwirl1 {
    0%, 100% { transform: rotate(-5deg) scale(1); opacity: 0.4; }
    50% { transform: rotate(8deg) scale(1.1); opacity: 0.6; }
}

@keyframes monkMistSwirl2 {
    0%, 100% { transform: rotate(3deg) scale(1.05); opacity: 0.35; }
    50% { transform: rotate(-6deg) scale(0.95); opacity: 0.55; }
}

/* ========================================
   Großes leuchtendes Om im Hintergrund
   ======================================== */

.background-om {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 70vh;
    height: 70vh;
    max-width: 700px;
    max-height: 700px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 4s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.background-om.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Intensiver goldener Leucht-Effekt dahinter */
.background-om::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 215, 0, 0.6) 0%,
        rgba(255, 200, 50, 0.4) 25%,
        rgba(255, 180, 0, 0.2) 50%,
        rgba(255, 150, 0, 0.1) 70%,
        transparent 90%);
    animation: omBackGlow 2.5s ease-in-out infinite;
    z-index: -1;
}

@keyframes omBackGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* Zweiter Leucht-Ring für noch mehr Intensität */
.background-om::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 200, 0.5) 0%,
        rgba(255, 230, 100, 0.3) 30%,
        transparent 60%);
    animation: omInnerGlow 2s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes omInnerGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
}

.background-om img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(255, 255, 200, 1))
            drop-shadow(0 0 40px rgba(255, 215, 0, 0.9))
            drop-shadow(0 0 80px rgba(255, 200, 50, 0.7))
            drop-shadow(0 0 120px rgba(255, 180, 0, 0.5));
    animation: omImageGlow 2.5s ease-in-out infinite;
}

@keyframes omImageGlow {
    0%, 100% {
        filter: drop-shadow(0 0 20px rgba(255, 255, 200, 1))
                drop-shadow(0 0 40px rgba(255, 215, 0, 0.9))
                drop-shadow(0 0 80px rgba(255, 200, 50, 0.7))
                drop-shadow(0 0 120px rgba(255, 180, 0, 0.5));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 35px rgba(255, 255, 220, 1))
                drop-shadow(0 0 60px rgba(255, 230, 100, 1))
                drop-shadow(0 0 100px rgba(255, 215, 0, 0.85))
                drop-shadow(0 0 160px rgba(255, 180, 0, 0.6));
        transform: scale(1.02);
    }
}

/* ========================================
   Goldenes Ohr-Mandala beim Musik-Abspielen
   ======================================== */

.background-ear {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    width: 60vh;
    height: 60vh;
    max-width: 600px;
    max-height: 600px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 4s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.background-ear.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Intensiver goldener Leucht-Effekt dahinter */
.background-ear::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 215, 0, 0.5) 0%,
        rgba(255, 200, 50, 0.35) 25%,
        rgba(255, 180, 0, 0.18) 50%,
        rgba(255, 150, 0, 0.08) 70%,
        transparent 90%);
    animation: earBackGlow 3s ease-in-out infinite;
    z-index: -1;
}

@keyframes earBackGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 1;
    }
}

/* Zweiter Leucht-Ring */
.background-ear::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 200, 0.4) 0%,
        rgba(255, 230, 100, 0.25) 30%,
        transparent 60%);
    animation: earInnerGlow 2.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

@keyframes earInnerGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.9;
    }
}

.background-ear img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.9))
            drop-shadow(0 0 35px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 70px rgba(255, 200, 50, 0.6))
            drop-shadow(0 0 100px rgba(255, 180, 0, 0.4));
    animation: earImageGlow 3s ease-in-out infinite;
}

@keyframes earImageGlow {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255, 255, 200, 0.9))
                drop-shadow(0 0 35px rgba(255, 215, 0, 0.8))
                drop-shadow(0 0 70px rgba(255, 200, 50, 0.6))
                drop-shadow(0 0 100px rgba(255, 180, 0, 0.4));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(255, 255, 220, 1))
                drop-shadow(0 0 50px rgba(255, 230, 100, 0.95))
                drop-shadow(0 0 90px rgba(255, 215, 0, 0.75))
                drop-shadow(0 0 130px rgba(255, 180, 0, 0.5));
        transform: scale(1.02);
    }
}

/* Fliegende Om Symbole - fast so groß wie Buddha */
.floating-om {
    position: absolute;
    width: 180px;
    height: 180px;
    pointer-events: none;
    transform-style: preserve-3d;
}

/* Verschiedene Flugbahnen für die Om Symbole */
.floating-om.om-1 { animation: omFloat1 21s linear forwards; }
.floating-om.om-2 { animation: omFloat2 19s linear forwards; }
.floating-om.om-3 { animation: omFloat3 23s linear forwards; }
.floating-om.om-4 { animation: omFloat4 20s linear forwards; }

/* Om 1: Oben-Mitte */
@keyframes omFloat1 {
    0% { transform: translate(-70px, 22vh) scale(0.8); opacity: 0; }
    10% { transform: translate(8vw, 25vh) scale(0.85); opacity: 0.2; }
    30% { transform: translate(32vw, 18vh) scale(0.92); opacity: 0.75; }
    55% { transform: translate(60vw, 24vh) scale(0.95); opacity: 0.8; }
    80% { transform: translate(88vw, 20vh) scale(0.88); opacity: 0.45; }
    100% { transform: translate(118vw, 22vh) scale(0.8); opacity: 0; }
}

/* Om 2: Unten */
@keyframes omFloat2 {
    0% { transform: translate(-55px, 68vh) scale(0.75); opacity: 0; }
    8% { transform: translate(5vw, 72vh) scale(0.82); opacity: 0.15; }
    25% { transform: translate(28vw, 65vh) scale(0.9); opacity: 0.7; }
    50% { transform: translate(52vw, 72vh) scale(0.92); opacity: 0.78; }
    75% { transform: translate(80vw, 68vh) scale(0.85); opacity: 0.5; }
    100% { transform: translate(112vw, 70vh) scale(0.75); opacity: 0; }
}

/* Om 3: Ganz oben */
@keyframes omFloat3 {
    0% { transform: translate(-80px, 8vh) scale(0.7); opacity: 0; }
    12% { transform: translate(10vw, 5vh) scale(0.78); opacity: 0.18; }
    35% { transform: translate(38vw, 12vh) scale(0.88); opacity: 0.65; }
    60% { transform: translate(65vw, 6vh) scale(0.9); opacity: 0.72; }
    85% { transform: translate(92vw, 10vh) scale(0.8); opacity: 0.35; }
    100% { transform: translate(122vw, 8vh) scale(0.7); opacity: 0; }
}

/* Om 4: Mitte-unten */
@keyframes omFloat4 {
    0% { transform: translate(-65px, 55vh) scale(0.78); opacity: 0; }
    9% { transform: translate(6vw, 52vh) scale(0.85); opacity: 0.15; }
    28% { transform: translate(30vw, 58vh) scale(0.92); opacity: 0.68; }
    52% { transform: translate(55vw, 52vh) scale(0.95); opacity: 0.75; }
    78% { transform: translate(85vw, 56vh) scale(0.88); opacity: 0.42; }
    100% { transform: translate(115vw, 54vh) scale(0.78); opacity: 0; }
}

/* Goldene Mandala-Sphäre um das Om */
.om-sphere {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 235, 180, 0.5) 0%,
        rgba(255, 215, 0, 0.35) 40%,
        rgba(212, 175, 55, 0.2) 70%,
        rgba(180, 140, 40, 0.1) 100%);
    box-shadow:
        0 0 15px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(212, 175, 55, 0.35),
        0 0 50px rgba(212, 175, 55, 0.15),
        inset 0 0 12px rgba(255, 255, 255, 0.3);
    animation: omSpherePulse 2.8s ease-in-out infinite;
}

@keyframes omSpherePulse {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(255, 215, 0, 0.6),
            0 0 30px rgba(212, 175, 55, 0.35),
            0 0 50px rgba(212, 175, 55, 0.15),
            inset 0 0 12px rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 25px rgba(255, 215, 0, 0.8),
            0 0 45px rgba(212, 175, 55, 0.5),
            0 0 70px rgba(212, 175, 55, 0.25),
            inset 0 0 18px rgba(255, 255, 255, 0.45);
        transform: scale(1.05);
    }
}

/* Om Symbol Container */
.om-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: omFloat 3.5s ease-in-out infinite, omRotate 12s linear infinite;
}

@keyframes omRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes omFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-2px); }
}

/* Bestimmte Oms mit 3D Y-Achsen-Rotation (wie Buddha) */
.floating-om.om-1 .om-symbol,
.floating-om.om-3 .om-symbol {
    animation: omFloat 3.5s ease-in-out infinite, om3DRotate 10s linear infinite;
}

@keyframes om3DRotate {
    0% { transform: translate(-50%, -50%) rotateY(0deg); }
    100% { transform: translate(-50%, -50%) rotateY(360deg); }
}

/* Das Om Bild */
.om-image {
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.9))
            drop-shadow(0 0 10px rgba(212, 175, 55, 0.7))
            drop-shadow(0 0 18px rgba(212, 175, 55, 0.5));
    opacity: 0.95;
    line-height: 1;
}

/* Goldene Aura um das Om */
.om-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 223, 120, 0.25) 0%,
        rgba(212, 175, 55, 0.15) 45%,
        transparent 70%);
    animation: omAuraBreath 3s ease-in-out infinite;
}

@keyframes omAuraBreath {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 0.9;
    }
}

/* Mandala-Ring um das Om */
.om-mandala {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    border-radius: 50%;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow:
        inset 0 0 10px rgba(255, 215, 0, 0.15),
        0 0 8px rgba(212, 175, 55, 0.2);
    animation: mandalaRotate 20s linear infinite;
    opacity: 0.6;
}

.om-mandala::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 115%;
    height: 115%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 215, 0, 0.25);
}

@keyframes mandalaRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Subtiler Nebel um das Om */
.om-mist {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180%;
    height: 180%;
    pointer-events: none;
    opacity: 0.45;
    background: radial-gradient(ellipse at center,
        rgba(255, 223, 120, 0.2) 0%,
        rgba(212, 175, 55, 0.1) 40%,
        transparent 70%);
    filter: blur(8px);
    animation: omMistPulse 5s ease-in-out infinite;
}

@keyframes omMistPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.6; }
}

/* Hidden Earth Easter Egg - größer und neben dem Mond */
.easter-earth {
    position: fixed;
    top: 24%;
    right: 25%;
    width: 75px;
    height: 75px;
    cursor: pointer;
    z-index: 50;
    opacity: 0;
    transition: all 0.8s ease;
    pointer-events: none;
}

/* Erst sichtbar wenn von Logo-Page weggescrollt */
body.easter-eggs-visible .easter-earth {
    opacity: 0.6;
    pointer-events: auto;
    filter: drop-shadow(0 0 10px rgba(30, 144, 255, 0.6)) drop-shadow(0 0 20px rgba(30, 144, 255, 0.4));
}

/* ISS orbiting Earth - independent top-layer element */
.iss-container {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s ease;
}

.iss-orbit {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    animation: issOrbitSpin 20s linear infinite;
}

.iss-image {
    position: absolute;
    width: 50px;
    height: 50px;
    object-fit: contain;
    top: -25px;
    left: 55px;
    animation: issCounterSpin 20s linear infinite;
}

@keyframes issOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes issCounterSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

body.easter-eggs-visible .easter-earth:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.easter-earth .earth-body {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('/img/earth.png') center/cover no-repeat;
    box-shadow:
        0 0 25px rgba(30, 144, 255, 0.3),
        0 0 50px rgba(30, 144, 255, 0.15);
    animation: none; /* Real image doesn't need spin */
}

@keyframes earthSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.easter-earth .earth-clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 15% 25%, rgba(255, 255, 255, 0.5) 0%, transparent 25%),
        radial-gradient(ellipse at 55% 65%, rgba(255, 255, 255, 0.4) 0%, transparent 20%),
        radial-gradient(ellipse at 75% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 22%),
        radial-gradient(ellipse at 35% 80%, rgba(255, 255, 255, 0.35) 0%, transparent 18%);
    animation: cloudsMove 60s linear infinite;
}

@keyframes cloudsMove {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

.easter-earth .earth-glow {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 180, 255, 0.2) 0%, transparent 55%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.easter-earth:hover .earth-glow {
    opacity: 1;
}

/* ========================================
   Easter Egg: Jupiter - Der Größte Planet
   ======================================== */

.easter-jupiter {
    position: fixed;
    bottom: 22%;
    left: 7%;
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 50;
    opacity: 0;
    transition: all 0.8s ease;
    pointer-events: none;
}

body.easter-eggs-visible .easter-jupiter {
    opacity: 0.55;
    pointer-events: auto;
}

body.easter-eggs-visible .easter-jupiter:hover {
    opacity: 0.9;
    transform: scale(1.15);
}

.easter-jupiter .jupiter-body {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('/img/jupiter.png') center/cover no-repeat;
    overflow: hidden;
}

.easter-jupiter .jupiter-bands {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: repeating-linear-gradient(180deg,
        transparent 0px,
        rgba(139, 90, 43, 0.3) 4px,
        transparent 8px,
        rgba(210, 180, 140, 0.2) 12px,
        transparent 16px);
    animation: jupiterBands 80s linear infinite;
}

@keyframes jupiterBands {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.easter-jupiter .jupiter-spot {
    position: absolute;
    width: 25%;
    height: 15%;
    top: 55%;
    left: 20%;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        #c45c3e 0%,
        #a04030 50%,
        #8b3020 100%);
    box-shadow:
        0 0 8px rgba(196, 92, 62, 0.6),
        inset -2px -1px 4px rgba(0, 0, 0, 0.3);
    animation: spotRotate 10s ease-in-out infinite;
}

@keyframes spotRotate {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.easter-jupiter .jupiter-glow {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 180, 100, 0.5) 0%, rgba(212, 165, 116, 0.3) 30%, transparent 65%);
    opacity: 0.8;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.easter-jupiter:hover .jupiter-glow {
    opacity: 1;
}

/* ========================================
   Saturn Easter Egg (mit Ring)
   ======================================== */

.easter-saturn {
    position: fixed;
    top: 44%;
    left: 23%;
    transform: translateY(-50%);
    width: 90px;
    height: 90px;
    cursor: pointer;
    z-index: 50;
    opacity: 0;
    transition: all 0.8s ease;
    pointer-events: none;
}

body.easter-eggs-visible .easter-saturn {
    opacity: 0.55;
    pointer-events: auto;
    filter: drop-shadow(0 0 8px rgba(232, 213, 163, 0.4)) drop-shadow(0 0 15px rgba(232, 213, 163, 0.25));
}

body.easter-eggs-visible .easter-saturn:hover {
    opacity: 0.9;
    transform: scale(1.15);
}

/* Saturn Körper - gelblich-braune Färbung */
.easter-saturn .saturn-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 0; /* Image includes ring, not circular */
    background: url('/img/saturn.png') center/contain no-repeat;
    box-shadow: none;
    z-index: 2;
}

/* Saturn Ring - hidden since image includes ring */
.easter-saturn .saturn-ring {
    display: none;
}

/* Zweiter Ring für mehr Tiefe */
.easter-saturn .saturn-ring::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    border: 2px solid rgba(200, 180, 140, 0.3);
}

/* Saturn Glow */
.easter-saturn .saturn-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180%;
    height: 180%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 213, 163, 0.25) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.easter-saturn:hover .saturn-glow {
    opacity: 1;
}

/* ========================================
   UFO Container (Handpan UFO Animation)
   ======================================== */

.ufo-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Fliegendes Handpan UFO */
.flying-ufo {
    position: absolute;
    width: 200px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.8))
            drop-shadow(0 0 40px rgba(255, 200, 100, 0.5));
    z-index: 10;
}

.flying-ufo.path-1 { animation: ufoFly1 10s ease-in-out forwards; }
.flying-ufo.path-2 { animation: ufoFly2 10s ease-in-out forwards; }
.flying-ufo.path-3 { animation: ufoFly3 10s ease-in-out forwards; }

.flying-ufo img {
    width: 100%;
    height: auto;
    display: block;
    animation: ufoWobble 2s ease-in-out infinite;
}

@keyframes ufoWobble {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    25% { transform: rotate(2deg) translateY(-5px); }
    50% { transform: rotate(-2deg) translateY(0); }
    75% { transform: rotate(3deg) translateY(5px); }
}

/* Flugbahn 1: Von links unten, zur Mitte, ZACK nach rechts oben */
@keyframes ufoFly1 {
    0% {
        transform: translate(-250px, 70vh) scale(0.5);
        opacity: 0;
    }
    15% {
        transform: translate(5vw, 55vh) scale(0.7);
        opacity: 0.8;
    }
    40% {
        transform: translate(30vw, 45vh) scale(0.9);
        opacity: 1;
    }
    60% {
        transform: translate(45vw, 42vh) scale(1);
        opacity: 1;
    }
    65% {
        transform: translate(48vw, 42vh) scale(1);
        opacity: 1;
    }
    /* ZACK - schnell weg nach rechts oben */
    100% {
        transform: translate(130vw, -10vh) scale(0.6);
        opacity: 0;
    }
}

/* Flugbahn 2: Von links oben, zur Mitte, ZACK nach rechts unten */
@keyframes ufoFly2 {
    0% {
        transform: translate(-250px, 20vh) scale(0.5);
        opacity: 0;
    }
    15% {
        transform: translate(8vw, 30vh) scale(0.7);
        opacity: 0.8;
    }
    40% {
        transform: translate(28vw, 38vh) scale(0.9);
        opacity: 1;
    }
    60% {
        transform: translate(42vw, 45vh) scale(1);
        opacity: 1;
    }
    65% {
        transform: translate(45vw, 45vh) scale(1);
        opacity: 1;
    }
    /* ZACK - schnell weg nach rechts unten */
    100% {
        transform: translate(130vw, 90vh) scale(0.6);
        opacity: 0;
    }
}

/* Flugbahn 3: Von links Mitte, zur Mitte hoch, ZACK nach rechts */
@keyframes ufoFly3 {
    0% {
        transform: translate(-250px, 50vh) scale(0.5);
        opacity: 0;
    }
    15% {
        transform: translate(10vw, 40vh) scale(0.7);
        opacity: 0.8;
    }
    40% {
        transform: translate(32vw, 35vh) scale(0.9);
        opacity: 1;
    }
    60% {
        transform: translate(48vw, 38vh) scale(1);
        opacity: 1;
    }
    65% {
        transform: translate(50vw, 38vh) scale(1);
        opacity: 1;
    }
    /* ZACK - schnell weg nach rechts Mitte */
    100% {
        transform: translate(130vw, 40vh) scale(0.6);
        opacity: 0;
    }
}

/* Leuchtender Schweif hinter dem UFO */
.ufo-trail {
    position: fixed;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 230, 150, 1) 0%,
        rgba(255, 200, 100, 0.8) 30%,
        rgba(255, 180, 50, 0.4) 60%,
        transparent 100%);
    pointer-events: none;
    animation: trailFade 1.5s ease-out forwards;
    box-shadow:
        0 0 10px rgba(255, 215, 0, 0.9),
        0 0 20px rgba(255, 200, 100, 0.6),
        0 0 30px rgba(255, 180, 50, 0.3);
}

@keyframes trailFade {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(0.6);
        opacity: 0.6;
    }
    100% {
        transform: scale(0.2);
        opacity: 0;
    }
}

@keyframes beamPulse {
    0%, 100% {
        opacity: 0.85;
        transform: translateX(-50%) scaleY(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1.15);
    }
}

/* ========================================
   Supernova Container & Effekte
   ======================================== */

.supernova-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}

/* Sternschnuppen-Hagel - gleiche Richtung wie normale Sternschnuppen */
.meteor-shower-star {
    position: absolute;
    width: 100px;
    height: 2px;
    background: linear-gradient(-90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.8) 20%,
        rgba(255, 200, 150, 0.5) 50%,
        transparent 100%);
    border-radius: 2px;
    opacity: 0;
    animation: meteorFall var(--fall-duration, 1.5s) linear forwards;
    animation-delay: var(--fall-delay, 0s);
    box-shadow:
        0 0 6px rgba(255, 255, 255, 0.8),
        0 0 12px rgba(255, 200, 150, 0.5);
}

@keyframes meteorFall {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(135deg);
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-80vw, 50vh) rotate(135deg);
    }
}

/* Großer Komet - gleiche Richtung wie normale Kometen */
.meteor-comet {
    position: absolute;
    width: 200px;
    height: 4px;
    background: linear-gradient(-90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 230, 180, 1) 10%,
        rgba(255, 180, 100, 0.9) 30%,
        rgba(255, 120, 50, 0.6) 60%,
        transparent 100%);
    border-radius: 4px;
    opacity: 0;
    animation: cometFall var(--fall-duration, 2s) ease-in forwards;
    animation-delay: var(--fall-delay, 0s);
    box-shadow:
        0 0 15px rgba(255, 200, 100, 1),
        0 0 30px rgba(255, 150, 50, 0.8),
        0 0 50px rgba(255, 100, 30, 0.5);
}

@keyframes cometFall {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(135deg) scale(0.5);
    }
    15% {
        opacity: 1;
        transform: translate(-12vw, 8vh) rotate(135deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-90vw, 55vh) rotate(135deg) scale(1.2);
    }
}

/* MEGA-Komet - riesig und blendend hell */
.meteor-mega-comet {
    position: absolute;
    width: 350px;
    height: 6px;
    background: linear-gradient(-90deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 240, 1) 5%,
        rgba(255, 240, 200, 1) 15%,
        rgba(255, 200, 120, 0.95) 35%,
        rgba(255, 150, 80, 0.8) 55%,
        rgba(255, 100, 50, 0.5) 75%,
        transparent 100%);
    border-radius: 6px;
    opacity: 0;
    animation: megaCometFall var(--fall-duration, 2.5s) ease-in forwards;
    animation-delay: var(--fall-delay, 0s);
    box-shadow:
        0 0 25px rgba(255, 255, 255, 1),
        0 0 50px rgba(255, 220, 150, 0.9),
        0 0 80px rgba(255, 180, 100, 0.7),
        0 0 120px rgba(255, 150, 50, 0.5);
}

@keyframes megaCometFall {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(135deg) scale(0.3);
    }
    10% {
        opacity: 1;
        transform: translate(-8vw, 5vh) rotate(135deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-100vw, 60vh) rotate(135deg) scale(1.3);
    }
}

/* Supernova Explosion */
.supernova-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    animation: supernovaExplode 4s ease-out forwards;
    box-shadow:
        0 0 100px 50px rgba(255, 255, 255, 1),
        0 0 200px 100px rgba(255, 230, 180, 0.8),
        0 0 400px 200px rgba(255, 180, 100, 0.5);
}

@keyframes supernovaExplode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    5% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    20% {
        transform: translate(-50%, -50%) scale(30);
        opacity: 1;
        box-shadow:
            0 0 150px 80px rgba(255, 255, 255, 1),
            0 0 300px 150px rgba(255, 200, 100, 0.9),
            0 0 500px 250px rgba(255, 150, 50, 0.6);
    }
    100% {
        transform: translate(-50%, -50%) scale(80);
        opacity: 0;
    }
}

/* Supernova Shockwave */
.supernova-shockwave {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid rgba(255, 200, 150, 0.8);
    background: transparent;
    animation: shockwaveExpand 3s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes shockwaveExpand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        border-width: 3px;
    }
    100% {
        transform: translate(-50%, -50%) scale(150);
        opacity: 0;
        border-width: 1px;
    }
}

/* Supernova Feuer-Ripples - wie Intro aber in Feuerfarben */
.supernova-ripples {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200vh;
    height: 200vh;
    pointer-events: none;
    z-index: 9998;
}

.supernova-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.01);
}

.supernova-ripple.orange {
    border: 4px solid rgba(255, 150, 50, 0.9);
    box-shadow:
        0 0 25px rgba(255, 150, 50, 0.8),
        0 0 50px rgba(255, 120, 30, 0.6),
        inset 0 0 20px rgba(255, 180, 80, 0.4);
}

.supernova-ripple.red {
    border: 4px solid rgba(255, 80, 30, 0.9);
    box-shadow:
        0 0 25px rgba(255, 80, 30, 0.8),
        0 0 50px rgba(255, 50, 20, 0.6),
        inset 0 0 20px rgba(255, 100, 50, 0.4);
}

.supernova-ripple.yellow {
    border: 3px solid rgba(255, 220, 100, 0.9);
    box-shadow:
        0 0 30px rgba(255, 220, 100, 0.9),
        0 0 60px rgba(255, 200, 50, 0.7),
        inset 0 0 25px rgba(255, 240, 150, 0.5);
}

.supernova-ripple.white {
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 35px rgba(255, 255, 255, 1),
        0 0 70px rgba(255, 240, 200, 0.8),
        inset 0 0 30px rgba(255, 255, 255, 0.6);
}

.supernova-ripple {
    animation: supernovaRippleExpand 3s ease-out forwards;
}

@keyframes supernovaRippleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.01);
        opacity: 1;
    }
    40% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* Supernova Partikel */
.supernova-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 200, 1) 0%,
        rgba(255, 180, 100, 0.8) 50%,
        transparent 100%);
    animation: particleExplode var(--particle-duration, 3s) ease-out forwards;
    animation-delay: var(--particle-delay, 0.2s);
    box-shadow: 0 0 8px rgba(255, 200, 100, 0.8);
}

@keyframes particleExplode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--particle-x, 100px), var(--particle-y, 100px)) scale(0.2);
        opacity: 0;
    }
}

/* Kosmischer Staub nach Supernova */
.cosmic-dust {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 220, 180, 0.6) 0%,
        rgba(255, 180, 120, 0.3) 50%,
        transparent 100%);
    animation: dustFloat var(--dust-duration, 8s) ease-out forwards;
    filter: blur(2px);
}

@keyframes dustFloat {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 0.7;
        transform: translate(var(--dust-x, 50px), var(--dust-y, 50px)) scale(1);
    }
    100% {
        transform: translate(calc(var(--dust-x, 50px) * 2), calc(var(--dust-y, 50px) * 2)) scale(2);
        opacity: 0;
    }
}

/* Sternschnuppen verstecken während Supernova */
body.supernova-active .shooting-star {
    opacity: 0 !important;
    visibility: hidden;
}

/* Bildschirm kurz aufhellen bei Supernova */
body.supernova-flash-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 250, 240, 0.3);
    z-index: 9999;
    pointer-events: none;
    animation: screenFlash 0.5s ease-out forwards;
}

@keyframes screenFlash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

/* Supernova Logo-Bild - erscheint groß in der Mitte und faded aus */
.supernova-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 150px;
    height: 150px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    animation: logoSupernovaExplode 5s ease-out forwards;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 1))
            drop-shadow(0 0 60px rgba(255, 220, 150, 0.9))
            drop-shadow(0 0 100px rgba(212, 175, 55, 0.7));
}

.supernova-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@keyframes logoSupernovaExplode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    /* Schnell wachsen wie die Explosions-Ringe */
    5% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    12% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 1;
        filter: drop-shadow(0 0 60px rgba(255, 255, 255, 1))
                drop-shadow(0 0 120px rgba(255, 220, 150, 1))
                drop-shadow(0 0 180px rgba(212, 175, 55, 0.9));
    }
    25% {
        transform: translate(-50%, -50%) scale(10);
        opacity: 1;
        filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.9))
                drop-shadow(0 0 100px rgba(255, 200, 100, 0.8));
    }
    /* Maximale Größe erreicht - jetzt langsam ausfaden */
    35% {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0.9;
    }
    55% {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0.6;
        filter: drop-shadow(0 0 40px rgba(255, 220, 150, 0.6))
                drop-shadow(0 0 80px rgba(212, 175, 55, 0.4));
    }
    80% {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0.25;
    }
    100% {
        transform: translate(-50%, -50%) scale(12);
        opacity: 0;
        filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.1));
    }
}

/* Space Shuttle Container - auf gleicher Ebene wie Sternenhimmel (Hintergrund) */
.rocket-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* Flying Space Shuttle - Smooth durchgehende Beschleunigung */
.flying-rocket {
    position: absolute;
    width: 100px;
    height: 140px;
    pointer-events: none;
    /* ease-in: startet langsam, beschleunigt kontinuierlich */
    animation: shuttleFly 3.5s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* Nur Start und Ende - cubic-bezier macht die glatte Beschleunigung */
@keyframes shuttleFly {
    0% {
        transform: translateY(115vh);
        opacity: 1;
    }
    100% {
        transform: translateY(-50vh);
        opacity: 1;
    }
}

.shuttle-body {
    position: absolute;
    top: -251px;
    left: 50%;
    transform: translateX(calc(-50% + 16px)) rotate(-6deg);
    width: 273px;
    height: 301px;
    z-index: 10;
}

/* Space Shuttle sichtbar mit leichtem Glow (reduziert für Performance) */
.shuttle-body svg,
.shuttle-body img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.7));
}

/* Triebwerksflammen - unter dem Shuttle */
.shuttle-flames {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3px;
    z-index: 5;
}

/* Haupt-Flammen - optimiert für Performance */
.shuttle-flame {
    width: 18px;
    height: 280px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 230, 120, 1) 15%,
        rgba(255, 180, 60, 1) 35%,
        rgba(255, 120, 30, 0.9) 55%,
        rgba(255, 80, 15, 0.6) 75%,
        transparent 100%);
    border-radius: 30% 30% 50% 50% / 5% 5% 95% 95%;
    animation: flameIntense 0.08s ease-in-out infinite alternate;
    box-shadow: 0 0 20px rgba(255, 150, 50, 0.8);
}

.shuttle-flame:nth-child(2) {
    width: 24px;
    height: 320px;
    animation-delay: 0.015s;
}

.shuttle-flame:nth-child(3) {
    animation-delay: 0.03s;
}

@keyframes flameIntense {
    0% {
        transform: scaleY(1) scaleX(1);
    }
    100% {
        transform: scaleY(1.1) scaleX(0.9);
    }
}

/* Breiter Feuer-Trail (wie Cursor aber spektakulärer) */
.shuttle-trail {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: trailFade 1.5s ease-out forwards;
}

.shuttle-trail-fire {
    background: radial-gradient(circle,
        rgba(255, 220, 130, 1) 0%,
        rgba(255, 160, 50, 0.9) 30%,
        rgba(255, 100, 30, 0.6) 60%,
        transparent 90%);
    box-shadow: 0 0 15px rgba(255, 150, 50, 0.7);
}

.shuttle-trail-ember {
    background: radial-gradient(circle,
        rgba(255, 230, 160, 1) 0%,
        rgba(255, 180, 80, 0.8) 40%,
        transparent 80%);
    box-shadow: 0 0 10px rgba(255, 180, 80, 0.6);
}

@keyframes trailFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 0;
        transform: scale(0.2) translateY(60px);
    }
}

/* Rauch-Wolken - optimiert */
.shuttle-smoke {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(180, 170, 160, 0.5) 0%,
        rgba(150, 140, 130, 0.3) 40%,
        transparent 80%);
    pointer-events: none;
    animation: smokeRise 3s ease-out forwards;
    filter: blur(5px);
}

@keyframes smokeRise {
    0% {
        opacity: 0.8;
        transform: scale(0.6) translateY(0) translateX(0);
    }
    30% {
        opacity: 0.6;
    }
    60% {
        opacity: 0.35;
    }
    100% {
        opacity: 0;
        transform: scale(5) translateY(120px) translateX(var(--smoke-drift, 0px));
    }
}

/* Glühende Partikel - heller und sichtbarer */
.shuttle-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 220, 1) 0%,
        rgba(255, 220, 120, 0.9) 40%,
        transparent 100%);
    pointer-events: none;
    animation: sparkFly 1.2s ease-out forwards;
    box-shadow:
        0 0 8px rgba(255, 220, 120, 1),
        0 0 16px rgba(255, 180, 60, 0.9),
        0 0 25px rgba(255, 150, 50, 0.6);
}

@keyframes sparkFly {
    0% {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
    }
    40% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: translateY(var(--spark-y, 80px)) translateX(var(--spark-x, 0px)) scale(0.1);
    }
}

/* Exhaust Trail */
.shuttle-exhaust {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200, 200, 200, 0.6) 0%, transparent 70%);
    pointer-events: none;
    animation: smokeRise 2s ease-out forwards;
}

@keyframes smokeRise {
    0% {
        opacity: 0.8;
        transform: scale(0.5) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(3) translateY(50px);
    }
}

/* Sternschnuppen sanft ausblenden wenn Rakete kommt */
body.rocket-preparing .shooting-star {
    opacity: 0 !important;
    transition: opacity 1.5s ease-out;
}

/* Sternschnuppen komplett versteckt während Rakete fliegt */
body.rocket-flying .shooting-star {
    opacity: 0 !important;
    visibility: hidden;
}

/* Navbar stabil halten während Rakete fliegt */
body.rocket-flying .navbar,
body.rocket-preparing .navbar {
    background: rgba(5, 5, 10, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Hide easter eggs and heavy effects on mobile */
@media (max-width: 768px) {
    /* Easter Egg Planeten im Hintergrund */
    .easter-moon,
    .easter-earth,
    .easter-jupiter,
    .easter-saturn,
    .iss-container {
        display: none !important;
    }
    
    /* Animation Container */
    .buddha-container,
    .rocket-container,
    .jellyfish-container,
    .lotus-container,
    .satellite-container {
        display: none !important;
    }
    
    /* Background Effekte */
    .aurora,
    .nebula-container,
    .galaxy-nebula {
        display: none !important;
    }
    
    /* Cursor Effekte */
    .custom-cursor,
    .trail-dot,
    [class*="cursor-trail"] {
        display: none !important;
    }
    
    /* Performance: Keine komplexen Schatten */
    .planet-body {
        filter: none !important;
    }
}

/* ========================================
   LETTERBOX MODE - 16:9 auf Nicht-16:9 Bildschirmen
   ======================================== */

html.letterbox-mode {
    background: #000 !important;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

html.letterbox-mode body {
    width: 100vw;
    height: calc(100vw / 1.778); /* 16:9 Ratio */
    max-height: 100vh;
    overflow: hidden;
    position: relative;
}

/* Wenn Bildschirm breiter als 16:9: Höhe = 100vh, Breite anpassen */
@media (min-aspect-ratio: 16/9) {
    html.letterbox-mode body {
        height: 100vh;
        width: calc(100vh * 1.778);
        max-width: 100vw;
    }
}

/* Fixed Elements innerhalb des Letterbox-Bereichs halten */
html.letterbox-mode .navbar,
html.letterbox-mode .lite-mode-toggle,
html.letterbox-mode .custom-cursor,
html.letterbox-mode #enter-screen {
    /* Diese bleiben fixed, aber innerhalb des body */
}

/* ========================================
   LITE MODE - Reduzierte Effekte für Performance
   Klasse kann auf html ODER body sein
   ======================================== */

/* Enter Screen nur sichtbar wenn NICHT hidden */
.lite-mode #enter-screen:not(.hidden),
.lite-mode .enter-screen:not(.hidden) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Enter Screen verstecken wenn hidden Klasse gesetzt ist */
.lite-mode #enter-screen.hidden,
.lite-mode .enter-screen.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Video BLEIBT sichtbar im Lite Mode - nur keine Effekte */
/* (Die alte Regel hat das Video versteckt, das war falsch) */

/* Cursor komplett aus - normaler Browser-Cursor */
.lite-mode .custom-cursor,
html.lite-mode .custom-cursor {
    display: none !important;
}

.lite-mode,
.lite-mode *,
html.lite-mode,
html.lite-mode * {
    cursor: auto !important;
}

/* Trail komplett ausblenden */
.lite-mode .trail-dot,
.lite-mode [class*="trail"],
html.lite-mode .trail-dot,
html.lite-mode [class*="trail"] {
    display: none !important;
}

/* Einfachere Animationen */
.lite-mode .floating-monk {
    animation-duration: 30s !important;
    will-change: auto;
}

.lite-mode .monk-sphere,
.lite-mode .monk-silhouette {
    animation: none !important;
}

/* Om und Ear Mandalas vereinfacht */
.lite-mode .background-om::before,
.lite-mode .background-om::after,
.lite-mode .background-ear::before,
.lite-mode .background-ear::after {
    animation: none !important;
}

.lite-mode .background-om img,
.lite-mode .background-ear img {
    animation: none !important;
    filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
}

/* Supernova vereinfacht */
.lite-mode .supernova-ripple {
    animation-duration: 3s !important;
}

.lite-mode .supernova-logo {
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8));
    will-change: auto;
}

/* UFO Trail reduziert (via JS) */
.lite-mode .ufo-trail {
    display: none;
}

.lite-mode .flying-ufo {
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5));
    will-change: auto;
}

/* Easter Eggs vereinfacht */
.lite-mode .easter-moon .moon-glow,
.lite-mode .easter-earth .earth-glow,
.lite-mode .easter-jupiter .jupiter-glow,
.lite-mode .easter-saturn .saturn-glow {
    display: none;
}

/* Keine breathing Animationen */
.lite-mode [class*="breathing"],
.lite-mode [class*="glow"] {
    animation: none !important;
}

/* Aurora/Sternschnuppen reduziert */
.lite-mode .aurora-layer {
    opacity: 0.3 !important;
    animation-duration: 30s !important;
}

.lite-mode .shooting-star {
    display: none;
}

/* Aurora komplett aus im Lite Mode */
.lite-mode .aurora-container {
    display: none !important;
}

/* Alle box-shadows reduzieren */
.lite-mode * {
    box-shadow: none !important;
}

/* Alle komplexen Filter entfernen */
.lite-mode .background-om {
    filter: none !important;
    display: none !important;
}

/* Background-Ear (Ohr-Mandala) erlauben im Lite Mode - nur ohne Filter */
.lite-mode .background-ear {
    filter: none !important;
    /* display: erlaubt - Ohr-Mandala zeigen bei Musik */
}

.lite-mode .background-om img,
.lite-mode .background-ear img {
    filter: none !important;
}

/* Easter Egg Container komplett verstecken */
.lite-mode .buddha-container,
.lite-mode .supernova-container,
.lite-mode .ufo-container,
.lite-mode .rocket-container {
    display: none !important;
}

/* Easter Eggs komplett verstecken im Lite Mode */
.lite-mode .easter-moon,
.lite-mode .easter-earth,
.lite-mode .easter-jupiter,
.lite-mode .easter-saturn {
    display: none !important;
}

/* Floating Monk vereinfacht - keine Animation */
.lite-mode .floating-monk {
    animation: none !important;
}

.lite-mode .monk-container {
    display: none !important;
}

/* Logo-Overlay: Text erlauben, aber Glow/Ripples verstecken */
.lite-mode .logo-glow,
.lite-mode .logo-ripples,
.lite-mode #flash-ripples,
.lite-mode .flash-ripple,
.lite-mode #golden-flash {
    display: none !important;
}

/* Navbar stabil - kein backdrop-filter (verursacht Flackern) */
.lite-mode .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(5, 5, 10, 0.95) !important;
}

/* ALLE Animationen komplett stoppen */
.lite-mode,
.lite-mode *,
.lite-mode *::before,
.lite-mode *::after {
    animation: none !important;
    transition: none !important;
}

/* Ausnahme: Opacity-Transitions für sanftes Ein/Ausblenden erlauben */
.lite-mode .visible,
.lite-mode #logo-overlay,
.lite-mode #logo-image,
.lite-mode .logo-text,
.lite-mode .background-ear,
.lite-mode .background-ear img {
    transition: opacity 0.3s ease !important;
}

/* AUSNAHME: Logo-Text Animation erlauben (goldener Schimmer) */
/* Animation startet erst wenn logo-overlay sichtbar wird */
.lite-mode .logo-overlay.visible .logo-text {
    animation: textSunbeam 3.75s ease-in-out 0s forwards !important;
}

/* AUSNAHME: Background-Ear Fade-In Animation erlauben */
.lite-mode .background-ear.visible img {
    animation: earFadeIn 4s ease-out forwards !important;
}

/* AUSNAHME: Logo-Image sanftes Einblenden im Lite Mode */
.lite-mode #logo-image {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 2s ease-out, transform 2s ease-out !important;
}

.lite-mode #logo-image.fade-in-lite {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* Keine Filter - verursachen Flackern (außer Ear) */
.lite-mode *:not(.background-ear):not(.background-ear img) {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Ear bekommt nur leichten Glow, keinen komplexen Filter */
.lite-mode .background-ear img {
    filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4)) !important;
}

/* Video im Lite Mode beschneiden - Wasserzeichen unten rechts verstecken */
.lite-mode #brand-video {
    object-fit: cover !important;
    object-position: center top !important;
    /* Chrome/Firefox: Transform */
    transform: scale(1.15) translateY(-4%) !important;
    -webkit-transform: scale(1.15) translateY(-4%) !important;
    transform-origin: center top !important;
    -webkit-transform-origin: center top !important;
    /* Safari: Clip-Path schneidet 8% unten ab */
    clip-path: inset(0 0 8% 0) !important;
    -webkit-clip-path: inset(0 0 8% 0) !important;
    /* Transition für Fade-Out */
    transition: opacity 3s ease-out !important;
    opacity: 1;
}

/* Video Fade-Out im Lite Mode - direkt opacity setzen */
.lite-mode #brand-video.fade-out-lite {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========================================
   Floating Forms Easter Egg - Lotus Petals
   ======================================== */

/* Container für Lotusblätter */
.lotus-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.lotus-container.visible {
    opacity: 1;
}

/* Einzelnes Lotusblatt */
.lotus-petal {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    /* Performance: Nur transform + opacity animieren */
    will-change: transform, opacity;
    /* Wichtig für z-index der Kinder */
    isolation: isolate;
}

/* Goldener Glow HINTER dem Lotus - als Aura */
.lotus-petal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, 
        rgba(255, 215, 0, 0.5) 0%, 
        rgba(212, 175, 55, 0.3) 25%, 
        rgba(240, 208, 96, 0.15) 45%,
        transparent 65%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}

.lotus-petal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

/* Lotusblatt Animation - Sanftes Fallen mit Wind-Wellenbewegung */
@keyframes lotusFall {
    0% {
        transform: translateY(-50px) translateX(0) rotate(0deg) scale(0.8);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        transform: translateY(15vh) translateX(40px) rotate(25deg) scale(0.95);
    }
    30% {
        transform: translateY(30vh) translateX(-30px) rotate(-15deg) scale(1);
    }
    45% {
        transform: translateY(45vh) translateX(50px) rotate(35deg) scale(0.95);
    }
    60% {
        transform: translateY(60vh) translateX(-20px) rotate(-25deg) scale(0.9);
    }
    75% {
        transform: translateY(75vh) translateX(35px) rotate(20deg) scale(0.88);
    }
    90% {
        transform: translateY(90vh) translateX(-15px) rotate(-10deg) scale(0.85);
        opacity: 1;
    }
    100% {
        transform: translateY(108vh) translateX(10px) rotate(15deg) scale(0.82);
        opacity: 0;
    }
}

/* Variante 2: Andere Richtung starten */
@keyframes lotusFall2 {
    0% {
        transform: translateY(-50px) translateX(0) rotate(-20deg) scale(0.85);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        transform: translateY(15vh) translateX(-45px) rotate(-40deg) scale(0.95);
    }
    30% {
        transform: translateY(30vh) translateX(35px) rotate(20deg) scale(1);
    }
    45% {
        transform: translateY(45vh) translateX(-55px) rotate(-50deg) scale(0.95);
    }
    60% {
        transform: translateY(60vh) translateX(25px) rotate(15deg) scale(0.9);
    }
    75% {
        transform: translateY(75vh) translateX(-40px) rotate(-30deg) scale(0.88);
    }
    90% {
        transform: translateY(90vh) translateX(20px) rotate(10deg) scale(0.85);
        opacity: 1;
    }
    100% {
        transform: translateY(108vh) translateX(-10px) rotate(-20deg) scale(0.82);
        opacity: 0;
    }
}

/* Variante 3: Weite Wellenbewegung */
@keyframes lotusFall3 {
    0% {
        transform: translateY(-50px) translateX(0) rotate(15deg) scale(0.75);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    12% {
        transform: translateY(12vh) translateX(60px) rotate(40deg) scale(0.9);
    }
    25% {
        transform: translateY(25vh) translateX(-50px) rotate(-20deg) scale(1);
    }
    38% {
        transform: translateY(38vh) translateX(70px) rotate(55deg) scale(0.95);
    }
    50% {
        transform: translateY(50vh) translateX(-40px) rotate(-35deg) scale(0.92);
    }
    62% {
        transform: translateY(62vh) translateX(55px) rotate(30deg) scale(0.9);
    }
    75% {
        transform: translateY(75vh) translateX(-30px) rotate(-25deg) scale(0.87);
    }
    88% {
        transform: translateY(88vh) translateX(40px) rotate(20deg) scale(0.84);
        opacity: 1;
    }
    100% {
        transform: translateY(108vh) translateX(-20px) rotate(-15deg) scale(0.8);
        opacity: 0;
    }
}

/* Variante 4: Blatt dreht sich während des Falls (180° Flip) */
@keyframes lotusFallFlip {
    0% {
        transform: translateY(-50px) translateX(0) rotate(0deg) rotateX(0deg) scale(0.8);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    20% {
        transform: translateY(20vh) translateX(35px) rotate(30deg) rotateX(45deg) scale(0.95);
    }
    40% {
        transform: translateY(40vh) translateX(-25px) rotate(-20deg) rotateX(90deg) scale(1);
    }
    60% {
        transform: translateY(60vh) translateX(40px) rotate(25deg) rotateX(135deg) scale(0.95);
    }
    80% {
        transform: translateY(80vh) translateX(-20px) rotate(-15deg) rotateX(180deg) scale(0.9);
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateY(108vh) translateX(15px) rotate(10deg) rotateX(180deg) scale(0.85);
        opacity: 0;
    }
}

/* Variante 5: Blatt startet umgedreht (Stiel nach oben) */
@keyframes lotusFallUpsideDown {
    0% {
        transform: translateY(-50px) translateX(0) rotate(180deg) scale(0.85);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    15% {
        transform: translateY(15vh) translateX(-40px) rotate(195deg) scale(0.95);
    }
    30% {
        transform: translateY(30vh) translateX(45px) rotate(165deg) scale(1);
    }
    45% {
        transform: translateY(45vh) translateX(-35px) rotate(200deg) scale(0.95);
    }
    60% {
        transform: translateY(60vh) translateX(30px) rotate(170deg) scale(0.92);
    }
    75% {
        transform: translateY(75vh) translateX(-25px) rotate(190deg) scale(0.88);
    }
    90% {
        transform: translateY(90vh) translateX(20px) rotate(175deg) scale(0.85);
        opacity: 1;
    }
    100% {
        transform: translateY(108vh) translateX(-10px) rotate(185deg) scale(0.82);
        opacity: 0;
    }
}

/* Lite Mode: Lotus Animation komplett deaktivieren */
.lite-mode .lotus-container {
    display: none !important;
}

/* ========================================
   Cloudy Vibes Easter Egg - Jellyfish Animation
   ======================================== */

/* Container für Quallen */
.jellyfish-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99;
    overflow: hidden;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.jellyfish-container.visible {
    opacity: 1;
}

/* Einzelne Qualle */
.jellyfish {
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.jellyfish img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    animation: jellyfishPump 4s ease-in-out infinite;
}

/* Starkes Quallen-Pumpen: lang strecken → zusammenziehen → ausstoßen */
@keyframes jellyfishPump {
    0% {
        transform: scaleY(1) scaleX(1);
    }
    /* Strecken: Qualle wird lang und schmal */
    30% {
        transform: scaleY(1.35) scaleX(0.75);
    }
    /* Zusammenziehen: kompakt und breit */
    50% {
        transform: scaleY(0.7) scaleX(1.25);
    }
    /* Ausstoß: leicht gestreckt */
    70% {
        transform: scaleY(1.15) scaleX(0.9);
    }
    /* Zurück zur Ruhe */
    100% {
        transform: scaleY(1) scaleX(1);
    }
}

/* Neon Glow Ring - ATMET mit der Qualle (synchron 4s) */
.jellyfish::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    background: radial-gradient(ellipse at center,
        rgba(180, 100, 255, 0.5) 0%,
        rgba(100, 150, 255, 0.3) 25%,
        rgba(200, 50, 255, 0.15) 50%,
        transparent 70%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: neonBreath 4s ease-in-out infinite;
}

/* Äußerer Glow-Ring - größer, langsamer */
.jellyfish::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    background: radial-gradient(ellipse at center,
        rgba(150, 100, 255, 0.2) 0%,
        rgba(100, 180, 255, 0.1) 35%,
        transparent 55%
    );
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: neonBreathOuter 4s ease-in-out infinite;
}

/* Neon Atmen - synchron mit Pumpen (4s) */
@keyframes neonBreath {
    0% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1) scaleY(1);
    }
    /* Strecken - Glow wird länglich */
    30% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(0.85) scaleY(1.3);
    }
    /* Zusammenziehen - Glow wird breit, HELL! */
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) scaleY(0.8);
    }
    /* Ausstoß */
    70% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.05) scaleY(1.1);
    }
    100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1) scaleY(1);
    }
}

/* Äußerer Glow atmet auch */
@keyframes neonBreathOuter {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Lite Mode: Quallen Animation komplett deaktivieren */
.lite-mode .jellyfish-container {
    display: none !important;
}

/* === Satellite Easter Egg (ATWKS Vintage) === */
.satellite-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 99;
    overflow: hidden;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.satellite-container.visible {
    opacity: 1;
}

.satellite {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
}

.satellite-hovering {
    animation: satelliteFloat 6s ease-in-out infinite !important;
}

@keyframes satelliteFloat {
    0% { translate: 0px 0px; }
    25% { translate: 3px -8px; }
    50% { translate: -3px -4px; }
    75% { translate: 2px -10px; }
    100% { translate: 0px 0px; }
}

.satellite img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    border: none;
    outline: none;
    background: transparent;
    animation: satelliteShimmer 6s ease-in-out infinite;
}

/* Shimmer overlay - masked to satellite shape via JS mask-image */
.satellite-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.satellite-shimmer.gold {
    background: linear-gradient(
        110deg,
        transparent 43%,
        rgba(255, 215, 70, 0.35) 48%,
        rgba(255, 235, 120, 0.5) 50%,
        rgba(255, 215, 70, 0.35) 52%,
        transparent 57%
    );
    background-size: 300% 100%;
    animation: shimmerStripe 6s ease-in-out infinite;
    animation-delay: 2s;
}

.satellite-shimmer.silver {
    background: linear-gradient(
        110deg,
        transparent 43%,
        rgba(220, 225, 240, 0.25) 48%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(220, 225, 240, 0.25) 52%,
        transparent 57%
    );
    background-size: 300% 100%;
    animation: shimmerStripe 8s ease-in-out infinite;
}

@keyframes shimmerStripe {
    0%, 85% {
        background-position: 200% 0;
    }
    95% {
        background-position: -100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* Space Shuttle gliding through */
.space-shuttle {
    position: absolute;
    pointer-events: none;
    z-index: 98;
}

.space-shuttle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.docking-shuttle {
    z-index: 97;
}

/* Docking shuttle thruster - single flame + smoke (angled slightly up-left) */
.docking-shuttle .shuttle-flames {
    position: absolute;
    top: 35%;
    left: -8px;
    transform: translateY(-50%) rotate(110deg); /* 110° = angled up-left */
    width: 30px;
    height: 60px;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.docking-shuttle .shuttle-flames.active {
    opacity: 1;
}

/* Single centered flame */
.docking-shuttle .shuttle-flame {
    width: 16px;
    height: 55px;
}

/* Hide extra flames, only show first one */
.docking-shuttle .shuttle-flame:nth-child(2),
.docking-shuttle .shuttle-flame:nth-child(3) {
    display: none;
}

/* Smoke puff behind flame (angled to match) - plays ONCE per impulse */
.docking-shuttle .shuttle-smoke {
    position: absolute;
    top: 25%;
    left: -35px;
    transform: translateY(-50%) rotate(-20deg);
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, rgba(180, 180, 180, 0.7) 0%, rgba(120, 120, 120, 0.4) 50%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.docking-shuttle .shuttle-smoke.active {
    animation: shuttleSmokeFloat 1.2s ease-out forwards;
}

@keyframes shuttleSmokeFloat {
    0% { transform: translateY(-50%) translateX(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-50%) translateX(-40px) scale(2.5); opacity: 0; }
}

/* Astronaut exploring the ear */
.exploring-astronaut {
    position: absolute;
    pointer-events: none;
    z-index: 99;
}

.exploring-astronaut img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Subtle metallic shimmer - slow opacity pulse */
@keyframes satelliteShimmer {
    0%, 100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

/* Lite Mode: Satellite Animation deaktivieren */
.lite-mode .satellite-container {
    display: none !important;
}

/* Hide overlay elements - real images have all details */
.easter-earth .earth-clouds,
.easter-moon .moon-crescent,
.easter-jupiter .jupiter-bands,
.easter-jupiter .jupiter-storm,
.easter-saturn .saturn-ring::before,
.easter-saturn .saturn-ring::after {
    display: none !important;
}

/* ========================================
   Nebula Background Layers
   ======================================== */
.nebula-bg {
    display: none; /* Deaktiviert - nur nebula-bg2 (orange) aktiv */
}

.nebula-bg2 {
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: url('/img/nebula-bg2.jpg') center/cover no-repeat;
    opacity: 0.05;
    mix-blend-mode: screen;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
    animation: nebula-pulse2 40s ease-in-out infinite;
}

@keyframes nebula-pulse1 {
    0%, 100% { opacity: 0.02; }
    50% { opacity: 0.08; }
}

@keyframes nebula-pulse2 {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.2; }
}

.lite-mode .nebula-bg,
.lite-mode .nebula-bg2 {
    display: none;
}