/* Contact page. Load AFTER tokens.css and subpage-styles.css; it only adds what differs. */

header h1 a {
    color:#666;
}


/* Current page in the header */
.off-canvas-trigger.current {
    color: #171717;
}

/* Optical alignment: the cap height of the title meets the top edge of the other columns */
.kontakt .project-info h2 {
    margin-top: -0.3em;
}

/* Links: quiet underline at rest (also visible on touch screens), darker on hover */
.kontakt a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: #bbb;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
    transition: text-decoration-color 0.3s ease;
}

.kontakt a:hover {
    text-decoration-color: currentColor;
}


/*   Middle column: contact details as a table   */

.contact-table {
    display: grid;
    grid-template-columns: max-content 1fr;  /* labels as wide as the longest one, values aligned */
    column-gap: 3ch;                         /* three characters of the monospace font */
    /* first row on the same line as the first line of the text on the left:
       title offset (-0.3em) + title line (1.6em) + space above the text (1em) */
    margin: calc(-0.3em + 1.6em + 1em) 0 0;
    font-size: var(--text-size);
    line-height: 1.6;                        /* same rhythm as the text on the left */
    color: #555;
}

.contact-table dt {
    color: #000;
}

.contact-table dd {
    margin: 0;
}

.contact-table dd + dt,
.contact-table dd + dt + dd {
    margin-top: 0.8em;                       /* small space between the entries */
}

.contact-table .group-start {
    margin-top: 2.4em;                       /* larger space before the team */
}


/*   Right column: site plan   */

/* Light grey placeholder in the format of the coming plan (4:5) */
.plan-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-color: #f0f0f0;
}

.kontakt .plan-container img {
    aspect-ratio: 4 / 5;
    object-fit: contain;
}

/* Phones: no project information below "(mehr)" here, so no extra space after it */
.kontakt .more-toggle {
    margin-bottom: 0;
}

/* Phones: the columns are stacked, so the table needs no alignment offset */
@media (max-width: 768px) {
    .contact-table {
        margin-top: 0;
    }
}