/* xx */
/* ===== Kompaktmodus für die Filterleiste ===== */
:root{
  --flt-h: 40px;           /* Hoehe Inputs/Buttons */
  --flt-fs: .95rem;        /* Schriftgroesse Inputs */
  --flt-fs-btn: .95rem;    /* Schriftgroesse Buttons */
  --flt-radius: 22px;      /* Pill-Radius kleiner */
  --flt-pad-y: .45rem;     /* vertikale Padding kleiner */
  --flt-pad-x: .85rem;     /* horizontale Padding kleiner */
}

/* Labels kleiner & enger */
#filterForm .form-label{
  font-size: .85rem;
  margin-bottom: .3rem;
}

/* Inputs/Selects kompakt */
#filterForm .form-select,
#filterForm .form-control{
  height: var(--flt-h);
  font-size: var(--flt-fs);
  border-radius: var(--flt-radius);
  padding: var(--flt-pad-y) calc(var(--flt-pad-x) + .6rem) var(--flt-pad-y) var(--flt-pad-x);
}

/* Chevron-Position beim Select anpassen */
#filterForm .form-select{
  background-position: right .7rem center;
}

/* Buttons kompakt und typografisch ruhiger */
#filterForm .btn{
  height: var(--flt-h);
  border-radius: 999px;
  padding: 0 1rem;
  font-size: var(--flt-fs-btn);
  font-weight: 600;
  letter-spacing: 0;
}

.acc-detail-icons img {
  width: 30px;
  height: auto;
  display: inline-block;
}
.acc-detail-icons {
  position: absolute;
  right: 0;
  top: 20px;
  display: flex;
  gap: .5rem;     /* Abstand zwischen den Icons */
  /*width:50%; */
}


.accordion .accordion-button {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: start;
  gap: .25rem 1rem;
  background: transparent;
  color: #000;
  box-shadow: none;
  border-radius: 0;
  padding: 18px 0;
  min-height: 64px;
  font-weight: 800;
  border-bottom: 2px solid #111;
  font-size: 1.4rem;
}


/* Suche-Placeholder dezent */
#fltQuery::placeholder{ font-size: .95em; }

/* Chips schlanker */
#activeChips .chip{
  font-size: .85rem;
  padding: .25rem .6rem;
}
#activeChips .chip button{
  font-size: .95rem;
  padding: .05rem .25rem;
}

/* Gutter in der Reihe minimal reduzieren */
#filterForm .row.g-3{ --bs-gutter-x: .8rem; --bs-gutter-y: .7rem; }

/* Optional: noch kompakter auf ≥1200px */
@media (min-width: 1200px){
  :root{
    --flt-h: 36px;
    --flt-fs: .9rem;
    --flt-fs-btn: .9rem;
    --flt-radius: 20px;
    --flt-pad-y: .35rem;
    --flt-pad-x: .75rem;
  }
}


/* === Chips – runde kleine X-Buttons === */
#activeChips .chip button {
  border: 1px solid #777;
  border-radius: 50%;        /* rund */
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  transition: all .15s ease;
}

#activeChips .chip button:hover {
  background: #555;
  color: #fff;
  border-color: #555;
}


/* Container */
.acc-detail{ position:relative; }

/* Icons oben rechts */
.acc-detail-icons{
  position:absolute; right:0; top:20px;
  display:flex; gap:.5rem; color:#7b7b7b;
  font-size:1.1rem;
}

/* Überschriften & Text */
.acc-detail-title{
  font-size:1.25rem; font-weight:700; letter-spacing:.2px;
}
.acc-detail-subtitle{
  font-size:1.2rem;
margin-top: 25px;
}
.acc-detail-section{
  margin:.75rem 0 .35rem;
  font-size:1.05rem; font-weight:700;
}
.acc-detail-text{
  margin-bottom:1rem; color:#333;
}

/* Definition-Grid: zwei Spalten, sauber ausgerichtet */
.acc-detail-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.6rem 2rem;
  margin: .2rem 0 1rem;
}
.acc-detail-grid dt{
  font-weight:700; color:#2b2b2b; margin:0 0 .1rem;
}
.acc-detail-grid dd{
  margin:0; color:#444;
}

/* SDG – kleine bunte Quadrate (kannst du durch Images ersetzen) */
.sdg-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:4px; font-weight:700;
  font-size:.9rem; color:#fff; margin-right:.35rem;
}
.sdg-4 { background:#c5192d; }   /* eigene Farben je SDG */
.sdg-12{ background:#bf8b2e; }
.sdg-13{ background:#3f7e44; }

/* Aktionen */
.acc-detail-actions{ margin-top:.25rem; }
/*
.acc-detail-more{
  font-weight:600; text-decoration:none;
}
.acc-detail-more:hover{ text-decoration:underline; }
*/

.acc-detail-more {
  display: inline-block;
  background-color: #1da1f2; /* Hellblau */
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: none;
  border-radius: 999px; /* Voll abgerundet */
  padding: 8px 22px!important;
  font-size: 15px;
  transition: all 0.2s ease-in-out;
}

.acc-detail-more:hover {
  background-color: #0d8de1; /* Etwas dunkler beim Hover */
  text-decoration: none!important; /* Linie wie im Screenshot */
  color: #ffffff!important;
}



/* Responsive: auf Mobil eine Spalte */
@media (max-width: 768px){
  .acc-detail-grid{ grid-template-columns: 1fr; gap:.5rem 1rem; }
  .acc-detail-icons{ font-size:1rem; width:50%;}
}


/* Dropdown so breit wie Button */
.filter-menu{ min-width: 100%; max-height: 320px; overflow:auto; border-radius: .75rem; }
.filter-btn{ height: 40px; }
.filter-btn .filter-label{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.selected-count:empty{ display:none; }


button#searchSubmitBtn.btn.btn-primary.rounded-pill.flex-grow-1,
.search-dropdown button.btn.btn-primary.rounded-pill.flex-grow-1 {
  background-color: #1C9BEB!important;
  border-color: #1C9BEB!important;
  color: #fff !important;
}


button#searchSubmitBtn.btn.btn-primary.rounded-pill.flex-grow-1:hover,
.search-dropdown button.btn.btn-primary.rounded-pill.flex-grow-1:hover,
button#searchSubmitBtn.btn.btn-primary.rounded-pill.flex-grow-1:focus,
.search-dropdown button.btn.btn-primary.rounded-pill.flex-grow-1:focus {
  background-color: #1C9BEB!important; /* dunkleres Blau beim Hover */
  border-color: #1C9BEB!important;
  color: #fff !important;
}