/* MOON SHOT — Tourliste. Zeilenlogik (Sortierung, "Next", Ausblenden
   vergangener Termine) steckt in js/universe.js. */
.shows {
  border-top: 1px solid var(--line);
}

.show {
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(120px, 1fr) minmax(120px, 1.2fr) auto;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
  padding: clamp(16px, 2.4vw, 24px) clamp(4px, 1vw, 14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}

.show:hover {
  background: rgba(238, 237, 227, .035);
  border-color: var(--line-loud);
}

/* Eingeklappte Zeilen: schlaegt das display:grid oben */
.show[hidden] {
  display: none;
}

.show__date {
  font-size: .8125rem;
  letter-spacing: .2em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .3s;
}

.show__city {
  font-family: var(--font-poster);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  transition: color .3s;
}

.show__venue {
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.show__cta {
  justify-self: end;
  padding: 10px 18px;
  border: 1px solid var(--line);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}

.show__cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--void);
}

.show:hover .show__city {
  color: var(--gold);
}

.show:hover .show__date {
  color: var(--bone-2);
}

.show--next {
  position: relative;
}

.show--next .show__date::after {
  content: "Next";
  display: inline-block;
  margin-left: 12px;
  padding: 3px 8px;
  background: var(--gold);
  color: var(--void);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  vertical-align: middle;
}

/* Ausklappen ab 12 Terminen — js/universe.js zeigt den Button nur dann */
.shows__more {
  display: block;
  width: 100%;
  padding: 18px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: color .25s, background .25s, border-color .25s;
}

.shows__more:hover {
  background: rgba(238, 237, 227, .035);
  border-color: var(--line-loud);
  color: var(--gold);
}

.shows__empty {
  padding: 32px 0;
  font-size: 1.0625rem;
  color: var(--bone-2);
}

/* Hinweis unter der Liste — z. B. Termine ausserhalb Deutschlands */
.shows__note {
  margin-top: clamp(20px, 3vw, 30px);
  font-size: .8125rem;
  letter-spacing: .16em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--muted);
}

.shows__note a {
  color: var(--bone);
  border-bottom: 1px solid var(--line-loud);
  transition: color .25s, border-color .25s;
}

.shows__note a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* mobil: Datum/Stadt/Venue gestapelt, Ticket-Button rechts über alle drei Zeilen */
@media (max-width: 860px) {
  .show {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 18px 2px;
  }

  .show__date {
    grid-column: 1;
    order: 1;
  }

  .show__city {
    grid-column: 1;
    order: 3;
  }

  .show__venue {
    grid-column: 1;
    order: 4;
  }

  .show__cta {
    grid-column: 2;
    grid-row: 1/span 3;
    order: 2;
    align-self: center;
  }
}