/* ===== Grid-Wrapper ===== */
.vbm-inserate{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  align-items:start;
}
/* Tablet/Mobil: eine Spalte, Karten untereinander */
@media (max-width: 1024px){
  .vbm-inserate{grid-template-columns:1fr}
}

/* ===== Card ===== */
.vbm-inserat-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .2s ease;
  display:block;
}
.vbm-inserat-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.10);
}

/* ===== Image oben (Desktop) ===== */
.vbm-inserat-image{ 
  display:block; 
  aspect-ratio:16/10; 
  background:#f2f2f2; 
  line-height:0;          /* verhindert den kleinen Inline-Abstand */
}

.vbm-inserat-image img {
  display:block;          /* Bild nicht inline, sondern block → kein extra Space */
  width:100%;
  height:100%;
  object-fit:cover;
}
.vbm-inserat-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.vbm-inserat-placeholder{ width:100%; height:100%; background:linear-gradient(135deg,#efefef,#fafafa); }

/* ===== Body ===== */
.vbm-inserat-body{ padding:16px 16px 18px; }
.vbm-inserat-title{ margin:0 0 8px; font-size:1.125rem; line-height:1.3; }
.vbm-inserat-title a{ text-decoration:none; color:#111; }
.vbm-inserat-title a:hover{ text-decoration:underline; }

.vbm-inserat-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.vbm-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#F3F4F6; color:#111; border-radius:999px;
  padding:6px 10px; font-size:.875rem; line-height:1;
}

.vbm-inserat-address{
  display:flex; align-items:center; gap:8px; color:#374151; font-size:.95rem;
}
.vbm-pin{ display:inline-flex; line-height:0; color:#2563EB; }
.vbm-address-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

/* ===== Tablet & Mobile: horizontale Cards ===== */
@media (max-width: 1024px){
  .vbm-inserat-card{ display:flex; align-items:stretch; min-height:140px; }
  .vbm-inserat-image{ flex:0 0 40%; max-width:40%; aspect-ratio:auto; height:auto; background:#eaeaea; }
  .vbm-inserat-image .vbm-inserat-thumb,
  .vbm-inserat-image .vbm-inserat-placeholder{ width:100%; height:100%; min-height:140px; object-fit:cover; display:block; }
  .vbm-inserat-body{ flex:1 1 auto; padding:16px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
  .vbm-inserat-title{ font-size:1rem; margin:0; }
  .vbm-address-text{ white-space:normal; overflow:visible; text-overflow:unset; }
}
@media (max-width: 480px){
  .vbm-inserat-image{ flex-basis:36%; max-width:36%; }
  .vbm-inserat-title{ font-size:.98rem; }
  .vbm-chip{ padding:5px 9px; font-size:.82rem; }
}

/* ===== Optional: bündig direkt nach der Hero ===== */
.vbm-after-hero{ margin-top:0; padding-top:0 }

/* ===== Single-Ansicht ===== */
.vbm-single{ margin:24px 0 32px; }
.vbm-single-header{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.vbm-single-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.vbm-chips-lg .vbm-chip{ font-size:1rem; padding:8px 12px; border-radius:999px; }
.vbm-single-address{ font-size:1rem; }

.vbm-single-main{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:start; }
@media (max-width: 1024px){
  .vbm-single-main{ grid-template-columns:1fr; }
}

/* Sidebar: saubere Abstände zwischen den Boxen */
.vbm-single-aside{
  display:grid;
  gap:16px;
}

.vbm-prose p{ margin:0 0 10px; }
.vbm-h3{ margin-top:24px; margin-bottom:12px; }
.vbm-section{ margin:26px 0; }
.vbm-room-breakdown{
  display:grid;
  gap:10px;
  margin:0;
}
.vbm-room-breakdown div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  background:#f9fafb;
  border:1px solid #eef2f7;
  border-radius:12px;
}
.vbm-room-breakdown dt{
  color:#374151;
}
.vbm-room-breakdown dd{
  margin:0;
  font-weight:600;
  color:#111827;
}
.vbm-single-content > .vbm-prose{ margin-bottom:18px; }
.vbm-single-content > .vbm-map-block{ margin-top:12px; margin-bottom:28px; }
.vbm-single-main{ row-gap:32px; }
.vbm-feature-list{ list-style:disc; margin:0 0 0 18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 16px; }
@media (max-width: 480px){ .vbm-feature-list{ grid-template-columns:1fr; } }

.vbm-floorplan-block{ margin-top:8px; }
.vbm-floorplan-img{ max-width:100%; height:auto; border-radius:12px; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.vbm-floorplan-download{ display:inline-flex; align-items:center; gap:8px; padding:10px 12px; background:#F3F4F6; border-radius:10px; text-decoration:none; color:#111; }

.vbm-aside-card{ background:#fff; border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.vbm-aside-card h4{ margin:0 0 12px; }
.vbm-costs{ display:grid; gap:8px; }
.vbm-costs div{ display:flex; justify-content:space-between; gap:12px; }
.vbm-costs dt{ color:#555; }
.vbm-costs dd{ margin:0; font-weight:600; }
/* Galerie */
.vbm-gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:16px; }
.vbm-gallery a{ display:block; }
.vbm-gallery-img{ width:100%; height:auto; border-radius:12px; display:block; object-fit:cover; cursor:zoom-in; }
@media (max-width: 1024px){ .vbm-gallery{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 480px){ .vbm-gallery{ grid-template-columns:1fr; } }

/* Map toggle */
.vbm-map-block{ margin-top:12px; }
.vbm-map-embed{ margin-top:8px; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.vbm-map-embed iframe{ width:100%; height:320px; border:0; }

/* Buttons */
.vbm-btn-primary, .vbm-btn-secondary, .vbm-btn-map{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px; text-decoration:none; cursor:pointer;
  border:1px solid #e5e7eb; background:#111; color:#fff;
}
.vbm-btn-secondary, .vbm-btn-map{ background:#fff; color:#111; }
.vbm-btn-primary:hover, .vbm-btn-secondary:hover, .vbm-btn-map:hover{ filter:brightness(0.96); }

/* WhatsApp Button (nur Optik; Link ist extern) */
.vbm-btn-wa{ text-decoration:none; }

/* WhatsApp Button Styling */
.vbm-btn-wa{
  background:#25D366;
  color:#fff !important;
  border:2px solid #fff;
}

.vbm-btn-wa:hover{
  background:#1ebe5d;
  color:#fff !important;
}

/* Contact box */
.vbm-contact{ display:grid; gap:6px; }
.vbm-contact-name{ font-weight:600; }
.vbm-object-id{ color:#374151; }

/* Lightbox overlay */
.vbm-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:none; align-items:center; justify-content:center; z-index:99999;
}
.vbm-lightbox.open{ display:flex; }
.vbm-lightbox-media{
  position:relative;
  display:inline-block;
  max-width:90vw;
  max-height:90vh;
}
.vbm-lightbox img{ max-width:90vw; max-height:90vh; border-radius:12px; display:block; }
.vbm-lightbox-close{
  position:absolute; top:16px; right:16px; background:#fff; border-radius:999px; padding:8px 12px; cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.vbm-lightbox-prev, .vbm-lightbox-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:#fff; border-radius:999px; padding:10px 14px; cursor:pointer; border:none; box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.vbm-lightbox-prev{ left:16px; } .vbm-lightbox-next{ right:16px; }

/* Modal */
.vbm-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:99998; }
.vbm-modal{ width:min(640px,92vw); background:#fff; border-radius:16px; padding:18px; box-shadow:0 12px 40px rgba(0,0,0,.24); position:relative; }
.vbm-modal h3{ margin:0 0 8px; }
.vbm-modal .vbm-modal-close{ position:absolute; top:10px; right:10px; border:none; background:#eee; border-radius:999px; width:32px; height:32px; cursor:pointer; }
.vbm-contact-form{ display:grid; gap:10px; margin-top:8px; }
.vbm-contact-form .vbm-field input, .vbm-contact-form .vbm-field textarea{ width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; }
.vbm-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
.vbm-form-status{ font-size:.95rem; color:#2563EB; margin-top:6px; }

/* Related Aside */
.vbm-related{ display:grid; gap:10px; }
.vbm-related-item{ display:flex; gap:10px; align-items:center; text-decoration:none; color:#111; border:1px solid #e5e7eb; border-radius:12px; padding:8px; }
.vbm-related-item:hover{ background:#fafafa; }
.vbm-related-media{ flex:0 0 84px; width:84px; height:64px; border-radius:10px; overflow:hidden; background:#f3f4f6; display:flex; align-items:center; justify-content:center; }
.vbm-related-thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.vbm-related-ph{ width:100%; height:100%; background:linear-gradient(135deg,#efefef,#fafafa); }
.vbm-related-txt{ flex:1; display:grid; gap:4px; }
.vbm-related-title{ font-weight:600; line-height:1.2; }
.vbm-related-meta{ display:flex; gap:8px; font-size:.9rem; color:#374151; flex-wrap:wrap; }
.vbm-related-addr{ font-size:.85rem; color:#6b7280; }
.vbm-related-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.vbm-related-filter{
  padding:6px 10px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#fff;
  width:100%;
  margin:8px 0 10px;
}

/* -------- Sidebar-Integration (rechter Rand) -------- */
/* eigener Innenabstand zur Trennlinie der Layout-Spalte */
.vbm-related-widget{ box-sizing:border-box; }
.vbm-related-widget .vbm-sidebar-stack{
  display:grid;
  gap:14px;               /* Abstand zwischen Boxen */
  padding-left:16px;      /* Gutter nach links = weg vom Trenner */
}
/* Box-Styling im Widget kontext, ohne das Content-Aside zu beeinflussen */
.vbm-related-widget .vbm-aside-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:16px;
}
/* Safety: Inhalte der Widget-Box niemals „über den Rand“ zeichnen */
.vbm-related-widget .vbm-aside-card,
.vbm-related-widget .vbm-related,
.vbm-related-widget .vbm-related-header{ max-width:100%; overflow:visible; }

/* Auf schmalen Screens greift ohnehin 1-Spalten-Layout; Gutter kleiner */
@media (max-width: 1024px){
  .vbm-related-widget .vbm-sidebar-stack{ padding-left:8px; }
}

/* ------- Related-Karten: Desktop-Layout wie gewünscht (Bild links füllend, kein Innenrand) ------- */
@media (min-width: 1025px){
  .vbm-related-item{
    padding:0;
    gap:0;
    overflow:hidden; /* damit Bild sauber an der Rundung clippt */
  }
  .vbm-related-media{
    width:auto;
    height:auto;
    flex:0 0 33.333%;
    align-self:stretch;
    border-radius:12px 0 0 12px; /* links rund, rechts gerade */
  }
  .vbm-related-thumb,
  .vbm-related-ph{
    border-radius:0; /* Rundung kommt vom Container */
  }
  .vbm-related-txt{
    padding:10px 12px;
  }
}

/* ------- Mobile: mehr Luft zum Footer, wenn Sidebar unten landet ------- */
@media (max-width: 1024px){
  .vbm-related-widget{
    margin-bottom:24px;
  }
}

/* ------- Medien-Panel oben (Preview + Thumbs) ------- */
.vbm-media{
  display:grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap:16px;
  align-items:start;
}
.vbm-media-main{
  background:#f3f4f6;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  position:relative;
}
.vbm-media-main img{
  display:block;
  width:100%;
  height:360px;            /* kleiner als „viel zu groß“ */
  object-fit:cover;
  cursor:zoom-in;          /* Signal: Klick = Lightbox */
}
.vbm-thumbs{
  position:relative;
  display:grid;
  grid-template-rows: 1fr;          /* keine Pfeile mehr */
  gap:8px;
}
.vbm-thumbs-track{
  display:grid;
  gap:8px;
  overflow:auto;
  max-height:420px;        /* an Hauptbildhöhe gekoppelt */
  padding:4px;       /* Scrollbar-Puffer */
}
.vbm-thumbs-track{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 92px;
  gap:8px;
  overflow:auto;
  max-height:420px;
  padding:4px;
}

.vbm-thumb-btn{
  position:relative;
  border:0;
  padding:0;
  background:transparent;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease;
  width:100%;
  height:100%;
}
.vbm-thumb-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.10); }
.vbm-thumb-btn.is-active{ outline:2px solid #2563EB; outline-offset:2px; }
.vbm-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Entfernt ggf. Theme-/Browser-Buttons (falls noch irgendwo gerendert) */
.vbm-thumbs-nav{ display:none !important; }
.vbm-thumb-btn.is-more::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:2;
}
.vbm-thumb-more{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:20px;
  color:#fff;
  z-index:3;
  text-shadow:0 2px 10px rgba(0,0,0,.45);
}

/* ------- Beispielbild-Badge (nur wenn Fallback genutzt wird) ------- */
.vbm-media.is-example .vbm-media-main{
  /* Falls irgendwo ein Textnode/Label im Container landet: nicht anzeigen */
  font-size:0;
  line-height:0;
}

.vbm-media.is-example .vbm-media-main::after{
  content:"Beispielbild";
  position:absolute;
  top:10px;
  left:10px;
  z-index:5;
  padding:12px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:700;
  font-size:12px;
  letter-spacing:.2px;
  pointer-events:none;
}
.vbm-media.is-example .vbm-thumb-btn::after{
  content:"Beispielbild";
  position:absolute;
  top:8px;
  left:8px;
  z-index:4;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:700;
  font-size:11px;
  letter-spacing:.2px;
  pointer-events:none;
}

/* Lightbox: Badge */
.vbm-lightbox .vbm-lightbox-badge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:100001;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  display:none;
  pointer-events:none;
}
.vbm-lightbox.vbm-lightbox--example .vbm-lightbox-badge{
  display:inline-flex;
}

/* Entfernt ggf. eine zusätzliche, unten gerenderte "Beispielbild"-Zeile (Legacy/Markup-Reste) */
.vbm-media.is-example .vbm-example-text,
.vbm-media.is-example .vbm-example-label,
.vbm-media.is-example .vbm-example-caption,
.vbm-media.is-example figcaption{
  display:none !important;
}

@media (max-width: 1024px){
  .vbm-media{ grid-template-columns: 1fr; }
  /* Thumbs wandern unter das Hauptbild und bilden ein Grid */
  .vbm-thumbs{ grid-template-rows: 1fr; }
  .vbm-thumbs-track{
    max-height: unset;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap:8px;
  }
  /* Mobil: Thumbnails wieder quadratisch (wie Desktop) */
  .vbm-thumb-btn{
    aspect-ratio: 1 / 1;
  }
}

/* Single-Header-Chips bleiben wie gehabt */