/* =========================================================
   ALBEN – Albumseite (gemeinsam)
   Datei: album.css
========================================================= */

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

/* =========================================================
   HEADER
========================================================= */
          .album-header{
            margin: 20px 0 28px;
          }

          .album-name{
            margin: 0 0 8px;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline) * 1.05);
            color: #fff;
          }

          /* 2005 · Studioalbum links | Buttons rechts */
          .album-meta-row{
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
          }

          .album-kicker{
            font-size: var(--font-size-content);
            color: rgba(255,255,255,0.90);
          }

/* =========================================================
   VERSIONEN (Buttons)
========================================================= */
          .version-nav{
            display: inline-flex;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
          }

          .version-link{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0.42rem 0.80rem;
            border-radius: var(--radius-sm);

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-headline-minor) * 0.86);
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;

            text-decoration: none;

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

            box-shadow: var(--shadow-soft);

            transition:
              background 160ms ease,
              border-color 160ms ease,
              transform 140ms ease,
              box-shadow 160ms ease;
          }

          .version-link:hover{
            background: var(--color-box-bg-hover);
            border-color: var(--color-border-strong);
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
          }

          .version-link:active{
            transform: translateY(0);
          }

          .version-link.active,
          .version-link[aria-current="page"]{
            background: var(--color-box-bg-active);
            border-color: var(--color-border-strong);
            box-shadow: var(--shadow-strong);
          }

/* =========================================================
   TOP GRID (Infos breiter, Artwork schmaler)
========================================================= */
          .album-top{
            display: grid;
            grid-template-columns: 1.4fr 0.8fr;
            gap: var(--album-gap);
            align-items: start;
          }

          .album-info-column{
            display: flex;
            flex-direction: column;
            gap: 18px;
          }

/* =========================================================
   CARD DESIGN
========================================================= */
          .album-card{
            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-card:hover{
            background: var(--color-box-bg-strong);
            border-color: var(--color-box-border-strong);
          }

          .card-title{
            margin: 0 0 14px;
            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-headline-section) * 0.95);
            color: #fff;
          }

/* =========================================================
   INFO GRID
========================================================= */
          .info-grid{
            display: grid;
            grid-template-columns: 220px 1fr;
            gap: 10px 18px;
            margin: 0;
          }

          .info-grid dt{
            font-weight: 800;
            font-family: var(--font-style-ui);
            color: rgba(255,255,255,0.92);
          }

          .info-grid dd{
            margin: 0;
            font-family: var(--font-style-text);
            color: rgba(255,255,255,0.90);
          }

/* =========================================================
   AUSKOPPLUNGEN BOX
========================================================= */
          .album-auskopplungen .card-title{
            font-size: calc(var(--font-size-headline-section) * 0.75);
            font-weight: 400;
            margin-bottom: 10px;
          }

          .album-auskopplungen ul{
            margin: 0;
            padding-left: 20px;
          }

          .album-auskopplungen li{
            margin-bottom: 6px;
            color: rgba(255,255,255,0.90);
            font-size: calc(var(--font-size-content) * 0.88);
          }

          .album-auskopplungen li::marker{
            color: rgba(180,190,255,0.9);
          }

          /* Auskopplungen transparent lassen */
          .album-auskopplungen,
          .album-auskopplungen:hover{
            background: transparent;
            border-color: var(--color-box-border);
          }

/* =========================================================
   ARTWORK
========================================================= */
          .art-stack{
            display: grid;
            gap: 28px;
          }

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

          .art-figure img{
            width: 100%;
            height: auto;
            display: block;
            border-radius: calc(var(--radius-sm) - 2px);
            border: 2px solid;
            border-color:  rgba(255,255,255,0.19);
          }

          .art-figure 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);
          }

          /* Artwork ohne Rahmen (z.B. CD-only Editionen) */
          .art-figure.cd-only img{
            border: none;
          }

/* =========================================================
   TRACKLIST
========================================================= */
          .track-card{
            margin-top: var(--album-gap);
          }

          .track-head{
            display: flex;
            flex-direction: column;   /* <- WICHTIG */
            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;
          }

/* =========================================================
   TRACKLIST (mit Nummerierung)
========================================================= */
          .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; /* Nr | Name | Mitte | Dauer */
            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{
            font-family: var(--font-style-text);
            font-size: var(--font-size-content);
            color: rgba(255,255,255,0.95);
          }

          .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;
            font-family: var(--font-style-ui);
            font-weight: 800;
            color: rgba(255,255,255,0.92);
          }

/* =========================================================
   UNTERPUNKTE (z.B. Behind The Scenes)
   - keine Nummerierung
   - Bullet in der "Nummern"-Spalte
========================================================= */
          .track.sub-track.no-number{
            counter-increment: none;   /* nicht hochzählen */
          }

          /* statt Nummer: Bullet */
          .track.sub-track.no-number::before{
            content: "•";
            font-family: var(--font-style-ui);
            font-weight: 900;
            color: rgba(255,255,255,0.85);
            text-align: right;
          }

          /* kein zusätzliches Bullet mehr vor dem Namen */
          .track.sub-track.no-number .t-name::before{
            content: none;
          }

/* =========================================================
   BONUS TRACKS
========================================================= */
          .track-divider{
            list-style: none;
            counter-increment: none;   /* verhindert Nummerierung */
            padding: 18px 0 8px;
            margin-top: 10px;

            font-family: var(--font-style-ui);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;

            color: rgba(180,190,255,0.9);

            border-bottom: 1px solid rgba(255,255,255,0.12);
          }

          /* Nummerierung wirklich unterdrücken */
          .track-divider::before{
            content: none;
          }

/* =========================================================
   LIVE MEDLEY – Desktop (nebeneinander + Luft um Trenner)
========================================================= */
          .track-medley{
            grid-template-rows: auto auto;
          }

          .t-medley{
            grid-column: 2 / 4;
            margin-top: 6px;
            display: block;

            font-size: calc(var(--font-size-content) * 0.85);
            font-family: var(--font-style-text);
            color: rgba(255,255,255,0.70);
            line-height: 1.4;
          }

          /* Trenner mit Luft links/rechts */
          .t-medley .sep{
            display: inline-block;
            margin: 0 10px;
            opacity: 0.9;
          }

/* =========================================================
   DVD BOX
========================================================= */
          .dvd-card{
            margin-top: var(--album-gap);
            border-color: rgba(180,190,255,0.35);
          }

          .dvd-card .card-title{
            color: rgba(255,255,255,0.95);
          }

          .dvd-list .track::before{
            color: rgba(180,190,255,0.75);
          }

/* =========================================================
   BACK BUTTON
========================================================= */
          .btn-back{
            display: inline-flex;
            align-items: center;
            justify-content: center;

            padding: 0.6rem 1rem;
            border-radius: var(--radius-sm);

            font-family: var(--font-style-ui);
            font-weight: 800;
            font-size: calc(var(--font-size-content) * 0.9);

            text-decoration: none;

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

            box-shadow: var(--shadow-soft);

            transition:
              background 160ms ease,
              border-color 160ms ease,
              transform 140ms ease,
              box-shadow 160ms ease;
          }

          .btn-back:hover{
            background: var(--color-box-bg-hover);
            border-color: var(--color-border-strong);
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
          }

          .btn-back:active{
            transform: translateY(0);
          }

/* =========================================================
   RESPONSIVE – 980px
========================================================= */
@media (max-width: 980px){

          .album-top{
            grid-template-columns: 1fr;
          }

          .info-grid{
            grid-template-columns: 180px 1fr;
          }

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

/* =========================================================
   RESPONSIVE – 768px
========================================================= */
@media (max-width: 768px){

          :root{
            --artwork-width: 160px;
          }

          /* 2005 bleibt oben links, Buttons eigene Zeile darunter rechts */
          .album-meta-row{
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
          }

          .version-nav{
            align-self: flex-end;
            flex-wrap: nowrap;              /* <- NICHT umbrechen */
            overflow-x: auto;               /* <- scroll statt chaos */
            -webkit-overflow-scrolling: touch;
            max-width: 100%;
            padding-bottom: 2px;
            gap: 10px;
          }

          .version-nav::-webkit-scrollbar{
            height: 0;
          }

          /* Track-Header: Meta unter Titel */
          .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 1fr auto;
            grid-auto-rows: auto;
            gap: 6px 12px;

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

          /* Nummer */
          .track::before{
            grid-column: 1;
            grid-row: 1;
            align-self: start;
            font-weight: 800;
            color: rgba(180,190,255,0.75);
          }

          /* Titel */
          .t-name{
            grid-column: 2;
            grid-row: 1;
            line-height: 1.25;
          }

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

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

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

          /* =====================================================
             UNTERPUNKTE Mobile – Bullet + Einzug stabil
          ===================================================== */
          .track.sub-track.no-number{
            padding-left: 2rem;
          }

          .track.sub-track.no-number .t-name{
            grid-column: 2;
            grid-row: 1;
          }

          /* =====================================================
             MEDLEY Mobile – garantiert untereinander + Bullet
          ===================================================== */
          .track-medley .t-medley{
            grid-column: 2 / -1;
            margin-top: 10px;
            display: block !important;
          }

          .track-medley .t-medley .sep{
            display: none !important;
          }

          /* =====================================================
             MEDLEY Mobile – mehr Abstand nach dem Bullet
          ===================================================== */
          .track-medley .t-medley .medley-item{
            display: block;
            position: relative;
            padding-left: 18px;   /* Abstand vom linken Rand */
          }

          .track-medley .t-medley .medley-item::before{
            content: "•";
            position: absolute;
            left: 0;
            top: 0;

            color: rgba(180,190,255,0.85);
            font-weight: 900;
          }
}

/* =========================================================
   RESPONSIVE – 480px
========================================================= */
@media (max-width: 480px){

          :root{
            --artwork-width: 150px;
          }
}