/*!
 * WAB Ansprechpartner – Karten mit Bild, Name, Funktion und Kontaktwegen.
 * Farben, Rundungen und Schatten aus der globalen root.css (--wab-color-*, --wab-radius-*, --wab-shadow).
 */

.wab-contacts {
    --wab-contacts-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--wab-contacts-cols), minmax(0, 1fr));
    gap: 24px;
}

.wab-contacts--cols-1 { --wab-contacts-cols: 1; }
.wab-contacts--cols-2 { --wab-contacts-cols: 2; }
.wab-contacts--cols-4 { --wab-contacts-cols: 4; }

@media (max-width: 1023px) {
    .wab-contacts--cols-3,
    .wab-contacts--cols-4 { --wab-contacts-cols: 2; }
}

@media (max-width: 767px) {
    .wab-contacts { --wab-contacts-cols: 1; }
}

/* Überschrift des Elements über die ganze Breite */
.wab-contacts > :is(h1, h2, h3, h4, h5, h6) {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.wab-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px;
    border-radius: var(--wab-radius-card, 8px);
    background: #fff;
    box-shadow: var(--wab-shadow, 0 10px 30px rgba(0, 0, 0, .08));
    text-align: center;
}

.wab-contact__image {
    width: min(160px, 60%);
    margin-bottom: 18px;
}

.wab-contact__image figure {
    margin: 0;
}

.wab-contact__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.wab-contacts--image-round .wab-contact__image img { border-radius: 50%; }
.wab-contacts--image-rounded .wab-contact__image img { border-radius: var(--wab-radius-card, 8px); }

/* Eckig: Bild über die volle Kartenbreite */
.wab-contacts--image-square .wab-contact { overflow: hidden; }
.wab-contacts--image-square .wab-contact:has(> .wab-contact__image) { padding-top: 0; }
.wab-contacts--image-square .wab-contact__image { width: calc(100% + 48px); margin: 0 -24px 18px; }
.wab-contacts--image-square .wab-contact__image img { aspect-ratio: 4 / 3; }

.wab-contact__body {
    width: 100%;
}

.wab-contact__body > * {
    margin: 0;
}

.wab-contact__department {
    margin-bottom: .35em;
    color: var(--wab-color-primary, #1d6b3a);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wab-contact__name {
    font-size: var(--wab-h4-size, 1.25rem);
    font-family: var(--wab-font-main, inherit);
    letter-spacing: normal;
}

.wab-contact__position {
    margin-top: .25em;
    font-weight: 600;
}

.wab-contact__qualification,
.wab-contact__meta {
    margin-top: .25em;
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-size: .9em;
}

.wab-contact__responsibilities,
.wab-contact__description {
    margin-top: .75em;
    font-size: .95em;
}

.wab-contact__channels {
    margin: 1em 0 0;
    padding: 0;
    list-style: none;
}

.wab-contact__channels:empty {
    display: none;
}

.wab-contact__channel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    margin: .3em 0;
    overflow-wrap: anywhere;
}

.wab-contact__channel a {
    color: var(--wab-color-primary, #1d6b3a);
    text-decoration: none;
}

.wab-contact__channel a:hover,
.wab-contact__channel a:focus-visible {
    text-decoration: underline;
}

/* Icons per Maske, eingefärbt in der Primärfarbe */
.wab-contact__channel::before {
    content: "";
    flex: none;
    width: 1em;
    height: 1em;
    background: var(--wab-color-primary, #1d6b3a);
    -webkit-mask: var(--wab-contact-icon) center / contain no-repeat;
    mask: var(--wab-contact-icon) center / contain no-repeat;
}

.wab-contact__channel--phone,
.wab-contact__channel--mobile {
    --wab-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}

.wab-contact__channel--mobile {
    --wab-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H8a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V4a3 3 0 0 0-3-3zm-4 21a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5-5H7V4h10z'/%3E%3C/svg%3E");
}

.wab-contact__channel--fax {
    --wab-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8h-1V3H6v5H5a3 3 0 0 0-3 3v6h4v4h12v-4h4v-6a3 3 0 0 0-3-3zM8 5h8v3H8zm8 14H8v-5h8zm2-7.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z'/%3E%3C/svg%3E");
}

.wab-contact__channel--email {
    --wab-contact-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5z'/%3E%3C/svg%3E");
}