/* ================================================
   FlohCheck - Suchalarm-Modul
   ================================================ */

.suchalarm {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.checkliste-kaufchecks {
  display: grid;
  gap: 10px;
}

.suchalarm__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.suchalarm__kopfaktionen {
  display: flex;
  align-items: center;
  gap: 8px;
}

.suchalarm__titelblock {
  min-width: 0;
}

.suchalarm__titel {
  color: var(--farbe-weiss);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
}

.suchalarm__meta {
  display: block;
  margin-top: 4px;
  color: var(--farbe-text-gedimmt);
  font-size: 0.78rem;
  line-height: 1.25;
}

.suchalarm__icon-button,
.suchalarm__button,
.suchalarm__mini-button,
.suchalarm__link-button,
.suchalarm__loeschen {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--farbe-text);
  font-family: var(--schrift);
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.suchalarm__icon-button {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-weiss);
  background: linear-gradient(180deg, var(--farbe-gruen-hell) 0%, var(--farbe-gruen) 100%);
  border-color: rgba(76, 175, 80, 0.45);
  flex-shrink: 0;
}

.suchalarm__icon-button svg,
.suchalarm__button svg,
.suchalarm__mini-button svg,
.suchalarm__link-button svg,
.suchalarm__loeschen svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.suchalarm__steuerung {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(30, 30, 30, 0.82);
}

.suchalarm__aktionen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.suchalarm__button,
.suchalarm__mini-button,
.suchalarm__link-button {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.suchalarm__button {
  background: rgba(46, 125, 50, 0.18);
  color: var(--farbe-gruen-hell);
  border-color: rgba(76, 175, 80, 0.24);
}

.suchalarm__button:disabled,
.suchalarm__mini-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.suchalarm__range {
  display: grid;
  gap: 7px;
}

.suchalarm__range-label {
  color: var(--farbe-text-gedimmt);
  font-size: 0.78rem;
  font-weight: 700;
}

.suchalarm__range input {
  width: 100%;
  accent-color: var(--farbe-gruen-hell);
}

.suchalarm__leer {
  padding: 18px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.suchalarm__leer-titel {
  color: var(--farbe-weiss);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.25;
}

.suchalarm__leer-text {
  margin-top: 4px;
  color: var(--farbe-text-gedimmt);
  font-size: 0.8rem;
  line-height: 1.35;
}

.suchalarm__liste,
.suchalarm__links-liste,
.suchalarm-auswahl__liste {
  list-style: none;
}

.suchalarm__liste {
  display: grid;
  gap: 10px;
}

.suchalarm-karte {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 11px;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(22, 24, 27, 0.98) 0%, rgba(14, 16, 18, 0.98) 100%);
}

.suchalarm-karte__bild {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.suchalarm-karte__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suchalarm-karte__emoji {
  font-size: 1.55rem;
}

.suchalarm-karte__inhalt {
  min-width: 0;
  display: grid;
  gap: 9px;
}

.suchalarm-karte__kopf {
  display: grid;
  gap: 4px;
}

.suchalarm-karte__name {
  color: var(--farbe-weiss);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.suchalarm-karte__status {
  color: var(--farbe-text-gedimmt);
  font-size: 0.74rem;
  line-height: 1.25;
}

.suchalarm-karte__treffer {
  color: var(--farbe-gruen-hell);
}

.suchalarm-karte__trefferliste {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: 2px;
}

.suchalarm-karte__trefferliste--scrollbar {
  max-height: 468px;
  overflow-y: auto;
  padding-right: 4px;
}

.suchalarm-karte__treffereintrag {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.suchalarm-karte__trefferloeschen {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--farbe-text-gedimmt);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.suchalarm-karte__trefferloeschen svg {
  width: 14px;
  height: 14px;
}

.suchalarm-karte__trefferloeschen:active {
  color: #ff8a65;
  background: rgba(255, 138, 101, 0.08);
}

.suchalarm-karte__trefferlink {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(76, 175, 80, 0.18);
  background: rgba(76, 175, 80, 0.08);
  text-decoration: none;
}

.suchalarm-karte__trefferlink--gesehen {
  opacity: 0.58;
  filter: saturate(0.45);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
}

.suchalarm-karte__trefferlink--gesehen .suchalarm-karte__trefferlabel {
  color: var(--farbe-text-gedimmt);
}

.suchalarm-karte__trefferlabel {
  color: var(--farbe-text);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}

.suchalarm-karte__treffermeta {
  color: var(--farbe-text-gedimmt);
  font-size: 0.74rem;
  line-height: 1.2;
  white-space: nowrap;
}

.suchalarm-karte__warnung {
  color: #ffb36b;
}

.suchalarm-karte__aktionen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 38px;
  gap: 8px;
  align-items: center;
}

.suchalarm__link-button {
  background: rgba(76, 175, 80, 0.14);
  color: var(--farbe-gruen-hell);
  border-color: rgba(76, 175, 80, 0.22);
}

.suchalarm__mini-button {
  min-width: 42px;
  padding: 0 10px;
  color: var(--farbe-text);
}

.suchalarm__mini-button--text {
  min-width: 74px;
  white-space: nowrap;
}

.suchalarm__loeschen {
  width: 38px;
  height: 42px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--farbe-text-gedimmt);
}

.suchalarm__loeschen:active {
  color: #ff8a65;
  background: rgba(255, 138, 101, 0.08);
}

.suchalarm-switch {
  min-width: 68px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--farbe-text-gedimmt);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.suchalarm-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.suchalarm-switch__spur {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  flex-shrink: 0;
}

.suchalarm-switch__spur::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--farbe-weiss);
  transition: transform 0.16s ease;
}

.suchalarm-switch input:checked + .suchalarm-switch__spur {
  background: var(--farbe-gruen);
}

.suchalarm-switch input:checked + .suchalarm-switch__spur::after {
  transform: translateX(14px);
}

.suchalarm-switch__text {
  font-size: 0.72rem;
  font-weight: 800;
}

.suchalarm__links {
  display: grid;
  gap: 8px;
  padding: 11px;
  border-radius: 8px;
  border: 1px solid rgba(76, 175, 80, 0.16);
  background: rgba(46, 125, 50, 0.1);
}

.suchalarm__links-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.suchalarm__links-titel {
  color: var(--farbe-weiss);
  font-size: 0.85rem;
  font-weight: 800;
}

.suchalarm__links-liste {
  display: grid;
  gap: 7px;
}

.suchalarm__links-liste a {
  color: var(--farbe-gruen-hell);
  font-size: 0.82rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.suchalarm-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  align-items: flex-end;
  background: rgba(0, 0, 0, 0.72);
}

.suchalarm-overlay--offen {
  display: flex;
}

.suchalarm-auswahl {
  width: 100%;
  max-width: 600px;
  max-height: min(86dvh, 760px);
  margin: 0 auto;
  padding: 14px;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #15171a;
  overflow: auto;
}

.suchalarm-auswahl__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.suchalarm-auswahl__titel {
  color: var(--farbe-weiss);
  font-size: 1.02rem;
  line-height: 1.2;
  font-weight: 800;
}

.suchalarm-auswahl__suche {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 12px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--farbe-weiss);
  font-family: var(--schrift);
  font-size: 0.95rem;
}

.suchalarm-auswahl__liste {
  display: grid;
  gap: 8px;
  max-height: min(58dvh, 560px);
  overflow-y: auto;
  padding-right: 4px;
}

.suchalarm-auswahl__zeile {
  display: grid;
  grid-template-columns: auto 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.suchalarm-auswahl__zeile input {
  accent-color: var(--farbe-gruen-hell);
}

.suchalarm-auswahl__thumb {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
}

.suchalarm-auswahl__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suchalarm-auswahl__name {
  display: block;
  color: var(--farbe-weiss);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
}

.suchalarm-auswahl__meta {
  display: block;
  margin-top: 3px;
  color: var(--farbe-text-gedimmt);
  font-size: 0.72rem;
  line-height: 1.25;
}

.suchalarm-auswahl__fuss {
  position: sticky;
  bottom: -14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding-top: 12px;
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(21, 23, 26, 0) 0%, #15171a 28%);
}

@media (min-width: 768px) {
  .suchalarm-karte {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .suchalarm-karte__bild {
    width: 64px;
    height: 64px;
  }
}