:root {
    --white: #ffffff;
    --muted: #6b7280;
    --gap: clamp(16px, 3vw, 32px);
    --radius: 16px;
    --maxw: 1664px;
    --modal-col-max: 520px;
    --modal-gap: var(--gap);
    --modal-col-gap: var(--modal-gap);
    --modal-row-gap: var(--modal-gap);
    --modal-single-max: 560px;
}
@supports (scrollbar-gutter: stable) {
    html {
        scrollbar-gutter: stable;
    }
}

* {
    box-sizing: border-box
}

.container {
    width: min(94vw, var(--maxw));
    margin-inline: auto
}

.team-hero {
    min-height: 100svh;
    display: grid;
    place-items: center;
    position: relative;
    text-align: left
}

.hero-inner {
    max-width: clamp(320px, 90vw, 720px);
}

.team-panel {
    background: var(--white);
    will-change: clip-path;
    clip-path: inset(0 0 100% 0);
    overflow: hidden;
}

.team-section {
    position: relative;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    padding: calc(var(--gap) * 2) 0;
    margin: 7rem 0;
}

.team-card {
    position: relative;
}

.team-card .portrait {
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid #e5e7eb;
    display: block;
    padding: 0;
    background: var(--theim-grey);
    cursor: pointer;
    position: relative;
}

.team-card .portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hover-veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(to top, rgba(10,10,10,0.9), rgba(10,10,10,0.0));
}

.hover-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    text-align: left;
}

.hover-info .line {
    color: white;
    transform: translateY(20px);
    opacity: 0;
    display: block;
}

.hover-info .line.as-h2 {
    font-size: clamp(1.5rem, 2.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: white;
}

.hover-info .line.as-p {
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    font-weight: 400;
    line-height: 1.3;
    margin-top: 1rem;
    color: white;
}

.team-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 1000;
}

.team-modal[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-box {
    margin-inline: auto;
}

.backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.9);
    opacity: 0
}

.modal-content {
    position: static;
    display: grid;
    place-items: center;
    width: 100%;
    pointer-events: none;
    z-index: 1;
}

.modal-box {
    pointer-events: auto;
}

.backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,10,10,0.9);
    opacity: 0;
    z-index: 0;
}

.modal-box {
    width: min(92vw, 880px);
    pointer-events: auto;
    margin: 0;
}

.contact-close img {
    width: 100%;
    height: auto;
    display: block;
}

.close-btn-reset {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    line-height: 0;
    color: inherit;
}

.close-btn-reset:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 4px;
}

.modal-two-col {
    display: grid;
    /* Spalten folgen der tatsächlichen Inhaltsbreite (Bild/Text) */
    grid-template-columns: repeat(2, max-content);
    grid-template-areas: "text image";
    column-gap: var(--modal-col-gap);
    row-gap: var(--modal-row-gap);
    align-items: center;
    justify-content: center; /* zentriert beide Spalten als Gruppe */
    justify-items: center;
}

.modal-text {
    grid-area: text;
}

.modal-image {
    grid-area: image;
}

.modal-text {
    max-width: min(var(--modal-col-w, 9999px), var(--modal-col-max, 520px));
    width: 100%;
}

.modal-text h2 {
    color: white;
    font-size: clamp(28px, 4.8vw, 48px);
    margin: 0 0 12px;
    letter-spacing: -0.02em
}

.modal-text p {
    color: rgba(255,255,255,0.85);
    margin: 0;
    font-size: clamp(16px, 2.2vw, 18px)
}

.modal-image figure {
    margin: 0;
    width: min( var(--modal-col-w, 9999px), var(--modal-col-max, 520px), 75vw );
    max-width: 100%;
}

.modal-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,0.15);
}

/* ========== Breakpoint 1: riesen Desktops (≤1700px) ========== */
@media (max-width: 1700px) {
    :root {
        --maxw: 1240px;
    }

    .container {
        width: min(94vw, var(--maxw));
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========== Breakpoint 1: kleinere Desktops / große Tablets (≤1200px) ========== */
@media (max-width: 1200px) {
    .team-grid {
        padding: calc(var(--gap) * 2) clamp(24px, 5vw, 64px);
        margin: 2rem 0;
    }
    .team-modal {
        --modal-col-w: 9999px;
        --modal-col-gap: 24px;
        --modal-col-max: 380px;
    }
    .team-modal .modal-box {
        width: min(90vw, calc(2 * var(--modal-col-max) + var(--modal-col-gap)));
    }
}


/* ========== Breakpoint 2: Tablets quer (≤992px) ========== */
@media (max-width: 992px) {
    :root {
        --gap: clamp(10px, 2vw, 20px);
    }
    .team-grid {
        padding: calc(var(--gap) * 2) clamp(34px, 6vw, 84px);
        margin: 3rem 0;
    }
    .hover-info {
        padding: 2rem 1.2rem;
    }
    .team-modal {
        --modal-col-w: 9999px;
        --modal-col-max: 310px;
        --modal-col-gap: 24px;
    }

    .team-modal .modal-box {
        width: min(85vw, calc(2 * var(--modal-col-max) + var(--modal-col-gap)));
    }
}


/* ========== Breakpoint 3: Tablets hoch / große Smartphones (≤768px) ========== */
@media (max-width: 768px) {
    :root {
        --gap: clamp(14px, 2.8vw, 30px);
    }
    .team-hero {
        min-height: 90svh;
    }
    .team-panel {
        clip-path: inset(0% 0% 0% 0%);
    }
    .hero-inner {
        max-width: 620px;
        padding: 0 2rem;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 2rem 0;
    }
    .hover-veil {
        opacity: 1;
    }
    .hover-info .line {
        transform: translateY(0);
        opacity: 1;
    }
    .team-modal {
        --modal-col-max: var(--modal-single-max);
        --modal-single-max: 440px;
        --modal-col-w: 9999px;
        --modal-col-gap: 0px;
        --modal-row-gap: 24px;
    }

    .team-modal .modal-box {
        width: min(96vw, var(--modal-single-max));
    }

    .modal-two-col {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "text";
    }
    .modal-image {
        justify-self: stretch;
        width: 100%;
    }
    .modal-image figure {
        max-width: 60%;
        margin-inline: auto;
    }
}


/* ========== Breakpoint 4: Smartphones (≤576px) ========== */
@media (max-width: 576px) {
    .hero-inner {
        max-width: 500px;
    }
    .team-grid {
        padding: clamp(15px, 2vw, 25px);
        margin: 1.2rem 0;
    }
    .hover-info {
        padding: 1rem 0.7rem;
    }
    .team-modal {
        --modal-single-max: 360px;
    }
}

/* ========== Breakpoint 6: sehr schmale Smartphones ========== */
@media (max-width: 420px) {
    .hero-inner {
        max-width: 320px;
        padding: 0;
    }
    .team-grid {
        grid-template-columns: repeat(1, 1fr);
        padding: clamp(60px, 8vw, 100px);
        margin: 1rem 0;
    }
    .hover-info {
        padding: 1.8rem 1.5rem;
    }
    .team-modal {
        --modal-single-max: 320px;
    }
    .modal-image figure {
        max-width: 70%;
    }
}