/* Stile für die Projekte-Bilder auf spiele.html */
.project {
    position: relative; /* Für bessere Kontrolle über Inhalte */
    text-align: center; /* Zentriert Text und Bilder */
}

.project-image {
    width: 100%; /* Passt die Breite des Bildes an das Eltern-Element an */
    height: auto; /* Erhält das Seitenverhältnis des Bildes */
    border-radius: 8px; /* Abgerundete Ecken, passend zum Design */
    margin-bottom: 1rem; /* Abstand zwischen Bild und Text */
    object-fit: cover; /* Verhindert Verzerrungen des Bildes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Leichter Schatten für Bilder */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Weicher Hover-Effekt */
}

.project-image:hover {
    transform: scale(1.05); /* Vergrößert das Bild leicht beim Hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten beim Hover */
}

.play-button {
    display: inline-block; /* Der Button bleibt wie ein Block-Element */
    padding: 0.5rem 1.5rem; /* Innenabstand des Buttons */
    font-size: 1rem; /* Schriftgröße */
    font-weight: bold; /* Fettgedruckter Text */
    color: white; /* Weißer Text */
    background-color: #0468ff; /* Blaue Hintergrundfarbe */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Weicher Hover-Effekt */
}

.play-button:hover {
    background-color: #1eb331; /* Dunklere Farbe beim Hover */
    transform: scale(1.05); /* Vergrößert den Button leicht */
}