/* Zusatzregeln nur für die separate Repertoire-Seite. */
.repertoire-page-main { min-height: 70vh; }
.repertoire-standalone { padding-top: clamp(2rem, 5vw, 4.5rem); }
.repertoire-page .main-nav a[aria-current="page"] { color: #f2bd4d; }

@media (max-width: 720px) {
  .repertoire-standalone { padding-top: 1.25rem; }
  .repertoire-page .repertoire-intro { max-width: 34rem; }
  .repertoire-page .setlist-panel { position: static; }
}


/* Mobile-Eingabe: robust für Safari/iPhone und andere Touch-Geräte. */
.repertoire-page .setlist-custom-row input,
.repertoire-page #add-custom-song {
  min-height: 48px;
}

.repertoire-page #add-custom-song {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 720px) {
  .repertoire-page .setlist-custom {
    overflow: visible;
  }

  .repertoire-page .setlist-custom-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    width: 100%;
  }

  .repertoire-page .setlist-custom-row input {
    width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }

  .repertoire-page #add-custom-song {
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .repertoire-page .song-suggestions {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-height: min(42vh, 18rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: auto !important;
  }

  .repertoire-page .song-suggestions[hidden] {
    display: none !important;
  }
}


/* Ausgewählte Zaubereinlage im Interaktiv-Bereich */
.repertoire-page .setlist-item.setlist-item-magic {
  position: relative;
  overflow: hidden;
  border-color: rgba(126, 216, 205, .50);
  background:
    radial-gradient(circle at 88% 16%, rgba(111, 207, 198, .18), transparent 34%),
    linear-gradient(135deg, rgba(47, 29, 25, .98), rgba(31, 35, 34, .98));
  box-shadow:
    inset 0 -3px 0 rgba(111, 207, 198, .72),
    0 0 0 1px rgba(111, 207, 198, .06);
}

.repertoire-page .setlist-item.setlist-item-magic .setlist-index {
  background: linear-gradient(135deg, #8bd9cf 0%, #f2bd4d 100%);
  color: #241208;
}

.repertoire-page .setlist-item.setlist-item-magic .setlist-text strong {
  color: #fff8ed;
}

.repertoire-page .setlist-item.setlist-item-magic .setlist-text span {
  color: #d9d0c8;
}

.repertoire-page .setlist-item.setlist-item-magic .setlist-control {
  border-color: rgba(126, 216, 205, .34);
}

.repertoire-page .setlist-item.setlist-item-magic .setlist-control:not(:disabled):hover {
  border-color: rgba(126, 216, 205, .72);
  background: rgba(111, 207, 198, .12);
}


/* Mobile Song-Suche: Treffer direkt unter den Eingabefeldern anzeigen. */
@media (max-width: 720px) {
  .repertoire-page #custom-song {
    order: 1;
  }

  .repertoire-page #custom-artist {
    order: 2;
  }

  .repertoire-page .song-suggestions {
    order: 3;
    display: grid;
    grid-column: 1 / -1;
    gap: .4rem;
    margin-top: .1rem;
    max-height: 17rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px;
  }

  .repertoire-page #add-custom-song {
    order: 4;
  }

  .repertoire-page .song-suggestion {
    width: 100%;
    min-height: 58px;
    text-align: left;
    touch-action: manipulation;
  }

  .repertoire-page .song-suggestion strong,
  .repertoire-page .song-suggestion span,
  .repertoire-page .song-suggestion small {
    pointer-events: none;
  }

  .repertoire-page .song-suggestion-message {
    margin: 0;
    padding: .8rem .9rem;
  }
}


/* Desktop: Titel und Repertoire-Kopf kompakter, linke Zeile auf Höhe "Interaktiv". */
.repertoire-page .repertoire-head-builder h1 {
  margin: 0;
}

@media (min-width: 981px) {
  .repertoire-page .repertoire-head-builder {
    margin-bottom: 12px;
  }

  .repertoire-page .song-browser-head {
    padding-top: 20px;
  }
}


/* Desktop v10:
   1. Genrezeile direkt unter den Titel.
   2. Interaktiv-Box exakt auf Höhe der ersten Songkarten. */
@media (min-width: 981px) {
  .repertoire-page .repertoire-head-builder {
    margin-bottom: 4px !important;
  }

  .repertoire-page .repertoire-head-builder h1 {
    margin: 0 !important;
  }

  .repertoire-page .repertoire-builder-layout {
    grid-template-columns: 1.25fr .75fr;
    grid-template-rows: auto auto;
    column-gap: 20px;
    row-gap: 14px;
    align-items: start;
  }

  .repertoire-page .song-browser {
    display: contents;
  }

  .repertoire-page .song-browser-head {
    grid-column: 1;
    grid-row: 1;
    padding: 0 2px !important;
    margin: 0;
  }

  .repertoire-page .song-grid-builder {
    grid-column: 1;
    grid-row: 2;
  }

  .repertoire-page .setlist-panel {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0 !important;
  }
}