/*--------------------------------------------------------------
# ROOT VARIABLES (Farben zentral definiert)
--------------------------------------------------------------*/
:root {
  /* === Einzelne Boxen (Release-Item) === */
  --release-item-bg: #1a1a1a;
  --release-item-border: #333;
  --release-item-border-hover: #ffffff;
  
  /* === Einzelne Boxen (CoverRahmen) === */
  --release-cover-border: #444;
  
  /* === Einzelne Boxen (CoverOverlay) === */
  --release-cover-overlay-bg: rgba(0, 0, 0, 0.6);
  --release-cover-overlay-text: #ffffff;
  --release-cover-overlay-text-hover: #ffffff;
  --release-cover-overlay-text-bg: rgba(0, 0, 0, 0.5);
  
  /* === Einzelne Boxen (Titel) === */
  --release-title-text-color: #ffffff;
  --release-title-text-color-hover: #ffffff;
  --release-title-text-size: 1.5rem;
  
  /* === Einzelne Boxen (Interpret) === */
  --release-artist-text-color: #cccccc;
  --release-artist-text-color-hover: #ffffff;
  --release-artist-text-size: 1.3rem;
  
  /* === Einzelne Boxen (Datum) === */
  --release-date-text-color: #cccccc;
  --release-date-text-color-hover: #ffffff;
  --release-date-text-size: 1.2rem;
  
  /* === FilterFormular (Border => Auswahl/Eingabe) === */
  --release-filter-form-select-border: #ccc; 
  --release-filter-form-input-border: #ccc; 
  
  /* === FilterFormular (Button) === */
  --release-filter-form-button-bg: #000000;
  --release-filter-form-button-text: #ffffff;
  --release-filter-form-button-bg-hover: #ffffff;
  --release-filter-form-button-text-hover: #000000;
  
  /* === SeitenNummern der Navigation (alle) === */
  --release-pagination-page-numbers-bg: #000;
  --release-pagination-page-numbers-bg-hover: #000;
  --release-pagination-page-numbers-border: #999;
  --release-pagination-page-numbers-border-hover: #999;
  --release-pagination-page-numbers-text: #FFF;
  --release-pagination-page-numbers-text-hover: #FFD700;
  
  /* === SeitenNummern der Navigation (Die Aktuelle) === */
  --release-pagination-page-numbers-current-bg: #000;
  --release-pagination-page-numbers-current-border: #FFD700;
  --release-pagination-page-numbers-current-text: #FFD700;
  
  /* === Modal === */
  --release-modal-bg: rgba(0, 0, 0, 0.8);
  --release-modal-content-bg: #202020;
  --release-modal-content-border: #FFD700;
  --release-modal-modal-close: #e9e9e9;
  --release-modal-modal-close-hover: #ff0000;
  --release-modal-modal-content-target: #000000;
}

  /* === AB HIER NICHTS ANPASSEN AUSSER DU WEISST WAS DU MACHST!! === */
  /* === Farben und Teilweise größe sind oben angegeben === */
  
  
  /* === GRID & CONTAINER === */
.release-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
  padding: 20px;
  margin: 0;
  box-sizing: border-box;
}

  /* === RELEASE ITEM === */
.release-item {
  background-color: var(--release-item-bg);
  border: 2px solid var(--release-item-border);
  padding: 15px;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.release-item:hover {
  transform: translateY(-5px);
  border-color: var(--release-item-border-hover);
}

  /* === COVER & OVERLAY === */
.release-cover {
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  cursor: pointer;
  border: 1px solid var(--release-cover-border);
}

.release-cover img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease-in-out;
}

.release-cover:hover img {
  transform: scale(1.2);
}

.release-cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--release-cover-overlay-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

.release-cover:hover .release-cover-overlay {
  opacity: 1;
}

.overlay-text {
  color: var(--release-cover-overlay-text);
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  background-color: var(--release-cover-overlay-text-bg);
  border-radius: 5px;
}

.release-item:hover .overlay-text {
  color: var(release-cover-overlay-text-hover);
  transition: color 0.2s ease-in-out;
}

  /* === TYPOGRAPHY === */
.release-title {
  font-size: var(--release-title-text-size);
  font-weight: bold;
  margin: 0 0 5px 0;
  color: var(--release-title-text-color);
  line-height: 1.3;
}

.release-artist {
  font-size: var(--release-artist-text-size);
  color: var(--release-artist-text-color);
  margin: 0 0 10px 0;
}

.release-date {
  font-size: var(--release-date-text-size);
  color: var(--release-date-text-color);
  margin: 0;
  margin-top: auto;
}

.release-item:hover .release-title {
  color: var(--release-title-text-color-hover);
  transition: color 0.2s ease-in-out;
}

.release-item:hover .release-artist {
  color: var(--release-artist-text-color-hover);
  transition: color 0.2s ease-in-out;
}

.release-item:hover .release-date {
  color: var(--release-date-text-color-hover);
  transition: color 0.2s ease-in-out;
}

  /* === BUTTONS & LOGOS === */
.release-buttons-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  margin-top: 15px;
  min-height: 30px;
}

.release-logo-link .release-logo {
  width: 30px;
  height: auto;
  opacity: 0.8;
  transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out, filter 0.4s ease-in-out;
  transform: rotate(22.5deg);
}

.release-logo-link:hover .release-logo {
  opacity: 1;
  transform: scale(1.2) rotate(0deg);
}

  /* === FILTER FORM === */
.release-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.release-filter-form input[type="text"] {
  padding: 10px;
  border: 1px solid var(--release-filter-form-input-border);
  border-radius: 4px;
  font-size: 1.5rem;
  flex-grow: 1;
}

.release-filter-form select {
  padding: 10px;
  border: 1px solid var(--release-filter-form-select-border);
  border-radius: 4px;
  font-size: 1.5rem;
  flex-grow: 1;
}

.release-filter-form button {
  padding: 10px 20px;
  background-color: var(--release-filter-form-button-bg);
  color: var(--release-filter-form-button-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.5s, border-radius 0.5s;
}

.release-filter-form button:hover {
  background-color: var(--release-filter-form-button-bg-hover);
  color: var(--release-filter-form-button-text-hover);
  border-radius: 10px;
  transition: background-color 0.5s, border-radius 0.5s;
}

  /* === PAGINATION === */
.release-pagination {
  margin: 30px 0;
  text-align: center;
  font-size: 1.5rem;
  text-decoration: none;
}

.release-pagination .page-numbers {
  padding: 8px 15px;
  margin: 0 3px;
  background-color: var(--release-pagination-page-numbers-bg);
  border: 1px solid var(--release-pagination-page-numbers-border);
  color: var(--release-pagination-page-numbers-text);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.release-pagination .page-numbers:hover {
  background-color: var(--release-pagination-page-numbers-bg-hover);
  border: 1px solid var(--release-pagination-page-numbers-border-hover);
  color: var(--release-pagination-page-numbers-text-hover);
  font-weight: bold;
  text-decoration: none;
}

.release-pagination .page-numbers.current {
  background-color: var(--release-pagination-page-numbers-current-bg);
  color: var(--release-pagination-page-numbers-current-text);
  border-color: var(--release-pagination-page-numbers-current-border);
  font-weight: bold;
  text-decoration: none;
}

  /* === MODAL === */
.mrp-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--release-modal-bg);
  animation: fadeIn 0.3s;
}

.mrp-modal-content {
  background-color: var(--release-modal-content-bg);
  margin: 10% auto;
  padding: 30px;
  border: 2px solid var(--release-modal-content-border);
  width: 80%;
  max-width: 700px;
  position: relative;
  animation: slideIn 0.3s;
}

.mrp-modal-close {
  color: var(--release-modal-modal-close);
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.mrp-modal-close:hover,
.mrp-modal-close:focus {
  color: var(--release-modal-modal-close-hover);
  text-decoration: none;
}

#modal-content-target {
  color: var(--release-modal-modal-content-target);
}

#modal-content-target h2 {
  margin-top: 0;
}

  /* === ANIMATIONS === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}