/*
Theme Name: Hey Joe Derschka
Theme URI: https://music-and-web.de/
Neues Gesamtbild Background_02i.jpg als unveränderte Datei; Headerhöhe sinkt proportional.
Version: 167.0
Author: Hey Joe
Text Domain: hey-joe-v79-music-media-texte
*/
body { margin: 0; }

/* Concerts: Umschalten zwischen chronologischer und alphabetischer Tabellenansicht */
.concert-sort-controls{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px}
.concert-sort-button{appearance:none;border:1px solid var(--line,#d6dadd);border-radius:8px;padding:10px 16px;background:var(--panel,#f4f6f7);color:var(--text,#202428);font:inherit;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.concert-sort-button.active{background:#526B78;color:#fff;border-color:#526B78}
.concert-sort-button:focus-visible,.concert-band-link:focus-visible{outline:2px solid #526B78;outline-offset:3px}


/* V65: shared fixed column grid; stylesheet explicitly loaded by index.php. */
.concert-year-wrap{display:block;width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--line,#d6dadd);border-radius:8px}
.concert-year-table{display:table;width:1200px;min-width:1200px;table-layout:fixed;border-collapse:collapse;border-spacing:0;background:var(--panel,#fff);margin:0}
.concert-year-table col:nth-child(1){width:90px}
.concert-year-table col:nth-child(2){width:160px}
.concert-year-table col:nth-child(3){width:260px}
.concert-year-table col:nth-child(4){width:300px}
.concert-year-table col:nth-child(5){width:390px}
.concert-year-table thead{display:table-header-group}
.concert-year-table tbody{display:table-row-group}
.concert-year-table tr{display:table-row}
.concert-year-table th,.concert-year-table td{display:table-cell;box-sizing:border-box;text-align:left!important;text-align-last:left!important;vertical-align:top;padding:13px 16px!important;border-bottom:1px solid var(--line,#e0e3e5);text-indent:0!important;overflow-wrap:break-word;white-space:normal}
.concert-year-table th{background:var(--panel-strong,#edf0f2);font-weight:650;line-height:1.35}
.concert-year-table td{line-height:1.5}
.concert-year-table th+th,.concert-year-table td+td{border-left:1px solid var(--line,#e0e3e5)}
.concert-year-table tbody tr:nth-child(even) td{background:var(--panel-soft,#f7f8f9)}
.concert-year-table tbody tr:last-child td{border-bottom:0}
.concert-year-table .concert-band-link{display:inline-block;margin:0!important;padding:0!important;text-align:left!important;text-align-last:left!important;white-space:normal}
.concert-sort-view[hidden]{display:none!important}
@media(max-width:640px){.concert-sort-controls{gap:8px}.concert-sort-button{flex:1;padding:10px 8px;font-size:.94rem}.concert-year-table{width:1200px;min-width:1200px}.concert-year-table th,.concert-year-table td{padding:12px 14px!important}}


/* Music Videos: four cards per row on desktop. */
.hj-music-video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:22px 0 30px}
.hj-music-video-card{display:block;min-width:0;color:inherit;text-decoration:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);padding:8px;transition:transform .15s ease,border-color .15s ease}
.hj-music-video-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45);text-decoration:none}
.hj-music-video-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 9px}
@media(max-width:900px){.hj-music-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:480px){.hj-music-video-grid{grid-template-columns:1fr}}

/* TV Series & Movies use the exact same grid and clickable card classes as Music Videos. */
.hj-tv-series-placeholder{display:flex;align-items:center;justify-content:center;min-height:145px;padding:12px;text-align:center;background:#e7e4df;color:#333;font-weight:600}


/* V121: native display for archived TV-series detail pages */
.hj-tv-detail{max-width:980px;margin:0 auto;padding:34px 6% 60px;background:var(--paper,#fff)}
.hj-tv-detail h1{font-size:clamp(26px,4vw,38px);line-height:1.2;margin:0 0 8px;color:var(--deep,#233541)}
.hj-tv-detail .hj-tv-detail-subtitle{color:var(--muted,#66717b);margin:0 0 26px;font-size:16px}
.hj-tv-detail .hj-tv-detail-content{font-size:16px;line-height:1.75;overflow-wrap:anywhere}
.hj-tv-detail .hj-tv-detail-content img{max-width:100%;height:auto;display:block;margin:18px auto}
.hj-tv-detail .hj-tv-detail-content p{margin:0 0 16px}
.hj-tv-detail .hj-tv-detail-back{display:inline-block;margin-top:26px;padding:10px 16px;background:var(--deep,#233541);color:#fff;text-decoration:none;border-radius:5px}
.hj-tv-detail .hj-tv-detail-back:hover{background:var(--accent,#ad653b)}


/* V122: Original TV-series detail content sits inside the existing Hey Joe SPA page shell. */
.hj-tv-detail-content{margin-top:18px;overflow-wrap:anywhere}
.hj-tv-detail-content table{width:100%;max-width:100%;border-collapse:collapse;margin:14px 0}
.hj-tv-detail-content td,.hj-tv-detail-content th{vertical-align:top;padding:8px}
.hj-tv-detail-content img{max-width:100%;height:auto}
.hj-tv-detail-content p{line-height:1.7;margin:0 0 1rem}
.hj-tv-detail-content a{overflow-wrap:anywhere}
.hj-tv-detail-content .hj-tv-detail-back{display:inline-block;margin:14px 0;padding:9px 14px;background:var(--deep,#233541);color:#fff;text-decoration:none;border-radius:4px}
@media(max-width:640px){.hj-tv-detail-content table,.hj-tv-detail-content tbody,.hj-tv-detail-content tr,.hj-tv-detail-content td{display:block;width:100%;box-sizing:border-box}.hj-tv-detail-content td{padding:7px 0}}

/* V123: Original archive tables rendered inside the existing site's content panel. */
.hj-tv-detail-content{max-width:100%;overflow-x:auto}
.hj-tv-detail-table{width:100%;border-collapse:collapse;background:transparent}
.hj-tv-detail-table td{vertical-align:top;padding:12px 8px}
.hj-tv-detail-table img{max-width:100%;height:auto}
.hj-tv-detail-back{display:inline-block;margin:12px 0;padding:9px 14px;background:var(--deep,#233541);color:#fff!important;text-decoration:none;border-radius:4px}
.hj-tv-detail-back:hover{background:var(--accent,#ad653b)}


/* V147: Mobile concert tables become readable stacked entries instead of fixed 1200px tables. Desktop remains unchanged. */
@media (max-width: 760px) {
  .concert-year-wrap { overflow-x: visible; width: 100%; max-width: 100%; border: 0; border-radius: 0; }
  .concert-year-table,
  .concert-year-table tbody { display: block; width: 100% !important; min-width: 0 !important; table-layout: auto; }
  .concert-year-table thead { display: none; }
  .concert-year-table colgroup { display: none; }
  .concert-year-table tr { display: block; width: 100%; margin: 0 0 12px; padding: 8px 12px; box-sizing: border-box; border: 1px solid var(--line,#d6dadd); border-radius: 8px; background: var(--panel,#fff); }
  .concert-year-table td { display: grid; grid-template-columns: minmax(76px, 30%) minmax(0, 1fr); gap: 10px; width: 100%; padding: 7px 0 !important; border: 0 !important; border-bottom: 1px solid var(--line,#e0e3e5) !important; box-sizing: border-box; overflow-wrap: anywhere; }
  .concert-year-table td:last-child { border-bottom: 0 !important; }
  .concert-year-table td::before { font-weight: 650; color: var(--muted,#66717b); }
  .concert-year-table td:nth-child(1)::before { content: "Year"; }
  .concert-year-table td:nth-child(2)::before { content: "Date"; }
  .concert-year-table td:nth-child(3)::before { content: "Band"; }
  .concert-year-table td:nth-child(4)::before { content: "Venue"; }
  .concert-year-table td:nth-child(5)::before { content: "Tour-Title"; }
  .concert-year-table .concert-band-link { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .concert-year-wrap { overflow-x: auto; max-width: 100%; }
}

/* V156: gezielte Layoutkorrektur ohne JavaScript-Schleifen.
   Konzertberichte und TV-Serien enthalten historisch gewachsene HTML-Tabellen;
   erzwinge obere Zell- und Zeilenausrichtung nur in diesen Inhaltsbereichen. */
.embedded-report table,
.embedded-report tbody,
.embedded-report tr,
.embedded-report td,
.embedded-report th,
.hj-tv-detail-content table,
.hj-tv-detail-content tbody,
.hj-tv-detail-content tr,
.hj-tv-detail-content td,
.hj-tv-detail-content th,
.hj-tv-detail-table,
.hj-tv-detail-table tbody,
.hj-tv-detail-table tr,
.hj-tv-detail-table td,
.hj-tv-detail-table th {
  vertical-align: top !important;
}
.embedded-report td,
.embedded-report th,
.hj-tv-detail-content td,
.hj-tv-detail-content th,
.hj-tv-detail-table td,
.hj-tv-detail-table th {
  align-self: start !important;
}
@media (max-width: 760px) {
  .concert-year-table td { align-items: start !important; align-content: start !important; }
}