body{font-family:'Inter',sans-serif;margin:0;background:#f4f6fb;color:#222}

html{

    scroll-behavior:smooth;

}

#funktionen h2{

    text-align:center;

    font-size:2.2rem;

    margin-bottom:45px;

}

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:24px;
}

.card{background:#fff;border-radius:20px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.08)}

footer{text-align:center;padding:20px}nav a{color:#fff;text-decoration:none;margin:0 8px}

.hero{
    padding:90px 20px;
    color:white;

    background:linear-gradient(
        135deg,
        #0d47a1,
        #1565c0,
        #1976d2,
        #0d47a1
    );

    background-size:400% 400%;

    animation:
        gradientMove 12s ease infinite,
        fadeIn 1.2s ease;
}

.hero-content{
    max-width:1200px;
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;

    flex-wrap:wrap;
}

.hero-text{
    flex:1;
    min-width:320px;
}

.hero-text h1{
    font-size:56px;
    margin-bottom:15px;
}

.subtitle{
    font-size:24px;
    margin-bottom:20px;
    font-weight:500;
}

.hero-text p{
    font-size:18px;
    line-height:1.7;
}

.hero-image{
    flex:1;
    text-align:center;
}

.hero-image img{
    width:100%;
    max-width:650px;
    border-radius:20px;
    box-shadow:0 25px 60px rgba(0,0,0,.35);
    transition:.4s;
}

.hero-image img:hover{

    transform:scale(1.03);

}

.button{

    display:inline-block;
    margin-top:30px;
    padding:15px 35px;

    background:white;
    color:#1565c0;

    text-decoration:none;

    border-radius:12px;

    font-weight:bold;

    transition:
        transform .3s,
        box-shadow .3s;

}

.button:hover{
    transform:translateY(-3px);
}

@media (max-width:900px){

    .hero-content{
        flex-direction:column;
        text-align:center;
    }

    .hero-text h1{
        font-size:42px;
    }

}



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

.hero-image img{
    animation: float 6s ease-in-out infinite;
}

@keyframes float{
    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }
}

.button:hover{

    transform:translateY(-4px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);

}

.card{

    transition:
        transform .35s,
        box-shadow .35s;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);

}

.logo{

    animation:logoPulse 5s infinite;

}

@keyframes logoPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}



@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:
        opacity .8s,
        transform .8s;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

#funktionen{
    padding:90px 0;
}

.container{
    width:min(1200px,92%);
    margin:auto;
}

.screenshots{
    padding:90px 0;
    background:#f7f9fc;
}

.screenshots h2{
    text-align:center;
    font-size:2.2rem;
    margin-bottom:15px;
}

.section-text{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:60px;
    color:#666;
    font-size:1.1rem;
}

.phone-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));

    gap:45px;

}

.phone{

    background:white;

    border-radius:38px;

    padding:18px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

    transition:.35s;

    overflow:hidden;

}

.phone:hover{

    transform:translateY(-12px) scale(1.03);

    box-shadow:
    0 30px 60px rgba(0,0,0,.18);

}

.phone img{

    width:100%;

    border-radius:24px;

    display:block;

}

.phone span{

    display:block;

    text-align:center;

    margin-top:18px;

    font-weight:600;

    color:#1d4e89;

    font-size:1.05rem;

}

.phone img{

    width:100%;

    aspect-ratio:9/19.5;

    object-fit:cover;

    border-radius:24px;

}

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}

.feature-card{

    background:white;

    padding:35px;

    border-radius:22px;

    text-align:center;

    box-shadow:
        0 12px 30px rgba(0,0,0,.08);

    transition:
        transform .35s,
        box-shadow .35s;

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.15);

}

.feature-icon{

    width:82px;

    height:82px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    background:linear-gradient(
        135deg,
        #1976d2,
        #42a5f5
    );

    color:white;

    box-shadow:
        0 12px 30px rgba(25,118,210,.35);

}

.feature-card h3{

    margin-bottom:15px;

    font-size:1.4rem;

    color:#1565c0;

}

.feature-card p{

    color:#666;

    line-height:1.7;

    font-size:1rem;

}

.download{

    padding:110px 0;

    background:linear-gradient(
        135deg,
        #1565c0,
        #1e88e5
    );

}

.download-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

    flex-wrap:wrap;

    background:white;

    border-radius:30px;

    padding:60px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);

}

.download-left{

    flex:2;

}

.download-left h2{

    font-size:2.3rem;

    margin-bottom:20px;

    color:#1565c0;

}

.download-left p{

    font-size:1.15rem;

    line-height:1.8;

    color:#555;

}

.download-list{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.download-list li{

    margin:15px 0;

    font-size:1.1rem;

    color:#333;

}

.playstore-button{

    display:inline-block;

    transition:.3s;

}

.playstore-button:hover{

    transform:scale(1.05);

}

.playstore-button img{

    width:240px;

}

.download-right{

    flex:1;

    text-align:center;

}

.download-logo{

    width:220px;

    border-radius:40px;

    box-shadow:
        0 20px 45px rgba(0,0,0,.20);

}

@media(max-width:900px){

    .download-card{

        text-align:center;

    }

    .download-left{

        flex:100%;

    }

    .download-right{

        flex:100%;

    }

}

footer{

    background:#0d47a1;

    color:white;

    padding:40px 20px;

}

.footer-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-nav{

    display:flex;

    gap:25px;

}

.footer-nav a{

    color:white;

    text-decoration:none;

    transition:.3s;

}

.footer-nav a:hover{

    color:#90caf9;

}