/* projects/projects.css */
/* Ergänzungen und Overrides speziell für projects.art-con.de */
/* Basis bleibt die Haupt-CSS */

:root {
    --projects-max: 1180px;
}

/* Etwas mehr Luft und etwas ruhigere Projektseiten-Proportionen */
.wrap {
    width: min(calc(100% - 40px), var(--projects-max));
}

/* Hero etwas kompakter und weniger landingpage-artig */
.hero {
    padding: 22px 0 24px;
}

.hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 30px;
    padding: 46px 48px;
    align-items: start;
}

.hero-title {
    max-width: 20ch;
}

/* Die Projects-Subdomain darf etwas sachlicher und weniger "brand" wirken */
.brand {
    letter-spacing: 0.12em;
}

.brand-mark {
    box-shadow: 0 14px 26px rgba(61, 217, 197, 0.12);
}

/* Hero-Card ruhiger, etwas weniger "promo card" */
.hero-card {
    min-height: 300px;
    padding: 26px;
}

.card-quote {
    max-width: 18ch;
}

/* Sections etwas stärker voneinander trennen */
main {
    gap: 32px;
}

/* Mehr Luft für Projektblöcke */
.panel-inner {
    padding: 38px 40px;
}

.section-head {
    margin-bottom: 24px;
}

/* Projektkarten etwas klarer als Content-Container */
#ongoing .card,
#selected .card {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#ongoing .card p,
#selected .card p {
    max-width: 40ch;
}

/* Projekte dürfen etwas weniger "hoverig" sein */
@media (hover: hover) and (pointer: fine) {

    #ongoing .card:hover,
    #selected .card:hover {
        transform: translateY(-2px);
    }
}

/* Selected Section optisch leicht differenzieren */
#selected .panel {
    background: rgba(14, 22, 36, 0.82);
}

/* Contact-Bereich auf Projektseite etwas kompakter */
#contact .contact {
    grid-template-columns: 1fr 0.9fr;
    padding: 30px 40px;
}

/* Footer etwas sachlicher */
footer {
    padding: 10px 0 28px;
}

/* Lesbarkeit langer Projektüberschriften */
#ongoing h3,
#selected h3 {
    line-height: 1.25;
}

/* Optionaler Platz für spätere Projekt-Meta-Zeilen */
.project-meta {
    margin-top: 10px;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Optionaler Platz für spätere Projektlinks */
.project-link {
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--primary);
}

.project-link:hover {
    opacity: 0.9;
}

/* Responsive Anpassungen */
@media (max-width: 920px) {
    .wrap {
        width: min(calc(100% - 28px), var(--projects-max));
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding: 32px 24px 24px;
        gap: 24px;
    }

    .panel-inner {
        padding: 28px 24px;
    }

    #contact .contact {
        grid-template-columns: 1fr;
        padding: 26px 24px;
        gap: 22px;
    }

    main {
        gap: 24px;
    }
}

@media (max-width: 560px) {
    .hero {
        padding: 16px 0 18px;
    }

    .hero-grid {
        padding: 24px 18px 18px;
    }

    .panel-inner {
        padding: 22px 18px;
    }

    #contact .contact {
        padding: 22px 18px;
    }

    .hero-card,
    .card {
        padding: 20px;
    }

    .wrap {
        width: min(calc(100% - 22px), var(--projects-max));
    }
}