/* Standortfinder — Liste links, Karte rechts. Farben/Groessen kommen aus den
   Divi-Designvariablen, damit Aenderungen im Divi-Design durchschlagen. */

.ksf {
  --ksf-blau: var(--gcid-primary-color, #1272b8);
  --ksf-dunkel: var(--gcid-sona-dark-grey, #262626);
  --ksf-weiss: var(--gcid-sona-weiss, #fff);
  --ksf-linie: rgba(38, 38, 38, .12);
}

/* --- Filterleiste --- */
.ksf-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.ksf-field {
  position: relative;
  display: flex;
  align-items: center;
}
.ksf-field svg {
  position: absolute;
  left: 18px;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.ksf-input,
.ksf-select {
  border: 0;
  border-radius: 60px;
  padding: 14px 24px 14px 48px;
  font-size: var(--gvid-sona-fs-button, .875rem);
  font-family: inherit;
  appearance: none;
  min-width: 230px;
}
.ksf-input::placeholder { color: currentColor; opacity: .9; }
.ksf-input:focus-visible,
.ksf-select:focus-visible { outline: 2px solid var(--ksf-dunkel); outline-offset: 2px; }

/* Praxis-Suche: blau. Ortschafts-Suche: schwarz. Kanton: hellgrau. */
.ksf-field--praxis .ksf-input { background: var(--ksf-blau); color: var(--ksf-weiss); }
.ksf-field--praxis svg { color: var(--ksf-weiss); }
.ksf-field--ort .ksf-input { background: var(--ksf-dunkel); color: var(--ksf-weiss); }
.ksf-field--ort svg { color: var(--ksf-weiss); }
.ksf-field--kanton .ksf-select {
  background: #f1f1f1;
  color: var(--ksf-dunkel);
  padding-left: 24px;
  padding-right: 48px;
  font-style: italic;
  cursor: pointer;
}
.ksf-field--kanton { position: relative; }
.ksf-field--kanton::after {
  content: "";
  position: absolute;
  right: 22px;
  width: 10px; height: 10px;
  border-right: 2px solid var(--ksf-dunkel);
  border-bottom: 2px solid var(--ksf-dunkel);
  transform: rotate(45deg) translateY(-3px);
  pointer-events: none;
}

/* --- Layout: Liste + Karte --- */
.ksf-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 24px;
  align-items: stretch;
}
.ksf-listwrap {
  max-height: 680px;
  overflow-y: auto;
  padding-right: 12px;
  scrollbar-width: thin;
}
.ksf-map {
  min-height: 680px;
  border-radius: 4px;
  z-index: 0; /* unter Divis Menues halten */
}

/* --- Karte (Eintrag) --- */
.ksf-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--ksf-linie);
}
.ksf-card[hidden] { display: none; }
.ksf-card img.ksf-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}
.ksf-thumb--empty { background: #eee; border-radius: 18px; width: 96px; height: 96px; }

.ksf-card h2 {
  margin: 0 0 8px;
  font-size: var(--gvid-sona-fs-product-name, 1.25rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ksf-blau);
}
/* Der Titel ist ein Button (Tastaturbedienung), soll aber wie Text aussehen. */
.ksf-card h2 .ksf-title {
  all: unset;
  display: inline;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.ksf-card h2 .ksf-title:hover { text-decoration: underline; }

/* Sichtbarer Fokus -- ohne den ist Tastaturbedienung praktisch unbrauchbar. */
.ksf-title:focus-visible,
.ksf-address:focus-visible,
.ksf-contact a:focus-visible,
.ksf-empty-btn:focus-visible,
.ksf-listwrap:focus-visible {
  outline: 2px solid var(--ksf-blau);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Adresse: ein Link, zwei Zeilen. */
.ksf-address { display: block; text-decoration: none; color: inherit; }
a.ksf-address:hover .ksf-line { text-decoration: underline; }

.ksf-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  font-style: italic;
  font-size: var(--gvid-sona-fs-body, 1rem);
  color: var(--ksf-dunkel);
  text-decoration: none;
}
.ksf-line svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ksf-dunkel); }

/* Zweite Spalte: Kontaktdaten -- kursiv wie die Adresse */
.ksf-contact { display: flex; flex-direction: column; gap: 4px; }
.ksf-contact a, .ksf-contact span {
  font-size: var(--gvid-sona-fs-body, 1rem);
  font-style: italic;
  font-weight: 400;
  color: var(--ksf-dunkel);
  text-decoration: none;
  word-break: break-word;
}
.ksf-contact a:hover { text-decoration: underline; }

/* Leermeldung + optionaler Button (beides in den Einstellungen pflegbar) */
.ksf-empty { padding: 32px 0; }
.ksf-empty[hidden] { display: none; }
.ksf-empty p { margin: 0 0 16px; font-style: italic; font-size: var(--gvid-sona-fs-body, 1rem); }
.ksf-empty-btn {
  display: inline-block;
  border-radius: 60px;
  padding: 14px 28px;
  font-size: var(--gvid-sona-fs-button, .875rem);
  font-weight: 500;
  text-decoration: none;
  background: var(--ksf-blau);
  color: var(--ksf-weiss);
}
.ksf-empty-btn:hover { background: var(--ksf-dunkel); color: var(--ksf-weiss); }

/* --- Kartenmarker --- */
.ksf-pin { background: none; border: 0; }
.ksf-popup-title { font-weight: 700; color: var(--ksf-blau); margin-bottom: 4px; }
.ksf-popup-addr { font-style: italic; }

/* --- Responsive --- */
@media (max-width: 980px) {
  .ksf-layout { grid-template-columns: 1fr; }
  .ksf-map { min-height: 420px; order: -1; }
  .ksf-listwrap { max-height: none; overflow: visible; padding-right: 0; }
  /* Kontaktspalte rutscht unter die Adresse */
  .ksf-card { grid-template-columns: 80px minmax(0, 1fr); }
  .ksf-card img.ksf-thumb, .ksf-thumb--empty { width: 80px; height: 80px; }
  .ksf-contact { grid-column: 2; margin-top: 8px; }
}
@media (max-width: 600px) {
  .ksf-filter { flex-direction: column; align-items: stretch; }
  .ksf-input, .ksf-select { width: 100%; min-width: 0; }
}