/* =========================================================
   SUCHSEITE
   Ergänzt kategorie.css nur für /suche.php
========================================================= */

.search-toolbar{
  display:grid;
  grid-template-columns:minmax(320px, 1fr) auto;
  gap:18px;
  align-items:end;
  width:100%;
}

.search-toolbar__main{
  min-width:0;
}

.search-toolbar__search,
.search-toolbar__field{
  display:grid;
  gap:8px;
  min-width:0;
}

.search-toolbar__search > span,
.search-toolbar__field > span{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#6b7280;
}

.search-toolbar__searchbox{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  min-height:64px;
  padding:7px;
  border:1px solid #d9dfe8;
  border-radius:20px;
  background:linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  box-shadow:
    0 12px 26px rgba(20,22,28,.07),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.search-toolbar__searchbox:focus-within{
  border-color:rgba(198,40,40,.34);
  box-shadow:
    0 0 0 4px rgba(198,40,40,.08),
    0 14px 30px rgba(20,22,28,.09),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.search-toolbar__input{
  appearance:none;
  width:100%;
  min-width:0;
  height:50px;
  padding:0 16px;
  border:0;
  outline:0;
  background:transparent;
  color:#171a20;
  font-size:18px;
  font-weight:800;
}

.search-toolbar__input::placeholder{
  color:#8b95a3;
  font-weight:700;
}

.search-toolbar__button{
  appearance:none;
  height:50px;
  min-width:132px;
  padding:0 18px;
  border:0;
  border-radius:15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(180deg, #5a5e66 0%, #31353c 100%);
  color:#fff;
  font-size:14px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 22px rgba(45,49,56,.18);
  white-space:nowrap;
  transition:
    transform .18s var(--ease),
    box-shadow .18s var(--ease),
    filter .18s var(--ease);
}

.search-toolbar__button:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 16px 28px rgba(45,49,56,.22);
}

.search-toolbar__button:active{
  transform:translateY(0);
}

.search-toolbar__button-icon{
  font-size:18px;
  line-height:1;
}

.search-toolbar__filters{
  display:flex;
  align-items:end;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
}

.search-toolbar__field{
  min-width:170px;
}

.search-toolbar__field select{
  appearance:none;
  min-height:50px;
  width:100%;
  padding:0 42px 0 14px;
  border:1px solid #d9dfe8;
  border-radius:14px;
  background:
    linear-gradient(45deg, transparent 50%, #6b7280 50%) calc(100% - 20px) 21px / 6px 6px no-repeat,
    linear-gradient(135deg, #6b7280 50%, transparent 50%) calc(100% - 14px) 21px / 6px 6px no-repeat,
    linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
  color:#1d2430;
  font-size:14px;
  font-weight:800;
  outline:none;
  box-shadow:0 10px 18px rgba(20,22,28,.05);
  cursor:pointer;
}

.search-toolbar__field select:focus{
  border-color:rgba(198,40,40,.30);
  box-shadow:
    0 0 0 4px rgba(198,40,40,.08),
    0 10px 18px rgba(20,22,28,.05);
}

@media (max-width:1100px){
  .search-toolbar{
    grid-template-columns:1fr;
  }

  .search-toolbar__filters{
    justify-content:flex-start;
  }
}

@media (max-width:700px){
  .search-toolbar{
    gap:14px;
  }

  .search-toolbar__searchbox{
    grid-template-columns:1fr;
    padding:8px;
    border-radius:18px;
  }

  .search-toolbar__input{
    height:50px;
    font-size:16px;
    padding:0 12px;
  }

  .search-toolbar__button{
    width:100%;
    min-width:0;
  }

  .search-toolbar__filters{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .search-toolbar__field{
    width:100%;
    min-width:0;
  }
}