/*
====================================
PAGE HERO (Unterseiten-Banner)
====================================
*/

.page-hero {

    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));

    color: #fff;

    padding: 5rem 0;

}


.page-hero__eyebrow {

    display: inline-block;

    margin-bottom: 1rem;

    color: var(--color-secondary);

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    font-size: var(--font-size-xs);

}


.page-hero__title {

    font-size: clamp(2.2rem, 5vw, 3.5rem);

    margin-bottom: 1.5rem;

    max-width: 20ch;

}


.page-hero__text {

    font-size: var(--font-size-md);

    color: rgba(255, 255, 255, .85);

    max-width: 62ch;

}


/*
====================================
LEAD & PROSE
====================================
*/

.lead {

    font-size: var(--font-size-md);

    color: var(--color-text-light);

    max-width: 72ch;

}


.section--tight {

    padding: 4rem 0;

}


.prose {

    max-width: 80ch;

}


.prose h2 {

    font-size: 1.8rem;

    color: var(--color-primary);

    margin: 3rem 0 1rem;

}


.prose h3 {

    font-size: 1.25rem;

    color: var(--color-primary-dark);

    margin: 2rem 0 .75rem;

}


.prose p {

    margin-bottom: 1rem;

    color: var(--color-text-light);

}


.prose ul {

    margin: 0 0 1.5rem 1.25rem;

    list-style: disc;

    color: var(--color-text-light);

}


.prose li {

    margin-bottom: .5rem;

}


.prose a {

    color: var(--color-primary);

    text-decoration: underline;

}


.prose strong {

    color: var(--color-text);

}


/*
====================================
FEATURE (Text + Liste, zweispaltig)
====================================
*/

.feature {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 4rem;

    align-items: center;

}


.feature + .feature {

    margin-top: 5rem;

}


.feature__title {

    font-size: 2rem;

    color: var(--color-primary);

    margin-bottom: 1rem;

}


.feature__text {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

}


.feature__media {

    background: var(--color-background-light);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    padding: 2.5rem;

}


/*
====================================
CHECK-LISTE
====================================
*/

.check-list {

    display: flex;

    flex-direction: column;

    gap: .85rem;

}


.check-list li {

    position: relative;

    padding-left: 2rem;

    color: var(--color-text-light);

}


.check-list li::before {

    content: "✓";

    position: absolute;

    left: 0;

    top: 0;

    color: var(--color-secondary);

    font-weight: 700;

}


/*
====================================
CHIPS (Normen / Tags)
====================================
*/

.chips {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;

}


.chip {

    display: inline-flex;

    align-items: center;

    padding: .55rem 1.1rem;

    background: #fff;

    border: 1px solid var(--color-border);

    border-radius: 999px;

    font-weight: 600;

    font-size: var(--font-size-xs);

    color: var(--color-primary-dark);

    box-shadow: var(--shadow-sm);

}


/*
====================================
STATS-BAND (Kennzahlen)
====================================
*/

.stats-band {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 2rem;

}


.stat-box {

    background: #fff;

    padding: 2rem;

    text-align: center;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}


.stat-box__number {

    display: block;

    font-size: 2.5rem;

    font-weight: 700;

    color: var(--color-primary);

    margin-bottom: .5rem;

}


.stat-box__label {

    color: var(--color-text-light);

}


/*
====================================
MEILENSTEINE (Timeline)
====================================
*/

.milestones {

    max-width: 760px;

}


.milestone {

    position: relative;

    padding-left: 2.5rem;

    padding-bottom: 2.5rem;

    border-left: 2px solid var(--color-border);

    margin-left: .5rem;

}


.milestone:last-child {

    padding-bottom: 0;

    border-left-color: transparent;

}


.milestone::before {

    content: "";

    position: absolute;

    left: -9px;

    top: 2px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--color-secondary);

    border: 3px solid #fff;

    box-shadow: var(--shadow-sm);

}


.milestone__date {

    font-weight: 700;

    color: var(--color-primary);

}


.milestone__title {

    margin: .25rem 0 .5rem;

}


.milestone__text {

    color: var(--color-text-light);

}


/*
====================================
CTA-BAND
====================================
*/

.cta {

    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));

    color: #fff;

    border-radius: var(--radius-lg);

    padding: 4rem 2rem;

    text-align: center;

}


.cta__title {

    font-size: 2.4rem;

    margin-bottom: 1rem;

}


.cta__text {

    color: rgba(255, 255, 255, .85);

    max-width: 56ch;

    margin: 0 auto 2rem;

}


.cta__buttons {

    display: flex;

    gap: 1rem;

    justify-content: center;

    flex-wrap: wrap;

}


.cta .button--secondary {

    border-color: #fff;

    color: #fff;

}


.cta .button--secondary:hover {

    background: rgba(255, 255, 255, .12);

}


/*
====================================
KONTAKT-FORMULAR STATUS
====================================
*/

.contact-form__status {

    margin-top: 1rem;

    font-weight: 600;

    color: var(--color-text-light);

    min-height: 1.5rem;

}


.contact-form__status--ok {

    color: var(--color-secondary);

}


/*
====================================
KONTAKT-KARTEN (Ansprechpartner)
====================================
*/

.persons__grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 2rem;

}


.person-card {

    background: #fff;

    padding: 2.5rem;

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

}


.person-card__name {

    color: var(--color-primary);

    margin-bottom: .25rem;

}


.person-card__role {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

}


.person-card__contact {

    display: flex;

    flex-direction: column;

    gap: .5rem;

}


.person-card__contact a {

    color: var(--color-primary);

}


.person-card__contact a:hover {

    text-decoration: underline;

}


/*
====================================
RESPONSIVE
====================================
*/

@media (max-width: 992px) {

    .feature {

        grid-template-columns: 1fr;

        gap: 2.5rem;

    }

    .stats-band {

        grid-template-columns: repeat(2, 1fr);

    }

}


@media (max-width: 768px) {

    .persons__grid {

        grid-template-columns: 1fr;

    }

    .stats-band {

        grid-template-columns: repeat(2, 1fr);

    }

    .cta__title {

        font-size: 1.8rem;

    }

}


/*
====================================
PROJEKTE / REFERENZEN
====================================
*/

.projects-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 2rem;

}


.project-card {

    display: flex;

    flex-direction: column;

    background: #fff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    padding: 2.5rem;

    transition: var(--transition-fast);

}


.project-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-md);

}


.project-card__meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: .75rem;

    margin-bottom: 1rem;

}


.project-card__time {

    font-weight: 700;

    color: var(--color-primary);

    font-size: var(--font-size-xs);

}


.project-card__branch {

    padding: .3rem .85rem;

    background: var(--color-background-light);

    border-radius: 999px;

    font-size: var(--font-size-xs);

    font-weight: 600;

    color: var(--color-text-light);

}


.project-card__title {

    font-size: 1.3rem;

    color: var(--color-primary-dark);

    margin-bottom: .4rem;

}


.project-card__role {

    display: block;

    color: var(--color-secondary);

    font-weight: 600;

    font-size: var(--font-size-xs);

    margin-bottom: 1rem;

}


.project-card__desc {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

}


.project-card__tags {

    display: flex;

    flex-wrap: wrap;

    gap: .5rem;

    margin-top: auto;

}


.project-card__tags span {

    padding: .25rem .65rem;

    background: var(--color-background-light);

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);

    font-size: .8rem;

    color: var(--color-primary-dark);

}


/*
====================================
PARTNER
====================================
*/

.partner {

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 3rem;

    align-items: center;

    background: #fff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    padding: 3rem;

}


.partner__photo img {

    width: 100%;

    border-radius: var(--radius-md);

}


.partner__badge {

    display: inline-block;

    margin-bottom: .75rem;

    color: var(--color-secondary);

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    font-size: var(--font-size-xs);

}


.partner__name {

    color: var(--color-primary);

    font-size: 1.8rem;

    margin-bottom: .25rem;

}


.partner__role {

    color: var(--color-text-light);

    font-weight: 600;

    margin-bottom: 1.25rem;

}


.partner__text {

    color: var(--color-text-light);

    margin-bottom: 1.5rem;

}


.partner__contact {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem 2rem;

}


.partner__contact a {

    color: var(--color-primary);

    font-weight: 600;

}


.partner__contact a:hover {

    text-decoration: underline;

}


@media (max-width: 768px) {

    .projects-grid {

        grid-template-columns: 1fr;

    }

    .partner {

        grid-template-columns: 1fr;

        text-align: center;

        padding: 2rem;

    }

    .partner__photo {

        max-width: 220px;

        margin: 0 auto;

    }

    .partner__contact {

        justify-content: center;

    }

}


/*
====================================
SLOGAN (Über uns)
====================================
*/

.slogan {

    max-width: 760px;

    margin: 0 auto;

    text-align: center;

}


.slogan__main {

    font-size: clamp(1.6rem, 3.5vw, 2.4rem);

    font-weight: 700;

    color: var(--color-primary);

    margin-bottom: 1.5rem;

}


.slogan__divider {

    width: 120px;

    height: 3px;

    margin: 1.5rem auto;

    border: 0;

    border-radius: 999px;

    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));

    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);

}


.slogan__sub {

    font-size: var(--font-size-md);

    color: var(--color-text-light);

}