/* Discographie – Detailseite mit Tontraeger-Steckbrief (Template ShowAlbum)
   Farben aus sitepackage_hummel/Resources/Public/Css/variables.css, Links nach basics.css. */
.dd {
    --dd-dark: var(--hummel-blue-dark, #0b5185);
    --dd-dark-rgb: var(--hummel-blue-dark-rgb, 11, 81, 133);
    --dd-light-rgb: var(--hummel-blue-light-rgb, 179, 207, 229);
    --dd-gray: var(--hummel-gray-light, #f8f9fa);
    --dd-line: #ccc;
    --dd-underline: #adb5bd;
    --dd-muted: #6c757d;
}

.dd a {
    border-bottom: none;
}

/* Kopf */
.dd-head {
    display: grid;
    gap: .25rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--dd-line);
}

.dd .dd-title {
    margin: 0;
    padding: 0;
    text-wrap: balance;
}

.dd-opus {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: rgb(var(--dd-dark-rgb), .7);
}

.dd-worklink {
    justify-self: start;
}

/* Cover und Bestellung */
.dd-cover {
    display: block;
    border: 1px solid var(--dd-line);
    margin-bottom: 1rem;
}

.dd-order {
    background: var(--dd-gray);
    border: 1px solid var(--dd-line);
    padding: 1rem;
    margin-bottom: 1.5rem;
    font-size: .95rem;
}

.dd .dd-order-title {
    font-size: 1rem;
    margin: 0 0 .5rem;
    padding: 0;
}

.dd-order-number,
.dd-price {
    margin: 0 0 .5rem;
    font-variant-numeric: tabular-nums;
}

.dd-price {
    font-weight: 600;
    margin: .5rem 0 0;
}

.dd-order-info > :last-child {
    margin-bottom: 0;
}

/* Steckbrief */
.dd-facts {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: .4rem 1rem;
    margin: 0 0 1.5rem;
}

.dd-facts dt {
    font-weight: 400;
    color: var(--dd-muted);
}

.dd-facts dd {
    margin: 0;
}

.dd-facts-album,
.dd-album-name {
    font-weight: 600;
}

.dd-performers {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Abschnittstitel */
.dd .dd-section-title {
    font-size: 1.1rem;
    margin: 0 0 .5rem;
    padding: 0 0 .4rem;
    border-bottom: 1px solid var(--dd-dark);
}

/* Titelliste */
.dd-tracks {
    list-style: none;
    counter-reset: dd-track;
    margin: 0 0 1.5rem;
    padding: 0;
}

.dd-tracks li {
    counter-increment: dd-track;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .5rem;
    padding: .4rem .5rem;
    border-bottom: 1px solid #e5e5e5;
    color: var(--dd-muted);
}

.dd-tracks li::before {
    content: counter(dd-track);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dd-tracks li.is-hummel {
    color: inherit;
    background: rgba(var(--dd-light-rgb), .4);
}

.dd-tracks li.is-current {
    box-shadow: inset 3px 0 0 var(--dd-dark);
}

.dd-tracks b {
    font-weight: 600;
}

.dd .dd-track-rec {
    margin-left: .5rem;
    font-size: .8rem;
    color: var(--dd-muted);
    white-space: nowrap;
}

.dd-track-tag {
    margin-left: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--dd-dark);
    white-space: nowrap;
}

/* Urspruenglicher Beschreibungstext, eingeklappt */
.dd-more {
    margin: 0 0 1.5rem;
    border: 1px solid var(--dd-line);
}

.dd-more summary {
    padding: .5rem .75rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--dd-dark);
    background: var(--dd-gray);
}

.dd-more[open] summary {
    border-bottom: 1px solid var(--dd-line);
}

.dd-more .dd-description {
    padding: .75rem;
}

.dd-more .dd-description > :last-child {
    margin-bottom: 0;
}

/* Querverweise */
.dd-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 1.5rem 2rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dd-line);
}

.dd-rel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}

.dd .dd-rel-link {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: .75rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.dd .dd-rel-link--work {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: baseline;
}

.dd .dd-rel-link:hover {
    color: var(--dd-dark);
}

.dd-thumb {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border: 1px solid var(--dd-line);
}

.dd-thumb--empty {
    display: block;
    background: var(--dd-gray);
}

.dd-rel-text {
    display: grid;
    min-width: 0;
}

.dd-rel-title {
    line-height: 1.3;
    text-decoration: underline;
    text-decoration-color: var(--dd-underline);
    text-underline-offset: 4px;
}

.dd-rel-link:hover .dd-rel-title {
    text-decoration: none;
}

.dd-rel-desc {
    font-size: .82rem;
    line-height: 1.3;
    color: var(--dd-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dd-rel-opus {
    font-weight: 600;
    color: var(--dd-dark);
    font-variant-numeric: tabular-nums;
}

.dd-empty {
    color: var(--dd-muted);
    font-size: .92rem;
    margin: 0;
}

/* Blaettern + Zurueck */
.dd-pager {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--dd-line);
}

.dd-pager-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
}

.dd-pager-link span {
    display: block;
    font-size: .82rem;
    color: var(--dd-muted);
}

.dd-pager-link--next {
    text-align: right;
}

@media (max-width: 575px) {
    .dd-facts {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dd-facts dt {
        margin-top: .5rem;
    }
}