/*
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: 207.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; }
}

/* V170: Story cards preserve the original images' natural proportions. */
.hj-story-grid{display:flex;flex-direction:column;gap:30px;width:100%;}
.hj-story-card{width:100%;min-width:0;padding:0 0 26px;border-bottom:1px solid var(--line,#d6dadd);}
.hj-story-card h3{margin:0 0 16px;}
.hj-story-card img{display:block;float:none!important;width:auto!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;margin:16px auto!important;}
.hj-story-body{width:100%;overflow-wrap:anywhere;}
.hj-story-body table{max-width:100%;}
@media(max-width:700px){.hj-story-card img{max-width:100%!important;margin:12px auto!important;}}

/* V178: Restore photos in the Stories overview from the first original inline image. */
.hj-story-overview .story-card-image{display:block;margin:12px 0 16px;text-align:left;}
.hj-story-overview .story-card-image img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:none!important;object-fit:contain!important;margin:0!important;}


/* V179: Compact Stories overview; the title already contains the year. */
/* V180: Keep only a single-line gap between preview image and title. */
.hj-story-overview{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px!important;align-items:start;}
.hj-story-overview>.content-card{min-width:0;margin:0!important;padding:10px!important;}
.hj-story-overview .story-card-image{display:block;margin:0 0 4px!important;text-align:center;}
.hj-story-overview .story-card-image img{display:block;width:auto!important;height:auto!important;max-width:100%!important;max-height:115px!important;object-fit:contain!important;margin:0 auto!important;}
.hj-story-overview h3{font-size:0.95rem!important;line-height:1.25!important;margin:0!important;}
.hj-story-overview p{display:none!important;}
@media(max-width:760px){.hj-story-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;}}
@media(max-width:420px){.hj-story-overview{grid-template-columns:1fr;}}


/* V181: Prevent inherited content-card layout from pushing story titles to the bottom. */
.hj-story-overview>.content-card{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;height:auto!important;min-height:0!important;max-height:none!important;gap:0!important;}
.hj-story-overview>.content-card .story-card-image{flex:0 0 auto!important;margin:0 0 4px!important;}
.hj-story-overview>.content-card h3{flex:0 0 auto!important;margin:0!important;padding:0!important;}


/* V183: Restore larger legacy-style story preview images while keeping titles directly underneath. */
.hj-story-overview{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:min-content!important;
  align-content:start!important;
  align-items:start!important;
  gap:10px!important;
}
.hj-story-overview > article.content-card{
  display:block!important;
  align-self:start!important;
  height:auto!important; min-height:0!important; max-height:none!important;
  margin:0!important; padding:6px!important;
  justify-content:initial!important;
}
.hj-story-overview > article.content-card > .story-card-image{
  display:block!important; position:static!important;
  height:auto!important; min-height:0!important; margin:0 0 3px!important;
  padding:0!important; line-height:0!important;
}
.hj-story-overview > article.content-card > .story-card-image img{
  display:block!important; position:static!important; float:none!important;
  width:auto!important; height:auto!important; max-width:100%!important;
  max-height:150px!important; object-fit:contain!important;
  margin:0 auto!important; padding:0!important;
}
.hj-story-overview > article.content-card > h3{
  display:block!important; position:static!important;
  margin:0!important; padding:0!important; line-height:1.2!important;
  font-size:.88rem!important;
}
.hj-story-overview > article.content-card > h3 a{margin:0!important;padding:0!important;}
@media(max-width:760px){.hj-story-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}}
@media(max-width:420px){.hj-story-overview{grid-template-columns:1fr!important;}}

/* V183: Slightly larger preview images, matching the original Stories overview. */
.hj-story-overview > article.content-card > .story-card-image img{max-height:150px!important;width:auto!important;max-width:100%!important;height:auto!important;}


/* V185: Remove the brighter card panels; use one consistent surface for overview and story details. */
.hj-story-overview > article.content-card,
.hj-story-grid > article.hj-story-card{
  color:inherit!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.hj-story-overview > article.content-card > h3,
.hj-story-overview > article.content-card > h3 a,
.hj-story-grid > article.hj-story-card h3,
.hj-story-grid > article.hj-story-card .hj-story-body{
  color:inherit!important;
}
.hj-story-overview > article.content-card > h3 a:hover,
.hj-story-grid > article.hj-story-card a:hover{
  color:inherit!important;
  opacity:.78;
}
.hj-story-grid > article.hj-story-card{padding:10px 0!important;margin:0 0 10px!important;}

/* V185: Keep image/text cards on the page surface, without a pale inset panel. */
.hj-story-overview > article.content-card{padding:10px 0!important;}


/* V194: Annual timeline — restore the clean, separated year/event rows from the former website. */
.hj-annual-list{width:100%;max-width:1120px;margin:0 auto;padding:4px 0 12px;box-sizing:border-box;color:inherit}
.hj-annual-list .hj-annual-row{display:table!important;width:92%!important;max-width:100%!important;table-layout:fixed!important;border-collapse:collapse!important;border-spacing:0!important;margin:0 auto 14px!important;padding:0!important;background:transparent!important;border:0!important}
.hj-annual-list .hj-annual-row tr{display:table-row!important}
.hj-annual-list .hj-annual-row td{display:table-cell!important;box-sizing:border-box!important;vertical-align:middle!important;padding:12px 14px!important;border:0!important;border-top:1px solid rgba(255,255,255,.55)!important;border-bottom:1px solid rgba(35,35,35,.75)!important;background:transparent!important;line-height:1.45!important;white-space:normal!important;overflow-wrap:anywhere!important}
.hj-annual-list .hj-annual-row td:first-child{width:78px!important;text-align:center!important;font-weight:700!important;white-space:nowrap!important}
.hj-annual-list .hj-annual-row td:nth-child(2){text-align:left!important}
.hj-annual-list .hj-annual-row:last-of-type{margin-bottom:0!important}
@media(max-width:640px){.hj-annual-list .hj-annual-row{width:100%!important;margin-bottom:10px!important}.hj-annual-list .hj-annual-row td{padding:10px 8px!important}.hj-annual-list .hj-annual-row td:first-child{width:62px!important}}