/* =====================================================
   Zahnarzt Suche v2 – Frontend Styles (CSS-Var gesteuert)
   ===================================================== */

:root {
  --zs-primary:        #01696f;
  --zs-primary-hover:  #0c4e54;
  --zs-btn-text:       #ffffff;
  --zs-btn-radius:     8px;
  --zs-input-bg:       #ffffff;
  --zs-input-border:   #d4d1ca;
  --zs-input-bw:       1px;
  --zs-input-radius:   12px;
  --zs-input-focus:    #01696f;
  --zs-results-bg:     transparent;
  --zs-card-bg:        #ffffff;
  --zs-card-border:    rgba(0,0,0,0.10);
  --zs-card-radius:    12px;
  --zs-card-title:     #01696f;
  --zs-card-text:      #28251d;
  --zs-card-muted:     #7a7974;
  --zs-cta-bg:         #01696f;
  --zs-cta-text:       #ffffff;
  --zs-shadow:         0 4px 20px rgba(0,0,0,0.08);
  --zs-transition:     180ms cubic-bezier(0.16,1,0.3,1);
}

.zs-wrapper {
  font-family: var(--z24-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem;
  color: var(--zs-card-text);
  background: var(--zs-results-bg);
}

/* ── Suchleiste ── */
.zs-search-box {
  display: flex;
  align-items: center;
  background: var(--zs-input-bg);
  border: var(--zs-input-bw) solid var(--zs-input-border);
  border-radius: var(--zs-input-radius);
  box-shadow: none;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  gap: 0.5rem;
  transition: border-color var(--zs-transition), box-shadow var(--zs-transition);
}

.zs-search-box:focus-within {
  border-color: var(--zs-input-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zs-input-focus) 15%, transparent);
}

.zs-icon { color: var(--zs-card-muted); flex-shrink:0; display:flex; align-items:center; }

.zs-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--zs-card-text);
  min-width: 0;
}
.zs-input::placeholder { color: #b0aea8; }

/* Radius Dropdown */
.zs-radius-select {
  border: 1px solid var(--zs-input-border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--zs-input-bg);
  color: var(--zs-card-text);
  flex-shrink: 0;
  outline: none;
  cursor: pointer;
}
.zs-radius-select:focus { border-color: var(--zs-input-focus); }

/* Button */
.zs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--zs-primary);
  color: var(--zs-btn-text);
  border: none;
  border-radius: var(--zs-btn-radius);
  padding: 0.65rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--zs-transition), transform var(--zs-transition);
  flex-shrink: 0;
}
.zs-btn:hover  { background: var(--zs-primary-hover); }
.zs-btn:active { transform: scale(0.97); }

.zs-hint { font-size: 0.82rem; color: var(--zs-card-muted); margin: 0.5rem 0 0 0.25rem; }

/* Loader */
.zs-loader { display:none; align-items:center; gap:.75rem; margin-top:1.5rem; color:var(--zs-card-muted); font-size:.9rem; }
.zs-loader.is-visible { display:flex; }
.zs-spinner { width:20px;height:20px;border:2.5px solid color-mix(in srgb,var(--zs-primary) 25%,transparent);border-top-color:var(--zs-primary);border-radius:50%;animation:zs-spin .7s linear infinite;flex-shrink:0; }
@keyframes zs-spin{to{transform:rotate(360deg)}}

/* Error */
.zs-error { display:none; margin-top:1.25rem; background:#fff5f5; border:1px solid rgba(161,44,123,.18); color:#7d1e5e; border-radius:var(--zs-card-radius); padding:.85rem 1rem; font-size:.9rem; }
.zs-error.is-visible { display:block; }

/* Header */
.zs-results-header { margin-top:1.75rem; margin-bottom:.75rem; font-size:.88rem; color:var(--zs-card-muted); font-weight:500; }
.zs-results-header strong { color:var(--zs-card-text); }

/* Karten */
.zs-results { display:flex; flex-direction:column; gap:.75rem; }

.zs-card {
  background: var(--zs-card-bg);
  border: 1px solid var(--zs-card-border);
  border-radius: var(--zs-card-radius);
  padding: 1.1rem 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .5rem 1rem;
  align-items: start;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--zs-transition), transform var(--zs-transition), border-color var(--zs-transition);
  animation: zs-fade-in .3s ease both;
}
.zs-card:hover { box-shadow:0 6px 20px rgba(0,0,0,.10); border-color:color-mix(in srgb,var(--zs-primary) 40%,transparent); transform:translateY(-2px); }

@keyframes zs-fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.zs-card:nth-child(1){animation-delay:.00s}.zs-card:nth-child(2){animation-delay:.05s}
.zs-card:nth-child(3){animation-delay:.10s}.zs-card:nth-child(4){animation-delay:.15s}
.zs-card:nth-child(5){animation-delay:.20s}.zs-card:nth-child(6){animation-delay:.25s}

.zs-rank { width:32px;height:32px;background:color-mix(in srgb,var(--zs-primary) 10%,transparent);color:var(--zs-primary);font-weight:700;font-size:.85rem;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px; }

.zs-card-body { min-width:0; }
.zs-card-title { font-weight:700; font-size:1rem; color:var(--zs-card-title); margin:0 0 .3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.zs-card-address { font-size:.86rem; color:var(--zs-card-muted); margin:0 0 .25rem; }
.zs-card-phone { font-size:.86rem; color:var(--zs-card-text); }
.zs-card-phone a { color:inherit; text-decoration:none; }
.zs-card-phone a:hover { color:var(--zs-primary); }
.zs-card-excerpt { font-size:.83rem; color:var(--zs-card-muted); margin-top:.4rem; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.zs-distance { text-align:right; flex-shrink:0; }
.zs-distance-km { font-size:1rem; font-weight:700; color:var(--zs-primary); display:block; }
.zs-distance-label { font-size:.72rem; color:var(--zs-card-muted); text-transform:uppercase; letter-spacing:.05em; }

.zs-card-cta { grid-column:3; grid-row:2; align-self:end; background:var(--zs-cta-bg); color:var(--zs-cta-text) !important; font-size:.78rem; font-weight:600; padding:.4rem .85rem; border-radius:.4rem; text-decoration:none; white-space:nowrap; transition:filter var(--zs-transition); display:inline-block; margin-top:.5rem; }
.zs-card-cta:hover { filter:brightness(0.88); }

@media(max-width:540px){
  .zs-btn-text { display:none; }
  .zs-btn { padding:.65rem .9rem; }
  .zs-card { grid-template-columns:auto 1fr; }
  .zs-distance { display:none; }
  .zs-card-cta { grid-column:2; }
}