.homepage{
max-width:1600px;
margin:0 auto;
}

.hero-parallax{
height:90vh;
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.85));
}

.hero-inner{
position:relative;
z-index:2;
max-width:900px;
transition:transform .4s ease;
}

.hero-inner h1{
font-size:64px;
margin-bottom:20px;
}

.section-block{
padding:60px 20px;
}

.section-block > h2{
max-width:1400px;
margin:0 auto 30px auto;
padding:0 10px;
}

/* Glide Wrapper zentrieren */
.section-block .glide{
max-width:1400px;
margin:0 auto;
}

.dark-section{
background:#0f1117;
}

.top-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
}

.game-card-large{
background:#161b22;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5);
text-decoration:none;
color:inherit;
transition:.3s;
}

.game-card-large:hover{
transform:translateY(-10px);
}

.game-card{
width:100%;
max-width:200px;
margin:0 auto;
display:flex;
flex-direction:column;
background:#161b22;
border-radius:16px;
overflow:hidden;
transition:.3s ease;
height:430px;   /* feste Card-Höhe */
}

.game-card img{
width:100%;
aspect-ratio: 2 / 3;   /* echtes Poster Format */
object-fit:cover;
}

.game-card:hover{
transform:translateY(-8px);
}

.card-meta{
    display:flex;
    flex-direction:column;
    gap:8px;          /* Abstand zwischen Rating & Plattformen */
    margin-top:6px;
}

.card-info{
padding:14px;
display:flex;
flex-direction:column;
justify-content:space-between;
height:150px;      /* höher wegen Rating */
}

.card-info h3{
font-size:14px;
line-height:1.3;
display:-webkit-box;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:36px;   /* exakt 2 Zeilen */
margin-bottom:6px;
}

.rating-badge{
background:#238636;
padding:4px 10px;
border-radius:20px;
font-size:12px;
display:inline-block;
margin-top:6px;
min-height:22px;   /* reserviert Platz */
}

.game-card:hover img{
transform:scale(1.05);
}

.dashboard-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
}

.stat-card{
background:#161b22;
padding:30px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.4);
}

.stat-card span{
font-size:32px;
display:block;
margin-top:10px;
}

.skeleton{
background:linear-gradient(90deg,#1c1f26 25%,#2a2f38 50%,#1c1f26 75%);
background-size:200% 100%;
animation:skeleton 1.5s infinite linear;
border-radius:12px;
}

@keyframes skeleton{
from{background-position:200% 0;}
to{background-position:-200% 0;}
}

.platform-icons{
    display:flex;
    gap:8px;          /* etwas mehr Abstand */
    flex-wrap:wrap;
    min-height:26px;
    align-items:center;
}

.platform-icon svg{
width:18px;
height:18px;
fill:#8b949e;
}

.platform-aka{
font-size:11px;
background:#30363d;
padding:3px 6px;
border-radius:6px;
color:#c9d1d9;
}

.glide{
width:100%;
position:relative;
}

.glide__track{
overflow:hidden;
}

.glide__slide{
display:flex;
justify-content:center;
align-items:flex-start;   /* NICHT stretch */
}

.glide-events .game-card img{
object-fit:cover;
}

.event-date{
display:block;
margin-top:6px;
font-size:12px;
color:#8b949e;
}


/* ================= RELEASE COLUMNS ================= */

.release-columns{
max-width:1400px;          /* ZENTRIERT */
margin:0 auto;             /* wichtig */
padding:60px 20px;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
}

.release-column h2{
margin-bottom:25px;
font-size:22px;
}

.release-item{
display:flex;
align-items:center;
gap:16px;
margin-bottom:18px;
padding:12px;
border-radius:12px;
transition:.2s ease;
}

.release-item:hover{
background:#161b22;
}

.release-cover{
width:60px;
flex-shrink:0;
}

.release-cover img{
width:100%;
height:85px;
object-fit:cover;
border-radius:8px;
}

.release-info a{
color:#e6edf3;
text-decoration:none;
font-weight:500;
display:block;
}

.release-info a:hover{
color:#58a6ff;
}

.release-date{
display:block;
font-size:12px;
color:#8b949e;
margin-top:4px;
}

/* Responsive */
@media(max-width:1100px){
.release-columns{
grid-template-columns:1fr;
gap:50px;
}
}