/* =========================================================
   DAS NEUE ALBUM
   Datei: content-dasneuealbum.css
========================================================= */


/* =========================================================
   VARIABLEN
========================================================= */

          :root{
            --album-gap: 32px;
            --album-card-pad: calc(var(--menu-gap) * 1.05);
            --artwork-width: 460px;
          }


/* =========================================================
   1) BASIS
========================================================= */

          .album-wrap{
            max-width: 980px;
            margin: 0 auto;
            box-sizing: border-box;
          }


          .album-intro{
            margin-bottom: calc(var(--menu-gap) * 1.6);

            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.90);
          }


          .album-wrap p{
            margin: 0 0 1rem 0;

            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
            color: rgba(255,255,255,0.92);
          }


          .album-wrap a{
            color: var(--color-link);
            text-decoration: none;
            position: relative;
            overflow-wrap: anywhere;
          }


          .album-wrap a::after{
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            width: 0;
            height: 1.5px;
            background: currentColor;
            transition: width .25s ease, left .25s ease;
          }


          .album-wrap a:hover{
            color: var(--color-link-hover);
          }


          .album-wrap a:hover::after{
            width: 100%;
            left: 0;
          }


/* =========================================================
   2) SEKTIONEN / CARDS
========================================================= */

          .album-section,
          .album-card{
            margin-top: calc(var(--menu-gap) * 1.1);
            padding: var(--album-card-pad);

            background: var(--color-box-bg);
            border: 1px solid var(--color-box-border);
            border-radius: var(--radius-sm);

            transition: background .2s ease, border-color .2s ease;
          }


          .album-section:hover,
          .album-card:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }


          .album-title,
          .card-title{
            margin: 0 0 14px 0;

            font-family: var(--font-style-headline);
            color: #fff;
          }


          .album-title{
            font-size: calc(var(--font-size-headline-section) * 0.95);
          }


          .card-title{
            font-size: calc(var(--font-size-headline-section) * 0.95);
          }


/* =========================================================
   3) ALBUM GRAFIK
========================================================= */

          .album-artwork{
            display: grid;
            justify-content: center;
          }


          .album-artwork figure{
            margin: 0;
            width: min(100%, var(--artwork-width));
          }


          .album-artwork img{
            display: block;
            width: 100%;
            height: auto;

            border-radius: calc(var(--radius-sm) - 2px);
            border: 2px solid rgba(255,255,255,0.19);
          }


          .album-artwork figcaption{
            margin-top: 10px;
            text-align: left;

            color: rgba(255,255,255,0.85);
            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.9);
          }


/* =========================================================
   4) ALBUMINFORMATIONEN
========================================================= */

          .album-info{
            margin: 0;
            padding: 0;
            list-style: none;

            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 10px 18px;
          }


          .album-info li{
            padding: 0.9rem 1rem;

            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: var(--radius-sm);

            color: rgba(255,255,255,0.90);
            line-height: var(--line-height-text);
          }


          .album-info strong{
            display: block;
            margin-bottom: 0.2rem;

            font-weight: 800;
            font-family: var(--font-style-ui);
            color: rgba(255,255,255,0.92);
          }


/* =========================================================
   5) LISTEN / INFOBLÖCKE
========================================================= */

          .album-list,
          .info-list,
          .album-auskopplungen ul{
            margin: 0;
            padding: 0;
            list-style: none;

            display: grid;
            grid-template-columns: repeat(2, minmax(0,1fr));
            gap: 10px 18px;
          }


          .album-list li,
          .info-list li,
          .album-auskopplungen li{
            margin: 0;
            padding: 0.85rem 1rem;

            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: var(--radius-sm);

            color: rgba(255,255,255,0.90);
            font-size: var(--font-size-content);
            line-height: var(--line-height-text);
          }


          .album-auskopplungen .card-title{
            font-size: calc(var(--font-size-headline-section) * 0.95);
            font-weight: 400;
            margin-bottom: 14px;
          }


          .album-auskopplungen li::marker{
            content: none;
          }


          .album-production p,
          .album-credits p,
          .album-vocals p{
            margin-bottom: 0.8rem;
          }


/* =========================================================
   6) TRACKLIST HEADER
========================================================= */

          .track-card{
            margin-top: var(--album-gap);
          }


          .track-head{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
          }


          .track-meta{
            display: flex;
            justify-content: space-between;
            width: 100%;
            gap: 18px;

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.95);
            color: rgba(255,255,255,0.9);
          }


          .track-length{
            text-align: right;
            white-space: nowrap;
          }


          .track-length strong{
            margin-right: 25px;
          }


/* =========================================================
   7) TRACKLIST
========================================================= */

          .tracklist{
            margin: 14px 0 0;
            padding: 0;
            list-style: none;

            counter-reset: track;
            border-top: 1px solid rgba(255,255,255,0.18);
          }


          .track{
            counter-increment: track;

            display: grid;
            grid-template-columns: 40px 1fr 220px 80px;
            gap: 12px;
            align-items: center;

            padding: 14px 0;
            border-bottom: 1px solid rgba(255,255,255,0.14);

            transition: background 0.2s ease;
          }


          .track:hover{
            background: rgba(255,255,255,0.06);
          }


          .track::before{
            content: counter(track) ".";
            font-family: var(--font-style-ui);
            font-weight: 400;
            color: rgba(255,255,255,0.7);
            text-align: right;
          }


          .t-name{
            min-width: 0;

            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            color: rgba(255,255,255,0.95);
            line-height: 1.35;
            text-align: left;
          }


          .t-mid{
            justify-self: start;
            text-align: left;

            color: rgba(255,255,255,0.65);
            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.9);
          }


          .t-mid:empty{
            visibility: hidden;
          }


          .t-mid.radio{
            color: rgba(180,190,255,0.95);
            font-weight: 800;
          }


          .t-dur{
            text-align: right;
            justify-self: end;
            white-space: nowrap;

            font-family: var(--font-style-ui);
            font-weight: 800;
            color: rgba(255,255,255,0.92);
          }


/* =========================================================
   8) RESPONSIVE – 980px
========================================================= */

@media (max-width: 980px){

          .track{
            grid-template-columns: 34px 1fr 190px 70px;
          }

}


/* =========================================================
   9) RESPONSIVE – 768px
========================================================= */

@media (max-width: 768px){

          :root{
            --artwork-width: 100%;
          }

          .album-section,
          .album-card{
            padding: calc(var(--menu-gap) * 0.9);
          }

          .album-intro{
            margin-bottom: calc(var(--menu-gap) * 1.2);
          }

          .album-info,
          .album-list,
          .info-list,
          .album-auskopplungen ul{
            grid-template-columns: 1fr;
          }

          .track-head{
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
          }

          .track-meta{
            width: 100%;
            justify-content: space-between;
            gap: 20px;
          }

          .track{
            display: grid;
            grid-template-columns: 32px minmax(0,1fr) auto;
            grid-auto-rows: auto;
            gap: 6px 12px;

            padding: 14px 10px;
            border-radius: 10px;
          }

          .track::before{
            grid-column: 1;
            grid-row: 1;
            align-self: start;

            font-weight: 800;
            color: rgba(180,190,255,0.75);
            text-align: left;
          }

          .t-name{
            grid-column: 2;
            grid-row: 1;

            line-height: 1.25;
          }

          .t-mid{
            grid-column: 2;
            grid-row: 2;
          }

          .t-mid:empty{
            display: none;
          }

          .t-dur{
            grid-column: 3;
            grid-row: 1;
            align-self: start;
            justify-self: end;
            white-space: nowrap;
          }

}


/* =========================================================
   10) RESPONSIVE – 480px
========================================================= */

@media (max-width: 480px){

          :root{
            --artwork-width: 100%;
          }

}