/* =========================================================
   DT ALLROUND
   KONTAKT
   Dedicated page stylesheet
   ========================================================= */


/* PAGE */

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


/* SHARED */

.kontakt-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--gold-dark);

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

    letter-spacing: .18em;

    text-transform: uppercase;
}

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


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

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

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

.kontakt-intro__grid {
    display: grid;

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

    align-items: end;

    gap: 80px;
}

.kontakt-intro h1 {
    max-width: 720px;

    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;
}

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

    justify-self: end;
}

.kontakt-intro__copy p {
    margin: 0;

    color: var(--muted);

    font-size: 16px;

    line-height: 1.68;
}

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

    color: #365273 !important;

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

    line-height: 1.5 !important;
}

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

    margin-top: 34px;

    background: var(--gold);
}


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

.kontakt-main {
    padding: 54px 0 64px;
}

.kontakt-main__grid {
    display: grid;

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

    gap: 18px;
}

.kontakt-card {
    display: grid;

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

    gap: 24px;

    padding: 34px;

    color: inherit;

    text-decoration: none;

    background: var(--white);

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

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

.kontakt-card:hover {
    transform: translateY(-3px);

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

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

.kontakt-card__icon {
    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            var(--navy-light),
            var(--navy-deep) 75%
        );

    color: var(--gold-light);

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

.kontakt-card__icon svg {
    width: 28px;
    height: 28px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.kontakt-card__label {
    display: block;

    margin-bottom: 7px;

    color: var(--gold-dark);

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

    letter-spacing: .16em;
}

.kontakt-card h2 {
    margin: 0 0 13px;

    color: var(--navy);

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

    font-size: 27px;

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.025em;

    overflow-wrap: anywhere;
}

.kontakt-card p {
    margin: 0;

    color: #5b7089;

    font-size: 16px;

    line-height: 1.68;
}

.kontakt-card__action {
    display: inline-flex;

    align-items: center;

    gap: 15px;

    margin-top: 21px;

    color: var(--navy);

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

.kontakt-card__action > span {
    color: var(--gold-dark);

    font-size: 18px;

    transition:
        transform var(--transition);
}

.kontakt-card:hover
.kontakt-card__action > span {
    transform: translateX(4px);
}


/* =========================================================
   ABLAUF
   ========================================================= */

.kontakt-ablauf {
    padding: 0 0 66px;
}

.kontakt-ablauf__box {
    display: grid;

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

    gap: 70px;

    padding: 48px 52px;

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

    color: var(--white);
}

.kontakt-ablauf__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;
}

.kontakt-ablauf__steps {
    display: grid;
}

.kontakt-step {
    display: grid;

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

    gap: 18px;

    padding: 20px 0;

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

.kontakt-step:first-child {
    padding-top: 0;
}

.kontakt-step:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.kontakt-step__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);
}

.kontakt-step h3 {
    margin: 0 0 7px;

    color: var(--white);

    font-size: 19px;

    line-height: 1.3;
}

.kontakt-step p {
    margin: 0;

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

    font-size: 15.5px;

    line-height: 1.65;
}


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

.kontakt-services {
    padding: 0 0 66px;
}

.kontakt-services__grid {
    display: grid;

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

    align-items: start;

    gap: 90px;

    padding-top: 56px;

    border-top: 2px solid var(--gold);
}

.kontakt-services 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;
}

.kontakt-services p {
    margin: 0;

    color: #566d88;

    font-size: 17px;

    line-height: 1.72;
}

.kontakt-services__link {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 20px;

    padding-bottom: 4px;

    color: var(--navy);

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

    text-decoration: none;

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

.kontakt-services__link span {
    color: var(--gold-dark);

    font-size: 19px;
}

.kontakt-services__link:hover {
    color: var(--gold-dark);
}


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

@media (max-width: 1000px) {

    .kontakt-intro__grid,
    .kontakt-ablauf__box,
    .kontakt-services__grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

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

        justify-self: start;
    }

}


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

@media (max-width: 700px) {

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

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

    .kontakt-main {
        padding: 34px 0 46px;
    }

    .kontakt-main__grid {
        grid-template-columns: 1fr;
    }

    .kontakt-card {
        grid-template-columns:
            54px minmax(0, 1fr);

        gap: 16px;

        padding: 25px 21px;
    }

    .kontakt-card__icon {
        width: 52px;
        height: 52px;
    }

    .kontakt-card h2 {
        font-size: 22px;
    }

    .kontakt-ablauf {
        padding-bottom: 46px;
    }

    .kontakt-ablauf__box {
        padding: 32px 24px;
    }

    .kontakt-services {
        padding-bottom: 46px;
    }

    .kontakt-services__grid {
        padding-top: 42px;
    }

}


/* SMALL MOBILE */

@media (max-width: 440px) {

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

    .kontakt-card {
        grid-template-columns: 1fr;
    }

}