/* Künstler-Detailseite: Einführung, Auf einen Blick, Kunstzimmer, Werdegang, Übersicht */

.kw-artist-intro,
.kw-artist-details,
.kw-artist-career {
    --kwl-card-lift: 0;
    --kwl-artist-gold-text: var(--kwl-accent-text, #6E5C2E);
    padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}

.kw-artist-intro__heading,
.kw-artist-details__heading,
.kw-artist-career__heading,
.kw-artist-rooms__heading,
.kw-artist-grid__heading {
    margin: 0 0 var(--kwl-space-md, 1rem);
    font-family: var(--kwl-font-heading);
    color: var(--kwl-primary, #00315d);
    line-height: var(--kwl-lh-heading, 1.2);
}

.kw-artist-intro__kicker {
    margin: 0 0 var(--kwl-space-sm, 0.5rem);
    font-size: var(--kwl-fsize-caption, 0.75rem);
    font-weight: var(--kwl-fw-bold, 700);
    letter-spacing: var(--kwl-ls-ultra, 0.12em);
    text-transform: uppercase;
    color: var(--kwl-artist-gold-text);
}

.kw-artist-intro__lead {
    margin: 0 0 var(--kwl-space-lg, 1.5rem);
    padding-inline-start: var(--kwl-space-md, 1rem);
    border-inline-start: 3px solid var(--kwl-accent, #BD9B5C);
    font-family: var(--kwl-font-heading);
    font-style: italic;
    font-size: var(--kwl-fsize-h4, 1.25rem);
    line-height: var(--kwl-lh-relaxed, 1.4);
    color: var(--kwl-primary, #00315d);
    text-wrap: pretty;
}

.kw-artist-intro__bio {
    max-inline-size: 75ch;
    line-height: var(--kwl-lh-prose, 1.6);
}

.kw-artist-intro__bio > :first-child {
    margin-block-start: 0;
}

.kw-artist-intro__video {
    margin: var(--kwl-space-lg, 1.5rem) 0 0;
}

.kw-artist-intro__video a,
.kw-artist-details__profiles a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 44px;
}

/* Bühne: Porträt neben Einführung und Eckdaten (Bauform der Einführung) */

.kw-artist-intro--stage {
    display: grid;
    gap: var(--kwl-space-lg, 1.5rem);
}

.kw-artist-intro__portrait {
    margin: 0;
    max-inline-size: 280px;
}

.kw-artist-intro__portrait .kw-artist-details__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 20%;
    border-radius: var(--kwl-radius-md, 8px);
}

.kw-artist-intro__glance {
    display: grid;
    gap: var(--kwl-space-md, 1rem) var(--kwl-space-xl, 2rem);
    margin-block-start: var(--kwl-space-lg, 1.5rem);
    padding-block-start: var(--kwl-space-lg, 1.5rem);
    border-block-start: 1px solid var(--kwl-border, #e2e8f0);
}

.kw-artist-intro__glance .kw-artist-details__links > :first-child {
    margin-block-start: 0;
}

@media (min-width: 768px) {
    .kw-artist-intro--stage:has(> .kw-artist-intro__portrait) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: var(--kwl-space-xl, 2rem);
        align-items: start;
    }

    .kw-artist-intro__portrait {
        max-inline-size: none;
    }
}

@media (min-width: 1024px) {
    .kw-artist-intro__glance {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* Auf einen Blick */

.kw-artist-details__portrait {
    margin: 0 0 var(--kwl-space-md, 1rem);
}

.kw-artist-details__portrait .kw-artist-details__img {
    display: block;
    inline-size: min(100%, 180px);
    block-size: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--kwl-radius-md, 8px);
}

.kw-artist-details [data-kwl-facts],
.kw-artist-intro__glance [data-kwl-facts] {
    flex-direction: column;
    gap: 0;
}

.kw-artist-details .kwl-fact,
.kw-artist-intro__glance .kwl-fact {
    flex-basis: auto;
    padding-block: 0.7rem;
    border-block-end: 1px solid var(--kwl-border, #e2e8f0);
}

.kw-artist-details .kwl-fact:last-child,
.kw-artist-intro__glance .kwl-fact:last-child {
    border-block-end: 0;
}

.kw-artist-details__website {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-block-start: var(--kwl-space-md, 1rem);
}

.kw-artist-details__profiles-label {
    margin: var(--kwl-space-lg, 1.5rem) 0 0.25rem;
    font-size: var(--kwl-fsize-caption, 0.75rem);
    font-weight: var(--kwl-fw-semibold, 600);
    letter-spacing: var(--kwl-ls-wide, 0.05em);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--kwl-text, #1a202c) 72%, var(--kwl-bg, #ffffff));
}

.kw-artist-details__profiles {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Kunstzimmer */

.kw-artist-rooms {
    --kwl-artist-overlay: #0b1a2e;
    --kwl-artist-on-overlay: #ffffff;
    container-type: inline-size;
    scroll-margin-top: calc(var(--kwl-nav-height, 0px) + var(--kwl-space-md, 16px));
}

.kw-artist-rooms__head,
.kw-artist-grid__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem var(--kwl-space-md, 1rem);
    margin-block-end: var(--kwl-space-lg, 1.5rem);
    padding-block-end: 0.6rem;
    border-block-end: 2px solid var(--kwl-accent, #BD9B5C);
}

.kw-artist-rooms__heading,
.kw-artist-grid__heading {
    margin: 0;
}

.kw-artist-rooms__note {
    margin: 0;
    font-size: var(--kwl-fsize-small, 0.875rem);
    color: var(--kwl-text-muted, #5a6b85);
}

.kw-artist-rooms__grid,
.kw-artist-grid__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--kwl-space-lg, 1.5rem);
}

@container (min-width: 640px) {
    .kw-artist-rooms__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 960px) {
    .kw-artist-rooms__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Ein einziges Kunstzimmer: breite Querkarte statt einer schmalen Karte am linken Rand */
@container (min-width: 640px) {
    .kw-artist-rooms__grid:has(> :only-child) {
        grid-template-columns: minmax(0, 1fr);
    }

    .kw-artist-rooms__grid > .kw-artist-rooms__card:only-child {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        align-items: center;
    }

    .kw-artist-rooms__card:only-child .kw-artist-rooms__media .kw-artist-rooms__img {
        block-size: 100%;
        min-block-size: 15rem;
    }
}

.kw-artist-rooms__card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kw-artist-rooms__media {
    position: relative;
}

.kw-artist-rooms__media .kw-artist-rooms__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.kw-artist-rooms__chip {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--kwl-radius-sm, 4px);
    background: var(--kwl-accent, #BD9B5C);
    color: var(--kwl-accent-contrast, #00315d);
    font-size: var(--kwl-fsize-caption, 0.75rem);
    font-weight: var(--kwl-fw-bold, 700);
    letter-spacing: var(--kwl-ls-broad, 0.06em);
    text-transform: uppercase;
}

.kw-artist-rooms .kw-artist-rooms__photos {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-end: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-block-size: 44px;
    padding: 0.35rem 0.85rem;
    border: 0;
    border-radius: var(--kwl-radius-full, 9999px);
    background: color-mix(in srgb, var(--kwl-artist-overlay) 80%, transparent);
    color: var(--kwl-artist-on-overlay);
    font: inherit;
    font-size: var(--kwl-fsize-small, 0.875rem);
    font-weight: var(--kwl-fw-semibold, 600);
    cursor: pointer;
}

.kw-artist-rooms .kw-artist-rooms__photos:focus,
.kw-artist-rooms .kw-artist-rooms__photos:active {
    background: color-mix(in srgb, var(--kwl-artist-overlay) 80%, transparent);
    color: var(--kwl-artist-on-overlay);
}

.kw-artist-rooms .kw-artist-rooms__photos svg {
    inline-size: 16px;
    block-size: 16px;
}

.kw-artist-rooms .kw-artist-rooms__photos:focus-visible {
    outline: 3px solid var(--kwl-artist-on-overlay);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px var(--kwl-artist-overlay);
}

@media (hover: hover) {
    .kw-artist-rooms .kw-artist-rooms__photos:hover {
        background: color-mix(in srgb, var(--kwl-artist-overlay) 95%, transparent);
    }
}

.kw-artist-rooms__body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
    padding: var(--kwl-space-md, 1rem) 1.15rem 1.25rem;
}

.kw-artist-rooms__title,
.kw-artist-grid__name {
    margin: 0;
    font-family: var(--kwl-font-heading);
    font-size: var(--kwl-fsize-h4, 1.25rem);
    color: var(--kwl-primary, #00315d);
}

.kw-artist-rooms__meta,
.kw-artist-grid__style {
    margin: 0;
    font-size: var(--kwl-fsize-small, 0.875rem);
    color: var(--kwl-text-muted, #5a6b85);
}

.kw-artist-rooms__desc {
    margin: 0;
}

.kw-artist-rooms__link {
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    font-weight: var(--kwl-fw-bold, 700);
}

/* Werdegang */

.kw-artist-career--split {
    display: grid;
    gap: var(--kwl-space-xl, 2rem);
}

.kw-artist-career--split > .kw-artist-career__part--records {
    padding-block-start: var(--kwl-space-xl, 2rem);
    border-block-start: 1px solid var(--kwl-border, #e2e8f0);
}

@media (min-width: 900px) {
    .kw-artist-career--split {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .kw-artist-career--split > .kw-artist-career__part--records {
        padding-block-start: 0;
        padding-inline-start: var(--kwl-space-xl, 2rem);
        border-block-start: 0;
        border-inline-start: 1px solid var(--kwl-border, #e2e8f0);
    }
}

.kw-artist-career__vita {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1.25rem;
    border-inline-start: 2px solid color-mix(in srgb, var(--kwl-accent, #BD9B5C) 55%, transparent);
}

.kw-artist-career__station {
    position: relative;
    padding: 0 0 1.25rem 0.75rem;
}

.kw-artist-career__station::before {
    content: '';
    position: absolute;
    inset-block-start: 0.4rem;
    inset-inline-start: calc(-1.25rem - 7px);
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    border: 2px solid var(--kwl-accent, #BD9B5C);
    background: var(--kwl-bg, #ffffff);
}

.kw-artist-career__period,
.kw-artist-career__year {
    font-family: var(--kwl-font-heading);
    color: var(--kwl-artist-gold-text);
    font-variant-numeric: tabular-nums;
}

.kw-artist-career__title {
    margin: 0.1rem 0 0.25rem;
    font-family: var(--kwl-font-body);
    font-size: var(--kwl-fsize-body, 1rem);
    font-weight: var(--kwl-fw-bold, 700);
    color: var(--kwl-text, #1a202c);
}

.kw-artist-career__text {
    color: var(--kwl-text-muted, #5a6b85);
}

.kw-artist-career__text p {
    margin: 0 0 0.5rem;
}

.kw-artist-career__group {
    margin: var(--kwl-space-lg, 1.5rem) 0 0.5rem;
    font-family: var(--kwl-font-heading);
    font-size: var(--kwl-fsize-h5, 1.125rem);
    color: var(--kwl-primary, #00315d);
}

.kw-artist-career__heading + .kw-artist-career__group {
    margin-block-start: 0;
}

.kw-artist-career__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kw-artist-career__item {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 0.55rem;
    border-block-start: 1px solid var(--kwl-border, #e2e8f0);
}

.kw-artist-career__source {
    display: block;
    font-size: var(--kwl-fsize-small, 0.875rem);
    color: var(--kwl-text-muted, #5a6b85);
}

.kw-artist-career__more {
    display: flex;
    flex-direction: column;
}

.kw-artist-career__more > summary {
    order: 1;
    align-self: flex-start;
    margin-block-start: var(--kwl-space-sm, 0.5rem);
    list-style: none;
    cursor: pointer;
}

.kw-artist-career__more > summary::-webkit-details-marker {
    display: none;
}

.kw-artist-career__more-open,
.kw-artist-career__more[open] .kw-artist-career__more-closed {
    display: none;
}

.kw-artist-career__more[open] .kw-artist-career__more-open {
    display: inline;
}

.kw-artist-career__more::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 400ms var(--kwl-ease-default), content-visibility 400ms allow-discrete;
}

.kw-artist-career__more[open]::details-content {
    block-size: auto;
    content-visibility: visible;
}

@supports (interpolate-size: allow-keywords) {
    .kw-artist-career__more {
        interpolate-size: allow-keywords;
    }
}

/* Übersicht */

.kw-artist-grid {
    container-type: inline-size;
}

@container (min-width: 520px) {
    .kw-artist-grid__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 900px) {
    .kw-artist-grid__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.kw-artist-grid__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--kwl-space-md, 1rem);
    padding: var(--kwl-space-md, 1rem);
}

.kw-artist-grid__card .kw-artist-grid__img {
    flex: none;
    inline-size: 64px;
    block-size: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
}

.kw-artist-grid__initials {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 22%, var(--kwl-bg, #ffffff));
    color: var(--kwl-text, #1a202c);
    font-family: var(--kwl-font-heading);
    font-size: var(--kwl-fsize-h5, 1.125rem);
    letter-spacing: var(--kwl-ls-wide, 0.05em);
}

.kw-artist-grid__name {
    font-size: var(--kwl-fsize-h5, 1.125rem);
}

.kw-artist-grid__name a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.kw-artist-grid__card:has(a:focus-visible) {
    outline: 3px solid var(--kwl-focus, #7B6835);
    outline-offset: 2px;
}

/* (0,4,1) — der Ring der Karte genügt; [data-kwl-link][data-kwl-link] setzt sonst einen zweiten. */
.kw-artist-grid__card .kw-artist-grid__name a[data-kwl-link]:focus-visible {
    outline: none;
}

@media (prefers-color-scheme: dark) {
    .kw-artist-intro__heading,
    .kw-artist-details__heading,
    .kw-artist-career__heading,
    .kw-artist-rooms__heading,
    .kw-artist-grid__heading,
    .kw-artist-intro__lead,
    .kw-artist-rooms__title,
    .kw-artist-grid__name,
    .kw-artist-career__group {
        color: var(--kwl-text, #f7fafc);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kw-artist-rooms__card,
    .kw-artist-grid__card,
    .kw-artist-career__more::details-content {
        transition: none;
    }
}