.detail {display: flex; flex-direction: column; gap: 20px; margin-bottom: 50px;}
.detail > .header {  }
.detail > .header .title { height: 40px; display: flex; align-items: center; padding: 0 15px; font-family: var(--font-1); background: linear-gradient(180deg, var(--theme-gradient-1) 0%, var(--theme-gradient-4) 100%); color: var(--theme-text-color);margin-bottom: 5px; position: relative;left: calc(var(--border-width) * -1);top: calc(var(--border-width) * -1);width: calc(100% + (var(--border-width) * 2)); }
.detail .elements {display: flex; flex-direction: column; gap: 40px;}
.detail .cover {width: 350px; height: 350px; border: 1px solid var(--thin-border); padding: 5px;}


.detail .top {display: flex; gap: 40px;}
.detail .bottom {display: flex; gap: 40px;}
.detail .right {flex-grow: 1; }

.detail .grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);
    /*grid-template-rows: 2.5fr 1fr;*/
    grid-template-rows: 280px;
    grid-auto-flow: row;
    grid-template-areas:
    "tile-1 tile-1 tile-1 tile-2 tile-2 tile-2";
    /*"tile-3 tile-3 tile-4 tile-4 tile-5 tile-5";*/
    grid-area: right;
    width: 100%;
    height: fit-content;
    gap: 20px;
    margin-bottom: 30px;
}

.detail .grid.no-schlager {
    grid-template-areas:
    "tile-1 tile-1 tile-1 tile-1 tile-1 tile-1";
    /*"tile-3 tile-3 tile-4 tile-4 tile-5 tile-5";*/

}
.detail .grid.no-schlager .tile-2 {display: none;}


.detail .grid.no-dance {
    grid-template-areas:
    "tile-2 tile-2 tile-2 tile-2 tile-2 tile-2";
    /*"tile-3 tile-3 tile-4 tile-4 tile-5 tile-5";*/
}

.detail .grid.no-dance .tile-1 {display: none;}

.detail .grid.no-data {
    grid-template-areas:
    "tile-6 tile-6 tile-6 tile-6 tile-6 tile-6";
    /*"tile-3 tile-3 tile-4 tile-4 tile-5 tile-5";*/
    grid-template-rows: 150px;

}
.detail .grid.no-data .tile-1 {display: none;}
.detail .grid.no-data .tile-2 {display: none;}

.detail .grid .hint {width: 100%; height: 150px; border: 1px dashed #ccc;     display: flex;
    justify-content: center;
    align-items: center;}


.detail .frame {border: 1px solid var(--thin-border); width: 100%; height: 100%;}


.detail .links {display: flex; width: fit-content; gap: 15px; padding-bottom: 5px; height: 45px;}
.detail .links > div {display: flex; gap: 15px; align-items: center;}
.detail .links > div:not(:last-child) {border-right: 1px solid var(--thin-border); padding-right: 15px;}
.detail .icon {width: 30px; height: 30px; display: flex; align-items: center; cursor: pointer;}

.detail .bottom > .left { width: 350px; min-width: 350px;}
.detail .bottom .right { flex-grow: 1;}
.detail .text {font-size: 14px; line-height: 1.5; margin-top: 10px; }


.detail .elements > .top > .left {display: flex;flex-direction: column;}



.detail .grid .header {
    --border-width: 1px;
}
.detail .grid .header .title { height: 40px; display: flex; align-items: center; padding: 0 15px; font-family: var(--font-1); background: linear-gradient(180deg, var(--theme-gradient-1) 0%, var(--theme-gradient-4) 100%); color: var(--theme-text-color);margin-bottom: 5px; position: relative;left: calc(var(--border-width) * -1);top: calc(var(--border-width) * -1);width: calc(100% + (var(--border-width) * 2)); }
.detail .grid .competition {display: flex; justify-content: center; align-items: center; height: 100%;}


.detail .grid .ranking {font-size: 13px; line-height: 1.5; padding: 3px 15px;}
.detail .grid .ranking .long {width: 140px; display: inline-block;}
.detail .grid .ranking .short {width: 80px; display: inline-block;}