body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#020617;color:#fff}.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px;background:linear-gradient(rgba(2,6,23,.45),rgba(2,6,23,.8)),url("images/hero.jpg") center/cover;background-size:cover}.wrap{max-width:1100px}.card{background:rgba(15,23,42,.72);padding:40px;border-radius:24px;backdrop-filter:blur(18px);max-width:620px;width:100%;text-align:center}.top-nav{position:absolute;top:25px;left:50%;transform:translateX(-50%);z-index:100;display:flex;gap:30px;flex-wrap:wrap;justify-content:center}.top-nav a{color:white;text-decoration:none;font-weight:600;letter-spacing:1px;text-transform:uppercase}.top-nav a:hover{color:#38bdf8}.card h1{font-size:64px;margin:20px 0}.hero-buttons{margin-top:25px;margin-bottom:25px;display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.btn-primary,.btn-secondary{text-decoration:none!important;color:white!important;padding:14px 28px;border-radius:12px;font-weight:700}.btn-primary{background:#38bdf8}.btn-secondary{background:#22c55e}.qr{width:180px;background:#fff;padding:12px;border-radius:12px;margin-top:20px}.wallet{background:#000;padding:12px;border-radius:10px;word-break:break-all;margin-top:15px}.bottom-nav{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:25px;z-index:100}.bottom-nav a{color:white;text-decoration:none;opacity:.8}.bottom-nav a:hover{opacity:1;color:#38bdf8}/* Mobile Optimierung */

@media (max-width: 768px){

    .top-nav{

        position:relative;

        top:auto;
        left:auto;

        transform:none;

        padding:20px;

        display:flex;
        flex-wrap:wrap;

        justify-content:center;

        gap:15px;
    }

    .hero{

        padding:20px;
    }

    .card{

        max-width:100%;

        padding:25px;
    }

    .card h1{

        font-size:48px;
        line-height:1.1;
    }

    .card p{

        font-size:16px;
    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;
    }

    .btn-primary,
    .btn-secondary{

        width:100%;

        max-width:280px;

        text-align:center;
    }

    .qr{

        width:160px;
    }

    .wallet{

        font-size:14px;

        overflow-wrap:anywhere;
    }

    .bottom-nav{

        position:relative;

        bottom:auto;
        left:auto;

        transform:none;

        margin-top:20px;

        padding-bottom:20px;

        justify-content:center;

        flex-wrap:wrap;
    }
}