/* --- PORTFOLIO-PAGE-SPECIFIC GRID --- */
.portfolio-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Karten zurücksetzen, damit sie sich ins Grid einfügen */
.portfolio-card {
    background-color: #1a1a1a;
    border: 1px solid #333;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 0; /* WICHTIG: Margin entfernen, da Gap im Grid wirkt */
    display: flex;
    flex-direction: column;
}

.portfolio-card h2 { color: #D40000; margin-top: 0; }

/* Button immer am unteren Rand der Karte */
.view-all-button {
    margin-top: auto; 
    align-self: flex-start;
}

@media (max-width: 900px) {
    /* 1. Zentrierung der Karteninhalte */
	.portfolio-section h1 {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
    }

    /* Zentriert den Einleitungstext darunter */
    .portfolio-intro {
        text-align: center !important;
        padding: 0 20px;
    }
.portfolio-card {
        display: flex;
        flex-direction: column;
        align-items: center;    /* Zentriert den Button und Text horizontal */
        text-align: center;     /* Zentriert den Textinhalt */
    }

    /* Überschrift zentriert */
    .portfolio-card h2 {
        text-align: center;
        margin-bottom: 15px;
    }

    /* 2. Button-Styling für Mobile (Zentriert & volle Breite) */
    .view-all-button {
        align-self: center !important; /* Überschreibt das 'flex-start' von vorhin */
        width: 100%;
        max-width: 280px;
        text-align: center;
        box-sizing: border-box;
        margin-top: 20px; /* Mehr Abstand zum Text nach oben */
    }
}