Simple-Wishlist/css/tweaks.css

/* ============ Base / Vars ============ */
@font-face {
  font-family: "Comfortaa";
  font-style: normal;
  font-weight: 300;
  src: url(../webfonts/comfortaa.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
:root {
  --wl-card-radius: 0.75rem;
}
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue",
    Arial, "Comfortaa", sans-serif;
}

/* Utility */
.object-fit-cover {
  object-fit: cover;
}
.object-fit-contain {
  object-fit: contain;
}

/* ============ Cards ============ */
.card {
  border-radius: var(--wl-card-radius);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card .ratio {
  --bs-aspect-ratio: 56.25%; /* 16:9 Bildfläche */
  border-top-left-radius: var(--wl-card-radius);
  border-top-right-radius: var(--wl-card-radius);
  background: #fff;
}
.card-img-top {
  width: 100%;
  height: 100%;
  padding: 0;
  display: block;
}
.card-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 9rem;
}

/* Titelzeile */
.card-title-row {
  gap: 0.5rem;
}
.card-title-row .card-title,
.card-title {
  margin: 0 0 0.25rem 0;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qty-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  line-height: 1;
  border-radius: 999px;
  background: var(--bs-gray-200);
  color: var(--bs-gray-800);
}

/* Beschreibung (2 Zeilen Ellipsis) */
.card-text {
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

/* Status rechts */
.status-right .fs-6 {
  line-height: 1.2;
}
.card .text-end small,
.card .text-end .badge {
  white-space: nowrap;
}

/* Header Controls */
.navbar-brand svg {
  opacity: 0.9;
}
.navbar .form-control#sortby {
  min-width: 10.5rem;
}

/* Demo-/Bootstrap-Beispielkram killen */
.bd-placeholder-img,
.bd-placeholder-img-lg,
.b-example-divider,
.b-example-vr,
.nav-scroller,
.nav-scroller .nav {
  display: none !important;
}

/* ============ Admin-Icons (schwebend) ============ */
/* schwebende Admin-Icons sichtbar machen */
.wl-card {
  position: relative;
} /* hast du schon */
.wl-card .admin-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  border-radius: 999px;
  padding: 0.125rem;
  z-index: 10;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* beim Hovern (oder Tastaturfokus) einblenden */
.wl-card:hover .admin-actions {
  opacity: 1;
  transform: none;
}

/* --- Admin-Icon oben rechts bleibt kompakt --- */
.wl-card .btn-icon {
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* ============ Untere Aktionsleiste ============ */
.btn-group-pills {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Idle: klein und fix 40px */
.btn-group-pills > .btn.btn-pill {
  flex: 0 0 40px !important;
  min-width: 40px; /* falls Bootstrap-Mindestbreiten reinfunken */
}

/* Hover/Fokus/Aktiv: darf wachsen */
.btn-group-pills > .btn.btn-pill:hover,
.btn-group-pills > .btn.btn-pill:focus,
.btn-group-pills > .btn.btn-pill:active {
  flex: 0 1 16rem !important; /* überschreibt die Idle-Regel */
  width: auto !important; /* falls irgendwo width:40px gewinnt */
  padding: 0.5rem 0.8rem; /* „aufklappen“ */
  justify-content: flex-start;
}

/* Text mit aufklappen */
.btn-pill:hover span,
.btn-pill:focus span,
.btn-pill:active span {
  width: auto;
  opacity: 1;
  margin-left: 0.35rem;
}

/* kompakter Grundzustand: NUR Icon, super schmal */
.btn-pill {
  box-sizing: border-box; /* Breite inkl. Padding & Border */
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  white-space: nowrap;
}

.btn-pill i {
  font-size: 1rem;
  line-height: 1;
  margin: 0 0.5rem;
}
.btn-pill span {
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 0;
  transition: width 0.18s ease, opacity 0.18s ease, margin-left 0.18s ease;
}

/* Hover: Button wächst, Text klappt auf */
.btn-pill:hover {
  width: auto;
  flex: 0 1 16rem;
  padding: 0.5rem 0.8rem;
  /* Keine Ausrichtung hier setzen – die Utility-Klasse bleibt wirksam */
}
.btn-pill:hover span {
  width: auto;
  opacity: 1;
  margin-left: 0.35rem;
}

/* Fokus sichtbar (zugänglich) */
.btn-pill:focus-visible {
  outline: 2px solid rgba(13, 110, 253, 0.5);
  outline-offset: 2px;
}

/* ================= Footer ================== */

.icon-sm {
  width: 24px; /* oder 24px, wenn du es etwas größer magst */
  height: auto;
  vertical-align: middle;
}

/* ============ Responsive Tweaks ============ */
@media (max-width: 575.98px) {
  .card-body {
    min-height: unset;
  }
  .btn-group-pills {
    gap: 0.35rem;
  }
  .btn-pill {
    width: 38px;
    flex-basis: 38px;
  }
}

/* ============ Add/Edit-Modal  ============ */
/* Bild-Preview im Add/Edit-Modal begrenzen */
#ImgPreviewWrap {
  max-height: 240px; /* wie hoch darf’s werden */
  overflow: hidden; /* nix überlappen lassen */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: #fff;
}

#ImgPreview {
  display: block;
  max-width: 100%;
  max-height: 220px; /* = Wrap - Padding */
  width: auto;
  height: auto;
  object-fit: contain; /* immer komplett sichtbar */
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}