/* =========================================================
   NEWS COMPONENTS
   Datei: news-components.css
========================================================= */


/* =========================================================
   1) NEWS SUBTITLE
========================================================= */

          .news-subtitle{
            margin: calc(var(--menu-gap) * 1) 0 calc(var(--menu-gap) * 0.45) 0;

            font-family: var(--font-style-headline);
            font-size: calc(var(--font-size-content) * 1.02);
            line-height: 1.25;
            color: #fff;
          }


/* =========================================================
   2) TABLE WRAP
========================================================= */

          .news-table-wrap{
            margin-top: calc(var(--menu-gap) * 0.45);
            overflow-x: auto;
          }


/* =========================================================
   3) NEWS TABLE – BASIS
========================================================= */

          .news-table{
            width: 100%;
            border-collapse: collapse;

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

          .news-table th,
          .news-table td{
            padding: 0.35rem 0.25rem;

            font-family: var(--font-style-text);
            font-size: calc(var(--font-size-content) * 0.95);
            line-height: 1.35;
            color: rgba(255,255,255,0.92);

            text-align: left;
            vertical-align: top;
          }

          .news-table thead th{
            padding-top: 0.45rem;
            padding-bottom: 0.45rem;

            font-family: var(--font-style-ui);
            font-size: calc(var(--font-size-content) * 0.92);
            font-weight: 800;
            color: rgba(255,255,255,0.92);

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

          .news-table tbody tr + tr td{
            border-top: 1px solid rgba(255,255,255,0.06);
          }


/* =========================================================
   4) TRACKLIST – SPALTEN
========================================================= */

          .news-table-number{
            width: 2.5rem;
            white-space: nowrap;
            color: rgba(255,255,255,0.82);
          }

          .news-table-time{
            width: 5.5rem;
            text-align: right !important;
            white-space: nowrap;
            color: rgba(255,255,255,0.82);
          }

          .news-table--tracklist thead th:nth-child(3),
          .news-table--tracklist thead th:nth-child(4){
            text-align: right;
          }

          .news-table--tracklist thead th:first-child{
            text-align: left;
          }

/* =========================================================
   TRACKLIST – KOMPAKT & ZENTRIERT
========================================================= */

          .news-table--tracklist{
            width: auto;                /* nicht mehr full width */
            margin: 0 auto;             /* zentrieren */

            min-width: 580px;           /* verhindert zu starkes Zusammenquetschen */
            max-width: 620px;           /* schöne Begrenzung */

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

/* =========================================================
   TRACKLIST BLOCK (zentriert)
========================================================= */

          .news-tracklist{
            max-width: 580px;
            margin: calc(var(--menu-gap) * 1) auto 0 auto;
          }


/* Subtitle innerhalb vom Block */

          .news-tracklist .news-subtitle{
            margin: 0 0 0.4rem 0;
            text-align: left; /* oder center, wenn du willst */
          }          


/* =========================================================
   ZELLEN – ENGER
========================================================= */

          .news-table--tracklist th,
          .news-table--tracklist td{
            padding: 0.25rem 0.2rem;   /* enger */
          }


/* =========================================================
   SPALTEN FEINTUNING
========================================================= */

          .news-table-number{
            width: 2rem;
            text-align: right;
            padding-right: 0.4rem;
          }

          .news-table--tracklist td:nth-child(2){
            padding-left: 0.3rem;
          }

          .news-table-time{
            width: 4.5rem;
            text-align: right !important;
          }


/* =========================================================
   HEADER ZENTRIERT / AUSGERICHTET
========================================================= */

          .news-table--tracklist thead th{
            text-align: left;
          }

          .news-table--tracklist thead th:last-child{
            text-align: right;
          }          


/* =========================================================
   RESPONSIVE – TRACKLIST MOBILE
   News-Tracklist im Stil der Discographie
========================================================= */

@media (max-width: 768px){

          .news-table-wrap{
            overflow: visible;
          }

          .news-table--tracklist{
            width: 100%;
            min-width: 0;
            max-width: none;

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

          .news-table--tracklist thead{
            display: none;
          }

          .news-table--tracklist tbody{
            display: block;
          }

          .news-table--tracklist tbody tr{
            display: grid;
            grid-template-columns: 32px 1fr auto;
            grid-auto-rows: auto;
            gap: 6px 12px;

            align-items: start;

            padding: 14px 10px;

            border-top: 1px solid rgba(255,255,255,0.08);
          }

          .news-table--tracklist tbody tr:first-child{
            border-top: none;
          }

          .news-table--tracklist tbody td{
            padding: 0 !important;
            border: none !important;
          }

          /* Nummer */
          .news-table--tracklist tbody td.news-table-number{
            grid-column: 1;
            grid-row: 1;

            align-self: start;
            justify-self: start;

            width: auto;
            min-width: 0;

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

          /* Titel */
          .news-table--tracklist tbody td:nth-child(2){
            grid-column: 2;
            grid-row: 1;

            min-width: 0;

            line-height: 1.25;
            color: rgba(255,255,255,0.92);
          }

          /* Dauer */
          .news-table--tracklist tbody td.news-table-time{
            grid-column: 3;
            grid-row: 1;

            align-self: start;
            justify-self: end;

            width: auto;
            min-width: 0;

            text-align: right !important;
            white-space: nowrap;
            color: rgba(255,255,255,0.78);
          }

}