/*
 * Kontakt.
 * Loaded by the template name (see Theme\enqueue_page_assets()).
 *
 * Reference: prod /kontakt/ at 1920px.
 *
 * Geometry at 1920px:
 *   head 208 (+36 for the breadcrumb row we add) · contact 793
 *   row 1200 wide, two 45% columns 120 apart, hairline above and below
 *
 * The two column headings ride prod's "secondary" type scale — 40/48 · 36/42 ·
 * 28/32 · 24/28 — the same one the page head uses.
 */

.kn {
    padding: 0 20px;
}

.kn__inner {
    display:        flex;
    flex-direction: column;
    gap:            100px;
}

/* The hairline that opens and closes the section — the site's gold gradient,
   here across the full 1524 column rather than the usual 100px. */
.kn__rule {
    width:      100%;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

.kn__row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    width:           100%;
    max-width:       1200px;
    margin:          0 auto;
}

.kn-details,
.kn-form {
    flex: 0 0 45%;
}

/* ── Ways to reach us ──────────────────────────────────────────────────── */
.kn-details {
    display:        flex;
    flex-direction: column;
    gap:            32px;
}

.kn-details__title {
    /* 16 on top of the column's 32 — prod sets the heading apart from the
       list it introduces. */
    margin:         0 0 16px;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      40px;
    line-height:    48px;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.kn-details__item {
    display:     flex;
    align-items: center;
    gap:         18px;
    margin:      0;
}

.kn-details__icon {
    flex-shrink: 0;
    color:       var(--color-primary);
}

.kn-details__body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.kn-details__label {
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      14px;
    line-height:    16px;
    text-transform: uppercase;
    color:          rgba(255, 255, 255, .3);
}

.kn-details__value {
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   16px;
    line-height: 20px;
    color:       rgba(255, 255, 255, .7);
    transition:  color var(--transition);
}

a.kn-details__value:hover,
a.kn-details__value:focus-visible {
    color: var(--color-primary);
}

.kn-details__rule {
    width:      100%;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

.kn-details__socials {
    display:    flex;
    flex-wrap:  wrap;
    gap:        32px;
    margin:     0;
    padding:    0;
    list-style: none;
}

/* The reset leaves a list item a block, and a block wrapping an inline-flex
   link keeps a line box under it — 7px of nothing below every social link.
   As a flex item it is exactly as tall as the link. */
.kn-details__socials li {
    display: flex;
}

.kn-details__social {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    line-height: 16px;
    color:       rgba(255, 255, 255, .7);
    transition:  color var(--transition);
}

.kn-details__social-icon {
    flex-shrink: 0;
    color:       var(--color-text);
    transition:  color var(--transition);
}

.kn-details__social:hover,
.kn-details__social:focus-visible,
.kn-details__social:hover .kn-details__social-icon {
    color: var(--color-primary);
}

/* ── Message form ──────────────────────────────────────────────────────── */
.kn-form {
    display:          flex;
    flex-direction:   column;
    gap:              20px;
    padding:          40px;
    border:           1px solid rgba(192, 156, 77, .3);
    background-color: #16181d;
}

.kn-form__title {
    margin:         0;
    font-family:    var(--font-heading);
    font-weight:    400;
    font-size:      40px;
    line-height:    48px;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.kn-form__form {
    display:        flex;
    flex-direction: column;
}

/* Prod gives every row 5px above and below instead of a gap, so the rows sit
   10 apart and the first one starts 5 below the heading. */
.kn-form__field,
.kn-form__consent {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    margin:         0;
    padding:        5px 0;
}

.kn-form__label {
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      14px;
    line-height:    16px;
    text-transform: uppercase;
    /* Prod leaves these at the parent theme's #3b3d42, which on this panel is
       all but invisible. This is the tone prod itself gives the labels beside
       it (EMAIL, STANDORT) — quiet, but a label you can read. */
    color:          rgba(255, 255, 255, .3);
}

.kn-form__input {
    width:            100%;
    padding:          10px 20px;
    border:           0;
    border-radius:    0;
    background-color: #25272c;
    font-family:      var(--font-body);
    font-weight:      400;
    font-size:        16px;
    line-height:      20px;
    color:            rgba(255, 255, 255, .7);
}

.kn-form__input::placeholder {
    color:   rgba(255, 255, 255, .7);
    opacity: 1;
}

.kn-form__input:focus-visible {
    outline:        2px solid var(--color-primary);
    outline-offset: -2px;
}

.kn-form__textarea {
    height: 150px;
    resize: vertical;
}

/* The honeypot: off the page rather than display:none, which some bots skip. */
.kn-form__trap {
    position: absolute;
    left:     -9999px;
    width:    1px;
    height:   1px;
    overflow: hidden;
}

.kn-form__consent-label {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    /* One line of 14px type is shorter than the box beside it; prod gives the
       row 24 either way, which is also the least air a 16px checkbox can sit
       in. Two lines outgrow it on their own. */
    min-height:  24px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    line-height: 16px;
    color:       var(--color-text);
    cursor:      pointer;
}

/* The reset strips native control painting (`appearance: none`), so the box is
   drawn here — which also lets it wear the brand gold instead of the operating
   system's blue. */
.kn-form__consent-label input {
    flex-shrink:         0;
    width:               16px;
    height:              16px;
    margin:              0;
    border:              1px solid var(--color-text);
    border-radius:       5px;
    background-color:    transparent;
    background-position: center;
    background-repeat:   no-repeat;
    cursor:              pointer;
    transition:          background-color var(--transition), border-color var(--transition);
}

.kn-form__consent-label input:hover {
    border-color: var(--color-primary);
}

.kn-form__consent-label input:checked {
    border-color:     var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4.2 3.5 6.7 9 1.2' stroke='%23151515' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.kn-form__consent-label input:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 2px;
}

.kn-form__note {
    margin:      5px 0 0;
    font-family: var(--font-body);
    font-weight: 400;
    font-size:   14px;
    line-height: 1.143;
    color:       #e2777a;
}

.kn-form__note--ok {
    color: var(--color-primary);
}

.kn-form__note[hidden] {
    display: none;
}

/* The global pill, at prod's form proportions: full width, a shade taller and
   with the tracking the form's own type carries. */
.kn-form__submit {
    width:          100%;
    margin:         5px 0;
    padding:        11px 20px;
    letter-spacing: 1px;
}

/* ── Laptop ────────────────────────────────────────────────────────────── */
@media (max-width: 1366px) {

    .kn__inner {
        gap: 80px;
    }

    /* Prod lets the row fill the column here instead of holding 1200. */
    .kn__row {
        max-width: none;
    }

    .kn-details__title,
    .kn-form__title {
        font-size:   36px;
        line-height: 42px;
    }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .kn__inner {
        gap: 60px;
    }

    .kn-details__title,
    .kn-form__title {
        font-size:   28px;
        line-height: 32px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    /* 16, like every other section of the site on a phone — prod left this one
       page at 20, which would set the column 4px off from its own head. */
    .kn {
        padding: 0 16px;
    }

    .kn__inner {
        gap: 40px;
    }

    /* Stacked, 20 apart — prod's own gap here, not the 40 the section uses
       between its rows. */
    .kn__row {
        flex-wrap: wrap;
        gap:       20px;
    }

    .kn-details,
    .kn-form {
        flex: 0 0 100%;
    }

    .kn-details {
        gap: 16px;
    }

    .kn-details__title,
    .kn-form__title {
        font-size:   24px;
        line-height: 28px;
    }

    .kn-form {
        padding: 16px;
    }
}