/* =====================================================================
   Visitenkarte – öffnet sich beim Klick auf das Profilbild.
   Nutzt dieselben Gestaltungswerte wie die übrige Website; wo ein Wert
   fehlt, greift der zweite Parameter von var().
   ===================================================================== */

.site-brand__marklink {
    display: inline-flex;
    border-radius: var(--brand-mark-radius, 50%);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.site-brand__marklink:hover,
.site-brand__marklink:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 35%, transparent);
}
.site-brand__marklink:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .site-brand__marklink { transition: none; }
    .site-brand__marklink:hover,
    .site-brand__marklink:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------- */

.profile-card {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}
.profile-card[hidden] { display: none; }

.profile-card__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 24, 40, .68);
    backdrop-filter: blur(3px);
    animation: eckert-fade .2s ease;
}

.profile-card__dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 0;
    width: min(46rem, 100%);
    max-height: min(88vh, 46rem);
    overflow: auto;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1F2933);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 24px 60px rgba(8, 24, 40, .38);
    animation: eckert-rise .22s ease;
}

.profile-card__figure {
    margin: 0;
    background: var(--color-primary-tint, #E8F1F9);
}
.profile-card__figure img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 46rem;
    object-fit: cover;
}

.profile-card__body {
    padding: 2rem 2rem 2.25rem;
    min-width: 0;
}

.profile-card__name {
    margin: 0;
    font-family: var(--font-heading-family, inherit);
    font-size: var(--font-h2-size, 1.6rem);
    font-weight: var(--font-heading-weight, 700);
    color: var(--color-heading, #0C5396);
    line-height: 1.2;
}
.profile-card__role {
    margin: .35rem 0 0;
    font-size: 1.05rem;
    color: var(--color-text-muted, #5A6B7B);
}
.profile-card__place {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: .5rem 0 1.5rem;
    font-size: var(--font-meta-size, .8125rem);
    color: var(--color-text-muted, #5A6B7B);
}
.profile-card__place .icon { width: 1em; height: 1em; }

.profile-card__close {
    position: absolute;
    top: .65rem;
    right: .65rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1F2933);
    box-shadow: 0 2px 8px rgba(8, 24, 40, .22);
    cursor: pointer;
}
.profile-card__close:hover { background: var(--color-bg-alt, #F5F8FB); }
.profile-card__close:focus-visible { outline: 2px solid var(--color-primary, #0C5396); outline-offset: 2px; }
.profile-card__close .icon { width: 1.1rem; height: 1.1rem; }

/* Die Kontaktliste stammt aus demselben Baustein wie die Kontaktseite.
   Falls das Theme sie nicht gestaltet, hier ein tragfähiger Rückfall. */
.profile-card .contact-list { margin: 0; padding: 0; list-style: none; }
.profile-card .contact-list li + li { margin-top: .5rem; }
.profile-card .contact-list a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .25rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm, 8px);
}
.profile-card .contact-list a:hover { background: var(--color-bg-alt, #F5F8FB); }
.profile-card .contact-list__label {
    display: block;
    font-size: var(--font-meta-size, .8125rem);
    color: var(--color-text-muted, #5A6B7B);
}

/* Die Beschriftung ist standardmässig nur noch für Bildschirmleser da.
   Der Rückfall steht hier, falls das Theme die Klasse nicht kennt. */
.profile-card .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

@keyframes eckert-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eckert-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .profile-card__backdrop,
    .profile-card__dialog { animation: none; }
}

/* Querformatige Motive: Bild über den Angaben, im eigenen Seitenverhältnis
   und ohne Beschnitt. Das Hochformat bleibt beim Nebeneinander. */
.profile-card__dialog--wide {
    grid-template-columns: 1fr;
    width: min(38rem, 100%);
}
.profile-card__dialog--wide .profile-card__figure img {
    height: auto;
    max-height: 30vh;
    aspect-ratio: var(--card-image-ratio, 3 / 2);
    object-fit: contain;
}

/* Schmale Bildschirme: Bild über den Angaben */
@media (max-width: 44rem) {
    .profile-card { padding: .75rem; }
    .profile-card__dialog { grid-template-columns: 1fr; }
    .profile-card__figure img { max-height: 46vh; }
    .profile-card__body { padding: 1.5rem 1.25rem 1.75rem; }
}