/* mod_serenade_contact_person */

.mod-serenade-contact-person {
    width: 100%;
    max-width: var(--layout-inner);
    margin: 0 auto;
    padding: 0;
    color: var(--c-petrol);
}

.mod-serenade-contact-person__title {
    margin: 0 0 var(--s-7) 0;
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h2);
    line-height: var(--lh-display);
    color: var(--c-petrol);
}

.mod-serenade-contact-person__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--s-7);
}

.mod-serenade-contact-person__photo {
    width: 251px;
    height: 252px;
    flex: 0 0 auto;
    border-radius: var(--rad-card);
    overflow: hidden;
    background: var(--c-bg-mid);
}

.mod-serenade-contact-person__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mod-serenade-contact-person__details {
    flex: 1 1 auto;
    padding-top: var(--s-7);
}

.mod-serenade-contact-person__name {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-2) 0;
    font-family: var(--ff-text);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h3);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

/* Figma node 38:249 "Ellipse 1" — 30 × 30 hollow circle with a 3 px gradient
 * stroke (petrol on the Kontakt page). Same masked-::before ring as the
 * team-grid / timeline markers: real gradient paint clipped to a ring (solid
 * accent at the bottom, fading to the same accent at 10 % toward the top),
 * instead of the previous flat filled disc. */
.mod-serenade-contact-person__marker {
    --marker-color:      var(--c-petrol);
    --marker-color-fade: rgba(68, 112, 115, 0.1);

    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
}

.mod-serenade-contact-person__marker::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: var(--bw-card);
    background: linear-gradient(
        to top,
        var(--marker-color)      24.5%,
        var(--marker-color-fade) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none;
}

.mod-serenade-contact-person__marker--wasser {
    --marker-color:      var(--c-wasser);
    --marker-color-fade: rgba(50, 174, 171, 0.1);
}
.mod-serenade-contact-person__marker--wiese {
    --marker-color:      var(--c-wiese);
    --marker-color-fade: rgba(190, 211, 57, 0.1);
}
.mod-serenade-contact-person__marker--schilf {
    --marker-color:      var(--c-schilf);
    --marker-color-fade: rgba(254, 203, 60, 0.1);
}
.mod-serenade-contact-person__marker--petrol {
    --marker-color:      var(--c-petrol);
    --marker-color-fade: rgba(68, 112, 115, 0.1);
}

.mod-serenade-contact-person__row {
    margin: 0;
    font-family: var(--ff-text);
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    line-height: var(--lh-text);
    color: var(--c-petrol);
}

.mod-serenade-contact-person__row-label {
    margin-right: var(--s-1);
}

.mod-serenade-contact-person__row-value {
    color: var(--c-petrol);
    text-decoration: none;
}

.mod-serenade-contact-person__row-value:hover,
.mod-serenade-contact-person__row-value:focus-visible {
    text-decoration: underline;
    outline: none;
}

/* ---- Responsive (additive only; no Figma mobile reference) ---------------
 * Tablet keeps the desktop photo-beside-details row (the 251 px photo leaves
 * the details column plenty of room down to the stack point). At <=768 px the
 * photo + details stack into a single fluid column, and the photo becomes a
 * fluid square capped so it never dominates a narrow viewport. We also let a
 * long e-mail / phone value wrap (overflow-wrap is inherited by the inline
 * link) so the contact rows never force horizontal scroll on small screens. */
@media (max-width: 768px) {
    .mod-serenade-contact-person__inner {
        flex-direction: column;
        gap: var(--s-4);
    }
    .mod-serenade-contact-person__photo {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        max-width: 280px;
    }
    .mod-serenade-contact-person__details { padding-top: 0; }
    .mod-serenade-contact-person__title { font-size: 28px; }
    .mod-serenade-contact-person__row { overflow-wrap: anywhere; }
}