/**
 * Festival Program Module — Public Shortcode Styles
 *
 * Professional agency redesign for Thunfest 2026.
 * Concept: typography-forward, poster-grade visuals, editorial rhythm.
 *
 * Palette  · Orange #F07828 · Orange-Dark #C83800 · Warm #F5C155
 *           · Cream  #FFF8F0 · Brown  #1A0A00    · Brown-Mid #5A3A28
 * Font     · Inter (loaded by theme) · Anton (Headlines, hier lokal eingebettet)
 * Radius   · 4 px (flat / editorial)
 *
 * CSS custom properties (--fpm-*) are injected inline by the shortcode service.
 * They fall back to --tf-* theme variables so the Customizer stays in sync.
 *
 * @package FestivalManager
 * @since   4.2.0
 */

/* Display-Schrift Anton — lokal aus dem Plugin (macht das Frontend unabhängig vom
   Theme-Google-Fonts-Loader; sonst fällt der Bandname auf Inter zurück). */
@font-face{font-family:'Anton';font-weight:400;font-style:normal;font-display:swap;src:url('../social-editor/fonts/Anton-Regular.ttf') format('truetype');}

/* ═══════════════════════════════════════════════════════
   0 · Design tokens
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Base palette ──
     Falls back to the active theme's --tf-* customizer vars, which keeps the
     Thunfest theme in sync. For any other festival, the shortcode service
     injects these four inline from the central Festival-Einstellungen. */
  --fpm-primary:    var(--tf-orange,      #F07828);
  --fpm-accent:     var(--tf-orange-warm, #F5C155);
  --fpm-bg:         var(--tf-cream,       #FFF8F0);
  --fpm-text:       var(--tf-brown,       #1A0A00);

  /* ── Derived tokens ──
     Computed from the base palette so the whole UI re-themes from one colour
     set. The shortcode service recomputes these inline per container from the
     configured palette; these :root values are the global fallback. */
  --fpm-primary-dk: color-mix(in srgb, var(--fpm-primary) 72%, #000);
  --fpm-text-mid:   color-mix(in srgb, var(--fpm-text) 62%, var(--fpm-bg));
  --fpm-border:     color-mix(in srgb, var(--fpm-primary) 14%, transparent);
  --fpm-surface:    color-mix(in srgb, var(--fpm-text) 4%, var(--fpm-bg));
  --fpm-shadow-sm:  0 1px 4px color-mix(in srgb, var(--fpm-text) 7%, transparent),  0 1px 2px color-mix(in srgb, var(--fpm-text) 5%, transparent);
  --fpm-shadow-md:  0 6px 24px color-mix(in srgb, var(--fpm-text) 10%, transparent), 0 2px 8px  color-mix(in srgb, var(--fpm-text) 6%, transparent);
  --fpm-shadow-lg:  0 16px 48px color-mix(in srgb, var(--fpm-text) 14%, transparent), 0 4px 12px color-mix(in srgb, var(--fpm-text) 8%, transparent);
  --fpm-radius:     4px;

  /* Semantic, brand-independent: "live" indicator stays red for any festival. */
  --fpm-live:       #ef4444;
}

/* ═══════════════════════════════════════════════════════
   1 · Base reset for all fpm containers
   ═══════════════════════════════════════════════════════ */

.fpm-timetable,
.fpm-artists,
.fpm-artist-detail,
.fpm-now-playing {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--fpm-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clickable artist elements */
[data-artist-slug] { cursor: pointer; }

/* ═══════════════════════════════════════════════════════
   2 · Shared atoms
   ═══════════════════════════════════════════════════════ */

/* Eyebrow label */
.fpm-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--fpm-primary);
  margin-bottom: 10px;
}

/* Genre tag */
.fpm-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: var(--fpm-radius);
  white-space: nowrap;
  color: var(--fpm-primary);
}

/* Status dot */
.fpm-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.fpm-dot--live {
  background: var(--fpm-live, #ef4444);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .4);
  animation: fpmPulse 1.6s ease-in-out infinite;
}

@keyframes fpmPulse {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, .4); }
  70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0);   }
}

/* Empty state */
.fpm-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fpm-text-mid) 30%, transparent);
}

/* Panel fade-in */
@keyframes fpmIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════
   3 · Day tabs
   ═══════════════════════════════════════════════════════ */

.fpm-timetable__days {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--fpm-border);
  margin-bottom: 36px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fpm-timetable__days::-webkit-scrollbar { display: none; }

.fpm-timetable__day-tab {
  position: relative;
  padding: 14px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fpm-text-mid) 45%, transparent);
  white-space: nowrap;
  transition: color .18s ease;
  flex-shrink: 0;
}
.fpm-timetable__day-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--fpm-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
.fpm-timetable__day-tab:hover { color: var(--fpm-text-mid); }
.fpm-timetable__day-tab--active {
  color: var(--fpm-text);
}
.fpm-timetable__day-tab--active::after {
  transform: scaleX(1);
}

.fpm-timetable__panel { display: none; }
.fpm-timetable__panel--active {
  display: block;
  animation: fpmIn .24s ease;
}

/* ═══════════════════════════════════════════════════════
   Timetable — Timeline view  (vertical timeline line)
   ═══════════════════════════════════════════════════════ */

/*
 * A single continuous vertical line with one node per act, in night-
 * chronological order — a flowing timeline graphic rather than a proportional
 * calendar grid. Time sits left of the line, the band card to the right; the
 * node and stage tag take the stage colour.
 *
 * --fpm-tl-rail  x-position of the vertical line (gutter width)
 */
/* ── Program view switcher (pills) ── */
.fpm-program__views {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--fpm-surface);
  border: 1px solid var(--fpm-border);
  border-radius: 100px;
  margin-bottom: 26px;
}
.fpm-program__view-pill {
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fpm-text-mid);
  padding: 9px 24px;
  border-radius: 100px;
  transition: background .18s ease, color .18s ease;
}
.fpm-program__view-pill:hover {
  color: var(--fpm-primary);
  background: color-mix(in srgb, var(--fpm-primary) 8%, transparent);
}
.fpm-program__view-pill--active {
  background: var(--fpm-primary);
  color: #fff;
}
/* Active pill on hover — darken the fill, keep white text readable
   (same behaviour as the filter pills below) */
.fpm-program__view-pill--active:hover {
  background: var(--fpm-primary-dk);
  color: #fff;
}
.fpm-program__panel { display: none; }
.fpm-program__panel--active { display: block; animation: fpmIn .24s ease; }

/* ── Shared filter bar in the standalone timeline AND the combined program view
   (the band overview keeps its own --modern sticky rule below). One bar markup
   (.fpm-artists__filters) is reused in all three contexts; pin it sticky. ── */
.fpm-timetable--timeline .fpm-artists__filters,
.fpm-program > .fpm-artists__filters {
  position: sticky;
  top: var(--tf-nav-h, 88px);
  z-index: 99;
  background: var(--fpm-bg);
  padding: 10px 0 16px;
  margin-bottom: 20px;
  /* extend the solid bg sideways so nothing bleeds through behind the bar */
  box-shadow:
    -60px 0 0 var(--fpm-bg),
     60px 0 0 var(--fpm-bg);
  transition: box-shadow .25s ease;
}
.fpm-timetable--timeline .fpm-artists__filters--stuck,
.fpm-program > .fpm-artists__filters--stuck {
  box-shadow:
    -60px 0 0 var(--fpm-bg),
     60px 0 0 var(--fpm-bg),
     0 10px 28px color-mix(in srgb, var(--fpm-text) 7%, transparent);
}

/* ── Proportional multi-stage timeline ── */
.fpm-tg {
  --fpm-tg-scale:  2px;     /* px per minute (override in Custom CSS to zoom) */
  --fpm-tg-gutter: 56px;
}
.fpm-tg__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--fpm-border);
  border-radius: var(--fpm-radius);
  scrollbar-width: thin;
}

/* sticky stage header row */
.fpm-tg__head {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--fpm-text);
  min-width: max-content;
}
.fpm-tg__corner {
  flex: 0 0 var(--fpm-tg-gutter);
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--fpm-text);
}
.fpm-tg__stagehead {
  flex: 1 1 0;
  min-width: 150px;
  position: relative;
  padding: 12px 14px;
  border-left: 1px solid color-mix(in srgb, #fff 8%, transparent);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
  overflow: hidden;
}
.fpm-tg__stagehead::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--stage-color, var(--fpm-primary));
}

/* body: time gutter + stage columns, faint hour gridlines */
.fpm-tg__body {
  display: flex;
  position: relative;
  min-width: max-content;
  background-image: repeating-linear-gradient(
    to bottom,
    color-mix(in srgb, var(--fpm-text) 6%, transparent) 0,
    color-mix(in srgb, var(--fpm-text) 6%, transparent) 1px,
    transparent 1px,
    transparent calc(60 * var(--fpm-tg-scale))
  );
}
.fpm-tg__axis {
  flex: 0 0 var(--fpm-tg-gutter);
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--fpm-bg);
  border-right: 1px solid var(--fpm-border);
}
.fpm-tg__hour {
  position: absolute;
  right: 8px;
  top: calc(var(--o) * var(--fpm-tg-scale));
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--fpm-text-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fpm-tg__col {
  flex: 1 1 0;
  min-width: 150px;
  position: relative;
  border-left: 1px solid var(--fpm-border);
}

/* flat slot block */
.fpm-tg__slot {
  position: absolute;
  left: 5px; right: 5px;
  top:    calc(var(--o) * var(--fpm-tg-scale));
  height: calc(var(--d) * var(--fpm-tg-scale));
  min-height: 30px;
  border-radius: var(--fpm-radius);
  overflow: hidden;
  background: var(--fpm-surface);
  border: 1px solid var(--fpm-border);
  border-left: 4px solid var(--stage-color, var(--fpm-primary));
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background .15s ease;
}
.fpm-tg__slot[data-artist-slug] { cursor: pointer; }
.fpm-tg__slot[data-artist-slug]:hover {
  background: color-mix(in srgb, var(--stage-color, var(--fpm-primary)) 8%, var(--fpm-surface));
}
.fpm-tg__slot-time {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--fpm-primary);
}
.fpm-tg__slot-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--fpm-text);
}
.fpm-tg__slot-name a { color: inherit; }
.fpm-tg__slot-name a:hover { color: var(--fpm-primary); }
.fpm-tg__slot-genre {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fpm-text-mid);
}
.fpm-tg__slot--headliner {
  border-left-color: var(--fpm-accent);
  background: color-mix(in srgb, var(--fpm-accent) 12%, var(--fpm-surface));
}
.fpm-tg__slot--break { opacity: .6; }
.fpm-tg__slot--break .fpm-tg__slot-name { font-style: italic; }

/* ── Vertical timeline line (single-stage days) ── */
.fpm-tl {
  position: relative;
  padding: 4px 0;
  --fpm-tl-col: 50px;   /* time column width */
  --fpm-tl-gap: 30px;   /* gap between time column and content */
}
.fpm-tl::before {
  content: '';
  position: absolute;
  top: 14px; bottom: 16px;
  left: calc(var(--fpm-tl-col) + var(--fpm-tl-gap) / 2);   /* middle of the gap */
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
    transparent 0,
    var(--fpm-border) 6%,
    var(--fpm-border) 94%,
    transparent 100%);
}
.fpm-tl-entry {
  position: relative;
  display: grid;
  grid-template-columns: var(--fpm-tl-col) 1fr;
  column-gap: var(--fpm-tl-gap);
  align-items: start;
  padding: 11px 0;
  animation: fpmIn .3s ease both;
}
.fpm-tl-entry[data-artist-slug] { cursor: pointer; }
.fpm-tl-entry__time { text-align: right; line-height: 1.05; padding-top: 1px; }
.fpm-tl-entry__start {
  display: block;
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--fpm-text);
}
.fpm-tl-entry__end {
  display: block; margin-top: 2px;
  font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--fpm-text-mid) 60%, transparent);
}
.fpm-tl-entry__body { position: relative; min-width: 0; }
.fpm-tl-entry__head { position: relative; }   /* height == band name line */
/* node: sits on the line (x=65) and is vertically centred on the band name */
.fpm-tl-entry__node {
  position: absolute;
  /* centre exactly on the line, independent of node size */
  left: calc(var(--fpm-tl-gap) / -2);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--fpm-bg);
  border: 3px solid var(--stage-color, var(--fpm-primary));
  transition: transform .18s ease;
}
.fpm-tl-entry[data-artist-slug]:hover .fpm-tl-entry__node {
  transform: translate(-50%, -50%) scale(1.3);
}
.fpm-tl-entry__name {
  display: inline-block;
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--fpm-text);
  transform-origin: left center;
  transition: transform .18s ease, color .18s ease;
}
.fpm-tl-entry[data-artist-slug]:hover .fpm-tl-entry__name {
  transform: scale(1.06);
  color: var(--fpm-primary);
}
.fpm-tl-entry__name a { color: inherit; }
.fpm-tl-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 6px;
}
.fpm-tl-entry__stage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--stage-color, var(--fpm-primary));
}
/* Location pin instead of a coloured dot — avoids the "too many circles" look */
.fpm-tl-entry__stage-icon {
  flex-shrink: 0;
  width: 11px; height: 11px;
  margin-top: -1px;
}
.fpm-tl-entry__genre {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fpm-text-mid);
}
.fpm-tl-entry--headliner .fpm-tl-entry__node {
  width: 17px; height: 17px;
  border-color: var(--fpm-accent);
  background: var(--fpm-accent);
}
.fpm-tl-entry--headliner .fpm-tl-entry__name { font-size: clamp(20px, 2.6vw, 30px); }
.fpm-tl-entry--headliner .fpm-tl-entry__start { color: var(--fpm-primary); }
.fpm-tl-entry--break { opacity: .6; }
.fpm-tl-entry--break .fpm-tl-entry__name { font-style: italic; font-weight: 700; }

@media (max-width: 600px) {
  .fpm-tl { --fpm-tl-col: 44px; --fpm-tl-gap: 22px; }
}

/* ── "Alle Tage" stack: day sections rendered one below the other ── */
.fpm-tt-stack {
  display: flex;
  flex-direction: column;
  gap: 46px;
}
.fpm-tt-day { margin: 0; }
.fpm-tt-day[hidden] { display: none; }

/* Editorial day heading — small-caps label with brand accent + hairline rule */
.fpm-tt-day__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fpm-text);
  line-height: 1.2;
}
.fpm-artists__filter-dayname {
  font-weight: 700;
  color: var(--fpm-primary);
}
.fpm-artists__filter--active .fpm-artists__filter-dayname {
  color: inherit;
}

/* Tag-Filter ist die oberste Navigationsebene und wird in beiden Ansichten –
   Bands & Timeline – als auffälligere, zweizeilige Pill dargestellt: der
   ausgeschriebene Wochentag (SAMSTAG) gross, Datum + Bezeichnung klein darunter. */
.fpm-artists__filter-group[data-group="day"] .fpm-artists__filter {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 7px 15px;
  border-width: 2px;
  min-width: 0;     /* allow shrinking below content width */
  max-width: 100%;  /* never exceed the filter row → no horizontal page scroll */
}
.fpm-artists__filter-weekday {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.05;
}
.fpm-artists__filter-daymeta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  max-width: 100%;
  font-size: 9px;
  letter-spacing: .04em;
  line-height: 1.1;
  white-space: normal;  /* long day descriptions wrap instead of forcing width */
}
.fpm-artists__filter-date {
  font-weight: 700;
  opacity: .8;
  white-space: nowrap;  /* keep the date token itself (06.08.) intact */
}
.fpm-artists__filter-daymeta .fpm-artists__filter-dayname {
  font-size: 9px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.fpm-tt-day__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fpm-primary);
}
.fpm-tt-day__heading::before {
  content: '';
  width: 22px;
  height: 3px;
  flex: 0 0 auto;
  border-radius: 2px;
  background: var(--fpm-primary);
}
.fpm-tt-day__heading::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right,
    var(--fpm-border),
    transparent 85%);
}

/* "No acts for this selection" — only shown when every section is empty.
   Visuals come from the shared .fpm-artists__empty block; this keeps only the
   hide rule so the JS hook (.fpm-tt-empty) stays decoupled from the styling. */
.fpm-tt-empty[hidden] { display: none; }

@media (max-width: 600px) {
  .fpm-tt-stack { gap: 34px; }
}

/* Reset theme link underlines on all timetable slot names */
.fpm-timetable__slot-name a,
.fpm-timetable__slot-name a:hover,
.fpm-timetable__slot-name a:visited,
.fpm-timetable__list-name a,
.fpm-timetable__list-name a:hover,
.fpm-timetable__list-name a:visited,
.fpm-timetable__compact-slot a,
.fpm-timetable__compact-slot a:hover,
.fpm-timetable__compact-slot a:visited,
.fpm-tg__slot-name a,
.fpm-tg__slot-name a:hover,
.fpm-tg__slot-name a:visited,
.fpm-tg__slot-name a:focus,
.fpm-tl-entry__name a,
.fpm-tl-entry__name a:hover,
.fpm-tl-entry__name a:visited,
.fpm-tl-entry__name a:focus {
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

@media (max-width: 600px) {
  .fpm-tg { --fpm-tg-gutter: 44px; --fpm-tg-scale: 1.7px; }
  .fpm-tg__stagehead, .fpm-tg__col { min-width: 130px; }
  .fpm-program__view-pill { padding: 9px 18px; }
}

/* ═══════════════════════════════════════════════════════
   4 · Timetable — Grid view  (Bühnen-Spalten)
   ═══════════════════════════════════════════════════════ */

.fpm-timetable__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--fpm-border);
  border: 1px solid var(--fpm-border);
}

/* Stage column */
.fpm-timetable__stage-col {
  background: var(--fpm-bg);
  display: flex;
  flex-direction: column;
}

/* Stage header */
.fpm-timetable__stage-header {
  padding: 16px 18px 14px;
  background: var(--fpm-text);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.fpm-timetable__stage-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--stage-color, var(--fpm-primary));
}
.fpm-timetable__stage-header-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 3px;
}
.fpm-timetable__stage-header-name {
  display: block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.1;
  color: #fff;
}

/* Slot list */
.fpm-timetable__stage-slots {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1px;
  background: var(--fpm-border);
}

/* Individual slot */
.fpm-timetable__slot {
  background: #fff;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: background .15s;
  cursor: default;
}
.fpm-timetable__slot::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .15s;
}
.fpm-timetable__slot:hover { background: color-mix(in srgb, var(--fpm-primary) 3%, transparent); }
.fpm-timetable__slot:hover::before { background: var(--fpm-primary); }

.fpm-timetable__slot--headliner {
  background: var(--fpm-bg);
}
.fpm-timetable__slot--headliner::before {
  background: var(--fpm-accent);
}
.fpm-timetable__slot--headliner .fpm-timetable__slot-name {
  font-size: 1.05em;
  color: var(--fpm-text);
}

.fpm-timetable__slot--break {
  background: color-mix(in srgb, var(--fpm-primary) 3%, transparent);
  opacity: .6;
}
.fpm-timetable__slot--break .fpm-timetable__slot-name { font-style: italic; }

.fpm-timetable__slot-time {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--fpm-primary);
  text-transform: uppercase;
}
.fpm-timetable__slot-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
  color: var(--fpm-text);
}
.fpm-timetable__slot-genre {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fpm-text-mid) 40%, transparent);
  margin-top: 1px;
}

.fpm-timetable__empty-slot {
  background: #fff;
  padding: 28px 16px;
  text-align: center;
  font-size: 11px;
  color: color-mix(in srgb, var(--fpm-text-mid) 20%, transparent);
  letter-spacing: .08em;
  font-weight: 600;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════
   5 · Timetable — List view
   ═══════════════════════════════════════════════════════ */

.fpm-timetable__list {
  display: flex;
  flex-direction: column;
}

.fpm-timetable__list-item {
  display: grid;
  grid-template-columns: 70px auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--fpm-border);
  transition: padding-left .15s;
  position: relative;
}
.fpm-timetable__list-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--fpm-primary);
  transition: width .15s;
}
.fpm-timetable__list-item:hover {
  padding-left: 12px;
}
.fpm-timetable__list-item:hover::before { width: 3px; }

.fpm-timetable__list-item--break {
  opacity: .5;
  font-style: italic;
}
.fpm-timetable__list-item--break::before { display: none; }

.fpm-timetable__list-item--headliner .fpm-timetable__list-name {
  font-size: clamp(20px, 2.5vw, 28px);
}

.fpm-timetable__list-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--fpm-primary);
  letter-spacing: .08em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.fpm-timetable__list-stage {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--fpm-radius);
  background: color-mix(in srgb, var(--stage-color, #F07828) 11%, transparent);
  color: var(--stage-color, #F07828);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.fpm-timetable__list-name {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}
.fpm-timetable__list-genre {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fpm-text-mid) 35%, transparent);
  text-align: right;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   6 · Timetable — Compact view
   ═══════════════════════════════════════════════════════ */

.fpm-timetable__compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--fpm-border);
}
.fpm-timetable__compact-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: stretch;
  border-bottom: 1px solid var(--fpm-border);
}
.fpm-timetable__compact-row:last-child { border-bottom: none; }

.fpm-timetable__compact-stage {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 14px 16px;
  border-left: 3px solid var(--stage-color, var(--fpm-primary));
  color: var(--stage-color, var(--fpm-primary));
  background: color-mix(in srgb, var(--fpm-primary) 3%, transparent);
  display: flex;
  align-items: center;
}
.fpm-timetable__compact-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  align-items: center;
  background: #fff;
}
.fpm-timetable__compact-slot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: var(--fpm-bg);
  border-radius: var(--fpm-radius);
  font-size: 13px;
  transition: background .12s;
}
.fpm-timetable__compact-slot:hover { background: color-mix(in srgb, var(--fpm-primary) 9%, transparent); }
.fpm-timetable__compact-slot strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--fpm-primary);
  letter-spacing: .06em;
}

/* ═══════════════════════════════════════════════════════
   7 · Artist filters — grouped, combinable (Tag × Bühne × Genre)
   ═══════════════════════════════════════════════════════ */

.fpm-artists__filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 24px;
}

/* One row per filter dimension */
.fpm-artists__filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 6px;
}

/* Eyebrow label — aligned column on the left */
.fpm-artists__filter-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fpm-text-mid) 28%, transparent);
  width: 42px;
  flex-shrink: 0;
  line-height: 1;
}

/* Base filter button — pill style */
.fpm-artists__filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid color-mix(in srgb, var(--fpm-text-mid) 18%, transparent);
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fpm-text-mid) 50%, transparent);
  padding: 4px 11px;
  line-height: 1;
  white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.fpm-artists__filter:hover {
  border-color: var(--fpm-primary);
  color: var(--fpm-primary);
  background: color-mix(in srgb, var(--fpm-primary) 6%, transparent);
}
.fpm-artists__filter--active {
  background: var(--fpm-primary);
  border-color: var(--fpm-primary);
  color: #fff;
}
.fpm-artists__filter--active:hover {
  background: var(--fpm-primary-dk);
  border-color: var(--fpm-primary-dk);
  color: #fff;
}

/* "Alle" — slightly more weight */
.fpm-artists__filter--all {
  font-weight: 900;
  letter-spacing: .05em;
}

/* Size tiers based on artist count per genre */
.fpm-artists__filter--lg { font-size: 11.5px; font-weight: 800; }
.fpm-artists__filter--md { font-size: 10.5px; font-weight: 700; }
.fpm-artists__filter--sm { font-size: 9.5px;  font-weight: 600; opacity: .85; }

/* Collapsed long-tail genres — hidden until the group is expanded.
   An active hidden chip stays visible so a selected genre never disappears
   when the row is collapsed again. */
.fpm-artists__filter--more { display: none; }
.fpm-artists__filter-group.is-expanded .fpm-artists__filter--more,
.fpm-artists__filter--more.fpm-artists__filter--active { display: inline-flex; }

/* „+N weitere" / „weniger" toggle — reads as an action, not a filter pill */
.fpm-artists__more-toggle {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fpm-primary);
  padding: 4px 6px;
  line-height: 1;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: opacity .16s ease;
}
.fpm-artists__more-toggle:hover { opacity: .7; }
.fpm-artists__more-toggle-less { display: none; }
.fpm-artists__filter-group.is-expanded .fpm-artists__more-toggle-show { display: none; }
.fpm-artists__filter-group.is-expanded .fpm-artists__more-toggle-less { display: inline; }

/* Stage colour dot on Bühne filter buttons */
.fpm-artists__filter[data-stage]:not([data-stage="all"])::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--filter-stage-color, var(--fpm-primary));
  flex-shrink: 0;
}
/* When stage pill is active, keep dot white */
.fpm-artists__filter--active[data-stage]::before {
  background: rgba(255, 255, 255, .7);
}

/* Superscript count next to "Alle" */
.fpm-artists__filter-count {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  color: inherit;
  opacity: .7;
  vertical-align: super;
  margin-left: 1px;
  line-height: 1;
}

/* Result count — shown between filters and grid when a filter is active */
.fpm-artists__count {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fpm-text-mid) 32%, transparent);
  margin: 0 0 12px;
  padding: 0;
  transition: opacity .22s ease;
}

/* Filter option that would yield zero results — greyed out, unclickable */
.fpm-artists__filter--unavailable {
  opacity: .22;
  cursor: not-allowed;
  pointer-events: none;
  border-color: color-mix(in srgb, var(--fpm-text-mid) 10%, transparent);
}

/* ═══════════════════════════════════════════════════════
   7c · Manual search field — primary action atop the filter bar
   Sits as the first row of .fpm-artists__filters; the facet pills follow
   below. On mobile it is lifted out of the collapsible body (always visible).
   ═══════════════════════════════════════════════════════ */
.fpm-artists__search {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 440px;
}
.fpm-artists__search-icon {
  position: absolute;
  left: 15px;
  width: 16px;
  height: 16px;
  color: color-mix(in srgb, var(--fpm-text-mid) 42%, transparent);
  pointer-events: none;
  transition: color .18s ease;
}
.fpm-artists__search:focus-within .fpm-artists__search-icon { color: var(--fpm-primary); }
.fpm-artists__search-input {
  width: 100%;
  height: 42px;
  padding: 0 40px 0 42px;
  border: 1.5px solid color-mix(in srgb, var(--fpm-text-mid) 17%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--fpm-text) 2.5%, transparent);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--fpm-text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.fpm-artists__search-input::placeholder {
  color: color-mix(in srgb, var(--fpm-text-mid) 46%, transparent);
  font-weight: 500;
}
.fpm-artists__search-input:hover { border-color: color-mix(in srgb, var(--fpm-text-mid) 30%, transparent); }
.fpm-artists__search-input:focus {
  border-color: var(--fpm-primary);
  background: var(--fpm-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fpm-primary) 13%, transparent);
}
/* Hide the browser's native search affordances — we render our own clear "×". */
.fpm-artists__search-input::-webkit-search-cancel-button,
.fpm-artists__search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.fpm-artists__search-clear {
  position: absolute;
  right: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fpm-text-mid) 13%, transparent);
  color: var(--fpm-text-mid);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, transform .12s ease;
}
.fpm-artists__search-clear svg { width: 13px; height: 13px; }
.fpm-artists__search-clear:hover { background: var(--fpm-primary); color: #fff; }
.fpm-artists__search-clear:active { transform: scale(.9); }
.fpm-artists__search-clear[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════
   7d · Empty state — nothing matches the current search + filters
   ═══════════════════════════════════════════════════════ */
.fpm-artists__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 54px 20px 60px;
  animation: fpmIn .26s ease;
}
.fpm-artists__empty[hidden] { display: none; }
.fpm-artists__empty-icon {
  width: 38px;
  height: 38px;
  color: color-mix(in srgb, var(--fpm-text-mid) 30%, transparent);
  margin-bottom: 10px;
}
.fpm-artists__empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--fpm-text);
}
.fpm-artists__empty-text {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fpm-text-mid);
}
.fpm-artists__empty-reset {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  border: 1.5px solid var(--fpm-primary);
  background: var(--fpm-primary);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 18px;
  line-height: 1;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.fpm-artists__empty-reset:hover { background: var(--fpm-primary-dk); border-color: var(--fpm-primary-dk); }
.fpm-artists__empty-reset:active { transform: translateY(1px); }

/* ═══════════════════════════════════════════════════════
   8 · Artist grid + cards
   ═══════════════════════════════════════════════════════ */

/* ── Modern style container ── */
.fpm-artists--modern {
  padding: 0;
}

/* Sticky filter bar — sits below the fixed nav (var(--tf-nav-h)), solid background */
.fpm-artists--modern .fpm-artists__filters {
  position: sticky;
  top: var(--tf-nav-h, 88px);
  z-index: 99;
  background: var(--fpm-bg);
  padding: 10px 0 14px;
  margin-bottom: 20px;
  /* Wide solid mask so card shadows never bleed past the bar — no drop shadow. */
  box-shadow:
    -150px 0 0 var(--fpm-bg),
     150px 0 0 var(--fpm-bg);
  transition: box-shadow .28s ease;
}
/* Stuck: just a clean hairline — crisp, light, no heavy shadow. */
.fpm-artists--modern .fpm-artists__filters--stuck {
  box-shadow:
    -150px 0 0 var(--fpm-bg),
     150px 0 0 var(--fpm-bg),
     0 1px 0 color-mix(in srgb, var(--fpm-primary) 16%, transparent);
}

/* ═══════════════════════════════════════════════════════
   7b · Collapsible filter bar (mobile) — progressive enhancement
   The toggle header + body/inner wrappers are injected by JS. On desktop
   the toggle is hidden and the groups show exactly as before; on mobile the
   bar collapses to a single compact row that expands on tap.
   ═══════════════════════════════════════════════════════ */

/* Inner holds the original .fpm-artists__filter-group rows (was the nav itself). */
.fpm-artists__filters-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Reset control — clears all filter groups. Shown on desktop and mobile
   whenever at least one filter is active, so the aggregate state and the way
   back to "all" are always visible (not just the individual orange chips). */
.fpm-artists__filters-reset {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  border: 1.5px solid color-mix(in srgb, var(--fpm-primary) 38%, transparent);
  border-radius: 100px;
  background: color-mix(in srgb, var(--fpm-primary) 7%, transparent);
  color: var(--fpm-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px 5px 8px;
  line-height: 1;
  transition: background .16s ease, border-color .16s ease;
}
.fpm-artists__filters-reset:hover {
  background: color-mix(in srgb, var(--fpm-primary) 14%, transparent);
  border-color: var(--fpm-primary);
}
.fpm-artists__filters-reset[hidden] { display: none; }
.fpm-artists__filters-reset-icon { width: 13px; height: 13px; flex-shrink: 0; }
.fpm-artists__filters-reset-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--fpm-primary);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
}

/* Toggle header: mobile-only — hidden by default. */
.fpm-artists__filters-toggle { display: none; }

@media (max-width: 600px) {
  /* Tighten the sticky bar itself — the whole point is to reclaim space. */
  .fpm-artists--modern .fpm-artists__filters,
  .fpm-timetable--timeline .fpm-artists__filters,
  .fpm-program > .fpm-artists__filters {
    padding: 8px 0;
    margin-bottom: 14px;
  }

  /* Search field stays full-width above the collapsed pills; 16px font keeps
     iOS from zooming the viewport on focus. */
  .fpm-artists__search { max-width: none; }
  .fpm-artists__search-input { height: 46px; font-size: 16px; }
  .fpm-artists__empty { padding: 44px 16px 50px; }
  .fpm-artists__empty-title { font-size: 17px; }

  /* The compact pill-row toggle. */
  .fpm-artists__filters-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid color-mix(in srgb, var(--fpm-text-mid) 16%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fpm-text) 3%, transparent);
    color: var(--fpm-text);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .18s ease, background .18s ease;
  }
  .fpm-artists__filters--has-active .fpm-artists__filters-toggle {
    border-color: color-mix(in srgb, var(--fpm-primary) 55%, transparent);
    background: color-mix(in srgb, var(--fpm-primary) 7%, transparent);
  }
  .fpm-artists__filters-toggle-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--fpm-primary);
  }
  .fpm-artists__filters-toggle-label {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  /* Active selection preview — ellipsised, fills the middle. */
  .fpm-artists__filters-toggle-summary {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--fpm-text-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fpm-artists__filters-toggle-summary:empty { display: none; }
  /* Count badge. */
  .fpm-artists__filters-toggle-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: var(--fpm-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
  }
  /* Chevron — pinned right, rotates when open. */
  .fpm-artists__filters-toggle-chev {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: auto;
    color: var(--fpm-text-mid);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  }
  .fpm-artists__filters.is-open .fpm-artists__filters-toggle-chev {
    transform: rotate(180deg);
  }

  /* Collapsible body — max-height reveal. (The grid 0fr→1fr trick collapses
     here: the nested flex-wrap filter groups don't contribute intrinsic height
     to an `fr` track, so the pills stayed clipped at the inner's padding. A
     max-height transition is bulletproof across engines; the 1000px cap sits
     well above the tallest possible bar, so nothing ever clips when open.) */
  .fpm-artists__filters-body {
    overflow: hidden;
    max-height: 0;
    transition: max-height .34s cubic-bezier(.4, 0, .2, 1);
  }
  .fpm-artists__filters.is-open .fpm-artists__filters-body {
    max-height: 1000px;
  }
  .fpm-artists__filters-inner {
    padding-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fpm-artists__filters-body,
  .fpm-artists__filters-toggle-chev { transition: none; }
}

/* ── Dynamic, responsive mosaic grid ──
   Fixed column count per breakpoint + dense auto-flow so the larger feature
   tiles (headliner 2×2, co-headliner 2×1) get packed without leaving holes.
   Adapts to any band count / tier mix — fully white-label. */
.fpm-artists__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);   /* fallback for classic / minimal */
  gap: 4px;
  padding: 0;
}
.fpm-artists--modern .fpm-artists__grid {
  --fpm-cols: 4;
  grid-template-columns: repeat(var(--fpm-cols), 1fr);
  grid-auto-flow: dense;
}
@media (max-width: 1023px) { .fpm-artists--modern .fpm-artists__grid { --fpm-cols: 3; } }
@media (max-width:  639px) { .fpm-artists--modern .fpm-artists__grid { --fpm-cols: 2; gap: 3px; } }

/* ── Modern card: square tile, image fills it, cap overlaid ── */

.fpm-artists--modern .fpm-artist-card {
  grid-column: span 1;
  grid-row: span 1;
  aspect-ratio: 5 / 6;     /* portrait baseline → room for names, even rows */
  position: relative;      /* cap positioned absolute inside */
  background: var(--fpm-text);
  overflow: hidden;
  cursor: pointer;
  /* Stabilises GPU compositing so the scaled tile doesn't show a hairline seam
     (Safari / non-100% zoom) once the hover transform settles. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity .3s ease,
              transform .35s cubic-bezier(.16, 1, .3, 1),
              box-shadow .35s ease;
}
/* Hover: gently scale the hovered card and softly dim the rest (spotlight),
   for a smooth, editorial feel rather than one card jumping. */
.fpm-artists--modern .fpm-artist-card:hover {
  transform: scale(1.05) translateZ(0);
  z-index: 3;
}
.fpm-artists--modern .fpm-artists__grid:has(.fpm-artist-card:hover) .fpm-artist-card:not(:hover) {
  opacity: .45;
}
/* Overlay offen: alle Karten ausser der aktiven (data-focused) ausgrauen — inkl. Headliner */
body.fpm-overlay-active .fpm-artists--modern .fpm-artist-card:not([data-focused="true"]) {
  opacity: .45;
  transition: opacity .3s ease;
}

/* ── Feature tiles — size scales with billing tier ── */
.fpm-artists--modern .fpm-artist-card--headliner {   /* big 2×2 hero square */
  grid-column: span 2;
  grid-row: span 2;
}
.fpm-artists--modern .fpm-artist-card--tier2 {        /* co-headliner: 2×1 wide */
  grid-column: span 2;
  grid-row: span 1;
  aspect-ratio: 5 / 3;
}
/* tier3 (support) + tier0 (rest) keep the 1×1 square default */

/* ── Image section: aspect ratio via padding-top, fills entire card ── */
.fpm-artist-card__image {
  position: relative;
  overflow: hidden;
  background: var(--fpm-text);
}
/* Modern: the tile itself carries the aspect-ratio, so the image just
   fills it edge-to-edge (no padding-top trick). */
.fpm-artists--modern .fpm-artist-card__image {
  position: absolute;
  inset: 0;
  padding: 0;
}

/* Aspect ratio classes — padding-top trick keeps img absolutely positioned */
.fpm-artist-card__image--wide      { padding-top: 57%;   } /* ~16:9 — headliner, 1.5× original */
.fpm-artist-card__image--landscape { padding-top: 75%;   } /* 3/4 — wide support card    */
.fpm-artist-card__image--portrait  { padding-top: 133%;  } /* 4/3 → use 133% for narrow  */

.fpm-artist-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Keep the image on a stable raster layer so the hover zoom can't reveal a
     GPU-tile seam down the middle of the tile. */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.25, .46, .45, .94),
              opacity .4s ease;
  opacity: .92;
}
.fpm-artists--modern .fpm-artist-card:hover .fpm-artist-card__image img {
  transform: scale(1.04) translateZ(0);
  opacity: .8;
}

/* Editorialer Orange-Floor — identisch zum Social-Editor-Band-Post (.fm-photofloor):
   Foto bleibt oben natürlich, dunkler Orange-Block steigt unter Name + Info hoch. */
.fpm-artists--modern .fpm-artist-card__image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Editorialer Floor unten (dunkles Orange → Brand-Braun). Werte = CD-Tokens.
     Kein dunkler Top-Scrim mehr — Foto bleibt oben sauber. */
  /* --fpm-floor-h / --fpm-floor-x werden per Karte inline randomisiert
     (PHP, wp_rand), damit der Orange-Floor nicht auf jeder Kachel exakt
     gleich „radikal" hochsteigt. Fallback = bisherige Standardwerte. */
  background:
    radial-gradient(ellipse 120% var(--fpm-floor-h, 82%) at var(--fpm-floor-x, 50%) 112%,
      #F5C155              0%,
      #F07828             28%,
      #F07828             50%,
      rgba(216,72,16,.5)  72%,
      transparent         86%
    );
  transition: opacity .3s;
}
/* Korn-Textur (analog/Riso) — identisch zum Social-Editor (.fm-grain), löst das alte
   Punkt-Raster ab. Geteiltes CD-Token --tf-grain (Fallback inline für Standalone). */
.fpm-artists--modern .fpm-artist-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: var(--tf-grain, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"));
  background-size: 180px 180px;
  mix-blend-mode: soft-light;
  opacity: .5;
}

/* ── Cap: absolute overlay at bottom of image (modern only) ── */
/* Classic/minimal use __body; cap hidden there */
.fpm-artist-card__cap { display: none; }

.fpm-artists--modern .fpm-artist-card__cap {
  display: flex;
  flex-direction: column;
  /* Eine Quelle für alle vertikalen Abstände: Name → Info. Etwas grösser als der
     Zeilenabstand der Info, weil zwischen zwei Icon-Zeilen ~0.2em mehr interne
     Kästchen-Höhe steckt als zwischen Name und der ersten Icon-Zeile. So wirken
     Name→Datum und Datum→Bühne optisch gleich gross. */
  gap: 6px;
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 12px 14px 15px;
  background: none;       /* gradient handles readability */
}

/* Headliner cap: massive type, aber straffer Block — Name + Infos teilen sich
   exakt dieselbe linke Kante (Padding links == übrige Tiers, nur grosszügiger). */
.fpm-artists--modern .fpm-artist-card--headliner .fpm-artist-card__cap {
  padding: clamp(16px, 2.2vw, 30px) clamp(16px, 2.4vw, 30px) clamp(16px, 2.2vw, 28px);
}
/* Bandname in Display-Schrift (Anton) + Versalien — exakt wie der Social-Band-Post.
   Anton hat nur Schnitt 400 → font-weight:400 (kein Faux-Bold), leicht offenes Tracking. */
.fpm-artists--modern .fpm-artist-card__name {
  text-transform: uppercase;
  font-family: var(--tf-font-display, 'Anton', 'Inter', sans-serif);
  font-weight: 400;
  letter-spacing: .02em;
}
/* Names never overflow: wrap softly (break only over-long words, no mid-name
   splits) and hard-cap the line count so the cap can't grow past the tile. */
.fpm-artists--modern .fpm-artist-card__name {
  /* Break long names at proper syllable points WITH a hyphen (lang="de" from
     <html> drives the dictionary), but conservatively: only genuinely long
     words, never into tiny fragments — at least 4 characters on each side of
     the hyphen. break-word stays only as the last-resort fallback. */
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-lines: 2;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* Versalien (Anton, text-transform:uppercase) → keine echten Unterlängen,
     darum nur minimaler Puffer. Hält den Name dicht an der Info-Zeile. */
  padding-bottom: .04em;
  /* Versalien mit Umlaut (Ä/Ö/Ü): die Trema-Punkte sitzen ÜBER der Versalhöhe.
     display:-webkit-box + overflow:hidden (für den 2-Zeilen-Clamp) schneidet die
     obere Zeilenkante ab → bei knappem line-height fielen die Punkte weg ("ZÄME"
     wurde zu "ZAME"). Etwas Kopfraum (padding-top) gibt den Punkten Platz; das
     negative margin-top hält die optische Position exakt gleich. */
  padding-top: .2em;
  /* Konservativer Fallback für die linke Kante; JS (trimNameInk) misst die echte
     Tinten-Seitenmarge im gerenderten Anton und überschreibt margin-left pixelgenau. */
  margin: -.2em 0 0 -.02em;
  text-shadow: none;
}
.fpm-artists--modern .fpm-artist-card--headliner .fpm-artist-card__name {
  font-size: clamp(48px, 5.6vw, 92px);   /* Anton ist schmal → deutlich grösser als die übrigen Tiers */
  letter-spacing: .01em;
  line-height: .88;
  -webkit-line-clamp: 2;
  text-wrap: balance;
}

/* Rest / untiered name (1×1 square) — smallest step */
.fpm-artists--modern .fpm-artist-card:not(.fpm-artist-card--headliner):not(.fpm-artist-card--tier2):not(.fpm-artist-card--tier3) .fpm-artist-card__name {
  font-size: clamp(12px, 1.3vw, 16px);
}
/* Billing tiers — name size steps down from headliner → co-headliner → support */
.fpm-artists--modern .fpm-artist-card--tier2 .fpm-artist-card__name { font-size: clamp(15px, 1.6vw, 23px); }
.fpm-artists--modern .fpm-artist-card--tier3 .fpm-artist-card__name { font-size: clamp(13px, 1.4vw, 18px); }

/* No social links in grid overview */
.fpm-artists--modern .fpm-artist-card__links { display: none; }

/* Info block (date · time / stage) with line icons — mirrors the social
   "Band-Post" graphic's .fm-info row, but laid out for the tighter grid:
   a compact meta line (date · time, never wraps) plus a stage line that may
   wrap. Em-based icons + dividers scale with the per-tier font-size. */
.fpm-artist-card__info {
  display: flex;
  flex-direction: column;
  gap: 5px;            /* Abstand zwischen mehreren Slot-Zeilen = Zeilenabstand */
  margin-top: 0;       /* Name → Info regelt der Cap-Gap, nicht hier */
}
.fpm-artist-card__inforow {
  display: flex;
  flex-wrap: wrap;            /* one line where it fits, wraps on narrow tiles */
  align-items: center;
  /* row-gap = Zeilenabstand Datum/Zeit → Bühne (bei Umbruch); column-gap grösser
     für die horizontale Trennung Datum · Zeit. Der row-gap ist bewusst kleiner als
     der Cap-Gap, weil die Icon-Zeilen zusätzliche interne Höhe mitbringen. */
  gap: 2px clamp(4px, .5vw, 9px);
  font-size: clamp(7.5px, .64vw, 9.5px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  /* Icon-Tinte sitzt ~0.13em im 1.2em-Kästchen → Zeile minim nach links
     ziehen, damit die Icon-Kante bündig auf der Cap-/Bandnamen-Kante sitzt. */
  margin-left: -.13em;
}
.fpm-artist-card__info-seg {
  display: inline-flex;
  align-items: center;
  gap: .42em;
  min-width: 0;
  white-space: nowrap;        /* date/time never break mid-token */
}
/* Stage segment may wrap to a second line on narrow tiles; the pin then rides
   the first line of the stage name. Der Pin-Pfad beginnt bei x=5 (vs. x=3.5 bei
   Kalender/Uhr) → 0.075em weiter rechts. Negative Marge zieht die Pin-Tinte exakt
   auf dieselbe linke Kante wie die Datum/Zeit-Icons (kein 0.15em-Einzug mehr). */
.fpm-artist-card__info-seg--stage { white-space: normal; align-items: flex-start; margin-left: -.075em; }
.fpm-artist-card__info-seg--stage svg { margin-top: .1em; }
.fpm-artist-card__info-seg svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Pin rides the first line of a wrapping stage name, not its vertical centre. */
.fpm-artist-card__inforow--stage .fpm-artist-card__info-seg svg { margin-top: .1em; }
.fpm-artist-card__info-sep {
  flex: none;
  width: 1px;
  height: 1.1em;
  background: rgba(255, 255, 255, .45);
}
/* Trenner vor der Bühne: standardmässig aus (verhindert hängenden Strich bei
   Umbruch). JS blendet ihn ein, sobald die Bühne auf derselben Zeile steht. */
.fpm-artist-card__info-sep--stage { display: none; }
.fpm-artist-card__inforow--oneline .fpm-artist-card__info-sep--stage { display: block; }
/* Tier-scaled info to sit under the matching name size. */
.fpm-artists--modern .fpm-artist-card--headliner .fpm-artist-card__inforow {
  font-size: clamp(8.5px, .76vw, 10.5px);
  /* row-gap klein halten (Datum → Bühne); nur die horizontale Trennung Datum · Zeit
     darf grösser sein. Mit Preview gemessen: 2px row-gap wirkt optisch gleich gross
     wie der 6px Cap-Gap (Name → Datum), weil die Icon-Zeilen vertikal mehr Kästchen-
     Höhe mitbringen. Vorher liess das Einzel-`gap` den Bühnen-Abstand grösser wirken. */
  gap: 2px clamp(5px, .6vw, 9px);
}
.fpm-artists--modern .fpm-artist-card--tier2 .fpm-artist-card__inforow {
  font-size: clamp(8px, .7vw, 10px);
}

/* ── Mobile (phones / small tablets) name + meta sizing ──
   MUST come after the desktop tier rules above: at ≤767px the per-tier desktop
   name/inforow rules have equal specificity, so source order decides — placing
   this block last lets it win for every tier.

   Principle: only the NAME carries the tier hierarchy (a deliberate, monotonic
   per-tier scale, each step still larger than the desktop default). The meta row
   (date · time · stage) is secondary info and is UNIFORM across every tier — it
   must read identically on a tiny support card and on the headliner. The three
   meta selectors share one value precisely so the desktop headliner / tier2 rules
   can't reintroduce a step. (Icons are em-based, so they stay uniform too.) The
   JS auto-fit only shrinks individual long names as far as needed. */
@media (max-width: 767px) {
  /* Names — small/mid tiers lifted another step; headliner unchanged so the
     hierarchy stays monotonic (normal < tier3 < tier2 < headliner). */
  .fpm-artists--modern .fpm-artist-card:not(.fpm-artist-card--headliner):not(.fpm-artist-card--tier2):not(.fpm-artist-card--tier3) .fpm-artist-card__name {
    font-size: clamp(40px, 11vw, 50px);
  }
  .fpm-artists--modern .fpm-artist-card--tier3 .fpm-artist-card__name { font-size: clamp(44px, 12vw, 56px); }
  .fpm-artists--modern .fpm-artist-card--tier2 .fpm-artist-card__name { font-size: clamp(58px, 15.5vw, 82px); }
  .fpm-artists--modern .fpm-artist-card--headliner .fpm-artist-card__name { font-size: clamp(96px, 25.5vw, 162px); }

  /* Give the bigger names vertical room so the JS auto-fit keeps them large
     instead of shrinking them to fit a 2-line box in the narrow tiles. */
  .fpm-artists--modern .fpm-artist-card:not(.fpm-artist-card--headliner) .fpm-artist-card__name {
    -webkit-line-clamp: 3;
  }

  /* Meta row — one uniform size for ALL tiers. */
  .fpm-artists--modern .fpm-artist-card__inforow,
  .fpm-artists--modern .fpm-artist-card--tier2 .fpm-artist-card__inforow,
  .fpm-artists--modern .fpm-artist-card--headliner .fpm-artist-card__inforow {
    font-size: clamp(11px, 2.9vw, 13px);
  }
}

/* Genre tag: fallback when no slots assigned */
.fpm-artist-card__genre {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fpm-accent);
  margin-top: 4px;
  opacity: .8;
}

/* Artist name */
.fpm-artist-card__name {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: #fff;
}
.fpm-artist-card__name a {
  color: inherit;
  text-decoration: none;
  background-image: none;
  transition: color .18s;
}
/* Override theme link styling inside artist card names: the band name must be
   white like on the social "Band-Post" graphic, never the theme's link colour. */
.fpm-artists--modern .fpm-artist-card__name a,
.fpm-artists--modern .fpm-artist-card__name a:hover,
.fpm-artists--modern .fpm-artist-card__name a:visited,
.fpm-artists--modern .fpm-artist-card__name a:focus {
  color: #fff !important;
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Origin */
.fpm-artist-card__origin {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .48);
  margin-top: 5px;
}

/* YouTube video: minimalistisch, responsive, rel=0 + nocookie = keine Empfehlungen */
.fpm-artist-card__video {
  margin-top: 10px;
  margin-bottom: 8px;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, .3);
}
.fpm-artist-card__video iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Social links: in the cap, always visible */
.fpm-artist-card__links {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  opacity: .55;
  transition: opacity .2s ease;
}
.fpm-artists--modern .fpm-artist-card:hover .fpm-artist-card__links {
  opacity: 1;
}

/* Cards with no image: branded gradient fills the image area */
.fpm-artists--modern .fpm-artist-card:not(:has(.fpm-artist-card__image img)) .fpm-artist-card__image,
.fpm-artists--modern .fpm-artist-card .fpm-artist-card__image:not(:has(img[src])) {
  background: linear-gradient(145deg, var(--fpm-primary-dk) 0%, var(--fpm-text) 70%);
}
/* Cards with no image at all: show cap only */
.fpm-artists--modern .fpm-artist-card:not(:has(.fpm-artist-card__image)) {
  background: linear-gradient(145deg, var(--fpm-primary-dk) 0%, var(--fpm-text) 65%);
}

/* Card entry animation — staggered fade-up */
/* Entrance fades in only — it must NOT animate transform, otherwise the
   animation's value overrides the :hover scale and the cards stop reacting. */
@keyframes fpmCardIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fpm-artists--modern .fpm-artist-card {
  animation: fpmCardIn .38s ease backwards;
}
.fpm-artists--modern .fpm-artists__grid > :nth-child(1)   { animation-delay: .00s; }
.fpm-artists--modern .fpm-artists__grid > :nth-child(2)   { animation-delay: .04s; }
.fpm-artists--modern .fpm-artists__grid > :nth-child(3)   { animation-delay: .08s; }
.fpm-artists--modern .fpm-artists__grid > :nth-child(4)   { animation-delay: .12s; }
.fpm-artists--modern .fpm-artists__grid > :nth-child(5)   { animation-delay: .15s; }
.fpm-artists--modern .fpm-artists__grid > :nth-child(6)   { animation-delay: .18s; }
.fpm-artists--modern .fpm-artists__grid > :nth-child(n+7) { animation-delay: .20s; }

/* Body: only used by classic + minimal layouts */
.fpm-artist-card__body         { display: none; }
.fpm-artists--modern .fpm-artist-card__body  { display: none; }
/* Overlay: legacy, hidden in modern */
.fpm-artists--modern .fpm-artist-card__overlay { display: none; }
/* No-image fallback: the tile already has height via aspect-ratio, so keep the
   cap pinned to the bottom over the branded gradient background. */
.fpm-artists--modern .fpm-artist-card:not(:has(.fpm-artist-card__image)) .fpm-artist-card__cap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ── Classic card ── */

.fpm-artists--classic .fpm-artist-card {
  background: #fff;
  border: 1px solid var(--fpm-border);
  border-radius: var(--fpm-radius);
  overflow: hidden;
  transition: box-shadow .22s ease, transform .22s ease;
}
.fpm-artists--classic .fpm-artist-card:hover {
  box-shadow: var(--fpm-shadow-md);
  transform: translateY(-4px);
}
.fpm-artists--classic .fpm-artist-card__image { aspect-ratio: 4 / 3; }
.fpm-artists--classic .fpm-artist-card__image img { opacity: 1; transition: transform .4s ease; }
.fpm-artists--classic .fpm-artist-card__image::after { display: none; }
.fpm-artists--classic .fpm-artist-card:hover .fpm-artist-card__image img { transform: scale(1.04); }
.fpm-artists--classic .fpm-artist-card__overlay { display: none; }
.fpm-artists--classic .fpm-artist-card__body {
  display: block;
  padding: 16px 18px 18px;
  border-top: 3px solid var(--fpm-border);
}
.fpm-artists--classic .fpm-artist-card__name {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.015em;
  color: var(--fpm-text);
  margin: 0 0 4px;
}
.fpm-artists--classic .fpm-artist-card__genre {
  opacity: 1;
  transform: none;
  font-size: 10px;
  color: var(--fpm-primary);
  letter-spacing: .14em;
}
.fpm-artists--classic .fpm-artist-card__origin { color: var(--fpm-text-mid); opacity: .55; }
.fpm-artists--classic .fpm-artist-card__links {
  opacity: 1;
  transform: none;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid var(--fpm-border);
}

/* ── Minimal card ── */

.fpm-artists--minimal .fpm-artist-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--fpm-border);
  transition: padding-left .15s;
  cursor: pointer;
  position: relative;
}
.fpm-artists--minimal .fpm-artist-card:hover { padding-left: 8px; }
.fpm-artists--minimal .fpm-artist-card__image {
  width: 56px;
  height: 56px;
  aspect-ratio: 1;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
}
.fpm-artists--minimal .fpm-artist-card__image::after { display: none; }
.fpm-artists--minimal .fpm-artist-card__image img { opacity: 1; transition: none; }
.fpm-artists--minimal .fpm-artist-card__overlay { display: none; }
.fpm-artists--minimal .fpm-artist-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fpm-artists--minimal .fpm-artist-card__name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--fpm-text);
}
.fpm-artists--minimal .fpm-artist-card__genre {
  opacity: 1;
  transform: none;
  color: var(--fpm-primary);
}
.fpm-artists--minimal .fpm-artist-card__badge {
  position: static;
  align-self: center;
  flex-shrink: 0;
}
.fpm-artists--minimal .fpm-artist-card__links { display: none; }

/* ── Social links (shared) ── */

.fpm-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  font-size: 13px;
  transition: background .18s, color .18s;
}
.fpm-social-link:hover {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.fpm-social-link svg { display: block; width: 15px; height: 15px; }
.fpm-artists--classic .fpm-social-link,
.fpm-artists--minimal .fpm-social-link {
  background: var(--fpm-bg);
  color: var(--fpm-text-mid);
}
.fpm-artists--classic .fpm-social-link:hover,
.fpm-artists--minimal .fpm-social-link:hover {
  background: var(--fpm-primary);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════
   9 · Artist detail page
   ═══════════════════════════════════════════════════════ */

.fpm-artist-detail__header {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  margin-bottom: 40px;
  align-items: start;
}
@media (max-width: 768px) {
  .fpm-artist-detail__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.fpm-artist-detail__image {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--fpm-radius);
  background: var(--fpm-text);
}
.fpm-artist-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fpm-artist-detail__info,
.fpm-artist-detail__meta {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fpm-artist-detail__genre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fpm-primary);
  margin-bottom: 12px;
}
.fpm-artist-detail__name {
  font-family: var(--tf-font-display, 'Anton', 'Inter', sans-serif);
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 400;            /* Anton: nur ein Schnitt → kein Faux-Bold */
  letter-spacing: .01em;
  line-height: .92;
  color: var(--fpm-text);
  margin: 0 0 16px;
  text-wrap: balance;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}
.fpm-artist-detail__origin {
  font-size: 13px;
  color: color-mix(in srgb, var(--fpm-text-mid) 45%, transparent);
  font-weight: 600;
  letter-spacing: .06em;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--fpm-border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fpm-artist-detail__origin svg { flex-shrink: 0; }
.fpm-artist-detail__bio {
  font-size: 16px;
  line-height: 1.82;
  color: var(--fpm-text-mid);
  margin-bottom: 28px;
}
/* Rich-text formatting inside the (now WYSIWYG-editable) biography */
.fpm-artist-detail__bio p { margin: 0 0 1em; }
.fpm-artist-detail__bio p:last-child { margin-bottom: 0; }
.fpm-artist-detail__bio ul,
.fpm-artist-detail__bio ol {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.fpm-artist-detail__bio ul { list-style: disc; }
.fpm-artist-detail__bio ol { list-style: decimal; }
.fpm-artist-detail__bio li { margin: 0 0 .35em; }
.fpm-artist-detail__bio li::marker { color: var(--fpm-primary); }
.fpm-artist-detail__bio h2,
.fpm-artist-detail__bio h3 {
  color: var(--fpm-text);
  line-height: 1.3;
  margin: 1.2em 0 .4em;
}
.fpm-artist-detail__bio a {
  color: var(--fpm-primary);
  text-decoration: underline;
}
.fpm-artist-detail__bio blockquote {
  margin: 0 0 1em;
  padding-left: 1em;
  border-left: 3px solid var(--fpm-primary);
  font-style: italic;
}
.fpm-artist-detail__lead {
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--fpm-text);
  margin-bottom: 18px;
}
.fpm-artist-detail__lead:last-child { margin-bottom: 0; }
.fpm-artist-detail__socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Performance schedule on detail page */

.fpm-artist-detail__schedule {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 2px solid var(--fpm-border);
}
.fpm-artist-detail__schedule h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fpm-primary);
  margin: 0 0 16px;
}
.fpm-artist-detail__slots {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fpm-artist-detail__slot {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--fpm-bg);
  border-left: 3px solid var(--fpm-primary);
  border-radius: 0 var(--fpm-radius) var(--fpm-radius) 0;
}
.fpm-artist-detail__slot-stage {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--fpm-radius);
  background: color-mix(in srgb, var(--stage-color, #F07828) 11%, transparent);
  color: var(--stage-color, #F07828);
  white-space: nowrap;
}
.fpm-artist-detail__slot-day {
  font-size: 12px;
  color: color-mix(in srgb, var(--fpm-text-mid) 40%, transparent);
  font-weight: 600;
  white-space: nowrap;
}
.fpm-artist-detail__slot-dayname {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fpm-primary);
  white-space: nowrap;
}
.fpm-artist-detail__slot-time {
  font-size: 13px;
  font-weight: 800;
  color: var(--fpm-text);
  letter-spacing: .06em;
  text-align: right;
}

/* Gallery */
.fpm-artist-detail__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px;
  margin-top: 32px;
}
.fpm-artist-detail__gallery-item { overflow: hidden; }
.fpm-artist-detail__gallery-item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease, opacity .25s;
}
.fpm-artist-detail__gallery-item:hover img {
  transform: scale(1.06);
  opacity: .88;
}

/* ═══════════════════════════════════════════════════════
   10 · Now Playing — Live ticker
   ═══════════════════════════════════════════════════════ */

.fpm-now-playing {
  background: var(--fpm-text);
  border-radius: var(--fpm-radius);
  overflow: hidden;
}

/* Header bar */
.fpm-now-playing__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fpm-now-playing__header-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

.fpm-now-playing__loading {
  padding: 32px 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .3);
}
.fpm-now-playing__empty {
  padding: 32px 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .25);
}

.fpm-now-playing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .06);
}

/* Skeleton loading — shimmer placeholder shown until the first fetch lands */
.fpm-now-playing__skeleton { display: flex; flex-direction: column; gap: 1px; }
.fpm-np-skel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-left: 3px solid color-mix(in srgb, #fff 10%, transparent);
}
.fpm-np-skel span {
  display: block;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .06) 25%,
    rgba(255, 255, 255, .14) 37%,
    rgba(255, 255, 255, .06) 63%);
  background-size: 400% 100%;
  animation: fpmShimmer 1.4s ease infinite;
}
.fpm-np-skel span:first-child { width: 52px; height: 52px; border-radius: var(--fpm-radius); flex-shrink: 0; }
.fpm-np-skel span:last-child  { flex: 1; max-width: 220px; }
@keyframes fpmShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Screen-reader-only utility */
.fpm-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Banner style ── */

.fpm-now-playing--banner .fpm-now-playing__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--fpm-text);
  border-left: 3px solid var(--stage-color, var(--fpm-primary));
  transition: background .15s;
}
.fpm-now-playing--banner .fpm-now-playing__item:hover {
  background: rgba(255, 255, 255, .04);
}

.fpm-now-playing__image {
  width: 52px;
  height: 52px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: var(--fpm-radius);
  background: rgba(255, 255, 255, .08);
}
.fpm-now-playing__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fpm-now-playing__info { min-width: 0; }

.fpm-now-playing__stage {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--stage-color, var(--fpm-primary));
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fpm-now-playing__artist {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fpm-now-playing__genre {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  margin-top: 2px;
}
.fpm-now-playing__time {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
  letter-spacing: .06em;
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

/* ── Card style ── */

.fpm-now-playing--card .fpm-now-playing__item {
  background: var(--fpm-text);
  border-top: 3px solid var(--stage-color, var(--fpm-primary));
  text-align: center;
  padding: 28px 20px 24px;
  transition: background .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.fpm-now-playing--card .fpm-now-playing__item:hover {
  background: rgba(255, 255, 255, .04);
}
.fpm-now-playing--card .fpm-now-playing__image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 8px;
  border: 2px solid rgba(255, 255, 255, .12);
}
.fpm-now-playing--card .fpm-now-playing__artist { font-size: 18px; }
.fpm-now-playing--card .fpm-now-playing__time { text-align: center; }

/* ── Minimal style ── */

.fpm-now-playing--minimal { background: transparent; }
.fpm-now-playing--minimal .fpm-now-playing__header {
  border-bottom-color: var(--fpm-border);
  padding-left: 0; padding-right: 0;
}
.fpm-now-playing--minimal .fpm-now-playing__header-label { color: var(--fpm-text); }
.fpm-now-playing--minimal .fpm-now-playing__grid {
  grid-template-columns: 1fr;
  gap: 0;
  background: transparent;
}
.fpm-now-playing--minimal .fpm-now-playing__item {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--fpm-border);
  background: transparent !important;
  border-left: none;
  border-top: none;
}
.fpm-now-playing--minimal .fpm-now-playing__image { display: none; }
.fpm-now-playing--minimal .fpm-now-playing__stage { color: var(--fpm-primary); }
.fpm-now-playing--minimal .fpm-now-playing__artist {
  color: var(--fpm-text);
  font-size: 15px;
}
.fpm-now-playing--minimal .fpm-now-playing__time { color: color-mix(in srgb, var(--fpm-text-mid) 50%, transparent); }

/* ═══════════════════════════════════════════════════════
   11 · Responsive
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .fpm-timetable__grid   { grid-template-columns: 1fr; }
  .fpm-now-playing__grid { grid-template-columns: 1fr; }

  .fpm-timetable__list-item {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
  }
  .fpm-timetable__list-time  { grid-row: 1; }
  .fpm-timetable__list-name  { grid-column: 2; grid-row: 1; font-size: 18px; }
  .fpm-timetable__list-stage { grid-column: 2; grid-row: 2; justify-self: start; }
  .fpm-timetable__list-genre { display: none; }

  .fpm-timetable__compact-row { grid-template-columns: 100px 1fr; }

  .fpm-artist-detail__slot {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }
  .fpm-artist-detail__slot-time { grid-column: 1 / -1; text-align: left; }
}

@media (max-width: 480px) {

  .fpm-timetable__day-tab { padding: 12px 16px; font-size: 11px; }

  .fpm-artist-detail__header { gap: 20px; }
  .fpm-artist-detail__name   { font-size: clamp(28px, 8vw, 40px); }
}

/* ═══════════════════════════════════════════════════════
   12 · Reduced motion
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .fpm-dot--live { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   13 · Artist Detail Overlay
   ═══════════════════════════════════════════════════════ */

/* Scroll lock — keep nav scrollable */
body.fpm-overlay-active { overflow: hidden; }

/* ── Fullscreen wrapper ──
   z-index 150: sits above page content but BELOW the fixed nav (z-index 200)
   top: var(--tf-nav-h) so the overlay starts exactly below the fixed nav header */
.fpm-overlay {
  position: fixed;
  top: var(--tf-nav-h, 88px);
  left: 0; right: 0; bottom: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.fpm-overlay--open { opacity: 1; pointer-events: auto; }

/* Mobile/full-bleed: below the panel's max-width the panel spans the whole
   viewport, so the 20px top padding would expose the dark backdrop as a stray
   bar between the fixed nav and the hero image. Drop it so the hero sits flush
   under the nav. On wider screens the panel is a centred card and the inset
   reads as intentional framing. */
@media (max-width: 760px) {
  .fpm-overlay { padding-top: 0; }
}

/* Backdrop — full bleed, stays fixed */
.fpm-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 0, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}

/* ── Panel — full height, content scrolls inside ── */
.fpm-overlay__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  flex: 1;
  min-height: 0;
  border-radius: 0;
  background: var(--fpm-bg, #FFF8F0);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(48px) scale(.985);
  transform-origin: bottom center;
  transition: transform .46s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 -40px 80px color-mix(in srgb, var(--fpm-text) 30%, transparent);
}
.fpm-overlay--open .fpm-overlay__panel { transform: translateY(0) scale(1); }

/* ── Sticky mini-header: appears when hero scrolls out of view ── */
.fpm-overlay__sticky {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 25;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 52px 0 20px;
  background: var(--fpm-bg, #FFF8F0);
  border-bottom: 1px solid var(--fpm-border, color-mix(in srgb, var(--fpm-primary) 12%, transparent));
  transform: translateY(-100%);
  transition: transform .22s ease;
  pointer-events: none;
}
.fpm-overlay__sticky--visible {
  transform: translateY(0);
  pointer-events: auto;
}
.fpm-overlay__sticky-name {
  /* Gleicher Bandname wie im Hero → gleiche Display-Schrift (Anton, Schnitt 400). */
  font-family: var(--tf-font-display, 'Anton', 'Inter', sans-serif);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--fpm-text, #1A0A00);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Close button ── */
.fpm-overlay__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 30;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 4, 0, .4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
  line-height: 1;
}
.fpm-overlay__close:hover { background: rgba(10, 4, 0, .8); transform: rotate(90deg) scale(1.05); }
.fpm-overlay__close svg {
  width: 16px; height: 16px;
  stroke: currentColor; stroke-width: 2.5; fill: none; pointer-events: none;
}

/* ── Scroll container — internal scroll, hero parallax via JS ── */
.fpm-overlay__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Hero: image + name overlaid ── */
.fpm-overlay__hero {
  position: relative;
  width: 100%;
  height: 55vw;       /* scales with viewport width */
  min-height: 280px;
  max-height: 520px;  /* cap on very wide screens */
  flex-shrink: 0;
  background: var(--fpm-text, #1A0A00);
  overflow: hidden;
}
@media (min-width: 720px) {
  .fpm-overlay__hero { height: 42vw; min-height: 360px; }
}

/* Image fill */
.fpm-overlay__hero-img-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.fpm-overlay__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
}
.fpm-overlay--open .fpm-overlay__hero-img { transform: scale(1.04); }

/* Darkening gradient — heavy at the bottom for legibility */
.fpm-overlay__hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Branded vivid orange foot — same look as the band cards / social "Band-Post". */
  background: linear-gradient(
    to bottom,
    transparent                                              40%,
    color-mix(in srgb, var(--fpm-primary) 50%, transparent) 62%,
    color-mix(in srgb, var(--fpm-primary) 94%, transparent) 82%,
    var(--fpm-primary)                                      93%,
    color-mix(in srgb, var(--fpm-primary) 86%, #000)       100%
  );
}

/* Text content — pinned to bottom of hero, max-width centred column */
.fpm-overlay__hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px clamp(20px, 5vw, 80px);
}
@media (min-width: 720px) { .fpm-overlay__hero-content { padding: 32px clamp(32px, 6vw, 100px); } }

/* Genre eyebrow as a frosted chip */
.fpm-overlay__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}
.fpm-overlay__eyebrow:empty { display: none; }

.fpm-overlay__name {
  /* Display-Schrift Anton — wie Kacheln, Detailseite & Lineup (kein Faux-Bold,
     Anton hat nur Schnitt 400). Anton ist schmal → grösser + neutrales Tracking. */
  font-family: var(--tf-font-display, 'Anton', 'Inter', sans-serif);
  font-size: clamp(36px, 7.4vw, 72px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
  text-wrap: balance;
  /* Subtle warm shadow like the social graphic (.fm-h1) — one light tight layer
     for crispness over busy photos, plus a gentle warm glow for depth. */
  text-shadow:
    0 1px 2px  rgba(30, 10, 0, .32),
    0 .04em .24em rgba(45, 14, 0, .3);
}

.fpm-overlay__origin {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}

/* Slot pills — frosted glass on dark image */
.fpm-overlay__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fpm-overlay__slot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 8px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.fpm-overlay__slot-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slot-color, var(--fpm-primary, #F07828));
  flex-shrink: 0;
}
.fpm-overlay__slot-sep { opacity: .4; }

/* ── Body: bio + socials ── */
.fpm-overlay__body {
  background: var(--fpm-bg, #FFF8F0);
  padding: 24px clamp(20px, 5vw, 80px) 48px;
}
@media (min-width: 720px) {
  .fpm-overlay__body { padding: 32px clamp(32px, 6vw, 100px) 64px; }
}

.fpm-overlay__video {
  margin: 0 0 24px;
}
.fpm-overlay__video:empty {
  display: none;
}
.fpm-overlay__video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.fpm-overlay__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.fpm-overlay__bio {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--fpm-text, #1A0A00);
  opacity: .82;
  margin: 0 0 24px;
  max-width: 62ch;
}
.fpm-overlay__bio p { margin: 0 0 10px; }
.fpm-overlay__bio p:last-child { margin-bottom: 0; }
.fpm-overlay__lead {
  font-size: 16.5px;
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 14px;
}
.fpm-overlay__lead:last-child { margin-bottom: 0; }

.fpm-overlay__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--fpm-border);
}
.fpm-overlay__social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 100px;
  border: 1.5px solid color-mix(in srgb, var(--fpm-text-mid) 18%, transparent);
  background: transparent;
  color: var(--fpm-text, #1A0A00);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .14s, border-color .14s, color .14s, transform .14s;
}
.fpm-overlay__social-link:hover {
  background: var(--fpm-primary, #F07828);
  border-color: var(--fpm-primary, #F07828);
  color: #fff;
  transform: translateY(-1px);
}
.fpm-overlay__social-link svg {
  width: 13px; height: 13px; fill: currentColor; flex-shrink: 0;
}

/* ── Loading: full-panel dark overlay ── */
.fpm-overlay__loading {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: var(--fpm-text, #1A0A00);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-overlay__spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(255, 255, 255, .12);
  border-top-color: var(--fpm-primary, #F07828);
  border-radius: 50%;
  animation: fpmSpin .65s linear infinite;
}
@keyframes fpmSpin { to { transform: rotate(360deg); } }

/* No-image hero fallback */
.fpm-overlay__hero--no-image {
  background: linear-gradient(150deg, var(--fpm-primary-dk, #C83800) 0%, var(--fpm-text, #1A0A00) 100%);
}

/* ═══════════════════════════════════════════════════════
   14 · Lineup — Poster-style band display  [festival_lineup]
   ═══════════════════════════════════════════════════════ */

/*
 * Poster typography: headliners in oversized all-caps, supporting acts
 * as flowing inline Fliesstext, typographic separator between each act.
 * Background is configurable via --bg-* modifier classes.
 */

/* ── Base container ── */
.fpm-lineup {
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 52px);
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Background variants ── */

/* dark — dense #1A0A00, classic festival-night */
.fpm-lineup--bg-dark {
  background: var(--fpm-text, #1A0A00);
}
/* gradient — warm orange-to-dark, like a lit stage */
.fpm-lineup--bg-gradient {
  background: linear-gradient(
    158deg,
    var(--fpm-primary, #F07828)       0%,
    var(--fpm-primary-dk, #C83800)    28%,
    color-mix(in srgb, var(--fpm-text, #1A0A00) 78%, var(--fpm-primary-dk, #C83800)) 60%,
    var(--fpm-text, #1A0A00)          100%
  );
}
/* light — positive: orange headliners on the page background, no dark fill */
.fpm-lineup--bg-light {
  background: transparent;
}

/* none — transparent, inherits page background */
.fpm-lineup--bg-none {
  background: transparent;
  padding-top: 0;
  padding-bottom: 0;
}

/* Top accent line — only on dark/gradient */
.fpm-lineup--bg-dark::before,
.fpm-lineup--bg-gradient::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--fpm-primary, #F07828) 25%,
    var(--fpm-primary, #F07828) 75%,
    transparent 100%
  );
  opacity: .45;
}

/* ── Headliner block ── */

.fpm-lineup__headliners {
  margin-bottom: clamp(16px, 2.5vw, 32px);
}

.fpm-lineup__hl-act {
  display: block;
  position: relative;
  font-size: clamp(46px, 10vw, 116px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: .88;
  text-transform: uppercase;
  margin-bottom: .05em;
  cursor: pointer;
  transition: color .2s ease, opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  text-wrap: balance;
}
.fpm-lineup__hl-act:last-child { margin-bottom: 0; }


/* Mouseover: spotlight the hovered act, gently dim the rest, slight lift.
   Spotlight wirkt übergreifend über alle Kategorien — siehe gemeinsame Regel
   weiter unten in „Cross-category spotlight". */
.fpm-lineup__hl-act:hover { transform: scale(1.025); }
.fpm-lineup__hl-act a,
.fpm-lineup__hl-act a:hover,
.fpm-lineup__hl-act a:visited,
.fpm-lineup__hl-act a:focus {
  color: inherit;
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Color by background — white on dark/gradient, dark on none */
.fpm-lineup--bg-dark .fpm-lineup__hl-act,
.fpm-lineup--bg-gradient .fpm-lineup__hl-act {
  color: #fff;
}
.fpm-lineup--bg-dark .fpm-lineup__hl-act:hover,
.fpm-lineup--bg-gradient .fpm-lineup__hl-act:hover {
  color: var(--fpm-accent, #F5C155);
}
.fpm-lineup--bg-none .fpm-lineup__hl-act {
  color: var(--fpm-text, #1A0A00);
  text-shadow: none;
}
.fpm-lineup--bg-none .fpm-lineup__hl-act:hover {
  color: var(--fpm-primary, #F07828);
}

/* light variant — kräftiges burnt-orange auf hellem Grund (--fpm-primary #F07828 ist auf
   Creme zu blass → --fpm-primary-dk #C83800 für klaren Kontrast/Plakat-Wucht). */
.fpm-lineup--bg-light .fpm-lineup__hl-act {
  color: var(--fpm-primary);   /* Brand-Orange #F07828 — identisch zum Social-Lineup-Poster (kein Rot) */
  text-shadow: none;
}
.fpm-lineup--bg-light .fpm-lineup__hl-act:hover { color: var(--fpm-primary-dk); }
.fpm-lineup--bg-light .fpm-lineup__hl-act a:visited { color: var(--fpm-primary); }

/* ── Support acts — flowing Fliesstext ── */

/* Gemeinsames Schriftbild mit den Headlinern: gleiches Gewicht, gleich enges
   letter-spacing, gleiche knappe line-height. Nur die font-size staffelt sich
   nach Billing-Tier. */
.fpm-lineup__support {
  font-size: clamp(13px, 2.2vw, 22px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
  text-transform: uppercase;
  margin-top: clamp(14px, 2.5vw, 28px);
  text-wrap: balance;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* Billing tiers between headliners and the rest — size steps down */
.fpm-lineup__support--co {
  font-size: clamp(26px, 5.5vw, 60px);
  line-height: .95;
  letter-spacing: -.05em;
  margin-top: clamp(8px, 1.6vw, 20px);
  max-width: 24ch;
}
.fpm-lineup__support--sub {
  font-size: clamp(18px, 3.4vw, 36px);
  line-height: 1.0;
  letter-spacing: -.045em;
  margin-top: clamp(6px, 1.2vw, 14px);
  max-width: 40ch;
}

.fpm-lineup--bg-dark .fpm-lineup__support,
.fpm-lineup--bg-gradient .fpm-lineup__support {
  color: color-mix(in srgb, var(--fpm-bg) 45%, transparent);
}
.fpm-lineup--bg-none .fpm-lineup__support,
.fpm-lineup--bg-light .fpm-lineup__support {
  color: color-mix(in srgb, var(--fpm-text-mid) 55%, transparent);
}

/* Individual act name.
   inline-block, damit transform: scale() greift (auf inline-Elementen wirkungslos). */
.fpm-lineup__act {
  display: inline-block;
  transition: color .14s ease, opacity .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
  cursor: pointer;
  transform-origin: center;
}

/* Mouseover: gleicher Lift wie bei den Headlinern, nur etwas grösser
   skaliert, damit der Effekt bei der kleineren Schrift sichtbar bleibt. */
.fpm-lineup__act:hover { transform: scale(1.08); }

/* Cross-category spotlight: NUR wenn ein konkreter Act gehovert wird (nicht schon beim
   Hovern des Containers/der Box), werden die übrigen Acts + Separatoren abgedunkelt.
   :has(act:hover) statt :hover am Container → kein Ausgrauen beim blossen Überfahren. */
.fpm-lineup:has(.fpm-lineup__hl-act:hover, .fpm-lineup__act:hover) .fpm-lineup__hl-act:not(:hover),
.fpm-lineup:has(.fpm-lineup__hl-act:hover, .fpm-lineup__act:hover) .fpm-lineup__act:not(:hover),
.fpm-lineup:has(.fpm-lineup__hl-act:hover, .fpm-lineup__act:hover) .fpm-lineup__sep { opacity: .35; }

/* When an act is clicked/focused via the overlay, dim all others */
.fpm-lineup:has([data-focused="true"]) [data-artist-slug]:not([data-focused="true"]),
.fpm-lineup:has([data-focused="true"]) .fpm-lineup__sep { opacity: .35; }
.fpm-lineup__act a,
.fpm-lineup__act a:hover,
.fpm-lineup__act a:visited,
.fpm-lineup__act a:focus,
.fpm-lineup__act a:link {
  color: inherit;
  text-decoration: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
  transition: color .14s ease;
}

.fpm-lineup--bg-dark .fpm-lineup__act:hover,
.fpm-lineup--bg-dark .fpm-lineup__act:hover a,
.fpm-lineup--bg-gradient .fpm-lineup__act:hover,
.fpm-lineup--bg-gradient .fpm-lineup__act:hover a {
  color: color-mix(in srgb, var(--fpm-bg) 90%, transparent);
}
.fpm-lineup--bg-none .fpm-lineup__act:hover,
.fpm-lineup--bg-none .fpm-lineup__act:hover a,
.fpm-lineup--bg-light .fpm-lineup__act:hover,
.fpm-lineup--bg-light .fpm-lineup__act:hover a {
  color: var(--fpm-primary, #F07828);
}
.fpm-lineup--bg-light .fpm-lineup__act a:visited { color: currentColor; }

/*
 * Typographic separator — the character itself is rotated 9° and skewed
 * −9°, creating a dynamic slanted mark that feels hand-lettered / poster.
 * Default character is "/" which becomes a confident angular slash.
 */
.fpm-lineup__sep {
  display: inline-block;
  transform: rotate(9deg) skewX(-9deg);
  transform-origin: center 55%;
  margin: 0 .3em;
  font-weight: 300;
  font-size: .88em;
  vertical-align: baseline;
  position: relative;
  top: -.04em;
  transition: opacity .25s ease;
}
.fpm-lineup--bg-dark .fpm-lineup__sep,
.fpm-lineup--bg-gradient .fpm-lineup__sep {
  color: color-mix(in srgb, var(--fpm-primary) 50%, transparent);
}
.fpm-lineup--bg-none .fpm-lineup__sep,
.fpm-lineup--bg-light .fpm-lineup__sep {
  color: color-mix(in srgb, var(--fpm-primary) 45%, transparent);
}

/* onbrand — transparent (kein eigener Grund) mit heller Schrift; gedacht für orange/
   farbige Seitenhintergründe, auf denen die light-Variante (oranger Text) untergehen würde.
   Wie bg-none erbt es den Seitenhintergrund, färbt den Text aber wie die dunkle Variante. */
.fpm-lineup--bg-onbrand {
  background: transparent;
}
.fpm-lineup--bg-onbrand .fpm-lineup__hl-act {
  color: #fff;
  text-shadow: none;
}
.fpm-lineup--bg-onbrand .fpm-lineup__hl-act:hover {
  color: var(--fpm-accent, #F5C155);
}
.fpm-lineup--bg-onbrand .fpm-lineup__support {
  color: color-mix(in srgb, #fff 82%, transparent);
}
.fpm-lineup--bg-onbrand .fpm-lineup__act:hover,
.fpm-lineup--bg-onbrand .fpm-lineup__act:hover a {
  color: #fff;
}
.fpm-lineup--bg-onbrand .fpm-lineup__sep {
  color: color-mix(in srgb, #fff 55%, transparent);
}

/* CD: Display-Schrift Anton auf allen Lineup-Acts (Headliner + Support). Anton hat nur
   Schnitt 400 (kein Faux-Bold), füllt den Kasten → neutrales Tracking statt des engen
   Inter-Wertes. Am Sektionsende = gewinnt über die Einzeldefinitionen oben. */
.fpm-lineup__hl-act, .fpm-lineup__support, .fpm-lineup__support--co,
.fpm-lineup__support--sub, .fpm-lineup__act {
  font-family: var(--tf-font-display, 'Anton', 'Inter', sans-serif);
  font-weight: 400;
  letter-spacing: .005em;
}

/* ── CD: [festival_lineup] exakt wie das Grafikgenerator-Poster (.fm-lp) ──
   Trennlinie zwischen den Headlinern, identische Tier-Farben, gleichmässiger Rhythmus. */
.fpm-lineup__headliners { margin-bottom: .34em; }
.fpm-lineup__hl-act { margin-bottom: 0; }
.fpm-lineup__headliners .fpm-lineup__hl-act:not(:last-child)::after {
  content: '';
  display: block;
  width: clamp(44px, 4.6vw, 60px);
  height: 4px;
  border-radius: 2px;
  background: rgba(240, 120, 40, .5);          /* = rgba(--acc) .5, wie .fm-lp__sep */
  margin: clamp(15px, 1.8vw, 22px) auto;
}
/* Abstände proportional zur Schriftgrösse (em) → kleine untere Stufen rücken enger zusammen */
.fpm-lineup__support      { margin-top: .72em; }
.fpm-lineup__support--co  { margin-top: .5em; }
.fpm-lineup__support--sub { margin-top: .6em; }
/* exakte Tier-Farben (light) = Generator: co = Ink, sub = Braun, rest = gedämpft */
.fpm-lineup--bg-light .fpm-lineup__support      { color: #8a7d72; }
.fpm-lineup--bg-light .fpm-lineup__support--co  { color: #2A1606; }
.fpm-lineup--bg-light .fpm-lineup__support--sub { color: #5A3A28; }
.fpm-lineup--bg-light .fpm-lineup__sep          { color: rgba(240, 120, 40, .6); }

/* Mobile */
@media (max-width: 480px) {
  .fpm-lineup__hl-act { letter-spacing: .01em; }
  .fpm-lineup__sep    { margin: 0 .2em; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fpm-overlay, .fpm-overlay__panel, .fpm-overlay__hero-img { transition: none; }
  .fpm-overlay__spinner { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   15 · Visited-link colour
   ═══════════════════════════════════════════════════════ */

/*
 * Band names are <a> links. Browsers (Safari in particular) ignore
 * `color: inherit` on :visited, so a previously-opened band would show the
 * theme/UA visited colour (e.g. blue) instead of the design colour. Pin the
 * :visited colour explicitly per context so visited and unvisited match —
 * all values stay palette-driven (token-based), so it holds for any festival.
 */
.fpm-artists--modern  .fpm-artist-card__name a:visited { color: #fff; }
.fpm-artists--classic .fpm-artist-card__name a:visited,
.fpm-artists--minimal .fpm-artist-card__name a:visited { color: var(--fpm-text); }

.fpm-timetable__slot-name a:visited,
.fpm-timetable__list-name a:visited,
.fpm-timetable__compact-slot a:visited,
.fpm-tg__slot-name a:visited,
.fpm-tl-entry__name a:visited { color: var(--fpm-text); }

.fpm-lineup--bg-dark     .fpm-lineup__hl-act a:visited,
.fpm-lineup--bg-gradient .fpm-lineup__hl-act a:visited { color: #fff; }
.fpm-lineup--bg-none     .fpm-lineup__hl-act a:visited { color: var(--fpm-text); }
.fpm-lineup--bg-dark     .fpm-lineup__act a:visited,
.fpm-lineup--bg-gradient .fpm-lineup__act a:visited,
.fpm-lineup--bg-none     .fpm-lineup__act a:visited { color: currentColor; }