.hc-advisor {
    --hc-advisor-gap: clamp(24px, 2.6vw, 40px);
    display: grid;
    grid-template-columns: minmax(220px, 24%) minmax(0, 1fr);
    gap: var(--hc-advisor-gap);
    align-items: center;
    width: 100%;
    margin: 0;
}

.hc-advisor--standard {
    padding: 0;
    background: #f2f2f2;
    border-radius: 24px;
    overflow: hidden;
}

.hc-advisor__media {
    position: relative;
    min-width: 0;
    align-self: stretch;
    min-height: 100%;
    overflow: hidden;
    border-radius: 24px;
}

.hc-advisor__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 310px;
    object-fit: cover;
    object-position: center center;
}

.hc-advisor__image-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 56px 20px 20px;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0));
}

.hc-advisor__name {
    display: block;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 400;
}

.hc-advisor__position {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    opacity: .92;
}

.hc-advisor__content {
    min-width: 0;
    padding: clamp(30px, 4vw, 58px) clamp(30px, 4.5vw, 70px) clamp(30px, 4vw, 58px) 0;
}

.hc-advisor__eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .62;
}

.hc-advisor__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: 700;
}

.hc-advisor__quote p {
    margin: 0;
}

.hc-advisor__quote p + p {
    margin-top: .8em;
}

.hc-advisor__text {
    margin-top: 28px;
}

.hc-advisor__text > :first-child {
    margin-top: 0;
}

.hc-advisor__text > :last-child {
    margin-bottom: 0;
}

.hc-advisor__cta-wrap {
    display: block;
    margin-top: 28px;
}

/*
 * Der CTA nutzt bewusst bestehende Uncode-Klassen:
 * .btn, .btn-container, .btn-button_color-522609 usw.
 * Die eigene Klasse sorgt nur dafür, dass fremde Standardlink-Regeln
 * den Button nicht verfälschen.
 */
.hc-advisor__cta {
    text-decoration: none;
}

@media (max-width: 959px) {
    .hc-advisor {
        grid-template-columns: minmax(200px, 32%) minmax(0, 1fr);
    }

    .hc-advisor__content {
        padding-right: 30px;
    }
}

@media (max-width: 767px) {
    .hc-advisor--standard {
        display: block;
        border-radius: 20px;
    }

    .hc-advisor__media {
        width: 100%;
        min-height: auto;
        aspect-ratio: 1 / 1;
        border-radius: 20px;
    }

    .hc-advisor__image {
        min-height: 0;
    }

    .hc-advisor__content {
        padding: 28px 24px 32px;
    }
}


.hc-advisor__text--before {
    margin-top: 0;
    margin-bottom: 26px;
}

.hc-advisor__text--after {
    margin-top: 26px;
}

.hc-advisor__quote + .hc-advisor__text--after {
    margin-top: 26px;
}


/*
 * iOS / Mobile Safari Fix
 *
 * Safari kann height:100% auf einem Element innerhalb eines lediglich über
 * aspect-ratio dimensionierten Containers fehlerhaft auflösen. Deshalb
 * definiert auf Mobile das Bild selbst sein Seitenverhältnis.
 */
@media (max-width: 767px) {
    .hc-advisor__media {
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: auto;
        overflow: hidden;
    }

    .hc-advisor__image {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center center;
    }
}