/* Reusable About components; dimensions follow the 1920px XD artboard. */
#page .about-hero {
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: min(1757px, calc(100vw - 30px));
    max-width: none;
    min-height: 320px;
    aspect-ratio: 1757 / 631;
    margin: 20px 0 0 50%;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: var(--border-radius);
    background-position: center 25%;
    background-size: cover;
}
.about-hero::before, .about-hero::after { display: none; }
.about-hero > .wpb_column > .vc_column-inner { padding: 0; }
.about-hero .wpb_text_column {
    box-sizing: border-box;
    width: clamp(420px, 38.5vw, 675px);
    max-width: 100%;
    margin: 0;
    padding: 24px clamp(24px, 3vw, 48px) 26px clamp(28px, 5.8vw, 112px);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    background: var(--dunkelblau-75);
}
.about-hero h1 {
    margin: 0;
    color: var(--weiss);
    font-size: var(--heading-hero-size);
    font-weight: 300;
    line-height: 1.3;
    text-transform: uppercase;
}
.about-hero h1 strong { font-weight: 500; }
.planhof-breadcrumb { margin: 24px 0 0; color: var(--dunkelblau); font-size: .875rem; }
.planhof-breadcrumb a { color: inherit; }
.about-intro { padding-top: 10px; }


/* Native The7 grid and AJAX pagination are retained. */
.dt-team-shortcode .team-author > p { white-space: pre-line; }
.planhof-about-team .team-media,
.planhof-about-team .team-media > span,
.planhof-about-team .team-media > a { display: block; overflow: hidden; border-radius: var(--border-radius); }
.planhof-about-team .team-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 369.54 / 341.62;
    object-fit: cover;
}
#page .planhof-about-team .team-author-name,
#page .planhof-about-team .team-author-name a {
    color: var(--heading-color);
    font-family: var(--font-family);
    font-size: var(--heading-team-name-size);
    font-weight: 400;
    line-height: 1.2;
}
#page #content .planhof-about-team .team-author > p,
#page #content .planhof-about-team .team-content,
#page #content .planhof-about-team .team-content p {
    margin-bottom: 0;
    color: var(--dunkelgrau);
    font-family: var(--font-family);
    font-size: var(--the7-base-font-size);
    font-weight: 300;
    line-height: 1.45;
}
#page #content .planhof-about-team .team-author { padding-bottom: 0; }
#page .planhof-about-team .team-content { margin: 2px 0 0; }
#page #content .planhof-about-team .filter { justify-content: flex-start; flex-wrap: wrap; gap: 0; margin-block: 0 30px; }
#page #content .planhof-about-team .filter::before,
#page #content .planhof-about-team .filter::after { display: none; }
#page #content .planhof-about-team .filter-categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 20px;
    margin: 0;
    padding: 0;
}
#page #content .planhof-about-team .filter a {
    display: inline-block;
    margin: 0;
    padding: .9em 20px;
    border-radius: var(--border-radius-btn);
    background: var(--btn-bg-hellgruen);
    color: var(--gruen);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
#page #content .planhof-about-team .filter a.act,
#page #content .planhof-about-team .filter a:hover {
    background: var(--gruen);
    color: var(--weiss);
}

/* Keep the native AJAX button consistent with link-btn.btn-invert. */
#page #content .planhof-about-team .paginator .button-load-more {
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-accent);
    border-radius: var(--border-radius-btn);
}
#page #content .planhof-about-team .paginator .button-load-more:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-fg);
}
#page #content .planhof-about-team .button-load-more .button-caption { color: inherit; }

/* Picture tiles with orange/blue overlays, rather than separate pastel cards. */
.about-offers .vc_column-inner > .wpb_wrapper {
    position: relative;
    isolation: isolate;
    width: 100%;
    aspect-ratio: 736 / 602;
    overflow: hidden;
    border-radius: var(--border-radius);
}
.about-offer-image { position: absolute; inset: 0; margin: 0; }
.about-offer-image figure,
.about-offer-image .vc_single_image-wrapper { display: block; width: 100%; height: 100%; margin: 0; }
.about-offer-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-offers .about-offer-panel {
    position: absolute;
    top: 43.35%;
    left: 0;
    box-sizing: border-box;
    width: 88.8%;
    margin: 0;
    padding: clamp(22px, 2.24vw, 43px);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    background: var(--orange-75);
    color: var(--weiss);
}
.about-offer-company .about-offer-panel { background: var(--dunkelblau-75); }
#page #content .about-offer-panel h3 {
    margin-bottom: 24px;
    color: var(--weiss);
    font-size: var(--heading-offer-size);
    font-weight: 300;
    line-height: 1.2;
    text-transform: uppercase;
}
.about-offer-panel p:last-child { margin-bottom: 0; }
.about-offer-panel a { overflow-wrap: break-word; hyphens: auto; }

@media (min-width: 1200px) {
    #page #content .about-intro .wpb_text_column:has(h2) { max-width: 612px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .about-offers .vc_column-inner > .wpb_wrapper { min-height: 420px; }
    .about-offers .about-offer-panel { top: auto; bottom: 28px; width: 95%; padding: 20px; }
    #page #content .about-offer-panel h3 { font-size: var(--heading-offer-tablet-size); margin-bottom: 18px; }
}
@media (max-width: 991px) {
    #page #content .planhof-about-team .filter { justify-content: center; }
    #page #content .planhof-about-team .filter-categories { justify-content: center; gap: 10px 12px; }
    #page #content .planhof-about-team .filter a {
        box-sizing: border-box;
        min-height: var(--button-compact-min-height, 44px);
        padding-block: var(--button-compact-padding-y, 11px);
        line-height: 1.2;
        text-align: center;
    }
    /* The column gap already supplies the outer 15px; avoid doubling it. */
    .about-offers > .wpb_column > .vc_column-inner { padding-inline: 0; }
}
@media (max-width: 767px) {
    #page .about-hero { align-items: flex-end; min-height: 360px; background-position: 60% center; }
    .about-hero .wpb_text_column { width: 100%; padding: 22px 24px; }
    .about-hero h1 { font-size: var(--heading-hero-mobile-size); }
    .about-intro h2 br { display: none; }
    .about-intro { padding-top: 0; }
    .about-offers .wpb_column { margin-bottom: 24px; }
    .about-offers .vc_column-inner > .wpb_wrapper { min-height: 360px; aspect-ratio: 4 / 5; }
    .about-offers .about-offer-panel { top: auto; bottom: 28px; width: 95%; padding: 20px; }
    #page #content .about-offer-panel h3 { font-size: var(--heading-offer-mobile-size); margin-bottom: 18px; }
}