/* =========================================================
   DT ALLROUND
   ÜBER UNS
   Dedicated page stylesheet
   ========================================================= */


/* PAGE */

.ueberuns-page {
    background: var(--white);
}


/* SHARED */

.ueberuns-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--gold-dark);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .18em;

    text-transform: uppercase;
}

.ueberuns-label--light {
    color: var(--gold-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.ueberuns-intro {
    padding: 62px 0 40px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafaf8 100%
        );
}

.ueberuns-intro__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .82fr);

    align-items: end;

    gap: 80px;
}

.ueberuns-intro h1 {
    margin: 0;

    color: var(--navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(46px, 4.6vw, 66px);

    font-weight: 500;

    line-height: 1.03;

    letter-spacing: -.045em;
}

.ueberuns-intro__copy {
    width: 100%;
    max-width: 650px;

    justify-self: end;
}

.ueberuns-intro__copy p {
    margin: 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.68;
}

.ueberuns-intro__lead {
    margin-bottom: 14px !important;

    color: #365273 !important;

    font-size: 18px !important;
    font-weight: 650;

    line-height: 1.5 !important;
}

.ueberuns-gold-line {
    width: 100%;
    height: 2px;

    margin-top: 34px;

    background: var(--gold);
}


/* =========================================================
   STORY
   ========================================================= */

.ueberuns-story {
    padding: 64px 0 68px;
}

.ueberuns-story__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 90px;
}

.ueberuns-story__heading h2,
.ueberuns-section-heading h2,
.ueberuns-services-link h2 {
    margin: 0;

    color: var(--navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 3.5vw, 49px);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -.035em;
}

.ueberuns-story__text {
    max-width: 760px;
}

.ueberuns-story__text p {
    margin: 0;

    color: #566d88;

    font-size: 17px;

    line-height: 1.72;
}

.ueberuns-story__text p + p {
    margin-top: 12px;
}


/* =========================================================
   VALUES
   ========================================================= */

.ueberuns-values {
    padding: 62px 0 68px;

    background: #fafaf8;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ueberuns-section-heading {
    max-width: 760px;

    margin-bottom: 38px;
}

.ueberuns-section-heading p {
    margin: 15px 0 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.65;
}

.ueberuns-values__grid {
    display: grid;

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

    gap: 18px;
}

.ueberuns-value {
    position: relative;

    padding: 30px 32px;

    background: var(--white);

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

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.ueberuns-value::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--gold);
}

.ueberuns-value:hover {
    transform: translateY(-2px);

    border-color:
        rgba(196, 148, 67, .70);

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

.ueberuns-value h3 {
    margin: 0 0 12px;

    color: var(--navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;

    line-height: 1.18;
}

.ueberuns-value p {
    margin: 0;

    color: #5b7089;

    font-size: 16px;

    line-height: 1.68;
}


/* =========================================================
   PROCESS
   ========================================================= */

.ueberuns-process {
    padding: 68px 0;
}

.ueberuns-process__box {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 70px;

    padding: 54px 58px;

    background: linear-gradient(
        90deg,
        var(--navy-deep),
        #0a3155
    );

    color: var(--white);

    border: 1px solid rgba(228, 188, 117, .10);
    box-shadow: 0 18px 45px rgba(8, 29, 57, .12);}

.ueberuns-process__heading h2 {
    margin: 0;

    color: var(--white);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(34px, 3.5vw, 48px);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -.035em;
}

.ueberuns-process__steps {
    display: grid;

    gap: 0;
}

.ueberuns-process__step {
    display: grid;

    grid-template-columns:
        18px minmax(0, 1fr);

    gap: 18px;

    padding: 22px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.ueberuns-process__step:first-child {
    padding-top: 0;
}

.ueberuns-process__step:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.ueberuns-process__dot {
    width: 9px;
    height: 9px;

    margin-top: 8px;

    border-radius: 50%;

    background: var(--gold-light);

    box-shadow:
        0 0 0 5px
        rgba(228, 188, 117, .10);
}

.ueberuns-process__step h3 {
    margin: 0 0 7px;

    color: var(--white);

    font-size: 19px;

    line-height: 1.3;
}

.ueberuns-process__step p {
    margin: 0;

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

    font-size: 15.5px;

    line-height: 1.68;
}


/* =========================================================
   SERVICES LINK
   ========================================================= */

.ueberuns-services-link {
    padding: 62px 0 68px;
}

.ueberuns-services-link__grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    gap: 90px;

    align-items: start;
}

.ueberuns-services-link p {
    margin: 0;

    color: #566d88;

    font-size: 17px;

    line-height: 1.72;
}

.ueberuns-text-link {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 20px;

    color: var(--navy);

    font-size: 14px;
    font-weight: 750;

    text-decoration: none;

    border-bottom:
        1px solid var(--gold);

    padding-bottom: 4px;
}

.ueberuns-text-link span {
    color: var(--gold-dark);

    font-size: 19px;
}

.ueberuns-text-link:hover {
    color: var(--gold-dark);
}


/* =========================================================
   CONTACT
   ========================================================= */

.ueberuns-contact {
    padding: 0 0 44px;
}

.ueberuns-contact__box {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(360px, .8fr);

    align-items: center;

    gap: 52px;

    padding: 38px 42px;

    background: #fafaf8;

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

    box-shadow:
        0 12px 35px
        rgba(3, 26, 48, .05);
}

.ueberuns-contact__box::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: var(--gold);
}

.ueberuns-contact h2 {
    margin: 8px 0 12px;

    color: var(--navy);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(30px, 3vw, 42px);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -.035em;
}

.ueberuns-contact p {
    margin: 0;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.68;
}

.ueberuns-contact__actions {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
}

.ueberuns-contact__button {
    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 22px;

    padding: 0 22px;

    border: 1px solid var(--gold-dark);

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #c99647,
            #a76e20
        );

    color: var(--white);

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.ueberuns-contact__button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px
        rgba(169, 111, 32, .16);
}

.ueberuns-contact__button span {
    font-size: 20px;
}

.ueberuns-contact__direct {
    display: flex;

    flex-wrap: wrap;

    gap: 18px 30px;
}

.ueberuns-contact__direct a {
    display: flex;

    flex-direction: column;

    gap: 2px;

    text-decoration: none;
}

.ueberuns-contact__direct small {
    color: var(--gold-dark);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .15em;
}

.ueberuns-contact__direct strong {
    color: var(--navy);

    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .ueberuns-intro__grid,
    .ueberuns-story__grid,
    .ueberuns-process__box,
    .ueberuns-services-link__grid,
    .ueberuns-contact__box {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .ueberuns-intro__copy {
        max-width: 760px;

        justify-self: start;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .ueberuns-intro {
        padding: 46px 0 32px;
    }

    .ueberuns-intro h1 {
        font-size: 43px;
    }

    .ueberuns-story,
    .ueberuns-values,
    .ueberuns-process,
    .ueberuns-services-link {
        padding: 46px 0;
    }

    .ueberuns-values__grid {
        grid-template-columns: 1fr;
    }

    .ueberuns-value {
        padding: 25px 22px;
    }

    .ueberuns-process__box {
        padding: 32px 24px;
    }

    .ueberuns-contact__box {
        padding: 30px 22px;
    }

    .ueberuns-contact__actions {
        align-items: stretch;
    }

    .ueberuns-contact__button {
        width: 100%;
    }

    .ueberuns-contact__direct {
        flex-direction: column;

        gap: 14px;
    }

}


/* SMALL MOBILE */

@media (max-width: 440px) {

    .ueberuns-intro h1 {
        font-size: 38px;
    }

}