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

body{

font-family:'Poppins',sans-serif;

background:#0f172a;

color:white;

overflow-x:hidden;

}

.container{

width:90%;
max-width:1400px;

margin:auto;

}

header{

position:fixed;

width:100%;

top:0;

z-index:999;

background:rgba(15,23,42,.85);

backdrop-filter:blur(15px);

padding:20px 0;

}

header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{
    height:60px;
}

nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:#ff2f92;

}

.hero{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding-top:120px;

    background:
    radial-gradient(circle at center,
    rgba(255,47,146,.25),
    transparent 60%);

}

.hero-logo{
    max-width:700px;
    width:90%;
    height:auto;
}

.hero h1{

    font-size:4.5rem;

    line-height:1.1;

    margin-bottom:25px;

    background:linear-gradient(
        90deg,
        #ffffff,
        #ff2f92,
        #7c2cff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.hero p{

font-size:1.3rem;

color:#d1d5db;

margin-bottom:35px;

}

.buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn{

padding:15px 35px;

border-radius:50px;

text-decoration:none;

font-weight:600;

background:
linear-gradient(
135deg,
#ff2f92,
#7c2cff
);

color:white;

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

box-shadow:
0 0 30px
rgba(255,47,146,.6);

}

.secondary{

background:transparent;

border:2px solid #ff2f92;

}
/* =========================
   Vorteile Bereich
========================= */

.advantages{
    padding:120px 0;
}

.section-title{
    text-align:center;
    margin-bottom:70px;
}

.section-title h2{
    font-size:3rem;
    margin-bottom:15px;
    background:linear-gradient(
        90deg,
        #ff2f92,
        #7c2cff
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-title p{
    color:#cbd5e1;
    font-size:1.1rem;
}

.advantage-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.advantage-card{

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:25px;

    padding:40px;

    text-align:center;

    transition:0.4s;

    backdrop-filter:blur(15px);

}

.advantage-card:hover{

    transform:translateY(-10px);

    border-color:#ff2f92;

    box-shadow:
    0 0 35px rgba(255,47,146,0.25);

}

.card-icon{

    font-size:3rem;

    margin-bottom:20px;

}

.advantage-card h3{

    margin-bottom:15px;

    font-size:1.4rem;

    color:white;

}

.advantage-card p{

    color:#cbd5e1;

    line-height:1.7;

}
/* =========================
   Über Uns
========================= */

.about-section{
    padding:120px 0;
}

.about-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:60px;
    align-items:center;
}

.section-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:30px;

    background:rgba(255,47,146,.15);

    color:#ff2f92;

    font-size:14px;

    margin-bottom:20px;

    font-weight:600;

}

.about-left h2{

    font-size:3rem;

    margin-bottom:25px;

    line-height:1.2;

}

.about-left p{

    color:#cbd5e1;

    margin-bottom:20px;

    line-height:1.8;

}

.about-features{

    margin-top:30px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.feature-item{

    background:rgba(255,255,255,0.04);

    padding:15px;

    border-radius:12px;

}

.about-right{

    display:flex;
    flex-direction:column;
    gap:30px;

}

.about-card{

    padding:35px;

    border-radius:25px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    transition:0.3s;

}

.about-card:hover{

    transform:translateY(-5px);

    border-color:#ff2f92;

    box-shadow:0 0 25px rgba(255,47,146,0.2);

}

.about-card h3{

    margin-bottom:15px;

    color:#ff2f92;

}

.about-card p{

    color:#cbd5e1;

    line-height:1.7;

}

@media(max-width:992px){

    .about-grid{
        grid-template-columns:1fr;
    }

    .about-left h2{
        font-size:2.3rem;
    }

}
/* =========================
   Viona
========================= */

.viona-section{
    padding:120px 0;
}

.viona-grid{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    gap:60px;
    align-items:center;
}

.viona-left h2{
    font-size:3rem;
    margin:20px 0;
}

.viona-left p{
    color:#cbd5e1;
    line-height:1.8;
    margin-bottom:20px;
}

.viona-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin-top:30px;
    margin-bottom:30px;
}

.viona-btn{

    padding:15px 35px;

    border:none;

    border-radius:50px;

    cursor:pointer;

    color:white;

    font-weight:600;

    background:linear-gradient(
    135deg,
    #ff2f92,
    #7c2cff
    );

}

.viona-avatar{

    text-align:center;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    border-radius:30px;

    padding:25px;

    backdrop-filter:blur(15px);

}

.viona-image{

    width:70%;

    max-width:450px;

    height:auto;

    border-radius:20px;

    animation: vionaGlow 4s infinite ease-in-out;

}

@keyframes vionaGlow{

    0%{
        filter:drop-shadow(0 0 15px rgba(255,47,146,.3));
    }

    50%{
        filter:drop-shadow(0 0 40px rgba(124,44,255,.8));
    }

    100%{
        filter:drop-shadow(0 0 15px rgba(255,47,146,.3));
    }

}

.viona-image:hover{

    transform:scale(1.02);

    box-shadow:
        0 0 60px rgba(255,47,146,0.45);

}

.viona-avatar h3{
    font-size:2rem;
    margin-bottom:10px;
}

.viona-avatar p{
    color:#cbd5e1;
}

@media(max-width:992px){

    .viona-grid{
        grid-template-columns:1fr;
    }

    .viona-left h2{
        font-size:2.3rem;
    }

}
/* =========================
   Creator Bereich
========================= */

.creator-section{
    padding:120px 0;
}

.creator-box{

    max-width:900px;

    margin:auto;

    text-align:center;

    padding:70px 50px;

    border-radius:30px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    box-shadow:
    0 20px 50px rgba(0,0,0,0.3);

}

.creator-box h2{

    font-size:3rem;

    margin:20px 0;

    background:linear-gradient(
        135deg,
        #ff2f92,
        #7c2cff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

.creator-box p{

    color:#cbd5e1;

    font-size:1.15rem;

    line-height:1.8;

    max-width:700px;

    margin:0 auto 40px auto;

}

.creator-btn{

    display:inline-block;

    padding:18px 40px;

    border-radius:50px;

    text-decoration:none;

    color:white;

    font-weight:600;

    font-size:1.1rem;

    background:linear-gradient(
        135deg,
        #ff2f92,
        #7c2cff
    );

    transition:0.3s;

    box-shadow:
    0 0 25px rgba(255,47,146,0.25);

}

.creator-btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 0 40px rgba(255,47,146,0.45);

}

@media(max-width:768px){

    .creator-box{

        padding:50px 25px;

    }

    .creator-box h2{

        font-size:2rem;

    }

    .creator-box p{

        font-size:1rem;

    }

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

.footer{

    padding:40px 20px;

    margin-top:80px;

    border-top:1px solid rgba(255,255,255,0.08);

    background:rgba(255,255,255,0.02);

}

.footer-container{

    max-width:1200px;

    margin:auto;

    text-align:center;

}

.footer-copy{

    color:#ffffff;

    font-size:15px;

    margin-bottom:15px;

}

.footer-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.footer-links a{

    color:#cbd5e1;

    text-decoration:none;

    transition:0.3s;

}

.footer-links a:hover{

    color:#ff2f92;

}

.footer-links span{

    color:#7c2cff;

}

@media(max-width:768px){

    .footer-links{

        gap:8px;

        font-size:14px;

    }

}
/* =========================
   Mobile Header
========================= */

@media(max-width: 768px){

    header{
        padding:15px 0;
    }

    header .container{
        flex-direction:column;
        gap:15px;
    }

    .logo img{
        height:45px;
    }

    nav ul{
        gap:15px;
        flex-wrap:wrap;
        justify-content:center;
    }

    nav a{
        font-size:14px;
    }

}
@media(max-width:768px){

    .advantage-grid{

        grid-template-columns:repeat(2,1fr);

        gap:15px;

    }

    .advantage-card{

        padding:20px;

    }

    .advantage-card h3{

        font-size:16px;

    }

    .advantage-card p{

        font-size:13px;

    }

}
/* =========================
   Mobile Optimierung
========================= */

@media screen and (max-width: 768px){

    .advantage-grid{

        grid-template-columns: 1fr !important;

        gap:20px;

    }

    .advantage-card{

        padding:25px;

    }

    .section-title h2{

        font-size:2rem;

    }

}
@media(max-width:768px){

    .hero h1{
        font-size:2.5rem;
    }

}
@media(max-width:768px){

    .hero-logo{
        max-width:300px;
    }

}
/* =========================
Impressum / Legal Pages
========================= */

.legal-page{

```
min-height:100vh;

padding:180px 0 120px;
```

}

.legal-card{

```
max-width:1100px;

margin:auto;

padding:60px;

border-radius:30px;

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(20px);

box-shadow:
0 0 50px rgba(255,47,146,0.08);
```

}

.legal-logo{

    text-align:center;

    margin-bottom:40px;

}

.legal-logo img{

    max-width:700px;

    width:100%;

    height:auto;

    display:block;

    margin:auto;

}

.legal-tag{

```
display:inline-block;

padding:10px 18px;

border-radius:50px;

background:rgba(255,47,146,.15);

color:#ff2f92;

font-weight:600;

margin-bottom:20px;
```

}

.legal-card h1{

```
font-size:3rem;

margin-bottom:20px;
```

}

.legal-intro{

```
color:#cbd5e1;

margin-bottom:50px;
```

}

.legal-grid{

```
display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;
```

}

.legal-box{

```
background:rgba(255,255,255,0.03);

padding:30px;

border-radius:20px;

border:1px solid rgba(255,255,255,0.05);
```

}

.legal-box h3{

```
color:#ff2f92;

margin-bottom:15px;
```

}

.legal-box p{

```
line-height:1.8;

color:#e2e8f0;
```

}

@media(max-width:768px){

```
.legal-card{
    padding:30px;
}

.legal-grid{
    grid-template-columns:1fr;
}

.legal-card h1{
    font-size:2rem;
}
```

}
.back-home{

    max-width:1400px;

    margin:130px auto 0;

    padding:0 20px;

}

.back-home a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#ffffff;

    text-decoration:none;

    font-weight:600;

    padding:12px 20px;

    border-radius:12px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    transition:.3s;

}

.back-home a:hover{

    transform:translateX(-5px);

    border-color:#ff2f92;

    box-shadow:
    0 0 20px rgba(255,47,146,.25);

}
/* =========================
   IMPRESSUM MOBILE
========================= */

@media (max-width: 768px){

    .legal-page{
        padding:120px 15px 60px;
    }

    .legal-card{
        padding:25px;
    }

    .legal-logo img{
        max-width:280px;
        width:100%;
        height:auto;
    }

    .legal-card h1{
        font-size:2rem;
        text-align:center;
    }

    .legal-intro{
        text-align:center;
        font-size:0.95rem;
    }

    .legal-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .legal-box{
        padding:20px;
    }

    .legal-box h3{
        font-size:1.1rem;
    }

    .legal-box p{
        font-size:0.95rem;
        line-height:1.7;
        word-break:break-word;
    }

    .back-home{
        margin-top:100px;
        padding:0 15px;
    }

    .back-home a{
        width:100%;
        justify-content:center;
    }

}
/* =========================
   KONTAKT
========================= */

.contact-grid{

    display:grid;

    grid-template-columns: 1fr 1fr;

    gap:60px;

    align-items:center;

    margin-top:50px;

}

.contact-left{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-button{

    display:flex;

    align-items:center;

    gap:20px;

    width:100%;

    padding:25px 30px;

    text-decoration:none;

    color:white;

    border-radius:20px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    transition:.3s;

}

.contact-button:hover{

    transform:translateY(-5px);

    border-color:#ff2f92;

    box-shadow:
    0 0 25px rgba(255,47,146,.25);

}

.contact-icon{

    font-size:2rem;

    min-width:50px;

    text-align:center;

}

.contact-button strong{

    display:block;

    font-size:1.2rem;

    margin-bottom:5px;

}

.contact-button small{

    display:block;

    color:#cbd5e1;

    font-size:1rem;

}

.contact-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.contact-viona{

    width:100%;

    max-width:500px;

    border-radius:30px;

    display:block;

    box-shadow:
    0 0 40px rgba(255,47,146,.15);

}

.apply-card{

    margin-top:70px;

    padding:60px;

    text-align:center;

    border-radius:30px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

}

.apply-card h2{

    font-size:2.2rem;

    margin-bottom:20px;

    color:white;

}

.apply-card p{

    max-width:700px;

    margin:0 auto 30px;

    color:#cbd5e1;

    line-height:1.8;

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .contact-right{

        order:-1;

    }

    .contact-viona{

        max-width:300px;

    }

    .contact-button{

        padding:20px;

    }

    .apply-card{

        padding:30px 20px;

    }

    .apply-card h2{

        font-size:1.8rem;

    }

}
.advantages-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}


/* MOBILE */

@media(max-width:900px){

    .advantages-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

}
.creator-network-logo{
    display:block;
    margin:30px auto 0;
    max-width:600px;
    width:100%;
    height:auto;
    filter:drop-shadow(0 0 20px rgba(255,0,140,.25));
    transition:.3s;
}

.creator-network-logo:hover{
    transform:scale(1.02);
}
.trust-text{
    margin-top:15px;
	margin-bottom:25px;
    font-size:16px;
    color:#d8d8d8;
    text-align:center;
    font-weight:500;
}
.legal-full{
    grid-column:1 / -1;
}

.legal-full ul{
    margin-top:15px;
    padding-left:20px;
}

.legal-full li{
    margin-bottom:8px;
}



body{
    margin:0;
    background:#061330;
    font-family:Arial,Helvetica,sans-serif;
}

.content{
    display:flex;
    justify-content:center;
    padding:40px;
}

.biolink-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
}

.biolink-card{
    width:420px;
    background:#73588f;
    border-radius:30px;
    padding:30px;
    box-sizing:border-box;
}

.bio-avatar-area{
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

.bio-avatar{
    width:110px;
    height:110px;
    border-radius:50%;
    overflow:hidden;
    border:3px solid rgba(255,255,255,.3);
}

.bio-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.bio-name{
    background:#5f4d72;
    height:60px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:20px;
    font-weight:bold;
}

.bio-add-main{
    width:45px;
    height:45px;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:20px auto;
    cursor:pointer;
    font-size:26px;
}

.bio-sort{
    text-align:center;
    color:white;
    opacity:.8;
}