/* Team-Karten: Desktop-Maße in vw nach Vorlage (1920px breit) */
:where(.team-cards) {
    --team-cards-columns: 3;
    --team-cards-min-height: 38.2vw;
    --team-cards-image-size: 19.4vw;
    --team-cards-name-size: clamp(20px, 1.875vw, 36px);
}

.team-cards {
    display: grid;
    grid-template-columns: repeat(var(--team-cards-columns), minmax(0, 1fr));
    color: var(--color-primary);
}

.team-cards__item {
    position: relative;
    box-sizing: border-box;
    min-height: var(--team-cards-min-height);
}

.team-cards__item--bg-white     { background: var(--color-white); }
.team-cards__item--bg-secondary { background: var(--color-secondary); }
.team-cards__item--bg-tertiary  { background: var(--color-tertiary); }

/* --- Person -------------------------------------------------------------- */
.team-cards__item--person {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.2vw 2vw 1.8vw;
    text-align: center;
}

.team-cards__image {
    display: block;
    width: var(--team-cards-image-size);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.team-cards__name {
    margin: 1.6vw 0 0.3em;
    color: inherit;
    font-size: var(--team-cards-name-size);
    font-weight: var(--font-weight-txt-bold);
    line-height: 1.3;
    letter-spacing: 0.022em;
    text-transform: none;
}

.team-cards__roles {
    margin: 0 0 max(2.45vw, 24px);
    color: inherit;
    line-height: 1.42;
}

/* Doppelte Klasse: globales .button-Margin lädt später. auto: Buttons
   einer Reihe stehen auf einer Linie, auch bei ungleich vielen Zeilen. */
.team-cards .team-cards__button {
    margin: auto 0 0;
}

/* --- Claim ---------------------------------------------------------------
   Grafik (Rundbild + Deko-Kreis) ist fertig komponiert und im Maßstab der
   1920er-Vorlage gezeichnet, Kachel dort 640px breit. Größe und Lage
   daher relativ zur Kachelbreite (--_tile), damit Tablet/Mobil
   proportional mitskalieren. Ränder der Grafik ragen über die Kachel. */
.team-cards__item--claim {
    --_tile: calc(100vw / var(--team-cards-columns));

    overflow: hidden;
}

.team-cards__claim {
    position: relative;
    z-index: 2;
    margin: 0;
    /* rechts knapp: längste Vorlagenzeile passt mit Versalien-Laufweite 70 */
    padding: 3.1vw 1.5vw 0 5.6vw;
}

.team-cards__claim-image {
    position: absolute;
    left: calc(var(--_tile) * -0.136);
    top: calc(var(--_tile) * 0.255);
    width: calc(var(--_tile) * var(--_px) / 640);
    max-width: none;
    height: auto;
}

/* Tablet: zwei Spalten */
@media (min-width: 600px) and (max-width: 900px) {
    .team-cards {
        --team-cards-columns: 2;
        --team-cards-min-height: 0;
        --team-cards-image-size: 30vw;
    }

    .team-cards__item--person {
        padding: 5vw 4vw 6vw;
    }

    .team-cards__name {
        margin-top: 3vw;
    }

    /* Seitenverhältnis der Kachel wie in der Vorlage (640 × 733) */
    .team-cards__item--claim {
        min-height: calc(var(--_tile) * 1.145);
    }

    .team-cards__claim {
        padding: 6vw 5vw 0 8vw;
    }
}

/* Mobil: eine Spalte */
@media (max-width: 599px) {
    .team-cards {
        --team-cards-columns: 1;
        --team-cards-min-height: 0;
        --team-cards-image-size: 55vw;
    }

    .team-cards__item--person {
        padding: 10vw 8vw 12vw;
    }

    .team-cards__name {
        margin-top: 5vw;
    }

    .team-cards__item--claim {
        min-height: calc(var(--_tile) * 1.145);
    }

    .team-cards__claim {
        padding: 10vw 8vw 0;
    }
}