.rexx-talent-menu-01 {
    width: 100%;
    padding-block: var(--rexx-section-space);
}

.rexx-talent-menu-01 .rexx-container {
    --rexx-section-max: var(--rexx-width-container);
}

.rexx-talent-menu-01__layout {
    display: grid;
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.6fr);
    align-items: center;
    gap: var(--rexx-space-2xl);
}

.rexx-talent-menu-01__copy,
.rexx-talent-menu-01__visual,
.rexx-talent-menu-01__stage,
.rexx-talent-menu-01__nav,
.rexx-talent-menu-01__list,
.rexx-talent-menu-01__item {
    min-width: 0;
}

.rexx-talent-menu-01__eyebrow {
    margin-block-end: var(--rexx-space-sm);
}

.rexx-talent-menu-01__headline {
    margin-block-end: var(--rexx-space-md);
}

.rexx-talent-menu-01__intro > :first-child {
    margin-top: 0;
}

.rexx-talent-menu-01__intro > :last-child {
    margin-bottom: 0;
}

.rexx-talent-menu-01__intro--secondary {
    margin-block-start: var(--rexx-space-md);
}

.rexx-talent-menu-01__stage {
    position: relative;
    isolation: isolate;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 1.15fr) minmax(0, 1fr);
    grid-template-areas: "left artwork right";
    align-items: center;
    gap: var(--rexx-space-sm);
}

/* Grüner, dezent animierter Glow */

.rexx-talent-menu-01__stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;

    top: 50%;
    left: 50%;

    width: 42%;
    height: 88%;

    border-radius: 50%;

    background: radial-gradient(
        ellipse at center,
        rgba(78, 158, 89, 0.65) 0%,
        rgba(126, 191, 123, 0.46) 38%,
        rgba(177, 220, 164, 0.22) 68%,
        transparent 100%
    );

    filter: blur(16px);

    transform: translate(-50%, -50%);
    animation: rexx-talent-menu-01-glow 12s ease-in-out infinite alternate;
}

@keyframes rexx-talent-menu-01-glow {
    0% {
        transform: translate(-53%, -52%) scale(0.96);
    }

    50% {
        transform: translate(-47%, -48%) scale(1.06);
    }

    100% {
        transform: translate(-51%, -54%) scale(1);
    }
}

/* Illustration vor dem Glow */

.rexx-talent-menu-01__artwork {
    grid-area: artwork;
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 768 / 922;
    object-fit: contain;
}

/* Navigation vor dem Glow */

.rexx-talent-menu-01__nav {
    position: relative;
    z-index: 2;
}

.rexx-talent-menu-01__nav--left {
    grid-area: left;
}

.rexx-talent-menu-01__nav--right {
    grid-area: right;
}

.rexx-talent-menu-01__list {
    display: grid;
    gap: var(--rexx-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.rexx-talent-menu-01__pill {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: var(--rexx-space-xs);
    padding: 0.6rem 0.9rem;

    border: 1px solid color-mix(
        in srgb,
        var(--rexx-color-accent-mid) 62%,
        var(--rexx-border-color)
    );

    border-radius: var(--rexx-radius-pill);

    background: color-mix(
        in srgb,
        var(--rexx-color-accent-soft) 32%,
        var(--rexx-surface-color)
    );

    box-shadow: var(--rexx-shadow-sm);
    color: var(--rexx-heading-color);
    font-size: var(--rexx-font-size-small);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;

    transition:
        transform var(--rexx-transition-fast) var(--rexx-ease-main),
        border-color var(--rexx-transition-fast) var(--rexx-ease-main),
        box-shadow var(--rexx-transition-fast) var(--rexx-ease-main);
}

.rexx-talent-menu-01__pill:focus-visible {
    outline: 3px solid var(--rexx-color-focus);
    outline-offset: 3px;
}

.rexx-talent-menu-01__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rexx-talent-menu-01__icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    object-fit: contain;
}

.rexx-talent-menu-01__icon--rexx svg {
    display: block;
    width: 100%;
    height: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .rexx-talent-menu-01__pill[href]:hover {
        transform: translateY(-1px);
        border-color: var(--rexx-color-accent);
        box-shadow: var(--rexx-shadow-md);
    }
}

@media (max-width: 1100px) {
    .rexx-talent-menu-01__layout {
        grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 1.4fr);
        gap: var(--rexx-space-lg);
    }

    .rexx-talent-menu-01__stage {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 1fr) minmax(0, 1fr);
        gap: var(--rexx-space-xs);
    }

    .rexx-talent-menu-01__pill {
        padding-inline: 0.7rem;
    }
}

@media (max-width: 820px) {
    .rexx-talent-menu-01__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--rexx-space-xl);
    }
}

@media (max-width: 600px) {
    .rexx-talent-menu-01 {
        padding-block: var(--rexx-space-xl);
    }

    .rexx-talent-menu-01__layout {
        gap: var(--rexx-space-lg);
    }

    .rexx-talent-menu-01__stage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "artwork artwork"
            "left right";
        align-items: start;
        gap: var(--rexx-space-md) var(--rexx-space-sm);
    }

    .rexx-talent-menu-01__stage::before {
        top: 28%;
        width: 75%;
        height: 48%;
    }

    .rexx-talent-menu-01__artwork {
        width: min(100%, 15rem);
        justify-self: center;
    }

    .rexx-talent-menu-01__list {
        gap: var(--rexx-space-xs);
    }

    .rexx-talent-menu-01__pill {
        min-height: 2.75rem;
        padding: 0.55rem 0.65rem;
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rexx-talent-menu-01__stage::before {
        animation: none;
    }
}