/* ============================================================
   HÄUSER-TEASER + SUCHFELD - Wohnungsmarkt Erzgebirge (DIO 2.5.0)
   Gehört zu [deckert_haeuser] und [deckert_haeuser_suche].
   Farben = Dark-Design der Objektliste (flowfact-dark.css).
   ============================================================ */
:root{
  --dh-bg:#15161a;
  --dh-card:#1a1c20;
  --dh-card-hover:#20232a;
  --dh-line:#2a2c33;
  --dh-strong:#f5f2e9;
  --dh-text:#e6e3da;
  --dh-muted:#b3b0a6;
  --dh-green:#83b82a;
  --dh-green-hover:#94cc36;
  --dh-green-dark:#4a7010;   /* Schattenkante wie der Divi-Button */
  --dh-green-soft:rgba(131,184,42,.12);
  --dh-radius:10px;
  --dh-radius-btn:5px;
}

/* --- Wrapper ------------------------------------------------------------- */
.dh-wrap{ width:100%; margin:0; padding:10px 0 0; }

/* --- Tabs: abgerundete Rechtecke wie die Filterfelder der Objektliste ----- */
.dh-tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin-bottom:34px;
}
.dh-tabs .dh-tab{
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:1rem; font-weight:500; line-height:1.2;
  padding:10px 18px !important;
  border:1px solid var(--dh-line) !important;
  border-radius:var(--dh-radius-btn) !important;
  background:var(--dh-card) !important;
  color:var(--dh-text) !important;
  cursor:pointer;
  transition:background-color .15s, border-color .15s, color .15s;
}
/* Divi hängt an Buttons ein ::after-Icon */
.dh-tabs .dh-tab::after,
.dh-tabs .dh-tab::before{ content:none !important; display:none !important; }
.dh-tabs .dh-tab:hover{ border-color:var(--dh-green) !important; color:var(--dh-strong) !important; }
.dh-tabs .dh-tab.is-active{
  background:var(--dh-green) !important;
  border-color:var(--dh-green) !important;
  color:#fff !important;
}
.dh-tabs .dh-tab:focus-visible{ outline:2px solid var(--dh-green); outline-offset:3px; }

/* --- Raster: 4 Spalten, Anzahl kommt als --dh-cols aus dem Shortcode ------ */
.dh-grid{
  display:grid;
  grid-template-columns:repeat(var(--dh-cols,4), minmax(0,1fr));
  gap:24px;
}
.dh-card{
  background:var(--dh-card);
  border:1px solid var(--dh-line);
  border-radius:var(--dh-radius);
  overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dh-card[hidden]{ display:none !important; }
.dh-card:hover{
  transform:translateY(-4px);
  border-color:var(--dh-green);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.5);
}

/* Bild mit Haustyp-Label, unten weicher Verlauf in die Karte */
.dh-card .dh-card-img{
  position:relative; display:block;
  aspect-ratio:3/2; overflow:hidden;
  background:#0a0b0d; line-height:0;
}
.dh-card .dh-card-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.dh-card:hover .dh-card-img img{ transform:scale(1.04); }
.dh-card .dh-card-img::after{
  content:""; position:absolute; inset:auto 0 0 0; height:40%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(26,28,32,.55));
}
/* Lichtkante oben beim Hover */
.dh-card{ position:relative; }
.dh-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--dh-green),transparent);
  opacity:0; transition:opacity .25s ease;
}
.dh-card:hover::before{ opacity:1; }
.dh-tag{
  position:absolute; left:12px; top:12px; z-index:1;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:6px 10px; border-radius:var(--dh-radius-btn);
  background:rgba(13,14,17,.82); border:1px solid rgba(131,184,42,.55);
  color:var(--dh-strong); font-size:.8125rem; font-weight:500; line-height:1;
}

/* Inhalt */
.dh-card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; flex:1; }
.dh-card-body h3.dh-title{
  font-size:1.1rem !important; line-height:1.35 !important; font-weight:600 !important;
  margin:0 0 8px !important; padding:0 !important;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.dh-card-body h3.dh-title a{ color:var(--dh-strong) !important; text-decoration:none !important; }
.dh-card-body h3.dh-title a:hover{ color:var(--dh-green) !important; }
.dh-card-body p.dh-ort{
  margin:0 0 14px !important; padding:0 !important;
  font-size:1rem !important; line-height:1.4 !important; color:var(--dh-muted) !important;
}
.dh-card-body p.dh-preis{
  margin:0 0 14px !important; padding:0 0 14px !important;
  border-bottom:1px solid var(--dh-line);
  font-size:1.25rem !important; line-height:1.2 !important; font-weight:700 !important;
  color:var(--dh-green) !important;
}
.dh-preis span{
  margin-left:6px; padding:3px 6px; vertical-align:middle;
  border:1px solid var(--dh-green); border-radius:3px;
  font-size:.75rem; font-weight:500; color:var(--dh-green);
}

/* Eckdaten: drei Kacheln */
.dh-card-body ul.dh-facts{
  list-style:none !important; margin:0 0 18px !important; padding:0 !important;
  display:grid; grid-template-columns:auto auto auto; justify-content:space-between; gap:8px 12px;
}
.dh-facts li{ padding:0 !important; margin:0 !important; line-height:1.3; }
.dh-facts li span{
  display:block; font-size:.75rem; letter-spacing:.4px; text-transform:uppercase;
  color:var(--dh-muted);
}
.dh-facts li strong{ display:block; font-size:1rem; font-weight:600; color:var(--dh-strong); white-space:nowrap; }

/* Exposé-Link: Textlink mit Pfeil, damit acht Karten nicht acht Buttons tragen */
.dh-card-body a.dh-more{
  margin-top:auto; align-self:flex-start;
  font-size:1rem; font-weight:600; color:var(--dh-green) !important;
  text-decoration:none !important;
}
.dh-card-body a.dh-more::after{ content:" →"; transition:margin-left .2s ease; }
.dh-card-body a.dh-more:hover::after{ margin-left:4px; }

/* --- Leer-Zustand + Button unter dem Raster ------------------------------ */
.dh-empty{ text-align:center !important; color:var(--dh-muted); padding:30px 0 10px; font-size:1rem; }
.dh-empty[hidden]{ display:none !important; }
.dh-empty a{ color:var(--dh-green) !important; font-weight:600; }

.dh-footer{ text-align:center; margin-top:40px; }
.dh-btn,
a.dh-btn{
  display:inline-block;
  padding:12px 28px; border-radius:var(--dh-radius-btn);
  background:var(--dh-green); color:#fff !important;
  font-size:1rem; font-weight:600; line-height:1.4; text-decoration:none !important;
  box-shadow:0 3px 0 var(--dh-green-dark);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.dh-btn:hover{ background:var(--dh-green-hover); transform:translateY(2px); box-shadow:0 1px 0 var(--dh-green-dark); }

/* --- Suchfeld im Hero: Feld + grüner Knopf wie die Suchleiste der Liste --- */
.dh-search{
  display:flex !important; align-items:center; gap:8px;
  box-sizing:border-box;
  max-width:none; width:100%; margin:0 !important;
  padding:6px 6px 6px 20px;
  background:var(--dh-card);
  border:1px solid var(--dh-line);
  border-radius:var(--dh-radius);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:border-color .15s ease;
}
.dh-search:focus-within{ border-color:var(--dh-green); box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 4px var(--dh-green-soft); }
.dh-search .dh-search-input,
.dh-search input[type="search"]{
  flex:1 1 auto; width:100%; min-width:0;
  -webkit-appearance:none; appearance:none;
  font-family:inherit; font-size:1rem !important; line-height:1.4;
  color:var(--dh-strong) !important;
  padding:13px 0 !important; margin:0 !important;
  border:0 !important; border-radius:0 !important; outline:0 !important;
  background:transparent !important; box-shadow:none !important;
}
.dh-search .dh-search-input::placeholder{ color:#8d8a82; opacity:1; }
.dh-search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.dh-search .dh-search-btn{
  flex:0 0 auto; width:46px; height:46px;
  padding:0 !important; border:0 !important; border-radius:6px !important;
  background:var(--dh-green) !important; color:#fff !important;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; line-height:0;
  box-shadow:0 3px 0 var(--dh-green-dark);
  transition:transform .15s ease, background-color .15s ease;
}
.dh-search .dh-search-btn:hover{ background:var(--dh-green-hover) !important; }
.dh-search .dh-search-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.dh-search .dh-search-btn::after,
.dh-search .dh-search-btn::before{ content:none !important; display:none !important; }
.dh-search .dh-search-btn svg{ width:20px; height:20px; display:block; }
.dh-search .screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width:1180px){ .dh-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:860px){  .dh-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; } }
@media (max-width:560px){
  .dh-grid{ grid-template-columns:1fr; }
  .dh-tabs{ justify-content:flex-start; gap:8px; margin-bottom:24px; }
  .dh-tabs .dh-tab{ padding:8px 14px !important; font-size:.9375rem; }
  .dh-search{ padding:4px 4px 4px 18px; }
  .dh-search .dh-search-input{ font-size:1rem !important; padding:11px 0 !important; }
  .dh-search .dh-search-btn{ width:42px; height:42px; }
}

/* ============================================================
   HÄUSER-LISTE MIT FILTERLEISTE (DIO 2.6.0) · [deckert_haeuser_liste]
   Gleiche Filter wie /ff/immobilien/, einheitliche Höhe + Radien.
   ============================================================ */
.dh-liste{ --dh-h:56px; }
.dh-liste .screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.dh-filter{ margin:0 0 36px !important; padding:0 !important; }
.dh-filter-main{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) 220px; gap:16px;
  margin-bottom:18px;
}
.dh-filter-bar{
  display:grid; grid-template-columns:1fr auto 260px; align-items:center; gap:16px 24px;
}

/* Feld-Hülle: Icon links, alle Felder gleich hoch und gleich rund */
.dh-liste .dh-field{
  position:relative; display:flex; align-items:center; margin:0 !important;
  height:var(--dh-h); box-sizing:border-box;
  background:var(--dh-card); border:1px solid var(--dh-line); border-radius:var(--dh-radius);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dh-liste .dh-field:hover{ border-color:#3a3d45; }
.dh-liste .dh-field:focus-within{ border-color:var(--dh-green); box-shadow:0 0 0 4px var(--dh-green-soft); }
.dh-field-ico{ position:absolute; left:18px; top:50%; transform:translateY(-50%); color:var(--dh-green); line-height:0; pointer-events:none; }
.dh-liste .dh-field input,
.dh-liste .dh-field select{
  -webkit-appearance:none; appearance:none;
  width:100%; height:100%; min-width:0; margin:0 !important;
  padding:0 18px 0 50px !important;
  font-family:inherit; font-size:1rem !important; line-height:1.2; color:var(--dh-strong) !important;
  background:transparent !important; border:0 !important; border-radius:var(--dh-radius) !important;
  box-shadow:none !important; outline:0 !important;
}
.dh-liste .dh-field input::placeholder{ color:#8d8a82; opacity:1; }
/* Select mit eigenem Pfeil */
.dh-liste .dh-field--select::after{
  content:""; position:absolute; right:20px; top:50%; width:9px; height:9px; margin-top:-7px;
  border-right:2px solid var(--dh-muted); border-bottom:2px solid var(--dh-muted);
  transform:rotate(45deg); pointer-events:none; transition:border-color .15s;
}
.dh-liste .dh-field--select:hover::after{ border-color:var(--dh-green); }
.dh-liste .dh-field--select select{ padding-right:48px !important; cursor:pointer; }
.dh-liste .dh-field select option{ background:#1a1c20; color:var(--dh-strong); }
.dh-liste .dh-sort select{ padding-left:20px !important; }

/* Suchen: grün wie der Suchen-Knopf der Objektliste */
.dh-liste .dh-f-go{
  height:var(--dh-h); margin:0; padding:0 24px !important;
  font-family:inherit; font-size:1rem; font-weight:600; color:#fff !important;
  background:var(--dh-green) !important; border:0 !important; border-radius:var(--dh-radius) !important;
  box-shadow:0 3px 0 var(--dh-green-dark), 0 8px 26px rgba(131,184,42,.22);
  cursor:pointer; transition:background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dh-liste .dh-f-go:hover{ background:var(--dh-green-hover) !important; transform:translateY(2px); box-shadow:0 1px 0 var(--dh-green-dark), 0 6px 20px rgba(131,184,42,.18); }
.dh-liste .dh-f-go::after, .dh-liste .dh-f-go::before{ content:none !important; display:none !important; }

/* Trefferzahl + Stadt größer als in der Liste */
.dh-wrap.dh-liste p.dh-count{
  margin:0 !important; padding:0 !important;
  font-size:1.125rem !important; line-height:1.3 !important; color:var(--dh-text) !important; text-align:left !important;
}
.dh-count strong{ color:var(--dh-green); font-weight:700; }
.dh-city{ display:flex; align-items:center; gap:14px; }
.dh-city-label{ font-size:1.125rem; font-weight:600; color:var(--dh-strong); }
.dh-liste .dh-city-field{ width:340px; }
.dh-liste .dh-city-field input{ padding-right:44px !important; }
.dh-liste .dh-city-clear{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; padding:0 !important; border:0 !important; border-radius:50% !important;
  background:transparent !important; color:var(--dh-muted) !important; font-size:1.4rem; line-height:1; cursor:pointer;
}
.dh-liste .dh-city-clear:hover{ color:var(--dh-strong) !important; background:rgba(255,255,255,.06) !important; }
.dh-liste .dh-city-clear[hidden]{ display:none !important; }
.dh-liste ul.dh-city-list{
  position:absolute; left:-1px; right:-1px; top:calc(100% + 6px); z-index:20;
  max-height:300px; overflow:auto; list-style:none !important; margin:0 !important; padding:6px !important;
  background:#1d1f24; border:1px solid var(--dh-line); border-radius:var(--dh-radius);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.dh-liste ul.dh-city-list[hidden]{ display:none !important; }
.dh-wrap.dh-liste .dh-city-list li{
  display:flex; justify-content:space-between; gap:10px;
  margin:0 !important; padding:10px 12px !important; border-radius:6px;
  font-size:1rem; line-height:1.3; color:var(--dh-text); cursor:pointer; text-align:left !important;
}
.dh-liste .dh-city-list li[hidden]{ display:none !important; }
.dh-liste .dh-city-list li:hover{ background:var(--dh-green-soft); color:var(--dh-strong); }
.dh-city-list li span{ color:var(--dh-muted); }

/* Karten gleich hoch: Titel 2 Zeilen, Ort 1 Zeile, Preis steht überall auf gleicher Höhe */
.dh-liste .dh-card-body h3.dh-title{ min-height:2.7em; }
.dh-liste .dh-card-body p.dh-ort{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Eckdaten 2 × 2, damit nichts abgeschnitten wird */
.dh-card-body ul.dh-facts--4{ grid-template-columns:1fr 1fr; justify-content:stretch; gap:12px 16px; }
.dh-facts--4 li strong{ white-space:normal; }

/* Leer-Zustand + Mehr laden */
.dh-liste .dh-empty{ text-align:center; padding:30px 0 10px; }
.dh-wrap.dh-liste .dh-empty p{ margin:0 0 14px !important; text-align:center !important; color:var(--dh-muted) !important; }
.dh-liste .dh-reset{
  padding:10px 20px !important; font-family:inherit; font-size:1rem; font-weight:600;
  color:var(--dh-green) !important; background:transparent !important;
  border:1px solid var(--dh-green) !important; border-radius:var(--dh-radius-btn) !important; cursor:pointer;
}
.dh-liste .dh-reset::after{ content:none !important; }
.dh-liste button.dh-load{ border:0; cursor:pointer; font-family:inherit; }
.dh-liste button.dh-load[hidden]{ display:none !important; }
.dh-liste button.dh-load::after{ content:none !important; }

@media (max-width:1180px){
  .dh-filter-bar{ grid-template-columns:1fr 1fr; }
  .dh-filter-bar .dh-count{ grid-column:1 / -1; }
  .dh-liste .dh-city-field{ width:auto; flex:1; }
}
@media (max-width:860px){
  .dh-filter-main{ grid-template-columns:1fr 1fr; }
  .dh-liste .dh-f-go{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .dh-liste{ --dh-h:52px; }
  .dh-filter-main, .dh-filter-bar{ grid-template-columns:1fr; gap:12px; }
  .dh-city{ flex-direction:column; align-items:stretch; gap:6px; }
  .dh-city-label{ font-size:1rem; }
  .dh-liste .dh-city-field{ flex:none; width:100%; }
}

/* --- 2.7.0: Tabs nach Angebotsart (Stadtseiten), Umkreis ------------------ */
.dh-liste--tabs .dh-tabs--schema{ justify-content:flex-start; margin-bottom:18px; }
.dh-tabs--schema .dh-tab span{
  display:inline-block; min-width:22px; margin-left:6px; padding:2px 7px; border-radius:20px;
  font-size:.8125rem; font-weight:600; line-height:1.3; text-align:center;
  background:rgba(255,255,255,.07); color:var(--dh-muted);
}
.dh-tabs--schema .dh-tab.is-active span{ background:rgba(0,0,0,.18); color:#fff; }
.dh-tabs--schema .dh-tab[hidden]{ display:none !important; }
.dh-filter-main.dh-filter-main--2{ grid-template-columns:minmax(0,1fr) 220px; }
.dh-filter-bar.dh-filter-bar--2{ grid-template-columns:1fr 260px; }
.dh-tag.dh-tag--um{ left:auto; right:12px; border-color:rgba(245,242,233,.35); color:var(--dh-muted); }
.dh-wrap.dh-liste p.dh-umkreis-hinweis{ margin:18px 0 0 !important; color:var(--dh-muted) !important; font-size:1rem !important; text-align:left !important; }
.dh-wrap.dh-liste p.dh-umkreis-hinweis[hidden]{ display:none !important; }
@media (max-width:860px){
  .dh-filter-main.dh-filter-main--2{ grid-template-columns:1fr; }
  .dh-filter-bar.dh-filter-bar--2{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .dh-filter-bar.dh-filter-bar--2{ grid-template-columns:1fr; }
  .dh-liste--tabs .dh-tabs--schema{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
  .dh-liste--tabs .dh-tabs--schema .dh-tab{ white-space:nowrap; }
}
@media (max-width:1180px) and (min-width:561px){ .dh-filter-bar--2 .dh-count{ grid-column:auto; } }

/* --- Umkreis als eigener Block (2.10.1) ---------------------------------- */
.dh-umkreis-block{ margin-top:56px; padding-top:40px; border-top:1px solid var(--dh-line); }
.dh-umkreis-block[hidden]{ display:none !important; }
.dh-wrap .dh-umkreis-block h3.dh-umkreis-title{ margin:0 0 6px !important; padding:0 !important; font-size:1.5rem !important; line-height:1.3 !important; color:var(--dh-strong) !important; text-align:left !important; }
.dh-wrap.dh-liste .dh-umkreis-block p.dh-umkreis-intro{ margin:0 0 26px !important; color:var(--dh-muted) !important; font-size:1rem !important; text-align:left !important; }
.dh-umkreis-block .dh-footer{ margin-top:32px; }
.dh-umkreis-block .dh-footer .dh-btn[hidden]{ display:none !important; }
.dh-liste button.dh-umkreis-more{ border:0; cursor:pointer; font-family:inherit; }
.dh-liste button.dh-umkreis-more::after{ content:none !important; }