/* ============ FindThem – Modernes 3D Design ============ */
* { font-family: 'Space Grotesk', sans-serif; }

body {
  background: #06060f;
  color: #e8e8f5;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---- Animierter 3D-Hintergrund ---- */
#bg3d {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(120, 60, 255, 0.28), transparent),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(0, 200, 255, 0.18), transparent),
    radial-gradient(ellipse 50% 60% at 50% 110%, rgba(255, 60, 170, 0.15), transparent),
    #06060f;
  perspective: 1000px;
}

#bg3d::before {
  content: '';
  position: absolute;
  inset: -60%;
  background-image:
    linear-gradient(rgba(140, 90, 255, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 90, 255, 0.09) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: rotateX(62deg) translateY(0);
  animation: gridMove 24s linear infinite;
}

@keyframes gridMove {
  from { transform: rotateX(62deg) translateY(0); }
  to   { transform: rotateX(62deg) translateY(64px); }
}

#bg3d::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, #06060f 95%);
}

/* Schwebende Orbs */
.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  z-index: 1;
  pointer-events: none;
  animation: float 14s ease-in-out infinite;
}
.orb-1 { width: 350px; height: 350px; background: #7c3aed; top: -80px; left: -80px; }
.orb-2 { width: 280px; height: 280px; background: #06b6d4; top: 40%; right: -90px; animation-delay: -5s; }
.orb-3 { width: 220px; height: 220px; background: #ec4899; bottom: -60px; left: 30%; animation-delay: -9s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 25px) scale(0.94); }
}

/* ---- Glass Cards mit 3D-Tilt ---- */
.glass {
  background: rgba(22, 22, 42, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
  cursor: pointer;
}
.card-3d:hover {
  border-color: rgba(140, 90, 255, 0.55);
  box-shadow: 0 22px 60px rgba(100, 50, 220, 0.35), 0 0 0 1px rgba(140, 90, 255, 0.25), inset 0 1px 0 rgba(255,255,255,0.1);
}
.card-3d .card-inner { transform: translateZ(28px); }

/* ---- Buttons ---- */
.btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9 55%, #4f46e5);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.45), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: all 0.22s ease;
  border: 1px solid rgba(255,255,255,0.14);
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 34px rgba(124, 58, 237, 0.65), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn-primary:active { transform: translateY(0) scale(0.99); }

.btn-ghost {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.28); }

/* ---- Inputs ---- */
.input-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8e8f5;
  transition: all 0.2s ease;
}
.input-glass:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
  background: rgba(255, 255, 255, 0.08);
}
.input-glass::placeholder { color: rgba(232, 232, 245, 0.35); }
select.input-glass option { background: #16162a; color: #e8e8f5; }

/* ---- Text-Effekte ---- */
.gradient-text {
  background: linear-gradient(120deg, #a78bfa, #60a5fa 45%, #f472b6 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title {
  text-shadow: 0 0 70px rgba(139, 92, 246, 0.55);
  animation: heroIn 0.9s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(30px) rotateX(18deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* ---- Live-Zähler ---- */
.counter-card {
  position: relative;
  overflow: hidden;
}
.counter-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(139, 92, 246, 0.35), transparent 82%);
  animation: spin 5s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.counter-card .counter-body {
  position: relative;
  background: rgba(15, 15, 30, 0.92);
  border-radius: inherit;
  margin: 1px;
}
.counter-num {
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(139, 92, 246, 0.8);
  transition: transform 0.3s ease;
}
.counter-num.bump { animation: bump 0.5s cubic-bezier(0.2, 2.2, 0.4, 1); }
@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); color: #a78bfa; }
  100% { transform: scale(1); }
}

.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 10px #34d399;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* ---- Status Badges ---- */
.badge-vermisst {
  background: rgba(239, 68, 68, 0.16);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.badge-gefunden {
  background: rgba(52, 211, 153, 0.14);
  color: #6ee7b7;
  border: 1px solid rgba(52, 211, 153, 0.4);
}

/* ---- Entry Grid Animation ---- */
.entry-card { animation: cardIn 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
.entry-card:nth-child(1) { animation-delay: 0.03s; }
.entry-card:nth-child(2) { animation-delay: 0.08s; }
.entry-card:nth-child(3) { animation-delay: 0.13s; }
.entry-card:nth-child(4) { animation-delay: 0.18s; }
.entry-card:nth-child(5) { animation-delay: 0.23s; }
.entry-card:nth-child(6) { animation-delay: 0.28s; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(36px) rotateX(-10deg) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}

/* ---- Bild-Platzhalter ---- */
.img-placeholder {
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(6,182,212,0.18));
}

/* ---- Upload-Zone ---- */
.dropzone {
  border: 2px dashed rgba(139, 92, 246, 0.45);
  transition: all 0.25s ease;
}
.dropzone:hover, .dropzone.dragover {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
  transform: scale(1.01);
}

/* ---- Toasts ---- */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toast {
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 500;
  animation: toastIn 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(80px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
.toast-success { background: linear-gradient(135deg, #065f46, #047857); border: 1px solid rgba(52,211,153,0.5); }
.toast-error { background: linear-gradient(135deg, #7f1d1d, #991b1b); border: 1px solid rgba(239,68,68,0.5); }

/* ---- Navbar ---- */
.nav-glass {
  background: rgba(10, 10, 22, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---- Modal ---- */
.modal-backdrop {
  background: rgba(4, 4, 12, 0.75);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box { animation: modalIn 0.35s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Detail-Galerie ---- */
.gallery-thumb { transition: all 0.2s ease; cursor: pointer; border: 2px solid transparent; }
.gallery-thumb:hover { transform: scale(1.06); }
.gallery-thumb.active { border-color: #8b5cf6; box-shadow: 0 0 18px rgba(139,92,246,0.5); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: #0a0a18; }
::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.65); }

/* ---- Admin-Tabellen ---- */
.admin-table tr { transition: background 0.15s ease; }
.admin-table tbody tr:hover { background: rgba(139, 92, 246, 0.07); }

/* ---- Skeleton Loading ---- */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }