/* ===== Projects Layout ===== */

       .cards {
       max-width: 1180px;
       margin: 40px auto;
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       gap: 50px;
       }

       /* Card takes 6 columns on desktop, full width on mobile */
       .project-card {
       grid-column: span 6;
       background: var(--background2);
       border: 1px solid var(--background);
       border-radius: 18px;
       overflow: hidden;
       box-shadow: 0 10px 30px var(--background2);
       transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
       }

       .project-card:hover {
       box-shadow: 0 20px 60px var(--background2);
       border-color: var(--accent);
       transform: scale(1.06);
       }

       /* Media */
       .project-media {
       position: relative;
       aspect-ratio: 16 / 9;
       background: var(--background2);
       }

       .project-media img {
       width: 100%;
       height: 100%;
       display: block;
       object-fit: cover;
       }

       /* Body */
       .project-body {
       padding: 18px 18px 16px;
       display: flex;
       flex-direction: column;
       gap: 12px;
       }

       .project-head {
       display: flex;
       flex-direction: column;
       gap: 4px;
       }

       .project-title {
       line-height: 1.2;
       margin: 0;
       color: var(--text);
       }

       .project-subtitle {
       margin: 0;
       opacity: 0.75;
       color: var(--text);
       }

       .project-desc {
       margin: 0;
       line-height: 1.6;
       opacity: 0.9;
       color: var(--text);
       }

       /* Tags */
       .project-tags {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       padding: 0;
       margin: 2px 0 0;
       }

       .project-tags li {
       font-size: 0.78rem;
       padding: 6px 10px;
       border-radius: 999px;
       border: 1px solid var(--background2);
       background: var(--background);
       color: var(--text);
       }

       /* Actions */
       .project-actions {
       display: flex;
       gap: 10px;
       margin-top: 6px;
       }

       .btn {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: 12px;
       text-decoration: none;
       font-weight: 700;
       font-size: 0.9rem;
       border: 1px solid transparent;
       transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
       user-select: none;
       }

       .btn:active {
       transform: translateY(1px);
       }

       .btn-primary {
       background: var(--accent);
       color: #fff;
       }

       .btn-primary:hover {
       opacity: 0.92;
       }

       .btn-ghost {
       background: rgba(0,0,0,0.03);
       border-color: rgba(0,0,0,0.10);
       color: var(--text);
       }

       .btn-ghost:hover {
       background: rgba(0,0,0,0.06);
       }

       /* Responsive */
@media (max-width: 900px) {
.cards {
margin: 20px auto;
max-width: 100%;
gap: 30px
}

.project-card {
grid-column: 1 / -1;
width: 100%;
justify-self: center;   /* damit max-width zentriert bleibt */
}
}