/**
 * Über uns — one house, one surface language.
 * Tokens only. .contain, square corners. No arrow motion.
 */

.about-page {
    --about-rule: color-mix(in srgb, var(--wp--preset--color--text-main) 8%, transparent);
}

.about,
.about-person,
.about-disc,
.about-steps__grid li {
    min-width: 0;
    box-sizing: border-box;
}

.about .about-kicker {
    display: block;
    margin: 0 0 var(--wp--preset--spacing--12);
    padding-block: 0.2em 0;
    overflow: visible;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
}

.about-head {
    margin-bottom: clamp(var(--wp--preset--spacing--32), 5vw, var(--wp--preset--spacing--64));
    max-width: 40rem;
}

.about-head h2,
.about-hero__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--2xl);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--wp--preset--color--text-main);
}

.about-head > p:not(.about-kicker) {
    margin: var(--wp--preset--spacing--16) 0 0;
    font-size: var(--wp--preset--font-size--lg);
    line-height: 1.5;
    color: var(--wp--preset--color--text-muted);
}

.about-text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    color: var(--wp--preset--color--text-main);
    text-decoration: none;
}

.about-text-link .arrow-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.about .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--8);
    min-height: 48px;
    padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--24);
    border: 1px solid transparent;
    border-radius: var(--t1-radius-button, 40px);
    box-sizing: border-box;
    max-width: 100%;
    text-decoration: none;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 500;
    line-height: 1;
}

.about .btn-primaer {
    background: var(--wp--preset--color--text-main);
    color: var(--wp--preset--color--bg);
}

.about .btn-sekundaer {
    background: transparent;
    color: var(--wp--preset--color--text-main);
    border-color: color-mix(in srgb, var(--wp--preset--color--text-main) 18%, transparent);
}

.about .btn-punkt {
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: var(--wp--preset--color--accent);
    flex-shrink: 0;
}

.about .btn:focus-visible,
.about-disc a:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

/* ── Hero ── */

.about-hero {
    padding-top: calc(var(--t1-header-height, 64px) + var(--wp--preset--spacing--48));
    padding-bottom: clamp(var(--wp--preset--spacing--48), 7vw, var(--wp--preset--spacing--96));
}

.about-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.about-hero__grid.has-image {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    gap: clamp(var(--wp--preset--spacing--40), 7vw, var(--wp--preset--spacing--96));
}

.about-hero__copy,
.about-hero__media {
    min-width: 0;
    box-sizing: border-box;
}

.about-hero__media {
    margin: 0;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--wp--preset--color--surface);
}

.about-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.about-hero__title {
    font-size: var(--wp--preset--font-size--4xl);
    letter-spacing: -0.04em;
    line-height: 0.95;
    text-wrap: balance;
    max-width: 16ch;
}

.about-hero__lead {
    margin: var(--wp--preset--spacing--24) 0 var(--wp--preset--spacing--32);
    max-width: 36rem;
    font-size: var(--wp--preset--font-size--lg);
    line-height: 1.45;
    color: var(--wp--preset--color--text-muted);
}

.about-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
}

/* ── Shared section rhythm ── */

.about-statement,
.about-disciplines,
.about-steps,
.about-trust,
.about-team,
.about-desks {
    padding-block: clamp(var(--wp--preset--spacing--64), 10vw, var(--wp--preset--spacing--128));
    border-top: 1px solid var(--about-rule);
}

.about-disciplines,
.about-trust,
.about-team,
.about-desks,
.about-desk {
    scroll-margin-top: calc(var(--t1-header-height, 64px) + var(--wp--preset--spacing--16));
}

.about-desks__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--wp--preset--spacing--24);
}

.about-desk h3 {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 500;
}

.about-desk h3 a {
    color: inherit;
    text-decoration: none;
}

.about-desk h3 a:hover,
.about-desk h3 a:focus-visible {
    color: var(--wp--preset--color--accent);
}

.about-desk p {
    margin: var(--wp--preset--spacing--12) 0 0;
    color: var(--wp--preset--color--text-muted);
}

.about-desk__topics {
    font-size: var(--wp--preset--font-size--sm);
}

/* ── Statement ── */

.about-statement {
    padding-block: clamp(var(--wp--preset--spacing--64), 8vw, var(--wp--preset--spacing--96));
    background: var(--wp--preset--color--surface);
}

.about-statement__text {
    margin: 0;
    max-width: 44rem;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--2xl);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: var(--wp--preset--color--text-main);
}

/* ── Disciplines ── */

.about-disc__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(var(--wp--preset--spacing--16), 1.8vw, var(--wp--preset--spacing--24));
}

.about-disc {
    --about-disc-tint: var(--wp--preset--color--accent-100);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--wp--preset--color--card);
    border: 1px solid var(--about-rule);
    border-radius: var(--wp--custom--radius--card);
    transition:
        transform 0.5s var(--wp--custom--spring),
        box-shadow 0.5s var(--wp--custom--spring),
        border-color 0.3s ease;
}

.about-disc--web {
    --about-disc-tint: var(--wp--preset--color--blue-100);
}

.about-disc--marketing {
    --about-disc-tint: var(--wp--preset--color--yellow-100);
}

.about-disc:hover,
.about-disc:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--wp--preset--color--text-main) 12%, transparent);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--wp--preset--color--text-main) 4%, transparent);
}

.about-disc a {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    color: inherit;
    text-decoration: none;
}

.about-disc__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(148px, 18vw, 196px);
    padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
    box-sizing: border-box;
}

.about-disc__visual::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--about-disc-tint);
    pointer-events: none;
    transition: height 0.5s var(--wp--custom--spring);
}

.about-disc:hover .about-disc__visual::after,
.about-disc:focus-within .about-disc__visual::after {
    height: 6px;
}

.about-disc__index {
    position: absolute;
    top: var(--wp--preset--spacing--16);
    left: var(--wp--preset--spacing--16);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--base);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--text-main);
}

.about-disc__icon {
    display: block;
    width: auto;
    height: clamp(72px, 8vw, 96px);
    max-width: 68%;
    object-fit: contain;
    transform-origin: center;
    transition: transform 0.5s var(--wp--custom--spring);
}

.about-disc:hover .about-disc__icon,
.about-disc:focus-within .about-disc__icon {
    transform: rotate(6deg);
}

.about-disc__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: clamp(var(--wp--preset--spacing--20), 2.2vw, var(--wp--preset--spacing--32));
    box-sizing: border-box;
}

.about-disc h3 {
    margin: 0 0 var(--wp--preset--spacing--8);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--2xl);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.about-disc__text {
    display: block;
    margin: 0 0 var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.6;
    color: var(--wp--preset--color--text-muted);
}

.about-disc__text strong {
    display: block;
    margin-bottom: var(--wp--preset--spacing--8);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--text-main);
}

.about-disc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wp--preset--spacing--12);
    margin-top: auto;
    padding-top: var(--wp--preset--spacing--16);
    border-top: 1px solid var(--about-rule);
    min-width: 0;
}

.about-disc__keys {
    min-width: 0;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

.about-disc .about-text-link {
    flex-shrink: 0;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
}

/* ── Steps ── */

.about-steps__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--24);
}

.about-steps__grid li {
    padding-top: var(--wp--preset--spacing--16);
    border-top: 2px solid var(--wp--preset--color--text-main);
}

.about-steps__grid span {
    display: block;
    margin-bottom: var(--wp--preset--spacing--12);
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--wp--preset--color--accent);
}

.about-steps__grid h3 {
    margin: 0 0 var(--wp--preset--spacing--12);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.about-steps__grid p,
.about-person p {
    margin: 0;
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.5;
    color: var(--wp--preset--color--text-muted);
}

/* ── Team ── */

.about-team__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--32) var(--wp--preset--spacing--16);
}

.about-person {
    display: flex;
    flex-direction: column;
}

.about-person__media {
    aspect-ratio: 3 / 2;
    background: var(--wp--preset--color--surface);
    overflow: hidden;
}

.about-person__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-person__body {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--8);
    padding-top: var(--wp--preset--spacing--16);
    min-width: 0;
}

.about-person h3 {
    margin: 0;
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--lg);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.about-person__role {
    margin: 0;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wp--preset--color--text-muted);
}

.about-person__body > p:last-child {
    font-size: var(--wp--preset--font-size--sm);
}

/* ── Trust / certifications ── */

.about-trust .about-head {
    max-width: none;
}

.about-trust__grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--16) var(--wp--preset--spacing--12);
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.about-trust__grid > li,
.about-trust__item {
    min-width: 0;
    box-sizing: border-box;
}

.about-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--wp--preset--spacing--8);
    margin: 0;
    text-align: center;
}

.about-trust__item img {
    display: block;
    width: 100%;
    max-width: 5.25rem;
    height: auto;
    mix-blend-mode: darken;
    transform-origin: center;
    transition: transform 0.5s var(--wp--custom--spring, cubic-bezier(0.16, 1, 0.3, 1));
}

@media (forced-colors: active) {
    .about-trust__item img {
        mix-blend-mode: normal;
    }
}

.about-trust__item figcaption {
    max-width: 100%;
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--text-muted);
    transition: color 0.3s ease;
}

@media (hover: hover) {
    .about-trust__grid > li:hover .about-trust__item img,
    .about-trust__item:hover img {
        transform: scale(1.055);
    }

    .about-trust__grid > li:hover .about-trust__item figcaption,
    .about-trust__item:hover figcaption {
        color: var(--wp--preset--color--text-main);
    }
}

/* ── Shared closer: about-page accent treatment ── */

.about-page .site-cta {
    --site-cta-tone: var(--wp--preset--color--accent);
}

.about-page .site-cta__eyebrow {
    font-size: var(--wp--preset--font-size--sm);
    letter-spacing: 0.16em;
}

.about-page .site-cta .btn-primaer {
    background: var(--wp--preset--color--text-main);
    border-color: var(--wp--preset--color--text-main);
}

/* ── Breakpoints ── */

@media (max-width: 1100px) {
    .about-team__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-trust__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .about-disc__grid,
    .about-steps__grid {
        grid-template-columns: 1fr;
    }

    .about-hero__grid.has-image {
        grid-template-columns: 1fr;
        gap: var(--wp--preset--spacing--48);
    }

    .about-hero__media {
        aspect-ratio: 4 / 3;
    }

    .about-disc__grid {
        gap: var(--wp--preset--spacing--12);
    }

    .about-hero__title {
        font-size: var(--wp--preset--font-size--3xl);
        max-width: none;
    }

    .about-statement__text {
        font-size: var(--wp--preset--font-size--xl);
    }
}

@media (max-width: 640px) {
    .about-team__grid {
        grid-template-columns: 1fr;
    }

    .about-trust__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-disc,
    .about-disc__visual::after,
    .about-disc__icon,
    .about-trust__item img,
    .about-trust__item figcaption {
        transition: none;
    }

    .about-disc:hover,
    .about-disc:focus-within,
    .about-disc:hover .about-disc__icon,
    .about-disc:focus-within .about-disc__icon,
    .about-trust__grid > li:hover .about-trust__item img,
    .about-trust__item:hover img {
        transform: none;
    }
}