/* =========================================================
   PROPERTY GRID – FINAL CSS (Wagner & Jacobi / Propstack)
   ========================================================= */

/* =========================================================
   BASE / TOKENS
   ========================================================= */
.ps-wrap{
  /* Design tokens */
  --ps-radius: 4px;                 /* sehr dezent */
  --ps-gap: 28px;                   /* Abstand Desktop */
  --ps-hover-overlay: rgba(0,0,0,.08);

  /* Typography */
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Arial, sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
}

/* Scoped reset to reduce theme interference */
.ps-wrap, .ps-wrap *{ box-sizing:border-box; }
.ps-wrap a{ color:inherit; text-decoration:none; }
.ps-wrap p, .ps-wrap h1, .ps-wrap h2, .ps-wrap h3, .ps-wrap h4, .ps-wrap h5, .ps-wrap h6{ margin:0; }
.ps-wrap img{ max-width:100%; height:auto; display:block; }

/* =========================================================
   TOP BAR (Tabs + Sort)
   ========================================================= */
.ps-wrap .ps-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  margin:0 0 18px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  border-radius: var(--ps-radius);
}

.ps-wrap .ps-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.ps-wrap .ps-tab{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.20);
  border-radius: var(--ps-radius);
  background:transparent;
  line-height:1;
  font-weight:500;
}
.ps-wrap .ps-tab:hover{ opacity:.86; }
.ps-wrap .ps-tab.is-active{ background: rgba(0,0,0,.10); }

.ps-wrap .ps-sort{
  display:flex;
  align-items:center;
  gap:10px;
}
.ps-wrap .ps-sort__label{
  font-weight:400;
  font-size:14px;
  white-space:nowrap;
}
.ps-wrap .ps-sort__select{
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.20);
  border-radius: var(--ps-radius);
  background:#fff;
  font-weight:400;
}

/* =========================================================
   GRID
   ========================================================= */
.ps-wrap .ps-grid{
  display:grid !important;
  gap: var(--ps-gap) !important;
}

/* =========================================================
   CARD
   ========================================================= */
.ps-wrap .ps-card{
  display:block !important;
  position:relative;
  overflow:hidden;

  background:transparent !important; /* vor Hover transparent */
  border:1px solid rgba(0,0,0,.12);
  border-radius: var(--ps-radius);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  will-change: transform;
}
.ps-wrap .ps-card:hover{ border-color: rgba(0,0,0,.22); }

/* =========================================================
   SMOOTH HOVER (GPU-friendly): sweep + zoom
   ========================================================= */
.ps-wrap .ps-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:100%;
  background: var(--ps-hover-overlay);

  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
  pointer-events:none;
  z-index:1;
}

.ps-wrap .ps-card:hover::after{
  transform: translateY(0);
}

/* Image */
.ps-wrap .ps-card__image{
  position:relative;
  aspect-ratio:4/3;
  min-height:260px;
  background-color: rgba(0,0,0,.06);
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;

  transform: scale(1);
  transition: transform 360ms cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.ps-wrap .ps-card:hover .ps-card__image{
  transform: scale(1.035);
}

/* Keep content above sweep */
.ps-wrap .ps-card__image,
.ps-wrap .ps-card__meta{
  position:relative;
  z-index:2;
}

/* =========================================================
   CARD TITLE (bottom in image)
   ========================================================= */
.ps-wrap .ps-card__overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:12px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}

.ps-wrap .ps-card__location{
  color:#fff;
  font-size:18px;
  font-weight:500;
  line-height:1.15; /* weniger Zeilenabstand */
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
  margin:0;
}

/* =========================================================
   META / METRICS
   ========================================================= */
.ps-wrap .ps-card__meta{
  padding:16px;
  display:grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap:14px 22px !important;
}

/* Metric: icon left, text right */
.ps-wrap .ps-metric{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

/* Icon: minimal, outline, no circle */
.ps-wrap .ps-metric__icon{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;

  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;

  opacity:.75;
  flex:0 0 auto;
}

.ps-wrap .ps-metric__icon svg{
  width:18px;
  height:18px;
  stroke-width:1.6;
}

/* Text block */
.ps-wrap .ps-metric__text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.ps-wrap .ps-metric__value{
  font-size:22px;
  font-weight:500;   /* ruhig & hochwertig (Roboto) */
  line-height:1.05;
  margin:0;
  color:#111;
}
.ps-wrap .ps-metric__label{
  font-size:12px;
  font-weight:400;
  line-height:1.15;
  color: rgba(0,0,0,.52);
  margin:0;
}

/* =========================================================
   PAGINATION
   ========================================================= */
.ps-wrap .ps-pagination{
  margin-top:18px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.ps-wrap .ps-pagination .page-numbers{
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius: var(--ps-radius);
  text-decoration:none;
  font-weight:400;
}
.ps-wrap .ps-pagination .current{ background:rgba(0,0,0,.06); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 700px){
  .ps-wrap{ font-size:15px; }

  /* Topbar stacked */
  .ps-wrap .ps-bar{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .ps-wrap .ps-sort__select{ width:100%; }

  /* Flow layout (better than tight grid on mobile) */
  .ps-wrap .ps-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }

  /* Meta one column */
  .ps-wrap .ps-card__meta{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .ps-wrap .ps-card::after,
  .ps-wrap .ps-card__image{
    transition:none !important;
  }
}