/* Reset */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: system-ui, -apple-system, Arial, sans-serif;
}

/* Hintergrund */
body{
    min-height:100vh;
    background:linear-gradient(180deg,#4da3ff,#2c6bff);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:20px;
    color:#111;
}

/* Titel */
header{
    text-align:center;
    margin-bottom:18px;
}

header h1{
    color:white;
    font-size:28px;
    font-weight:700;
}

.subtitle{
    color:white;
    opacity:0.9;
    margin-top:6px;
    font-size:14px;
}

/* Karte */
.app-card{
    width:100%;
    max-width:420px;
    background:white;
    border-radius:22px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
    overflow:hidden;
}

/* Tabs */
.tabs{
    display:flex;
    background:#eef2ff;
    padding:6px;
    gap:6px;
}

.tab{
    flex:1;
    padding:12px;
    border:none;
    border-radius:12px;
    background:transparent;
    cursor:pointer;
    font-weight:600;
    color:#444;
    transition:0.25s;
}

.tab.active{
    background:white;
    color:#2c6bff;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Inhalt */
.content{
    padding:22px;
    min-height:260px;
    position:relative;
}

h2{
    margin-bottom:14px;
}

/* Animation */
.tab-content{
    opacity:0;
    transform:translateY(8px);
    transition:0.25s ease;
    position:absolute;
    width:calc(100% - 44px);
    pointer-events:none;
}

.tab-content.active{
    opacity:1;
    transform:translateY(0);
    position:relative;
    pointer-events:auto;
}

/* Coming soon */
.coming{
    text-align:center;
    padding:40px 10px;
    color:#666;
}

.big{
    font-size:28px;
    font-weight:800;
    color:#2c6bff;
    margin-bottom:10px;
}

/* Ranking */
.ranking-list{
    list-style:none;
    margin-top:15px;
}

.ranking-list li{
    padding:14px;
    border-radius:14px;
    background:#f4f7ff;
    margin-bottom:10px;
    font-weight:600;
}

/* Mobile feeling */
@media (hover:hover){
    .tab:hover{
        background:white;
    }
}