.project {
    margin: 2rem 0;
    /* Fügt oben und unten einen Außenabstand von 2rem hinzu, sorgt für Abstand zwischen einzelnen Projektelementen */
    background-color: #fff;
    /* Setzt die Hintergrundfarbe jedes Projektelements auf Weiß */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Fügt einen leichten Schatten hinzu für eine bessere Tiefenwirkung */
    padding: 1rem;
    /* Fügt einen Innenabstand von 1rem rundum hinzu für mehr Raum um den Inhalt */
    border-radius: 8px;
    /* Rundet die Ecken des Projektelements ab */
}

.project h3 {
    margin-bottom: 5px;
    /* Setzt den unteren Außenabstand des <h3>-Elements auf 5px */
    /* Adjust this value as needed - Hinweis, dass dieser Wert je nach Bedarf angepasst werden kann */
}

.project h4 {
    margin-top: 0;
    /* Entfernt den oberen Außenabstand des <h4>-Elements */
    margin-bottom: 20px;
    /* Setzt den unteren Außenabstand des <h4>-Elements auf 20px */
    /* Adjust this value as needed - Hinweis, dass dieser Wert je nach Bedarf angepasst werden kann */
}

.project p {
    margin-top: 0;
    /* Entfernt den oberen Außenabstand des Paragraphen, um Textdichte zu kontrollieren */
}

#projects .source-code-request a {
    color: #333;
}

.cta-button {
    background: #333; /* Dunklerer Hintergrund */
    color: white;
    padding: 8px 16px; /* Kleinere Polsterung für einen kompakteren Button */
    text-decoration: none;
    border-radius: 20px; /* Kleinere, abgerundete Ecken */
    font-size: 0.9em; /* Kleinere Schriftgröße */
    font-weight: 500; /* Normalgewichtiger Text */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.2); /* Dezenterer Schatten */
    transition: all 0.3s ease; /* Glatter Übergang für alle Effekte */
    display: inline-block;
    text-align: center;
    opacity: 0.8;
    margin-top: 10px;
}

.cta-button:hover {
    background: #555; /* Leicht hellerer Hintergrund beim Hover */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); /* Verstärkter Schatten beim Hover */
    transform: translateY(-3px); /* Geringere Bewegung nach oben beim Hover */
}

.cta-button:active {
    background: #333; /* Beibehaltung der Farbe beim Klick */
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Weniger Schatten beim Klick */
    transform: translateY(-1px); /* Geringere Bewegung beim Klick */
}

@media only screen and (max-width: 768px) {
    /* Regeln für Bildschirme, die kleiner als 768px sind */

    .project {
        padding: 1rem;
        /* Bestätigt, dass der Innenabstand innerhalb von Projektboxen auch auf kleineren Bildschirmen beibehalten wird */
        /* Reduziert den Innenabstand innerhalb von Projektboxen - Kommentar könnte irreführend sein, da keine Änderung zur oberen Regel besteht */
    }
}