:root{
  --bg:#0b1020; --bg-2:#0e1429; --fg:#e5e7eb; --muted:#9ca3af;
  --brand:#22c55e; --brand-2:#16a34a; --border:#1f2937;
  --card:#111827; --shadow:0 10px 20px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--fg)}
header{position:sticky;top:0;background:rgba(11,16,32,.7);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);z-index:10}
.container{max-width:1100px;margin:0 auto;padding:1rem}
h1{font-size:1.8rem;margin:.2rem 0 0.6rem}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
a.btn, button.btn{display:inline-block;padding:.6rem .9rem;border-radius:.75rem;border:1px solid var(--border);background:var(--card);color:var(--fg);text-decoration:none;box-shadow:var(--shadow)}
a.btn.brand, button.btn.brand{background:var(--brand);border-color:transparent;color:#07120a;font-weight:600}
.filters{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin:.75rem 0}
@media (max-width:720px){ .filters{grid-template-columns:1fr} }
input, select, textarea{width:100%;padding:.65rem .7rem;border-radius:.65rem;border:1px solid var(--border);background:var(--bg-2);color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 2rem}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid{grid-template-columns:1fr} }
.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}

/* ==== FIX: Bild komplett anzeigen statt zuschneiden ==== */
.card img{
  width:100%;
  height:220px;                 /* einheitliche Kachelhöhe beibehalten */
  object-fit:contain !important;/* GANZES Bild, kein Crop */
  background:#0a0a0a;           /* Letterbox-Hintergrund */
}

.card .content{padding:.9rem}
.badges{display:flex;gap:.35rem;flex-wrap:wrap;margin:.35rem 0 .6rem}
.badge{font-size:.78rem;padding:.25rem .5rem;border-radius:.6rem;border:1px solid var(--border);background:rgba(255,255,255,.04)}
.meta{font-size:.88rem;color:var(--muted)}
.kicker{font-weight:600;margin:.1rem 0}
footer{padding:2rem 0 3rem;color:var(--muted);text-align:center}
.empty{opacity:.8;border:1px dashed var(--border);border-radius:1rem;padding:2rem;text-align:center}
.success{border:1px solid #1a5e2a;background:rgba(34,197,94,.12);color:#bdf7cd;padding:.9rem;border-radius:.6rem;margin:.8rem 0}
.error{border:1px solid #5e1a1a;background:rgba(239,68,68,.12);color:#ffd0d0;padding:.9rem;border-radius:.6rem;margin:.8rem 0}
label{font-size:.9rem;color:var(--muted);margin-bottom:.25rem;display:block}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:800px){ .formgrid{grid-template-columns:1fr} }
.req{color:#ef4444}
.small{font-size:.85rem;color:var(--muted)}
/* === FIX A: Bild komplett zeigen (nur auf Vermisste-Tiere-Seite) === */
.page-missing-pets .card .thumb{
  height:220px;                /* gleich hohe Kacheln */
  display:grid;
  place-items:center;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border-top-left-radius:1rem;
  border-top-right-radius:1rem;
}

.page-missing-pets .card .thumb img{
  width:100%;
  height:100%;
  object-fit:contain;          /* GANZES Bild, kein Crop */
  object-position:center;
  display:block;               /* entfernt unteren Inline-Spalt */
  background:#0a0a0a;          /* Letterbox-Hintergrund */
}