/* ==========================================================
   Konzertliste – Article.TemplateName = "events"
   ========================================================== */

.template-events {
    margin-top: clamp(26px, 3.5vw, 40px);
    text-align: center;
}

.template-title + .template-events {
    margin-top: clamp(26px, 3.5vw, 40px);
}

.template-events > .article-title,
.template-events > .article-text {
    display: none;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: clamp(34px, 4vw, 48px);
}

.event-item {
    min-width: 0;
}

.event-date {
    display: block;
    margin: 0;
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule-strong);
    font-size: clamp(0.72rem, 0.76vw, 0.8rem);
    line-height: 1.15;
}

.event-name {
    margin: 0;
    padding: 7px 8px 6px;
    border-bottom: 1px solid var(--rule-strong);
    font-size: clamp(1.6rem, 2.15vw, 1.9rem);
    font-weight: 400;
    line-height: 1.02;
}

.event-place {
    margin: 0;
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-transform: uppercase;
}

.event-short-description {
    margin: 0;
    padding: 7px 8px 6px;
    border-bottom: 1px solid var(--rule);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    font-style: italic;
    line-height: 1.1;
}

.event-short-description p {
    margin: 0;
}

.event-musicians {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px 8px;
    margin: 0;
    padding: 7px 8px 6px;
    border-bottom: 1px solid var(--rule-strong);
    font-size: clamp(0.9rem, 1vw, 1.04rem);
    line-height: 1.15;
}

.event-musician {
    display: inline;
    white-space: normal;
}

.event-musician strong {
    font-size: 1em;
    font-weight: 400;
}

.event-musician-details {
    display: inline;
    margin-left: 0.12em;
    font-size: 0.58em;
    line-height: 0;
    vertical-align: super;
}

.event-musician-details > span {
    margin-left: 0;
}

/* Details und Tickets liegen optisch in einer Zeile. Das details-Element
   behält trotzdem die volle Breite für den aufgeklappten Inhalt. */
.event-actions {
    position: relative;
    display: block;
    padding-top: 8px;
    text-align: left;
}

.event-details {
    width: 100%;
    min-width: 0;
}

.event-details summary,
.event-tickets {
    color: var(--ink);
    font-family: inherit;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.event-details summary {
    width: max-content;
    list-style: none;
}

.event-details summary::-webkit-details-marker {
    display: none;
}

.event-details summary span,
.event-tickets span {
    letter-spacing: 0;
}

.event-tickets {
    position: absolute;
    top: 8px;
    right: 0;
    white-space: nowrap;
}

/* ==========================================================
   Aufgeklappte Konzertdetails
   ========================================================== */

.event-details-content {
    width: 100%;
    margin-top: 18px;
    padding: 20px 0 0;
    border-top: 1px solid var(--rule);
    font-size: clamp(0.76rem, 0.82vw, 0.84rem);
    line-height: 1.18;
    text-align: left;
}

.event-details-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1.05fr);
    gap: clamp(20px, 2.5vw, 34px);
    align-items: start;
    width: 100%;
}

.event-details-copy {
    min-width: 0;
}

.event-program {
    margin-bottom: clamp(30px, 4vw, 44px);
    text-align: center;
}

.event-program h4 {
    margin: 0;
    padding: 5px 8px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.66rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    line-height: 1.1;
    text-transform: uppercase;
}

.event-program-text {
    font-size: clamp(0.76rem, 0.8vw, 0.82rem);
    line-height: 1.15;
}

.event-program-text p {
    margin: 0;
    padding: 6px 8px;
    border-bottom: 1px solid var(--rule);
}

.event-program-text p:first-child {
    font-weight: 700;
}

.event-detail-short-description {
    margin: calc(clamp(30px, 4vw, 44px) * -0.55) 0
        clamp(28px, 3.5vw, 42px);
    font-size: clamp(0.76rem, 0.82vw, 0.84rem);
    line-height: 1.16;
    text-align: left;
}

.event-detail-short-description p {
    margin: 0 0 0.7em;
}

.event-biography {
    margin: 0 0 clamp(28px, 3.5vw, 42px);
    text-align: left;
}

.event-biography h4 {
    margin: 0 0 10px;
    font-size: clamp(1.15rem, 1.4vw, 1.32rem);
    font-weight: 400;
    line-height: 1.05;
}

.event-biography-text {
    font-size: clamp(0.76rem, 0.82vw, 0.84rem);
    line-height: 1.16;
}

.event-biography-text p {
    margin: 0 0 0.7em;
}

.event-musician-images {
    display: grid;
    gap: clamp(20px, 3vw, 34px);
    min-width: 0;
}

.event-musician-image {
    margin: 0;
}

.event-program-image {
    margin: 0;
}

.event-program-image img,
.event-musician-image img {
    display: block;
    width: 100%;
    height: auto;
}

.event-musician-image img {
    object-fit: contain;
}

.event-musician-image figcaption {
    margin-top: 4px;
    font-size: 0.58rem;
    line-height: 1.2;
    text-align: right;
}

@media (max-width: 768px) {
    .template-events {
        margin-top: 28px;
    }

    .event-list {
        gap: 38px;
    }

    .event-name {
        padding-top: 8px;
        font-size: clamp(1.45rem, 7vw, 1.8rem);
    }

    .event-musicians {
        display: block;
        padding: 8px;
        line-height: 1.35;
    }

    .event-musician {
        display: inline;
        margin: 0;
    }

    .event-details-layout {
        grid-template-columns: 1fr;
    }

    .event-program {
        margin-bottom: 32px;
    }

    .event-biography {
        margin-bottom: 30px;
    }
}

@media (max-width: 420px) {
    .event-tickets {
        position: static;
        display: block;
        width: max-content;
        margin-top: 12px;
    }
}