/* --- Kontaktwege (Seite Kontakt) ----------------------------------------
   Zwei gleichrangige Standorte als <address>. Icons nur fuer Ort, Telefon,
   E-Mail und Website (Font Awesome, im CSS, damit das Markup schlicht
   bleibt). Keine eingebettete Karte: sie braeuchte eine Einwilligung. */

.epi-kontaktwege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--wp--preset--spacing--lg);
}

.epi-kontaktweg {
    display: grid;
    gap: 0.625rem;
    align-content: start;
    font-style: normal;
}

.epi-kontaktweg p {
    margin: 0;
}

.epi-kontaktweg__name {
    margin-block-end: 0.25rem !important;
    font-family: var(--font-secondary);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: var(--line-height-heading);
}

.epi-kontaktweg__zeile {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
    line-height: 1.5;
}

.epi-kontaktweg__zeile::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-accent-dark-wcag);
    text-align: center;
}

.epi-kontaktweg__zeile--ort::before { content: "\f3c5"; }
.epi-kontaktweg__zeile--telefon::before { content: "\f095"; }
.epi-kontaktweg__zeile--mail::before { content: "\f0e0"; }
.epi-kontaktweg__zeile--web::before { content: "\f0ac"; }
.epi-kontaktweg__zeile--support::before { content: "\f590"; }

/* Zwischenbezeichnung im Standort, etwa „Support“ mit eigener Nummer. */
.epi-kontaktweg .epi-kontaktweg__gruppe {
    margin-block-start: 0.5rem;
    font-weight: 700;
    line-height: var(--line-height-ui);
}

/* Klickziel mind. 44 px hoch fuer Telefon, E-Mail und Website. */
.epi-kontaktweg__zeile a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-min);
    color: var(--color-accent-dark-wcag);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.epi-kontaktweg__zeile:has(a) {
    align-items: center;
}

.epi-kontaktweg__zeile a:hover {
    color: var(--color-text);
}

.epi-kontaktweg__extern {
    margin-inline-start: 0.375rem;
    font-weight: 600;
    text-decoration: none;
}

/* TeamViewer hat kein Font-Awesome-Glyph: flaches Markenzeichen aus Simple
   Icons (CC0) als Maske, damit es die Icon-Farbe der Zeile übernimmt. */
.epi-kontaktweg__zeile--teamviewer::before {
    content: "";
    inline-size: 1.125rem;
    block-size: 1.125rem;
    justify-self: center;
    align-self: center;
    background-color: currentColor;
    mask: url("../../img/teamviewer.svg") center / contain no-repeat;
}