/* ==========================================================
   VpsyB Mitgliederframe
   ========================================================== */

:root {
    --vpsyb-bg: #ffffff;
    --vpsyb-accent: #922866;
    --vpsyb-text: #30343b;
    --vpsyb-border: #e2e2e2;
}


/* Grundlayout */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* Mitgliederblock */

.vpsyb-member-block {
    width: 100%;
    margin: 0;
    padding: 20px 24px;

    display: flex;
    align-items: center;
    gap: 24px;

    background: var(--vpsyb-bg);

    border:
        1px solid
        var(--vpsyb-border);

    border-radius: 14px;

    color: var(--vpsyb-text);
}


/* Logo */

.vpsyb-logo {
    flex: 0 0 115px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-right: 20px;

    border-right:
        1px solid
        var(--vpsyb-border);
}

.vpsyb-logo img {
    display: block;

    width: 95px;
    max-width: 100%;
    height: auto;
}


/* Text */

.vpsyb-content {
    flex: 1;
    min-width: 0;
}

.vpsyb-heading {
    margin: 0 0 5px 0;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 600;

    color: var(--vpsyb-text);
}

.vpsyb-subtitle {
    margin: 0 0 5px 0;

    font-size: 16px;
    line-height: 1.4;
    font-weight: 400;

    color: var(--vpsyb-text);
}

.vpsyb-description {
    margin: 0;

    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;

    color: var(--vpsyb-text);

    opacity: 0.78;
}


/* Button */

.vpsyb-action {
    flex: 0 0 auto;
}

.vpsyb-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 14px 24px;

    background: var(--vpsyb-accent);
    color: #ffffff;

    border-radius: 30px;

    font-size: 16px;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.vpsyb-button:hover,
.vpsyb-button:focus-visible {
    opacity: 0.88;

    text-decoration: none;

    transform: translateY(-1px);
}

.vpsyb-button:focus-visible {
    outline:
        2px solid
        var(--vpsyb-text);

    outline-offset: 3px;
}

.vpsyb-arrow {
    font-size: 20px;
    line-height: 1;
}


/* Tablet */

@media (max-width: 850px) {

    .vpsyb-member-block {
        gap: 18px;
        padding: 18px 20px;
    }

    .vpsyb-logo {
        flex-basis: 100px;
        padding-right: 18px;
    }

    .vpsyb-logo img {
        width: 85px;
    }

    .vpsyb-heading {
        font-size: 19px;
    }

    .vpsyb-subtitle {
        font-size: 15px;
    }

    .vpsyb-description {
        font-size: 13px;
    }

    .vpsyb-button {
        padding: 13px 19px;
        font-size: 15px;
    }

}


/* Smartphone / schmale Einbettung */

@media (max-width: 650px) {

    .vpsyb-member-block {
        flex-direction: column;

        align-items: center;

        text-align: center;

        gap: 14px;

        padding: 20px 17px;
    }

    .vpsyb-logo {
        flex: none;

        width: auto;

        padding: 0 0 14px 0;

        border-right: 0;

        border-bottom:
            1px solid
            var(--vpsyb-border);
    }

    .vpsyb-logo img {
        width: 90px;
    }

    .vpsyb-heading {
        font-size: 19px;
    }

    .vpsyb-subtitle {
        font-size: 15px;
    }

    .vpsyb-description {
        font-size: 13px;
    }

    .vpsyb-action {
        margin-top: 3px;
    }

}