.project-section {
    margin-bottom: 4rem;
    scroll-margin-top: 100px;
}

.project-section h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, #0066FF, var(--primary-blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

.project-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 15px;
    margin-bottom: 2rem;
}

.project-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.project-meta {
    background: rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.project-meta p {
    margin-bottom: 0.5rem;
}

.project-features {
    margin-top: 1.5rem;
}

.project-features h4 {
    margin-bottom: 1rem;
    color: var(--primary-blue);
}

.project-card ul {
    list-style: none;
    margin-left: 1rem;
}

.project-card ul li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.project-card ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--primary-blue);
}

.project-intro {
    margin-bottom: 3rem;
    text-align: center;
}

.project-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Standard: 3 Spalten */
    gap: 2rem;
    margin-top: 2rem;
}

/* Wenn der Bildschirm kleiner wird, 2 Spalten */
@media (max-width: 800px) {
    .project-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Wenn der Bildschirm sehr klein wird, nur 1 Spalte */
@media (max-width: 500px) {
    .project-categories {
        grid-template-columns: 1fr;
    }
}

/* ---------------- category-card */
.category-card {
    /*background: rgba(255, 255, 255, 0.05);*/
    padding: 1rem;
    border-radius: 15px;
    /* backdrop-filter: blur(10px); */
    /*    transition: transform 0.3s ease;*/
    animation: fadeIn 0.8s ease-out forwards;
}

.category-card:nth-child(5) {
    animation-delay: 0.3s;
}

.category-card:nth-child(6) {
    animation-delay: 0.3s;
}

.category-card a {
    color: var(--text-color);
    text-decoration: none;
}

.category-card a:hover {
    color: #00d4ff;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-header h2 {
    margin: 0;
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: transparent;
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.back-to-top i {
    font-size: 1.8rem;
}

.back-to-top:hover {
    color: var(--text-light);
}