/* Basis & Schrift */
body {
    margin:0;
    font-family:'Roboto',sans-serif;
    background: linear-gradient(135deg,#1e1e2f,#3a3a5c);
    color:#fff;
    position: relative;
    min-height: 100vh;
}

/* Subtile Hintergrundanimation */
body::before {
    content:"";
    position:fixed; top:0; left:0; right:0; bottom:0;
    background: radial-gradient(circle at 20% 30%, #50fa7b33, transparent 25%),
                radial-gradient(circle at 80% 70%, #ff79c633, transparent 25%);
    z-index:0;
    pointer-events:none;
    animation: moveBG 25s linear infinite;
}
@keyframes moveBG {
    0% { background-position:0 0,0 0; }
    50% { background-position:100% 50%,50% 100%; }
    100% { background-position:0 0,0 0; }
}

/* Header */
header {
    text-align:center;
    padding:2rem;
    position: relative;
    z-index:1;
}
header h1{ font-size:2.5rem; color:#8be9fd; margin:0;}
header p{ color:#f1f1f1; margin-top:0.5rem;}

/* Main Grid */
main {
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap:1.5rem;
    width:90%;
    max-width:1200px;
    margin:2rem auto;
    position: relative;
    z-index:1;
}

/* Karten */
.card {
    background: rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:12px;
    padding:1.5rem;
    text-align:center;
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.card:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,0,0,0.3);
    background:rgba(255,255,255,0.1);
}

.card img {
    width:80px;
    height:80px;
    margin-bottom:1rem;
}

.card h2 {
    margin:0.5rem 0;
    color:#50fa7b;
}

.card p {
    color:#f8f8f2;
    font-size:0.95rem;
}

/* Footer */
footer {
    text-align:center;
    margin:3rem 0 1rem 0;
    font-size:0.8rem;
    color:#999;
    position: relative;
    z-index:1;
}

main {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* max 4 Karten pro Reihe */
    gap: 1.5rem;
    width: 90%;
    max-width: 1200px;
    margin: 2rem auto;
    position: relative;
    z-index: 1;
}

@media (max-width: 1000px) {
    main {
        grid-template-columns: repeat(2, 1fr); /* 2 Karten pro Reihe bei kleineren Bildschirmen */
    }
}

@media (max-width: 600px) {
    main {
        grid-template-columns: 1fr; /* 1 Karte pro Reihe auf sehr kleinen Bildschirmen */
    }
}