/* Special Frame Mallorca – Custom Styles */

/* Hero Background mit subtilem Ken-Burns-Effekt */
.hero-bg {
  animation: kenburns 30s ease-in-out infinite alternate;
  transform-origin: center center;
}
@keyframes kenburns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.08) translate(-1%, -2%); }
}

/* Bild-Lift beim Hover in der Hero-Collage */
.hover-lift {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hover-lift:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
}

.chip {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid rgb(226 232 240);
  background: white;
  color: rgb(71 85 105);
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.chip:hover {
  background: rgb(248 250 252);
  border-color: rgb(148 163 184);
}
.chip-active {
  background: rgb(14 165 233);
  color: white;
  border-color: rgb(14 165 233);
}
.chip-active:hover {
  background: rgb(2 132 199);
  border-color: rgb(2 132 199);
}

/* Category chips mit Akzentfarbe */
.chip-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* Skeleton Loader */
.skeleton-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  height: 20rem;
  position: relative;
  overflow: hidden;
}
.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.5), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Event-Card */
.event-card {
  background: white;
  border-radius: 1rem;
  border: 1px solid rgb(226 232 240);
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px rgba(2, 132, 199, 0.15);
  border-color: rgb(186 230 253);
}
.event-card-image {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, rgb(186 230 253), rgb(250 244 227));
  position: relative;
  overflow: hidden;
}
.event-card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.event-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }
.event-card-date {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgb(14 165 233);
}
.event-card-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.125rem; line-height: 1.35; color: rgb(15 23 42); }
.event-card-meta { font-size: 0.875rem; color: rgb(100 116 139); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.event-card-footer { padding: 0.75rem 1.25rem; border-top: 1px solid rgb(241 245 249); font-size: 0.75rem; color: rgb(100 116 139); display: flex; justify-content: space-between; align-items: center; }
.event-card-source { color: rgb(14 165 233); font-weight: 500; }
.event-card-source:hover { text-decoration: underline; }

/* Kategorie-Badges */
.cat-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Preis-Badge */
.price-free { background: rgb(220 252 231); color: rgb(22 101 52); }
.price-donation { background: rgb(254 243 199); color: rgb(133 77 14); }
.price-paid { background: rgb(224 242 254); color: rgb(7 89 133); }
.price-unknown { background: rgb(241 245 249); color: rgb(71 85 105); }

/* Modal */
.modal-hero {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, rgb(14 165 233), rgb(226 184 90));
  position: relative; overflow: hidden;
}
.modal-hero img { width: 100%; height: 100%; object-fit: cover; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: white; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); cursor: pointer; transition: all 0.15s;
  border: none;
}
.modal-close:hover { transform: scale(1.05); }

/* Filter checkbox labels */
.filter-label {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.375rem 0;
  font-size: 0.875rem;
  color: rgb(71 85 105);
  cursor: pointer;
}
.filter-label:hover { color: rgb(15 23 42); }
.filter-label input[type=checkbox] {
  width: 1rem; height: 1rem; accent-color: rgb(14 165 233); cursor: pointer;
}
.filter-count { margin-left: auto; font-size: 0.75rem; color: rgb(148 163 184); }

/* Language switcher active */
.lang-link.active { background: rgba(255,255,255,0.2); color: white; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); }