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

body{
    background:#ffffff;
    font-family:'Inter',sans-serif;
    min-height:100vh;
    color:#111827;
}

.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:50px 20px 20px;
}

.logo{
    width:180px;
    max-width:70vw;
}

.container{
    width:min(1400px,92%);
    margin:0 auto 60px;
    padding-top:30px;
}

/* Kategorie-Blöcke nebeneinander, gemeinsam zentriert */
.categories{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:48px;
    width:100%;
}

.category-section{
    display:flex;
    flex-direction:column;
    align-items:stretch;
}

.category-title{
    font-size:20px;
    font-weight:700;
    color:#111827;
    margin-bottom:16px;
    text-align:center;
    letter-spacing:-0.01em;
}

/* Kacheln innerhalb einer Kategorie nebeneinander */
.app-grid{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:16px;
}

.app-card{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:20px;

    flex:0 0 var(--card-width, 140px);
    width:var(--card-width, 140px);
    min-height:140px;
    padding:16px 10px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:12px;

    text-decoration:none;
    color:#111827;

    transition:transform .25s ease, box-shadow .25s ease;

    box-shadow:
        0 6px 18px rgba(0,0,0,0.04);
}

.app-card:hover{
    transform:translateY(-4px);
    box-shadow:
        0 14px 28px rgba(0,0,0,0.08);
}

.app-icon{
    width:52px;
    height:52px;

    border-radius:16px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;
    font-size:22px;
    font-weight:700;

    background:linear-gradient(135deg,#7c5cff,#3fd0ff);
}

.app-card h3{
    font-size:15px;
    font-weight:600;
    text-align:center;
    padding:0 4px;
    line-height:1.3;
    white-space:nowrap;
}

@media(max-width:768px){

    .categories{
        gap:32px;
    }

    .app-grid{
        gap:12px;
    }

    /* Auch auf Mobil keine Umbrüche: Kachelbreite bleibt fix.
       Bei sehr langen Namen darf die Seite horizontal scrollen. */
    .app-card{
        flex:0 0 var(--card-width, 140px);
        width:var(--card-width, 140px);
        min-height:130px;
    }
}