/* ============================================
   Gewinnspiele24.eu – Datenbank, Suche & Ergebnisse
   ============================================ */

/* --- Datenbank-Layout --- */
.database-main { position:relative; }
.database-main--sub { margin-top:-24px; }
.database-info-box { margin-bottom:24px; }

/* --- Filter Bar --- */
.filter-bar { background:var(--white); border-radius:var(--radius-lg); padding:24px 28px; box-shadow:var(--shadow-lg); margin-top:-32px; position:relative; z-index:10; margin-bottom:32px; }
.filter-row { display:flex; gap:12px; flex-wrap:wrap; align-items:end; }
.filter-group { flex:1; min-width:160px; }
.filter-group-search { flex:2; min-width:240px; }
.filter-group label { display:block; font-size:0.76rem; font-weight:600; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.8px; margin-bottom:6px; }
.filter-group input, .filter-group select {
  width:100%; padding:10px 14px; border:2px solid var(--gray-300); border-radius:var(--radius-sm);
  font-size:0.88rem; font-family:var(--font-main); transition:border-color var(--transition); background:var(--white); color:var(--gray-700);
}
.filter-group input:focus, .filter-group select:focus { outline:none; border-color:var(--primary); }
.filter-group .search-wrapper { position:relative; }
.filter-group .search-wrapper svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gray-500); pointer-events:none; }
.filter-group .search-wrapper input { padding-left:40px; }
.filter-group.per-page-group { min-width:100px; flex:0.5; }

@media (max-width:600px) {
  .filter-bar { padding:18px; margin-top:-20px; }
  .filter-group { min-width:100%; }
  .filter-group.per-page-group { min-width:120px; flex:1; }
}

/* --- Category Badges --- */
.category-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.cat-badge {
  padding:6px 16px; border-radius:20px; font-size:0.82rem; font-weight:500;
  border:2px solid var(--gray-300); background:var(--white); color:var(--gray-700);
  cursor:pointer; transition:all var(--transition);
}
.cat-badge:hover, .cat-badge.active { border-color:var(--primary); background:var(--primary); color:var(--white); }

/* --- Card Grid --- */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(480px,1fr)); gap:24px; margin-bottom:32px; }
@media (max-width:560px) { .cards-grid { grid-template-columns:1fr; } }

/* Card Logo Bild */
.card-logo.card-logo-img { background:var(--gray-100); padding:2px; overflow:hidden; }
.card-logo.card-logo-img img { width:100%; height:100%; object-fit:contain; border-radius:calc(var(--radius-md) - 2px); }

/* --- Gewinnspiel Card --- */
.card {
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,0.05);
  transition:all var(--transition); display:flex; flex-direction:column;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

.card-header { padding:20px 20px 0; display:flex; align-items:flex-start; gap:14px; }
.card-logo {
  width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center;
  justify-content:center; font-size:1.2rem; font-weight:800; color:var(--white); flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
}
.card-logo img { width:100%; height:100%; object-fit:contain; border-radius:var(--radius-md); }
.card-provider { flex:1; min-width:0; }
.card-provider h3 { font-size:1.02rem; font-weight:700; color:var(--gray-900); line-height:1.3; margin-bottom:4px; }

.card-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.card-category {
  display:inline-block; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.6px;
  color:var(--primary); background:rgba(21,101,192,0.08); padding:2px 8px; border-radius:4px;
}

/* Card Badges (TOP 10, Empfohlen, Neu) */
.card-badge {
  display:inline-block; font-size:0.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; padding:2px 8px; border-radius:4px; line-height:1.5;
}
.card-badge.top10 { background:rgba(255,143,0,0.12); color:#e65100; }
.card-badge.empfohlen { background:rgba(46,125,50,0.1); color:#2e7d32; }
.card-badge.neu { background:rgba(21,101,192,0.1); color:#1565c0; }

.card-body { padding:14px 20px; flex:1; }
.card-body p { font-size:0.88rem; color:var(--gray-700); margin-bottom:10px; line-height:1.6; }

.card-prizes { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:4px; }
.prize-tag { display:inline-flex; align-items:center; gap:4px; font-size:0.76rem; font-weight:500; background:linear-gradient(135deg,rgba(255,143,0,0.1),rgba(255,143,0,0.05)); color:var(--accent-dark); padding:3px 10px; border-radius:20px; }
.prize-tag svg { width:14px; height:14px; flex-shrink:0; }

.card-footer { padding:14px 20px; border-top:1px solid var(--gray-300); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-deadline { display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--gray-500); }
.card-deadline svg { width:16px; height:16px; flex-shrink:0; }
.card-deadline.urgent { color:var(--danger); font-weight:600; }

.card-link {
  padding:8px 18px; background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:var(--white); border-radius:var(--radius-sm); font-size:0.85rem; font-weight:600;
  transition:all var(--transition); white-space:nowrap;
}
.card-link:hover { transform:scale(1.03); box-shadow:0 4px 12px rgba(255,143,0,0.3); color:var(--white); }

.no-results { grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--gray-500); }
.no-results svg { width:64px; height:64px; margin:0 auto 16px; opacity:0.4; }
.no-results h3 { font-size:1.2rem; color:var(--gray-700); margin-bottom:8px; }

/* --- Pagination --- */
.pagination { display:flex; align-items:center; justify-content:center; gap:4px; margin:24px 0; flex-wrap:wrap; }
.page-btn {
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--gray-300); background:var(--white); color:var(--gray-700);
  border-radius:var(--radius-sm); font-size:0.88rem; font-weight:500; cursor:pointer;
  transition:all var(--transition); font-family:var(--font-main); padding:0 8px;
}
.page-btn:hover:not(:disabled) { border-color:var(--primary); color:var(--primary); background:rgba(21,101,192,0.04); }
.page-btn.active { background:var(--primary); border-color:var(--primary); color:var(--white); font-weight:700; }
.page-btn:disabled { opacity:0.4; cursor:not-allowed; }
.page-ellipsis { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:40px; color:var(--gray-500); font-size:0.9rem; }

/* --- Results Count --- */
.results-count { font-size:0.9rem; color:var(--gray-500); margin-bottom:20px; }
.results-count strong { color:var(--gray-900); }

/* --- Veranstalter Page --- */
.va-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(500px,1fr)); gap:24px; margin-bottom:40px; }
@media (max-width:600px) { .va-grid { grid-template-columns:1fr; } }

.va-card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,0.05); }
.va-header { padding:24px 24px 0; display:flex; align-items:center; gap:14px; }
.va-icon { width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:800; color:var(--white); flex-shrink:0; }
.va-title h3 { font-size:1.1rem; font-weight:700; color:var(--gray-900); }
.va-count { font-size:0.82rem; color:var(--gray-500); }

.va-body { padding:16px 24px 24px; display:flex; flex-direction:column; gap:12px; }
.va-gewinnspiel { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--gray-100); border-radius:var(--radius-md); }
.va-gw-info { flex:1; min-width:0; }
.va-gw-info h4 { font-size:0.92rem; font-weight:600; color:var(--gray-900); margin-bottom:4px; }
.va-gw-info .card-category { margin-right:6px; }
.va-gw-info .card-deadline { font-size:0.78rem; }

/* --- Spinner --- */
.spinner { display:flex; justify-content:center; padding:40px; }
.spinner::after { content:''; width:36px; height:36px; border:3px solid var(--gray-300); border-top-color:var(--primary); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }