/*
 Theme Name: VelissaBau Child
 Template: generatepress
*/

.vb-slider { 
  width: 100%;
  overflow: hidden;
  margin-bottom: 12px;
}

.vb-slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  scrollbar-width: none;
}

.vb-slider-track::-webkit-scrollbar { 
  display: none; 
}

.vb-slider-track img {
  width: 100%;
  height: 56vw;
  max-height: 360px;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;
  border-radius: 8px;
}

.vb-archive { 
  padding: 12px 16px; 
}

.vb-filters { 
  display: grid; 
  gap: 10px; 
  margin-bottom: 12px; 
}

.vb-results-head { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin: 8px 0 12px; 
}

.vb-grid { 
  display: grid; 
  gap: 12px; 
}

@media (min-width: 768px) { 
  .vb-grid { 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
  } 
}

@media (min-width: 1100px) { 
  .vb-grid { 
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
  } 
}

.vb-card { 
  background: #fff; 
  border: 1px solid #eee; 
  border-radius: 12px; 
  overflow: hidden; 
  display: grid; 
  grid-template-rows: auto 1fr; 
}

.vb-card-media img { 
  width: 100%; 
  height: 56vw; 
  max-height: 220px; 
  object-fit: cover; 
  display: block; 
}

.vb-card-body { 
  padding: 12px; 
  display: grid; 
  gap: 6px; 
}

.vb-card-body h3 { 
  margin: 0; 
  font-size: 18px; 
  line-height: 1.25; 
}

.vb-card-body p { 
  margin: 0; 
  font-size: 14px; 
  color: #444; 
  line-height: 1.4; 
}

.vb-chip-row { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 6px; 
}

.vb-chip-row .gb-text { 
  font-size: 12px; 
  padding: 4px 8px; 
  border-radius: 999px; 
  background: #f3f4f6; 
}

.vb-card-body p:first-of-type { 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  overflow: hidden; 
}

.facetwp-pager { 
  display: flex; 
  justify-content: center; 
  margin: 14px 0; 
}

:root{
  --vb-bg:#FEF9F3;
  --vb-text:#2C2C2C;
  --vb-red:#B71C1C;
  --vb-red-dark:#991717;
  --vb-gold:#D4AF37;
  --vb-muted:#9E9E9E;
}
.gb-button.vb-primary a{background:var(--vb-red)!important;color:#fff!important;border-radius:10px;padding:.9rem 1.2rem;font-weight:800;}
.gb-button.vb-primary a:hover{background:var(--vb-red-dark)!important;}
.gb-badge{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid #eee;border-radius:999px;padding:.35rem .7rem;font-size:.85rem;}
.vb-card{background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 6px 18px rgba(0,0,0,.04);padding:20px;}
.vb-premium{border-color:var(--vb-gold);box-shadow:0 6px 18px rgba(212,175,55,.15);}


/* ===== VB Home – mobile-first ===== */

/* Base tokens */
:root{
  --vb-bg:#FEF9F3;
  --vb-text:#333333;
  --vb-muted:#555;
  --vb-line:#eee;
  --vb-white:#fff;
  --vb-primary:#B71C1C;
  --vb-primary-ink:#fff;
  --vb-radius:12px;
  --vb-shadow:0 12px 18px rgba(0,0,0,0.04);
}

/* Global section spacing */
.vb-hero,.vb-services,.vb-how,.vb-trust,.vb-featured,.vb-final-cta{ padding:24px 12px; }

/* HERO */
.vb-hero{ background:#FEF0E9; } /* light tint; adjust if you like */
.vb-hero-inner{ max-width:1200px; margin:0 auto; }
.vb-stack-tight > * + * { margin-top:10px; } /* tight vertical rhythm */

.vb-hero-text h1{
  margin:0;
  font-size:24px; line-height:1.25; color:var(--vb-text); font-weight:800;
}
.vb-hero-text p{
  margin:4px 0 0; color:#666; font-size:15px;
}

/* CARD – search */
.vb-card{
  background:var(--vb-white);
  border:1px solid var(--vb-line);
  border-radius:var(--vb-radius);
  box-shadow:var(--vb-shadow);
}
.vb-search{ padding:14px; }
.vb-search-head{ font-size:15px; margin-bottom:10px; color:var(--vb-text); }
.vb-accent{ color:var(--vb-primary); }

.vb-search-row{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.vb-facet select, .vb-facet .facetwp-dropdown, .vb-facet .select{
  width:100%;
}
.vb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; cursor:pointer; font-weight:700;
  border-radius:8px; transition:transform .06s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.vb-btn:active{ transform:translateY(1px); }

.vb-btn-primary{
  background:var(--vb-primary); color:var(--vb-primary-ink);
  padding:12px 16px; border:1px solid var(--vb-primary);
}
.vb-btn-primary:hover{ filter:brightness(0.95); }

.vb-btn-ghost{
  background:transparent; color:var(--vb-primary); border:1px solid var(--vb-primary);
  padding:8px 12px;
}
.vb-btn-ghost:hover{ background:var(--vb-primary); color:#fff; }
.vb-btn-sm{ padding:6px 10px; font-weight:600; }

/* OWNER STRIP (thin) */
.vb-owner-strip{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--vb-white); border:1px solid var(--vb-line); border-radius:var(--vb-radius);
  padding:8px 12px;
}
.vb-owner-strip p{ margin:0; color:var(--vb-text); font-size:14px; }
.vb-owner-strip u{ text-underline-offset:2px; color:var(--vb-primary); }

/* SERVICES */
.vb-services h2, .vb-how h2, .vb-featured h2{ 
  max-width:1200px; margin:0 auto 10px; font-size:20px; color:var(--vb-text);
}
.vb-services-grid{
  max-width:1200px; margin:0 auto;
  display:grid; gap:10px; grid-template-columns:1fr 1fr;
}
.vb-service{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:#F7F7F7; border:1px solid var(--vb-line); border-radius:var(--vb-radius);
  padding:14px; min-height:56px; color:var(--vb-text); font-weight:700; text-decoration:none;
}
.vb-service:hover{ background:#EFEFEF; }

/* HOW IT WORKS */
.vb-how-grid{
  max-width:1200px; margin:0 auto;
  display:grid; gap:10px; grid-template-columns:1fr;
}
.vb-how-card{
  background:var(--vb-white); border:1px solid var(--vb-line); border-radius:var(--vb-radius);
  padding:14px;
}
.vb-how-card h3{ margin:0 0 6px; font-size:16px; color:var(--vb-text); }
.vb-how-card p{ margin:0; color:#666; }

/* TRUST */
.vb-trust-inner{
  max-width:1200px; margin:0 auto;
  background:var(--vb-white); border:1px solid var(--vb-line); border-radius:var(--vb-radius);
  display:grid; gap:10px; grid-template-columns:1fr; padding:12px;
}
.vb-stat{ text-align:center; }
.vb-stat strong{ display:block; font-size:18px; color:var(--vb-text); }
.vb-stat span{ display:block; font-size:13px; color:#666; }

/* FEATURED */
.vb-featured{ padding-top:12px; }
.fwp-featured-row, .vb-featured .facetwp-template{
  max-width:1200px; margin:0 auto; display:grid; gap:10px; grid-template-columns:1fr 1fr;
}

/* FINAL CTA */
.vb-final-inner{
  max-width:1200px; margin:0 auto;
  display:grid; gap:10px; grid-template-columns:1fr;
}
.vb-cta-block{
  background:var(--vb-white); border:1px solid var(--vb-line); border-radius:var(--vb-radius); padding:14px;
}
.vb-cta-block h3{ margin:0 0 6px; font-size:18px; color:var(--vb-text); }
.vb-cta-block p{ margin:0 0 10px; color:#666; }

/* ===== Breakpoints ===== */
@media (min-width:600px){
  .vb-hero-text h1{ font-size:28px; }
  .vb-search{ padding:16px; }
  .vb-search-row{ grid-template-columns: 1fr 1fr 1fr auto; align-items:center; }
  .vb-services-grid{ grid-template-columns:repeat(3,1fr); }
  .vb-how-grid{ grid-template-columns:repeat(3,1fr); }
  .vb-trust-inner{ grid-template-columns:repeat(3,1fr); }
  .fwp-featured-row, .vb-featured .facetwp-template{ grid-template-columns:repeat(3,1fr); }
  .vb-final-inner{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:992px){
  .vb-hero-text h1{ font-size:32px; }
  .vb-services-grid{ grid-template-columns:repeat(6,1fr); }
  .fwp-featured-row, .vb-featured .facetwp-template{ grid-template-columns:repeat(6,1fr); }
}

/* Tighten hero vertical gap (search ⇄ owner strip) explicitly */
.vb-search{ margin-bottom:0 !important; }
.vb-owner-strip{ margin-top:6px !important; }

/* --- HERO background to match header (lighter) --- */
.vb-hero{ background: var(--vb-bg); } /* #FEF9F3 by your tokens */

/* --- Hero heading & subline (smaller, cleaner on mobile) --- */
.vb-hero-text h1{
  font-size: 22px;           /* was 24 */
  line-height: 1.28;
  margin: 0;
}
.vb-hero-text p{
  font-size: 15px;
  color: #666;
  margin: 6px 0 0;           /* a touch more space under H1 */
}

/* --- Search head: a bit bigger & clearer --- */
.vb-search-head{
  font-size: 16.5px;         /* was 15 */
  font-weight: 700;
  margin-bottom: 8px;        /* slightly tighter */
}
.vb-search .vb-accent{ color: var(--vb-primary); }

/* --- Bring dropdowns and button closer together --- */
.vb-search-row{
  gap: 8px;                  /* was 10 */
}
.vb-search .facetwp-facet{   /* FacetWP adds bottom margins by default */
  margin-bottom: 0 !important;
}
.vb-facet select,
.vb-facet .facetwp-dropdown{
  min-height: 46px;          /* comfy tap target */
}
.vb-btn.vb-btn-search{
  margin-top: 4px;           /* tuck button closer to the selects */
}

/* --- Owner strip: stack into 3 rows on mobile, smaller button --- */
.vb-owner-strip{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: start;
  padding: 10px 12px;
}
.vb-owner-strip p{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.vb-owner-strip .vb-btn.vb-btn-ghost{
  justify-self: start;       /* left-align button */
  padding: 6px 10px;         /* smaller */
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
}

/* keep the strip tight under the search card */
.vb-search{ margin-bottom: 0 !important; }
.vb-owner-strip{ margin-top: 6px !important; }

/* --- Tablet up: restore inline owner-strip layout if you want --- */
@media (min-width: 600px){
  .vb-hero-text h1{ font-size: 26px; }
  .vb-owner-strip{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
}

/* --- Centered "Bist du Unternehmer?" section --- */
.vb-owner-strip{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: center;
  justify-items: center;
  text-align: center;
  background: var(--vb-white);
  border: 1px solid var(--vb-line);
  border-radius: var(--vb-radius);
  padding: 10px 12px;
}

.vb-owner-strip p{
  margin: 0;
  color: var(--vb-text);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.vb-owner-strip .vb-btn{
  justify-self: center;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 13px;
  border-radius: 8px;
}

@media (min-width: 600px){
  .vb-owner-strip{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .vb-owner-strip p{
    text-align: left;
  }
  .vb-owner-strip .vb-btn{
    justify-self: auto;
  }
}

/* --- Center the "Jetzt kostenlos starten" button on mobile only --- */
@media (max-width: 767px){
  .vb-owner-strip .vb-btn{
    justify-self: center;  /* center inside grid */
    display: inline-flex;  /* keep proper button shape */
    margin: 4px auto 0 auto; /* centers horizontally */
  }
}

/* ===== Beliebte Leistungen ===== */
.vb-services {
  padding: 32px 12px;
  background: #FEF9F3;
}

.vb-services h2 {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  color: var(--vb-text);
  margin-bottom: 16px;
}

.vb-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.vb-service {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
  padding: 14px 16px;
  font-weight: 700;
  color: #333;
  transition: all 0.2s ease;
}

.vb-service i {
  font-size: 18px;
  color: var(--vb-primary);
}

.vb-service:hover {
  background: #B71C1C;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.vb-service:hover i {
  color: #fff;
}

@media (min-width: 600px) {
  .vb-services-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .vb-services-grid { grid-template-columns: repeat(6, 1fr); }
}

.vb-service {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.2s ease;
}

.vb-service:hover {
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ===== So funktioniert's ===== */
.vb-how{ padding:32px 12px; background:#FEF7F5; } /* soft tint */
.vb-how h2{ max-width:1200px; margin:0 auto 14px; font-size:20px; color:var(--vb-text); }

.vb-how-grid{
  max-width:1200px; margin:0 auto;
  display:grid; gap:12px; grid-template-columns:1fr;
}

.vb-how-card{
  background:#fff; border:1px solid #eee; border-radius:16px;
  padding:14px; box-shadow:0 4px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  transition:transform .15s ease, box-shadow .15s ease;
}
.vb-how-card:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,0.08); }

.vb-how-head{
  display:flex; align-items:center; gap:10px; margin-bottom:6px;
}
.vb-step{
  width:26px; height:26px; border-radius:999px;
  background:var(--vb-primary); color:#fff; font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
}
.vb-icon{
  width:26px; height:26px; border-radius:999px;
  background:rgba(183,28,28,0.08); color:var(--vb-primary);
  display:inline-flex; align-items:center; justify-content:center;
}
.vb-how-card h3{ margin:0; font-size:16px; color:var(--vb-text); }
.vb-how-card p{ margin:6px 0 0; color:#666; font-size:15px; line-height:1.45; }

/* Tablet / Desktop */
@media (min-width:600px){
  .vb-how h2{ font-size:22px; }
  .vb-how-grid{ grid-template-columns:repeat(3,1fr); }
  .vb-how-card{ padding:16px; }
}
@media (min-width:992px){
  .vb-how h2{ font-size:24px; }
}

/* So funktioniert's – final tweaks */
.vb-how{
  background: var(--vb-bg);            /* same bg as page (no tinted section) */
  padding: 32px 12px;
}

.vb-how h2{
  max-width: 1200px;
  margin: 0 auto 18px;
  font-size: 22px;                      /* larger */
  font-weight: 800;                     /* bold */
  color: var(--vb-text);
  text-align: left;
}

.vb-how-card h3{
  font-size: 17px;                      /* a touch larger */
  font-weight: 700;                     /* bold main words */
  color: var(--vb-text);
}

/* scale up headings on larger screens */
@media (min-width: 600px){
  .vb-how h2{ font-size: 24px; }
}
@media (min-width: 992px){
  .vb-how h2{ font-size: 19px; }
}

/* ===== Trust strip – premium stats ===== */
.vb-trust{
  padding: 28px 12px;
  background: var(--vb-bg);
}

.vb-trust-card{
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  padding: 14px;
}

.vb-trust-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
}

.vb-trust-icon{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(183,28,28,0.08);
  color: var(--vb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
}

.vb-trust-text{ line-height: 1.2; }
.vb-trust-value{
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: var(--vb-text);
}
.vb-trust-label{
  display: block;
  font-size: 14px;
  color: #666;
  margin-top: 3px;
}

.vb-trust-divider{
  height: 1px;
  background: #eee;
  margin: 6px 0 8px;
  border-radius: 1px;
}

/* Tablet/Desktop layout: three columns with vertical dividers */
@media (min-width: 600px){
  .vb-trust-card{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 16px 8px;
  }
  .vb-trust-item{
    padding: 10px 16px;
    border-right: 1px solid #eee;
  }
  .vb-trust-item:last-child{ border-right: 0; }
  .vb-trust-divider{ display: none; }
  .vb-trust-value{ font-size: 24px; }
}

/* ===== Final dual CTA (premium) ===== */
.vb-final-cta{ padding: 28px 12px; background: var(--vb-bg); }
.vb-final-inner{
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: 14px; grid-template-columns: 1fr;
}

.vb-cta-block{
  position: relative;
  background:#fff; border:1px solid #eee; border-radius:16px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  padding:16px;
  display:grid; gap:10px; align-content:start;
}

/* subtle top accent line */
.vb-cta-block::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  border-top-left-radius:16px; border-top-right-radius:16px;
  background:linear-gradient(90deg, rgba(183,28,28,0.25), rgba(183,28,28,0.55));
}

.vb-cta-head{ display:flex; align-items:center; gap:10px; }
.vb-cta-icon{
  width:32px; height:32px; border-radius:999px;
  background:rgba(183,28,28,0.08); color:var(--vb-primary);
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 32px;
}

.vb-cta-title{ margin:0; font-size:18px; font-weight:800; color:var(--vb-text); }
.vb-cta-desc{ margin:0; color:#666; font-size:15px; line-height:1.45; }

/* Buttons: full-width on mobile, tidy spacing */
.vb-cta-btn{ width:100%; min-height:46px; }

/* Hover lift */
.vb-cta-block:hover{ transform:translateY(-2px); transition:transform .15s ease; }

/* Tablet/Desktop: two columns, buttons inline-size auto */
@media (min-width: 700px){
  .vb-final-inner{ grid-template-columns: repeat(2,1fr); gap:16px; }
  .vb-cta-btn{ width:auto; align-self:start; padding:10px 14px; }
}

/* ===== Spacing system (mobile first) ===== */
:root{
  --s-1: 6px;   /* tiny */
  --s0:  8px;   /* xs  */
  --s1: 12px;   /* sm  */
  --s2: 16px;   /* md  */
  --s3: 20px;   /* lg  */
  --s4: 24px;   /* xl  */
  --s5: 32px;   /* 2xl */
}

/* Normalize section rhythm */
@media (max-width: 640px){
  .vb-section{ margin: var(--s5) 0; }                 /* top/bottom for every major section */
  .vb-section > .gb-container{ padding: var(--s2); }  /* inner padding */
  .vb-h2{ margin: 0 0 var(--s2) 0; }                  /* h2 under-space consistent */
  .vb-sub{ margin: 0 0 var(--s2) 0; opacity:.8; }

  /* Generic card rhythm */
  .vb-card{
    background:#fff; border:1px solid #f1e7d8; border-radius:16px;
    padding: var(--s2); box-shadow:0 8px 24px rgba(0,0,0,.05);
    margin-bottom: var(--s2);
  }
  /* kill random margins some blocks add */
  .vb-card > *:first-child{ margin-top:0; }
  .vb-card > *:last-child{ margin-bottom:0; }

  /* Uniform gaps inside lists/grids */
  .vb-stack > * + *{ margin-top: var(--s2); }
}

/* ===== Stats/Trust block (“Warum VelissaBau?”) ===== */
@media (max-width: 640px){
  .why-strip.vb-section .vb-card{ padding: var(--s3); }
  .why-strip .vb-stats{ display:flex; flex-direction:column; }
  .why-strip .vb-stat{
    display:flex; align-items:flex-start; gap: var(--s2);
    padding: var(--s2) 0; border-top:1px solid #f1e7d8;
  }
  .why-strip .vb-stat:first-child{ border-top:0; padding-top:0; }
  .why-strip .vb-stat:last-child{ padding-bottom:0; }

  .why-strip .vb-icon{
    width:36px; height:36px; border-radius:12px; background:#FEF9F3;
    display:flex; align-items:center; justify-content:center; flex:0 0 36px;
  }
  .why-strip .vb-stat h4{
    margin:0 0 2px 0; font-size:18px; line-height:1.2;
  }
  .why-strip .vb-stat p{
    margin:0; font-size:14px; opacity:.8;
  }
}

/* ===== Global micro-adjustments to even out spacing ===== */
@media (max-width: 640px){
  /* ensure equal spacing between any two major blocks */
  .velissa-hero, .owner-strip, .services-grid-wrap, .howitworks, .why-strip, .dual-cta, .recommended {
    margin-top: var(--s5) !important;
  }

  /* card shadows slightly lighter for consistency */
  .services-grid .service-card,
  .howitworks .step,
  .dual-cta .card { box-shadow:0 6px 18px rgba(0,0,0,.04); }

  /* consistent heading spacing */
  h2, .section-title{ margin: 0 0 var(--s2) 0 !important; }
}

/* --- EXACT, ADJACENT SPACING FIXES (mobile-first) --- */
@media (max-width: 768px){

  /* 1) 'Bist du Unternehmer?' → 'Beliebte Leistungen' */
  .vb-owner-strip + .vb-services {
    margin-top: 16px !important;      /* <-- set the exact gap */
  }

  /* 2) &apos;Beliebte Leistungen&apos; → &apos;So funktioniert’s&apos; */
  .vb-services + .vb-how {
    margin-top: 16px !important;      /* <-- set the exact gap */
  }

  /* Kill inner margins that inflate spacing via margin-collapsing */
  .vb-owner-strip .vb-card { margin: 0 !important; padding-bottom: 14px; }
  .vb-owner-strip .vb-card > *:first-child { margin-top: 0 !important; }
  .vb-owner-strip .vb-card > *:last-child  { margin-bottom: 0 !important; }
  .vb-owner-strip p { margin: 0 0 8px 0 !important; } /* smaller p gaps */

  .vb-services > h2 { margin: 0 0 10px 0 !important; }  /* remove h2 top margin */
  .vb-services .vb-services-grid { margin-top: 0 !important; row-gap: 12px; }

  .vb-how > h2 { margin: 0 0 12px 0 !important; }       /* remove h2 top margin */
  .vb-how .vb-how-grid { margin-top: 0 !important; }
}

@media (max-width: 768px){

  /* &apos;Bist du Unternehmer?&apos; → &apos;Beliebte Leistungen&apos; */
  .vb-owner-strip + .vb-services {
    margin-top: 16px !important;
  }

  /* &apos;Beliebte Leistungen&apos; → &apos;So funktioniert’s&apos; (closer) */
  .vb-services + .vb-how {
    margin-top: 10px !important; /* was 16px */
  }

  /* Neutralize inner margin leaks */
  .vb-owner-strip .vb-card { margin: 0 !important; padding-bottom: 14px; }
  .vb-owner-strip .vb-card > *:first-child { margin-top: 0 !important; }
  .vb-owner-strip .vb-card > *:last-child  { margin-bottom: 0 !important; }
  .vb-owner-strip p { margin: 0 0 8px 0 !important; }

  .vb-services > h2 { margin: 0 0 10px 0 !important; }
  .vb-services .vb-services-grid { margin-top: 0 !important; row-gap: 12px; }

  .vb-how > h2 { margin: 0 0 10px 0 !important; }
  .vb-how .vb-how-grid { margin-top: 0 !important; }
}

/* === MOBILE: unify section title sizing to match "Beliebte Leistungen" === */
@media (max-width: 768px){
  :root{
    /* tweak this one value if you want slightly bigger/smaller */
    --vb-title-size: 24px;         /* target size for all section H2s */
    --vb-title-weight: 800;
  }

  /* Force same style across all section titles */
  .vb-services > h2,
  .vb-how > h2,
  .vb-trust .vb-trust-intro h2,
  .vb-featured > h2 {
    font-size: var(--vb-title-size) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
    font-weight: var(--vb-title-weight) !important;
    margin: 0 0 10px 0 !important;
  }

  /* If any section accidentally uses an h1 inside, normalize it too */
  .vb-services > h1,
  .vb-how > h1,
  .vb-trust .vb-trust-intro h1,
  .vb-featured > h1 {
    font-size: var(--vb-title-size) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
    font-weight: var(--vb-title-weight) !important;
    margin: 0 0 10px 0 !important;
  }

  /* Keep the small lead text under "Warum VelissaBau?" actually small */
  .vb-trust .vb-trust-intro p{
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 0 12px 0 !important;
    opacity: .85;
  }
}

/* ===== DESKTOP FRAME: left column + right rail (mobile unaffected) ===== */
@media (min-width: 1200px){
  :root{
    --vb-left: 940px;  /* left content column width */
    --vb-rail: 360px;  /* reserved banner rail (fits 300×600) */
    --vb-gap: 16px;
    --vb-inner-pad: 20px; /* matches your search card left padding */
  }

  /* Two-column grid frame like AutoScout24 */
  .vb-desktop-frame{
    display: grid;
    grid-template-columns: var(--vb-left) var(--vb-rail);
    column-gap: var(--vb-gap);
    justify-content: center;         /* centers the whole (left+rail) frame in the viewport */
  }

  /* All VB sections live in the LEFT column */
  .vb-desktop-frame > *{
    grid-column: 1;
    width: 100%;                     /* no surprises */
    max-width: 100%;
  }

  /* If/when you add a right-rail element, just give it grid-column: 2 */
  .vb-rail{ grid-column: 2; }

  /* Align lower sections’ text edge with the search card’s inner padding */
  .vb-services,
  .vb-how,
  .vb-trust,
  .vb-featured,
  .vb-final-cta{
    box-sizing: border-box;
    padding-left: var(--vb-inner-pad);
  }
  .vb-owner-strip .vb-card{ box-sizing: border-box; padding-left: var(--vb-inner-pad); }

  /* Desktop grids tuned to 940px column */
  .vb-search .vb-search-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: center;
  }
  .vb-services .vb-services-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
  .vb-how .vb-how-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .vb-trust .vb-trust-card{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 12px 14px; }
  .vb-trust .vb-trust-divider{ display:none; }
  .vb-final-cta .vb-final-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}

/* Larger desktops—breathe a bit more but keep alignment */
@media (min-width: 1600px){
  :root{ --vb-left: 980px; --vb-rail: 380px; }
}

@media (min-width: 1200px){
  /* shrink service chips a bit so all fit nicely */
  .vb-services .vb-services-grid{
    grid-template-columns: repeat(6, minmax(0,1fr)) !important; /* keep 6 across */
    gap: 10px !important;
  }

  .vb-service{
    font-size: 13px !important;
    padding: 8px 10px !important;
    border-radius: 6px !important;
    line-height: 1.1 !important;
  }

  /* optional: make the section heading breathe a bit */
  .vb-services > h2{
    margin-bottom: 12px !important;
  }
}

@media (min-width: 1200px){
  /* ===== Beliebte Leistungen (clean gray aesthetic) ===== */

  .vb-services{
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    padding: 28px 24px;
    box-sizing: border-box;
  }

  .vb-services > h2{
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: #333;
    margin: 0 0 18px 0;
  }

  /* gray chip grid */
  .vb-services .vb-services-grid{
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 12px;
  }

  .vb-service{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    background: #f4f4f4; /* <-- neutral gray instead of beige */
    color: #333;
    border: 1px solid #e0e0e0;
    transition: all .25s ease;
    box-shadow: 0 3px 6px rgba(0,0,0,0.03);
  }

  .vb-service:hover{
    background: #B71C1C;
    color: #fff;
    border-color: #B71C1C;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(183,28,28,0.15);
  }

  .vb-services .vb-services-grid a{
    text-decoration: none;
  }
}

/* ===== DESKTOP: fixed right rail, aligned tightly with content ===== */
@media (min-width: 1200px){

  /* Keep main content layout stable */
  .vb-desktop-wrapper{
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 24px;
    display: grid;
    grid-template-columns: 1fr; /* single column — rail floats separately */
    position: relative;
  }

  /* Fixed right rail — close to content edge */
  .vb-rail{
    position: fixed;
    top: 108px; /* adjust for your header */
    right: calc((100vw - 1280px)/2 + 8px); /* ✅ very close to the main content */
    width: 240px; /* smaller and compact */
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 60;
  }

  /* Banner image styling */
  .vb-rail .vb-banner img{
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }

  /* Claim box styling */
  .vb-claim-box{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-size: 14px;
    color: #333;
  }

  .vb-claim-box strong{ color: #B71C1C; }
  .vb-comingsoon-note{ font-size: 13px; color: #777; }

  html, body{ overflow-x: hidden; }
}

/* ===== TOP AD: left-aligned, slightly less than half width (desktop only) ===== */
@media (min-width: 1200px){
  .vb-top-ads{
    background: #F7F7F7;
    border-bottom: 1px solid #E5E5E5;
    width: 100%;
  }

  /* Align the ad left inside centered frame */
  .vb-top-ads-inner{
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex !important;
    justify-content: flex-start !important; /* ✅ LEFT aligned */
    align-items: center !important;
    box-sizing: border-box;
  }

  /* Ad block width (~half the content width) */
  .vb-leaderboard{
    display: block !important;
    width: clamp(520px, 48%, 720px) !important; /* ~half width, responsive */
  }

  /* Image styling */
  .vb-leaderboard img{
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  }

  /* Hide any unused right-top element */
  .vb-top-rail{ display: none !important; }

  /* Clean spacing below */
  .vb-top-ads + .vb-desktop-wrapper{
    margin-top: 20px !important;
  }

  .vb-desktop-wrapper{ padding-top: 0 !important; }
}

/* Hide top ad band on mobile/tablet */
@media (max-width: 1199.98px){
  .vb-top-ads{ display: none !important; }
}

/* ===== CAP RIGHT AD UNDER TOP BAND (desktop only) ===== */
@media (min-width: 1200px){
  /* 1) Compute the total height of your top band:
        leaderboard 180px + padding 14+14 + bottom border 1 = 209px
        Add a tiny gap (10px) → 219px. Adjust if you change banner/padding. */
  :root{
    --vb-top-band-total: 209px;       /* 180 + 28 + 1 */
    --vb-rail-gap: 10px;              /* breathing room under the band */
    --vb-rail-top: calc(var(--vb-top-band-total) + var(--vb-rail-gap));
  }
  body.admin-bar{
    --vb-rail-top: calc(var(--vb-top-band-total) + var(--vb-rail-gap) + 32px);
  }

  /* 2) Ensure the top band actually sits above in the stacking order */
  .vb-top-ads{
    position: relative;
    z-index: 100;
  }

  /* 3) Lock the fixed right rail below the top band */
  .vb-rail{
    top: var(--vb-rail-top) !important;  /* was 108px */
    z-index: 60;                          /* stays under the top band */
  }
}

@media (min-width: 1200px){
  :root{
    /* was 10px — add a little more breathing room */
    --vb-rail-gap: 20px; /* try 20–28px if needed */
  }
}

@media (min-width: 1200px){
  /* Fine-tune right ad position: 150 + 55 = 205px lower */
  .vb-rail{
    top: calc(var(--vb-rail-top) + 205px) !important;
  }
}

/* === VELISSABAU RIGHT RAIL FIX (keeps full design, fixes scroll & alignment) === */

/* 1. Make sure top ad is part of normal flow */
.vb-top-ads {
  position: relative;
  z-index: 100;
}

/* 2. Compute the total height of the top banner + padding */
:root {
  --vb-topband-height: 209px; /* banner(180) + padding(28) + border(1) */
  --vb-rail-gap: 20px;        /* small breathing space below top ad */
  --vb-rail-top: calc(var(--vb-topband-height) + var(--vb-rail-gap));
}

/* 3. Keep your layout grid clean (desktop only) */
@media (min-width: 1200px) {
  .vb-desktop-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
  }

  .vb-desktop-frame {
    display: grid;
    grid-template-columns: 940px 300px;
    gap: 16px;
    justify-content: center;
    align-items: start;
  }

  /* Left column */
  .vb-desktop-frame > *:not(.vb-rail) {
    grid-column: 1;
  }

  /* Right rail: sticky + aligned under top ad */
  .vb-rail {
    grid-column: 2;
    position: sticky;
    top: var(--vb-rail-top);
    align-self: start;
    z-index: 60;
  }

  /* Reset legacy props that were freezing it */
  .vb-rail,
  .vb-rail-stick {
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* Optional: adjust spacing inside the rail */
  .vb-rail-stick {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .vb-rail img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  .vb-claim-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
}

/* — Final right-rail polish — */
@media (min-width:1200px){
  :root{
    --rail-w: 280px;                 /* a bit slimmer for better balance */
    --rail-r: 14px;
    --rail-shadow: 0 10px 26px rgba(0,0,0,.08);
    --rail-border: 1px solid #eee;
  }

  .vb-rail{
    width: var(--rail-w) !important;
    right: calc((100vw - 1280px)/2 + 4px) !important; /* nudge closer to content */
    gap: 16px !important;
  }

  /* Banner card */
  .vb-rail .vb-banner{
    border-radius: var(--rail-r);
    overflow: hidden;
    background:#fafafa;
    border: var(--rail-border);
    box-shadow: var(--rail-shadow);
  }
  .vb-rail .vb-banner img{
    display:block;
    width:100% !important;
    height: min(64vh, 540px) !important; /* tall, but not overwhelming */
    aspect-ratio: 2/3;
    object-fit: cover !important;
    object-position: 54% 28% !important; /* pulls “VelissaBau” logo into view */
  }

  /* Text card */
  .vb-claim-box{
    border-radius: var(--rail-r);
    border: var(--rail-border);
    box-shadow: var(--rail-shadow);
    padding: 12px 14px 14px;
    line-height: 1.45;
    color:#444;
  }
  .vb-claim-box p{ margin:8px 0 0; font-size: 13.5px; }
  .vb-claim-box p:first-child{ margin-top:0; font-weight:800; color:#B71C1C; }
  .vb-comingsoon-note{ font-size:12.5px; color:#777; }

  /* Subtle cohesion: same rounding/shadow on main cards */
  .vb-card,
  .vb-services,
  .vb-how-card,
  .vb-trust-card,
  .vb-cta-block{
    border-radius: var(--rail-r);
    box-shadow: 0 6px 18px rgba(0,0,0,.04);
  }

  /* Top ad match */
  .vb-leaderboard img{
    border-radius: var(--rail-r) !important;
    box-shadow: var(--rail-shadow) !important;
  }
}

/* Micro-tidy: service chips hover a bit softer */
@media (min-width:600px){
  .vb-service{
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  .vb-service:hover{
    box-shadow: 0 10px 20px rgba(183,28,28,.12);
  }
}

@media (min-width:1200px){
  /* Shift and extend right rail a bit */
  .vb-rail{
    right: calc((100vw - 1280px)/2 - 50px) !important; /* moves it 40px closer to screen edge */
    width: 330px !important;                           /* adds ~40px width */
  }

  /* Keep internal image balanced within new width */
  .vb-rail .vb-banner img{
    object-position: 50% 26% !important;  /* minor re-center for logo visibility */
  }
}

/* === FINAL VELISSABAU RIGHT BANNER === */
@media (min-width: 1200px) {
  .vb-rail {
    grid-column: 2;
    align-self: start;
  }

  .vb-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: clamp(520px, 78vh, 680px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    isolation: isolate;

    /* ✅ Hardcoded fallback background */
    background-image: url(&apos;https://velissabau.ch/wp-content/uploads/2025/10/VelissaBau.jpg&apos; !important;
    background-size: cover !important;
    background-position: center 10% !important;
    background-repeat: no-repeat !important;
    background-color: #eee !important;
  }

  /* Gradient overlay for branded look */
  .vb-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 40%,
      rgba(183, 28, 28, 0.3) 70%,
      rgba(183, 28, 28, 0.85) 100%
    );
    z-index: 1;
  }

  /* Text overlay */
  .vb-banner-text {
    position: absolute;
    z-index: 2;
    inset: auto 16px 16px 16px;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: grid;
    gap: 6px;
  }

  .vb-banner-text h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
  }

  .vb-banner-text p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.96);
  }

  .vb-banner-text .vb-banner-note {
    opacity: 0.9;
    font-size: 13px;
  }
}

/* Hide old image if still in HTML */
.vb-claim-box,
.vb-promo-img {
  display: none !important;
}

/* ===== FULL-BLEED TOP AD (break out of any container) ===== */
.vb-top-ads {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important; /* center relative to viewport */
  width: 100vw !important;                /* full viewport width */
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg,#fff 0%,#f7f9fb 100%);
  border-bottom: 1px solid #e6e8eb;
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
  z-index: 10;
}

/* kill any theme max-width on inner wrappers */
.vb-top-ads-inner,
.vb-leaderboard {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* make the visual truly full width */
.vb-leaderboard img {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: clamp(200px, 26vw, 300px) !important;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* if any ancestor grid/container clips children, allow bleed */
.vb-top-ads,
.vb-top-ads-inner {
  overflow: visible !important;
}

/* prevent accidental horizontal scrollbars from the bleed */
html, body { overflow-x: hidden; }

/* breathing room below the band */
.vb-top-ads + .vb-desktop-wrapper { margin-top: 28px !important; }

/* optional: hide on mobile
@media (max-width: 992px){ .vb-top-ads{ display:none !important; } }
*/

/* ===== FULL-BLEED TOP AD — compact version ===== */
.vb-top-ads {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #fff 0%, #f7f9fb 100%);
  border-bottom: 1px solid #e6e8eb;
  box-shadow: 0 3px 16px rgba(0, 0, 0, 0.04);
  z-index: 10;
}

.vb-top-ads-inner,
.vb-leaderboard {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.vb-leaderboard img {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: clamp(120px, 16vw, 160px) !important; /* 👈 smaller height */
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* optional soft fade for polish */
.vb-leaderboard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 0, 0, 0.04) 100%
  );
  pointer-events: none;
}

.vb-top-ads + .vb-desktop-wrapper {
  margin-top: 24px !important;
}

html, body {
  overflow-x: hidden;
}

/* 1) Header: force pure white, no borders, above the ad */
.site-header,
.site-header .inside-header,
.main-navigation,
.main-navigation .inside-navigation {
  background: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}
.site-header { position: relative; z-index: 300; }

/* 2) Top ad band: make it visually neutral so it doesn&apos;t tint header */
.vb-top-ads {
  background: transparent !important;   /* kill the gray band */
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 100;                          /* stays below header */
}
.vb-top-ads-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 12px 24px;                    /* keep spacing without a bg */
}

/* Ad image: full-bleed inside, no shadow that could ‘smudge’ the white header */
.vb-leaderboard { display: block; width: 100%; }
.vb-leaderboard img {
  display: block;
  width: 100%;
  height: 118px;                         /* your chosen slim height */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: none !important;           /* prevent gray glow near header */
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* 3) Page background: subtle gray, header remains white */
body, .site {
  background: #f7f7f8;                  /* very slight gray */
}

/* 4) In case a container around the ad is injecting a tint */
.vb-top-ads * {
  background: transparent !important;
}

/* ====== VB Header – clean, white, sticky ====== */
.site-header {
  background:#fff !important;                 /* pure white */
  position: sticky; top: 0; z-index: 999;     /* stays on top */
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);       /* hairline separation (no visible border) */
}

.site-header .inside-header {
  max-width:1280px; margin:0 auto;
  padding:10px 24px;
  display:flex; align-items:center; gap:16px;
}

/* Logo sizing (looks like your SVG/PNG already has good whitespace) */
.site-logo img, .site-logo a img {
  height:28px; width:auto; display:block;
}

/* Remove GP’s extra nav background/padding */
.main-navigation, .main-navigation .inside-navigation {
  background:transparent !important; box-shadow:none !important;
}
.main-navigation .inside-navigation {
  padding:0 !important;
}

/* Align the menu on one line, compact spacing */
.main-nav ul {
  display:flex; gap:6px; align-items:center;
}
.main-navigation .main-nav > ul {
  margin-left:auto;                           /* pushes nav to the right of logo */
}

/* Links: crisp dark, roomy but compact */
.main-navigation .main-nav ul li a {
  color:#222; background:transparent;
  padding:10px 12px; border-radius:8px;
  font-weight:600;
  line-height:1.1;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Hover / focus: subtle gray wash + red underline (our little twist) */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
  background:#f6f6f6;
  box-shadow: inset 0 -2px 0 #B71C1C;
}

/* Active item underline (no background) */
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a {
  box-shadow: inset 0 -2px 0 #B71C1C;
}

/* CTA pill for “Unternehmen anmelden” */
.main-navigation .main-nav ul li.vb-cta > a {
  background:#B71C1C; color:#fff !important;
  padding:10px 14px; border-radius:999px;
  box-shadow:none;                            /* no underline on the pill */
}
.main-navigation .main-nav ul li.vb-cta > a:hover,
.main-navigation .main-nav ul li.vb-cta > a:focus {
  filter:brightness(0.96);
}

/* Mobile tweaks (keep it tidy) */
@media (max-width: 1024px){
  .site-logo img { height:26px; }
  .main-navigation .menu-toggle { 
    padding:8px 10px; border-radius:8px;
  }
  .main-navigation.toggled .main-nav > ul { gap:2px; }
  .main-navigation .main-nav ul li a { padding:12px; border-radius:10px; }
  .main-navigation .main-nav ul li.vb-cta > a { margin-top:4px; }
}

/* Make sure the top ad band never tints the header */
.vb-top-ads { margin-top:0; }

/* ===== Fix stretched VelissaBau logo ===== */
.site-logo img,
.site-logo a img {
  height: 38px !important;     /* smaller, balanced with text links */
  width: auto !important;      /* maintain proportions */
  max-height: 38px !important; /* prevents overflow */
  object-fit: contain !important;
  display: block;
  margin-top: 2px;             /* optional: optical centering */
}

/* Adjust header alignment to center vertically */
.site-header .inside-header {
  align-items: center !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* ===== Left-align header menu next to logo ===== */

/* Make header a tight horizontal flex container */
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  gap: 36px; /* spacing between logo and menu */
}

/* Align menu items horizontally next to logo */
.main-navigation {
  margin-left: 0 !important;
}

.main-navigation ul {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 24px; /* space between menu links */
}

/* Ensure menu doesn’t stretch to full width */
.main-navigation {
  flex: 0 0 auto !important;
}

/* Keep the entire header clean and white */
.site-header {
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Strong version */
.vb-right-ad,
.vb-rail,
.vb-rail-stick {
  margin-top: 40px !important;
  top: 0 !important;
}

/******** 1) Header: pure white, no layout changes ********/
.site-header,
.site-header .inside-header {
  background: #ffffff;
  box-shadow: none;
  border: 0;
}

/******** 2) Desktop: keep menu next to the logo ********/
@media (min-width: 1024px) {
  .main-navigation .main-nav > ul {
    display: flex;
    gap: 10px;
    margin-left: 0; /* sits right after the logo */
  }
  .main-navigation .main-nav > ul > li > a {
    color: #222;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    background: transparent;
  }
}

/******** 3) Mobile: DO NOT force the desktop menu (fixes the 2-menus issue) ********/
@media (max-width: 1023px) {
  /* let GeneratePress control the menu with the hamburger */
  .main-navigation .main-nav > ul {
    display: none;
  }
  .main-navigation.toggled .main-nav > ul {
    display: block;
  }
}

/******** 4) Top ad: keep it simple and compact ********/
.vb-leaderboard img {
  width: 100%;
  height: 140px;        /* adjust if you want */
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}

/******** 5) Right rail: simple sticky, adjusted for smaller header ********/
@media (min-width: 1200px) {
  .vb-rail {
    position: sticky;
    top: 120px;         /* nudge as needed (100–140px) */
    align-self: start;
  }
}

/* Mobile-only: hide all link rows, show only hamburger */
@media (max-width: 1023px) {
  /* Primary nav list */
  .main-navigation .main-nav > ul { display: none !important; }
  .main-navigation.toggled .main-nav > ul { display: block !important; }

  /* Any secondary/extra bars some themes output */
  .secondary-navigation,
  .top-bar,
  .inside-secondary-navigation { display: none !important; }

  /* If a duplicated menu list exists outside primary container */
  nav .menu,                      /* common WP class */
  .main-navigation .menu { display: none !important; }
}

/* Desktop keeps inline menu next to logo */
@media (min-width: 1024px) {
  .main-navigation .main-nav > ul {
    display: flex;
    gap: 10px;
    margin-left: 0;
  }
}

/* ===== VelissaBau – Mobile Menu (AutoScout24 style) ===== */
@media (max-width:1023px){

  /* Panel: slides from top, capped height, scrollable content */
  .main-navigation.toggled .inside-navigation {
    position: relative !important;
    z-index: 9999 !important;
  }

  .main-navigation.toggled .main-nav > ul{
    /* sit right under the header, same offset we tuned before + 10px */
    margin-top: -40px !important;
    /* top-sheet look */
    max-height: 72vh !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    background: transparent !important;
    padding: 8px 14px 16px !important;
    display: grid !important;
    gap: 10px !important;
  }

  /* Rows */
  .main-navigation .main-nav > ul > li {
    list-style: none !important;
    margin: 0 !important;
  }

  .main-navigation .main-nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    padding: 16px 16px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    color: #222 !important;
    text-decoration: none !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  }

  /* Chevron on each row */
  .main-navigation .main-nav > ul > li > a::after{
    content: "\203A"; /* single right chevron */
    font-size: 22px;
    line-height: 1;
    color: #999;
  }

  /* Active (current page) row – red underline curve */
  .main-navigation .main-nav > ul > li.current-menu-item > a,
  .main-navigation .main-nav > ul > li.current_page_item > a{
    box-shadow:
      inset 0 -3px 0 #B71C1C,
      0 2px 8px rgba(0,0,0,.05) !important;
  }

  /* CTA row (add a class "menu-item-login" to the Login/Anmelden menu item in WP) */
  .main-navigation .main-nav > ul > li.menu-item-login > a{
    border-radius: 999px !important;
    background: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    font-weight: 800 !important;
    justify-content: center !important;
    gap: 10px;
  }
  .main-navigation .main-nav > ul > li.menu-item-login > a::before{
    content: "👤";
    font-size: 18px;
  }
  .main-navigation .main-nav > ul > li.menu-item-login > a::after{
    content: none; /* no chevron on the CTA */
  }

  /* Optional: language row (give it class "menu-item-language" if you add one) */
  .main-navigation .main-nav > ul > li.menu-item-language > a{
    font-weight: 700 !important;
  }

  /* Tight panel edge and keep the page visible beneath (AS24 feel) */
  .main-navigation.toggled .main-nav{
    background: linear-gradient(180deg,#fff 0%, rgba(255,255,255,.92) 100%) !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* Keep header logo/x fully clickable above sheet */
  .menu-toggle,
  .main-navigation .menu-toggle{ z-index: 10000; }
}

@media (max-width:1023px){
  .main-navigation.toggled .main-nav > ul{
    margin-top: -40px !important;
    max-height: 72vh !important;
    overflow: auto !important;
    padding: 6px 12px 12px !important;
    display: grid !important;
    gap: 8px !important;
  }

  .main-navigation .main-nav > ul > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important; /* smaller vertical padding */
    font-size: 17px !important; /* smaller font size */
    font-weight: 700 !important;
    color: #222 !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,.04) !important;
    transition: all .2s ease-in-out;
  }

  .main-navigation .main-nav > ul > li > a::after {
    content: "\203A";
    font-size: 18px;
    color: #aaa;
  }

  .main-navigation .main-nav > ul > li.current-menu-item > a {
    box-shadow: inset 0 -3px 0 #B71C1C;
  }
}

@media (max-width:1023px){
  /* Adjust close (X) icon position — align with logo top */
  .main-navigation .menu-toggle,
  .menu-toggle {
    position: absolute !important;
    right: 18px !important;
    top: 12px !important; /* was 24px — moved up */
    transform: none !important;
    margin: 0 !important;
    z-index: 10000 !important;
  }

  /* Keep logo neatly aligned left */
  .site-logo,
  .inside-header .site-branding {
    margin-left: 16px !important;
  }
}

/* === VelissaBau — MODERN SLATE THEME === */
:root{
  --vb-page-bg:#E9ECEF;   /* cool, contemporary slate tint */
  --vb-text:#1A1A1A;
  --vb-card:#FFFFFF;
  --vb-border:rgba(0,0,0,.07);
  --vb-shadow:0 10px 28px rgba(0,0,0,.07);
}

/* Page canvas */
html,body{background:var(--vb-page-bg)!important;color:var(--vb-text)!important;}
.site{background:transparent!important;}

/* Header / Footer white */
.site-header,.site-header .inside-header,
.main-navigation,.main-navigation .inside-navigation,
.site-footer,.footer-widgets,.site-info{
  background:#fff!important;border:0!important;box-shadow:none!important;color:var(--vb-text)!important;
}

/* Content transparent */
.site-content,.site-main,.inside-article,.entry-content{background:transparent!important;border:0!important;box-shadow:none!important;}

/* Cards: crisp white on slate */
.vb-card,.vb-how-card,.vb-trust-card,.vb-cta-block,.vb-services,.vb-company-card{
  background:var(--vb-card)!important;border:1px solid var(--vb-border)!important;border-radius:14px!important;box-shadow:var(--vb-shadow)!important;
}

/* Neutralize old tints */
.vb-hero,.vb-trust,.vb-final-cta,.vb-how{background:transparent!important;}
.vb-top-ads,.vb-top-ads-inner,.vb-leaderboard{background:transparent!important;border:0!important;box-shadow:none!important;}
.vb-leaderboard::after{content:none!important;}

/* Seam guard */
.site-header + .site-content{margin-top:-1px!important;}

/* === Mobile: hide ONLY the right-rail ad === */
@media (max-width: 1199.98px){
  .vb-rail,
  .vb-rail *,
  .vb-right-rail,
  .vb-right-ad,
  .vb-rail-stick,
  .vb-banner,
  .vb-claim-box {
    display: none !important;
  }

  /* ensure the main grid collapses to 1 column without the rail */
  .vb-desktop-frame { grid-template-columns: 1fr !important; }
  .vb-rail { position: static !important; height: 0 !important; overflow: hidden !important; }
}

/* === "Bist du Unternehmer?" — centered row on desktop, stacked on mobile (button stays centered) === */

/* Desktop (row, centered) */
@media (min-width: 992px) {
  .vb-owner-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .vb-owner-strip > *,
  .vb-owner-strip .gb-grid-column,
  .vb-owner-strip .gb-container > * {
    text-align: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  .vb-owner-strip .vb-btn,
  .vb-owner-strip .gb-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }
}

/* Mobile (stacked, centered exactly, button stays centered) */
@media (max-width: 991.98px) {
  .vb-owner-strip {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .vb-owner-strip .vb-btn,
  .vb-owner-strip .gb-button {
    margin: 0 auto !important; /* keep perfectly centered */
    align-self: center !important;
    justify-content: center !important;
  }
}

/* === Desktop: refined section title size (slightly bigger, still elegant) === */
@media (min-width: 992px){
  :root{
    --vb-h2-size: 24px;       /* small, balanced bump */
    --vb-h2-weight: 800;      /* bold, consistent */
    --vb-h2-line: 1.25;
    --vb-h2-space: 14px;
    --vb-h2-color: #1a1a1a;
  }

  /* unified section titles */
  .vb-services > h2,
  .vb-how > h2,
  .vb-featured > h2,
  .vb-trust .vb-trust-intro > h2 {
    font-size: var(--vb-h2-size) !important;
    font-weight: var(--vb-h2-weight) !important;
    line-height: var(--vb-h2-line) !important;
    letter-spacing: -0.2px !important;
    color: var(--vb-h2-color) !important;
    margin: 0 0 var(--vb-h2-space) !important;
    text-align: left !important;
  }

  /* keep internal styling consistent */
  .vb-services h2 *,
  .vb-how h2 *,
  .vb-featured h2 *,
  .vb-trust .vb-trust-intro h2 * {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
  }
}

/* === Match "Darum..." text color to hero subtitle === */
@media (min-width: 992px){
  .vb-trust .vb-trust-intro p {
    color: #6b6b6b !important;  /* same as hero subtitle */
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    margin-top: 4px !important;
  }
}

/* === Mobile header: perfectly align hamburger icon with logo === */
@media (max-width: 991px) {
  .main-navigation .menu-toggle {
    position: relative;
    top: -2px; /* lift slightly upward */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
  }

  .main-navigation .menu-toggle svg,
  .main-navigation .menu-toggle .gp-icon {
    height: 22px !important;
    width: 22px !important;
  }
}

/* === VelissaBau header — pixel-perfect logo alignment === */

/* Make the header a clean flex row with a consistent height */
.site-header .inside-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:64px;                 /* steady bar height */
  padding-top:6px !important;      /* gentle breathing room */
  padding-bottom:6px !important;
}

/* Kill stray margins/line-heights around the branding block */
.site-branding,
.site-logo{
  display:flex;
  align-items:center;
  margin:0 !important;
  line-height:1 !important;
}
.site-logo a{
  display:flex;
  align-items:center;
  line-height:1 !important;
}

/* Logo image: crisp size + tiny optical nudge */
.site-logo img{
  display:block;
  width:auto !important;
  height:36px !important;          /* desktop baseline */
  object-fit:contain;
  transform:translateY(1px);       /* subtle visual centering */
}

/* Mobile: slightly smaller but same alignment */
@media (max-width:1023px){
  .site-header .inside-header{ min-height:60px; }
  .site-logo img{ height:32px !important; transform:translateY(1px); }
}

/* Ensure nav wrapper isn&apos;t adding extra vertical padding on desktop */
@media (min-width:1024px){
  .main-navigation .inside-navigation{
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
}

/* ===== VelissaBau – SEARCH PAGE (scoped) ===== */
.vb-search-page{ --vb-line:#eee; --vb-white:#fff; }

/* Keep background consistent with your modern slate theme if active */
.vb-search-page html, .vb-search-page body { background: transparent; }

/* Tight hero */
.vb-search-page .vb-hero{ background: var(--vb-bg, #FEF9F3); padding:24px 12px; }
.vb-search-page .vb-hero-inner{ max-width:1200px; margin:0 auto; }
.vb-search-page .vb-hero-text h1{ margin:0; font-weight:800; font-size:24px; color:#333; }
.vb-search-page .vb-hero-text p{ margin:6px 0 0; color:#666; font-size:15px; }

/* Filter bar */
.vb-search-page .vb-filterbar{ margin-top:10px; }
.vb-search-page .vb-filterbar .vb-search-row{ gap:10px; }
.vb-search-page .vb-filter-actions{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;
}

/* Results grid (respects your home grid) */
.vb-search-page .vb-results-wrap{ max-width:1200px; margin:0 auto; padding:0 12px 24px; }
.vb-search-page .facetwp-template{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:768px){
  .vb-search-page .facetwp-template{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1100px){
  .vb-search-page .facetwp-template{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.vb-search-page .facetwp-pager{ display:flex; justify-content:center; margin:14px 0 0; }

/* Desktop frame + right rail re-use from home */
@media (min-width:1200px){
  .vb-search-page .vb-desktop-wrapper{ max-width:1280px; margin:0 auto; padding-inline:24px; }
  .vb-search-page .vb-desktop-frame{
    display:grid; grid-template-columns: 940px 300px; gap:16px; justify-content:center; align-items:start;
  }
  .vb-search-page .vb-desktop-frame > *:not(.vb-rail){ grid-column:1; }
  .vb-search-page .vb-rail{ grid-column:2; position: sticky; top: 120px; align-self:start; }

  /* make the filterbar sticky under the header on desktop – nice UX */
  .vb-search-page .vb-filterbar{ position: sticky; top: 84px; z-index: 20; }
}

/* Right rail banner (same look as home’s final version) */
@media (min-width:1200px){
  .vb-search-page .vb-banner{
    position: relative; border-radius:16px; overflow:hidden;
    height: clamp(520px, 78vh, 680px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    isolation:isolate;
    background-image:url(&apos;https://velissabau.ch/wp-content/uploads/2025/10/VelissaBau.jpg&apos; !important;
    background-size: cover !important;
    background-position: center 10% !important;
    background-repeat:no-repeat !important; background-color:#eee !important;
  }
  .vb-search-page .vb-banner::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(183,28,28,0.3) 70%, rgba(183,28,28,0.85) 100%);
    z-index:1;
  }
  .vb-search-page .vb-banner-text{
    position:absolute; z-index:2; inset:auto 16px 16px 16px; color:#fff;
    display:grid; gap:6px; text-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  .vb-search-page .vb-banner-text h4{ margin:0; font-size:16px; font-weight:800; }
  .vb-search-page .vb-banner-text p{ margin:0; font-size:14px; line-height:1.5; }
}

/* Top ad (use your compact full-bleed variant) */
.vb-search-page .vb-top-ads{ position:relative; left:50%; transform:translateX(-50%); width:100vw; max-width:100vw; background:transparent; border:0; box-shadow:none; z-index:10; }
.vb-search-page .vb-top-ads-inner{ max-width:1280px; margin:0 auto; padding:12px 24px; }
.vb-search-page .vb-leaderboard img{ width:100vw; max-width:100vw; height:118px; object-fit:cover; border-radius:12px; box-shadow:none; }
.vb-search-page .vb-top-ads + .vb-desktop-wrapper{ margin-top:24px !important; }

/* Small polish */
.vb-search-page .vb-card,
.vb-search-page .vb-how-card,
.vb-search-page .vb-trust-card{ border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.04); }

/* ===== VB Search Page — top premium strip & results polish ===== */

/* reuse your existing tokens; only deltas below */
.vb-search-page .vb-results-count { color:#666; font-size:14px; }
.vb-search-page .vb-results-head { padding: 4px 12px 8px; }

.vb-search-page .facetwp-template.vb-grid > * { min-width:0; }

/* Premium strip card spacing inside the slider template */
.vb-premium-chip {
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:10px 12px; box-shadow:0 4px 10px rgba(0,0,0,.05);
  margin: 0 8px;
  white-space: nowrap;
}
.vb-premium-chip img { width:52px; height:52px; object-fit:cover; border-radius:10px; }

/* Make filterbar stick nicely under header on desktop (works with your earlier CSS) */
@media (min-width:1200px){
  .vb-search-page .vb-filterbar{ position: sticky; top: 88px; z-index: 20; }
}

/* Ensure the top premium strip shares the full-bleed look you designed */
.vb-search-page .vb-top-ads { background: transparent !important; border:0 !important; box-shadow:none !important; }
.vb-search-page .vb-top-ads-inner { max-width:1280px; margin:0 auto; padding:12px 24px; }

/* ===== VB Search Page – AutoScout-style filter bar ===== */

/* Heading row */
.vb-search-page .vb-search-header {
  max-width: 1200px;
  margin: 0 auto 10px;
  padding: 18px 12px 0;
}

.vb-search-page .vb-search-headline {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #1a1a1a;
}

.vb-search-page .vb-search-subline {
  margin-top: 4px;
  font-size: 14px;
  color: #666;
}

.vb-search-page .vb-search-count {
  font-weight: 600;
}

/* Filter bar wrapper */
.vb-search-page .vb-searchbar {
  max-width: 1200px;
  margin: 6px auto 10px;
  padding: 10px 12px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e2e2;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  display: grid;
  gap: 8px;
}

/* Rows */
.vb-searchbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vb-searchbar-row--facets .vb-searchbar-field {
  flex: 1 1 140px;
  min-width: 120px;
}

.vb-searchbar-row--secondary {
  align-items: flex-start;
  justify-content: space-between;
}

.vb-searchbar-secondary-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vb-searchbar-secondary-right {
  flex: 1 1 auto;
}

/* Facet containers */
.vb-searchbar-field .facetwp-facet {
  width: 100%;
  margin: 0;
}

/* Make dropdowns look like AutoScout-ish pills */
.vb-searchbar .facetwp-facet select,
.vb-searchbar .facetwp-facet .facetwp-dropdown,
.vb-searchbar .facetwp-facet input[type="search"],
.vb-searchbar .facetwp-facet input[type="text"] {
  width: 100%;
  min-height: 38px;
  padding: 6px 32px 6px 10px;
  border-radius: 8px;
  border: 1px solid #d5d5d5;
  background: #f7f7f7;
  font-size: 13px;
  color: #333;
}

/* "Mehr Filter" button */
.vb-searchbar-more {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid #d5d5d5;
  background: #f0f0f0;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
}

/* Actions row */
.vb-searchbar-row--actions {
  justify-content: space-between;
  align-items: center;
}

.vb-searchbar-actions-left,
.vb-searchbar-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vb-searchbar-link {
  border: 0;
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #b71c1c;
  cursor: pointer;
  text-decoration: none;
}

.vb-searchbar-link--muted {
  color: #777;
}

.vb-searchbar-link--primary {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #b71c1c;
  background: #fff;
}

/* Active filter chips */
.vb-search-page .facetwp-selections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
}

.vb-search-page .facetwp-selection {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f3f3f3;
  border: 1px solid #e0e0e0;
}

.vb-search-page .facetwp-selection span {
  font-size: 12px;
}

/* Toolbar under the bar (sort area) */
.vb-search-page .vb-results-toolbar {
  max-width: 1200px;
  margin: 0 auto 12px;
  padding: 4px 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.vb-search-page .vb-results-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vb-search-page .vb-sort-label {
  color: #777;
}

/* Mobile tweaks */
@media (max-width: 768px){
  .vb-search-page .vb-search-header {
    padding-inline: 12px;
  }
  .vb-search-page .vb-search-headline {
    font-size: 20px;
  }
  .vb-search-page .vb-searchbar {
    padding: 10px;
    border-radius: 12px;
  }
  .vb-searchbar-row--facets .vb-searchbar-field,
  .vb-searchbar-field--more {
    flex: 1 1 100%;
  }
  .vb-searchbar-row--actions {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Desktop layout reuse */
@media (min-width:1200px){
  .vb-search-page .vb-desktop-wrapper{
    max-width:1280px;
    margin:0 auto;
    padding-inline:24px;
  }
  .vb-search-page .vb-desktop-frame{
    display:grid;
    grid-template-columns: 940px 300px;
    gap:16px;
    justify-content:center;
    align-items:start;
  }
  .vb-search-page .vb-desktop-frame > *:not(.vb-rail){
    grid-column:1;
  }
  .vb-search-page .vb-rail{
    grid-column:2;
    position:sticky;
    top:120px;
    align-self:start;
  }
}

/* ===== Sidebar CTA in right rail (lead teaser) ===== */

.vb-sidebar-cta{
  margin-top: 16px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  padding: 14px 16px 16px;
  font-size: 14px;
  color: #333;
}

.vb-sidebar-cta__badge{
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  background: #fef3f2;
  color: #b71c1c;
}

.vb-sidebar-cta__title{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
  color: #1a1a1a;
}

.vb-sidebar-cta__text{
  margin: 0 0 8px;
  font-size: 13px;
  color: #555;
}

.vb-sidebar-cta__list{
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 13px;
  color: #555;
}

.vb-sidebar-cta__list li{
  margin-bottom: 3px;
}

.vb-sidebar-cta__btn{
  width: 100%;
  margin-bottom: 6px;
}

.vb-sidebar-cta__hint{
  margin: 0;
  font-size: 11px;
  color: #777;
}

/* On smaller screens, just let it behave like a normal card */
@media (max-width: 1199px){
  .vb-sidebar-cta{
    margin-top: 16px;
  }
}

.archive .page-header,
.archive .page-title {
    display: none !important;
}

.vb-desktop-frame {
  min-height: 0 !important;
  height: auto !important;
}

/* === VelissaBau – Search Page Right Rail (desktop only) === */

/* Desktop rail */
@media (min-width: 1200px) {
  .vb-search-rail {
    position: fixed;
    top: 110px; /* adjust under your sticky header */
    right: calc((100vw - 1200px)/2 + 16px); /* align near main content */
    width: 320px;
    z-index: 80;
  }

  .vb-search-rail-inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .vb-search-rail-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: clamp(480px, 72vh, 640px);
    box-shadow: 0 12px 28px rgba(0,0,0,.08);
    background-image: url(&apos;https://velissabau.ch/wp-content/uploads/2025/10/VelissaBau.jpg&apos;;
    background-size: cover;
    background-position: center 10%;
    background-repeat: no-repeat;
  }

  .vb-search-rail-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0) 40%,
      rgba(183,28,28,0.35) 70%,
      rgba(183,28,28,0.9) 100%
    );
    z-index: 1;
  }

  .vb-search-rail-banner-text {
    position: absolute;
    inset: auto 16px 16px 16px;
    z-index: 2;
    color: #fff;
    display: grid;
    gap: 6px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.25);
    font-size: 14px;
  }

  .vb-search-rail-banner-text h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
  }

  .vb-search-rail-cta {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    padding: 14px 16px 16px;
    font-size: 14px;
    color: #333;
  }
}

/* Hide rail on tablet/mobile */
@media (max-width: 1199px) {
  .vb-search-rail {
    display: none !important;
  }
}

/* === STEP 1: Reset Search Page Layout to 1 Column === */

/* Center the search page content and give it normal padding */
.vb-search-page .vb-desktop-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Kill any old grid/2-column behavior on the search frame */
.vb-search-page .vb-desktop-frame {
  display: block !important;
  grid-template-columns: none !important;
}

/* Make sure the main column takes full width */
.vb-search-page .vb-left {
  width: 100%;
}

/* ===== VelissaBau – Companies Archive: main + right rail layout ===== */

/* Desktop: make site-content into a 2-column flex layout */
@media (min-width: 1200px) {

  /* 1) Outer wrapper: two columns */
  .post-type-archive-company .site-content {
    display: flex;
    justify-content: center;       /* center the whole frame */
    align-items: flex-start;
    gap: 24px;                     /* space between main + rail */
  }

  /* 2) Main content column (search bar + cards) */
  .post-type-archive-company .content-area,
  .post-type-archive-company #primary {
    flex: 0 1 940px;               /* main column width */
    max-width: 940px;
  }

  /* 3) Right rail column (your hook element) */
  .post-type-archive-company .vb-search-rail {
    flex: 0 0 300px;               /* rail width */
    max-width: 300px;
  }
}

/* Mobile / tablet: rail behaves like a normal block (or hide it) */
@media (max-width: 1199px) {
  .vb-search-rail {
    width: 100%;
    max-width: 520px;
    margin: 16px auto 0;
  }
}

/* ===== VB Search – just shrink the right banner, nothing else ===== */
@media (min-width: 1200px) {

  /* Make the top banner shorter (try ~100px less) */
  .vb-search-rail-banner {
    height: 280px !important;      /* was ~360-ish before */
    max-height: 280px !important;
  }

  /* Optional: if the image is cut weirdly, adjust its crop slightly */
  .vb-search-rail-banner {
    background-size: cover !important;
    background-position: center 50% !important;
  }

  /* Tighten the gap between banner and Tipp box a bit */
  .vb-search-rail-cta {
    margin-top: 10px !important;
  }
}

/* === SEARCH PAGE RIGHT RAIL – own design, not home-page one === */

/* wrap spacing */
.vb-search-rail {
  max-width: 320px;
  margin: 0 auto 20px;
}

/* inside box – for sticky behavior if you want later */
.vb-search-rail-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* top banner (smaller and neat) */
.vb-search-rail-banner {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  height: 220px;                      /* <-- control size here */
  background-image: url(&apos;https://velissabau.ch/wp-content/uploads/2025/10/VelissaBau.jpg&apos;;
  background-size: cover;
  background-position: center 15%;
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

.vb-search-rail-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,0.2) 65%,
    rgba(0,0,0,0.65) 100%
  );
}

.vb-search-rail-banner-text {
  position: absolute;
  inset: auto 12px 12px 12px;
  z-index: 2;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
  font-size: 13px;
  display: grid;
  gap: 4px;
}

.vb-search-rail-banner-text h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

/* CTA box under it */
.vb-search-rail-cta {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  padding: 14px 14px 16px;
}

/* RESET (keep this) */
.vb-search-rail-banner,
.vb-search-rail-banner * {
    all: unset;
    display: block;
}

/* SEARCH PAGE AD — NEW LOOK */
.vb-search-rail-banner {
    position: relative;
    padding: 20px;
    border-radius: 18px;
    background: linear-gradient(
        to bottom,
        rgba(183, 28, 28, 0.08) 0%,
        rgba(183, 28, 28, 0.28) 60%,
        rgba(183, 28, 28, 0.60) 100%
    );
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    overflow: hidden;
    height: 260px; /* PERFECT SIZE */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* OPTIONAL BACKGROUND IMAGE (FADED LIKE HOMEPAGE) */
.vb-search-rail-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(&apos;https://velissabau.ch/wp-content/uploads/2024/10/velissa-skyline.png&apos;
        center / cover no-repeat;
    opacity: 0.14; /* soft and subtle */
    z-index: 1;
}

/* TEXT STYLING */
.vb-search-rail-banner-text {
    position: relative;
    z-index: 2;
    color: #fff;
    line-height: 1.35;
    padding: 0 6px;
}

.vb-search-rail-banner-text h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.vb-search-rail-banner-text p {
    font-size: 13px;
    margin: 4px 0;
    opacity: 0.95;
}

.vb-search-rail-note {
    font-size: 12px !important;
    opacity: 0.85;
}

/* ===== VelissaBau – Clean AutoScout-style Filter Bar (MVP) ===== */

/* Wrapper card */
.vb-search-page .vb-searchbar {
  max-width: 1200px;
  margin: 8px auto 14px;
  padding: 12px 14px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e2e2;
  box-shadow: 0 8px 22px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Generic row */
.vb-searchbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* === ROW 1: main facets === */
.vb-searchbar-row--facets .vb-searchbar-field {
  flex: 1 1 170px;
  min-width: 150px;
}

/* Facet containers */
.vb-searchbar-field .facetwp-facet {
  width: 100%;
  margin: 0 !important;
}

/* Dropdown / input styling */
.vb-searchbar .facetwp-facet select,
.vb-searchbar .facetwp-facet .facetwp-dropdown,
.vb-searchbar .facetwp-facet input[type="search"],
.vb-searchbar .facetwp-facet input[type="text"] {
  width: 100%;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid #d4d4d4;
  background: #f7f7f7;
  font-size: 13px;
  color: #222;
  padding: 6px 32px 6px 12px;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* remove any default FacetWP margins */
.vb-searchbar .facetwp-facet {
  margin-bottom: 0 !important;
}

/* === ROW 2: meta (reset + chips + links) === */
.vb-searchbar-row--meta {
  justify-content: space-between;
  font-size: 13px;
}

.vb-searchbar-meta-left,
.vb-searchbar-meta-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Links + reset */
.vb-searchbar-link {
  border: 0;
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: #b71c1c;
  cursor: pointer;
  text-decoration: none;
}

.vb-searchbar-link:hover {
  text-decoration: underline;
}

.vb-searchbar-link--muted {
  color: #777;
  font-weight: 500;
}

/* Outline pill button (Erweiterte Suche) */
.vb-searchbar-link--primary {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #b71c1c;
  background: #ffffff;
  color: #b71c1c;
  font-weight: 600;
}

.vb-searchbar-link--primary:hover {
  background: #b71c1c;
  color: #ffffff;
}

/* Active selections as chips */
.vb-searchbar-selections .facetwp-selections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.vb-searchbar-selections .facetwp-selection {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f3f3f3;
  border: 1px solid #e0e0e0;
  font-size: 12px;
  color: #444;
}

/* === ROW 3: sort row (inside card) === */
.vb-searchbar-row--sort {
  justify-content: flex-end;
  gap: 6px;
  font-size: 13px;
}

.vb-sort-label {
  color: #777;
}

/* Make the sort facet look like a compact input */
.vb-searchbar-row--sort .facetwp-facet select,
.vb-searchbar-row--sort .facetwp-facet .facetwp-dropdown {
  min-height: 34px;
  padding: 4px 28px 4px 10px;
  font-size: 12.5px;
}

/* Turn off old toolbar styling */
.vb-results-toolbar {
  display: none !important;
}

/* === MOBILE / TABLET BEHAVIOUR === */
@media (max-width: 768px) {

  .vb-search-page .vb-searchbar {
    margin: 8px 12px 12px;
    padding: 10px;
    border-radius: 14px;
  }

  .vb-searchbar-row--facets .vb-searchbar-field {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .vb-searchbar-row--meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .vb-searchbar-meta-right {
    justify-content: flex-start;
  }

  .vb-searchbar-row--sort {
    justify-content: flex-start;
  }
}

/* Slightly tighter card connection to the title above & results below */
.vb-search-page .vb-search-header {
  max-width: 1200px;
  margin: 0 auto 4px;
  padding: 18px 12px 0;
}
.vb-search-page .vb-results-title-wrap {
  max-width: 1200px;
  margin: 0 auto 8px;
  padding: 0 12px;
}

/* Make all filters match the "Projekt starten" squarish style */
.vb-searchbar .facetwp-facet select,
.vb-searchbar .facetwp-facet .facetwp-dropdown,
.vb-searchbar .facetwp-facet input[type="search"],
.vb-searchbar .facetwp-facet input[type="text"] {
  border-radius: 8px !important; 
}

/* Smaller "X Firmen gefunden" text */
.vb-results-title-wrap h2.vb-results-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.2;
}
.vb-results-count-number {
  font-weight: 700 !important;
  font-size: 20px !important;
}
.vb-results-title-text {
  font-weight: 500 !important;
  font-size: 20px !important;
}

/* Make "2 Firmen gefunden" appear on one line */
.vb-results-title-wrap .vb-results-title {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px; /* space between number + text */
}

.vb-results-count-number,
.vb-results-title-text {
  display: inline !important;
  white-space: nowrap !important;
}

/* ================================
   VelissaBau – Company Card (Final)
   ================================ */

.vb-company-card {
  /* kill the weird BG image from inline var() */
  background-image: none !important;

  display: flex;
  gap: 20px;
  padding: 20px 22px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #e7e4dd;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.04);
  align-items: stretch;
  box-sizing: border-box;
}

/* LEFT: 3 preview photos */
.vb-company-photos {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex: 0 0 210px;         /* width of the photo column */
}

.vb-company-photo {
  flex: 1 1 0;
}

/* images inside preview column */
.vb-company-photo {
  border-radius: 14px;
  overflow: hidden;
}

.vb-company-photo img,
.vb-company-photos img {
  width: 100%;
  height: 80px;            /* keep them compact */
  object-fit: cover;
  border-radius: 14px;
  display: block;
  background: #f5f5f5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* RIGHT: main info column */
.vb-company-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Company title */
.vb-company-main h1,
.vb-company-main h2,
.vb-company-main h3,
.vb-company-main .gb-text.gb-text-8709bc4a {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #222222;
}

/* optional subline (the {{post_meta}} p directly under title) */
.vb-company-main > p.gb-text {
  margin: 0 0 6px 0;
  font-size: 13px;
  color: #777777;
}

/* META BLOCK (services, languages, address + CTA + logo) */
.vb-company-meta {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  grid-template-areas:
    "service service"
    "lang    lang"
    "addr    addr"
    "cta     logo";
  gap: 4px 10px;
  margin-top: 4px;
}

/* 1st p = services */
.vb-company-meta p:nth-of-type(1) {
  grid-area: service;
}

/* 2nd p = languages */
.vb-company-meta p:nth-of-type(2) {
  grid-area: lang;
}

/* 3rd p = address */
.vb-company-meta p:nth-of-type(3) {
  grid-area: addr;
}

/* Style meta text */
.vb-company-meta p {
  margin: 0;
  font-size: 13px;
  color: #555555;
}

/* CTA link inside meta */
.vb-company-meta .vb-company-cta {
  grid-area: cta;
  justify-self: flex-start;
  align-self: flex-end;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 18px;
  border-radius: 999px;
  background: #B71C1C;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid #B71C1C;
  box-shadow: 0 10px 28px rgba(183, 28, 28, 0.35);
  cursor: pointer;

  /* remove GP’s default text styles */
  border-width: 1px;
}

/* CTA hover */
.vb-company-meta .vb-company-cta:hover {
  background: #8f1515;
  border-color: #8f1515;
  box-shadow: 0 14px 36px rgba(183, 28, 28, 0.45);
}

/* SMALL LOGO (the img after CTA in vb-company-meta) */
.vb-company-meta img {
  grid-area: logo;
  justify-self: flex-end;
  align-self: flex-end;

  width: 60px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #ffffff;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .vb-company-card {
    flex-direction: column;
    padding: 16px 14px;
    gap: 14px;
  }

  .vb-company-photos {
    flex: 1 1 auto;
    width: 100%;
  }

  .vb-company-meta {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "service service"
      "lang    lang"
      "addr    addr"
      "cta     logo";
  }
}

/* META BLOCK (services, languages, address + CTA + logo) */
.vb-company-meta {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "service"
    "lang"
    "addr"
    "cta"
    "logo";
  gap: 4px 0;
  margin-top: 4px;
}

/* 1st p = services */
.vb-company-meta p:nth-of-type(1) {
  grid-area: service;
}

/* 2nd p = languages */
.vb-company-meta p:nth-of-type(2) {
  grid-area: lang;
}

/* 3rd p = address */
.vb-company-meta p:nth-of-type(3) {
  grid-area: addr;
}

/* Style meta text */
.vb-company-meta p {
  margin: 0;
  font-size: 13px;
  color: #555555;
}

/* CTA link */
.vb-company-meta .vb-company-cta {
  grid-area: cta;
  justify-self: flex-start;
  align-self: flex-start;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 20px;
  border-radius: 999px;
  background: #B71C1C;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid #B71C1C;
  box-shadow: 0 10px 28px rgba(183, 28, 28, 0.35);
  cursor: pointer;
}

.vb-company-meta .vb-company-cta:hover {
  background: #8f1515;
  border-color: #8f1515;
  box-shadow: 0 14px 36px rgba(183, 28, 28, 0.45);
}

/* Small logo UNDER the button, a bit round */
.vb-company-meta img {
  grid-area: logo;
  justify-self: flex-start;
  align-self: flex-start;

  margin-top: 6px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 999px;              /* round */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #ffffff;
}

/* LEFT: 3 preview photos */
.vb-company-photos {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;      /* vertical center in the card */
  justify-content: center;  /* center inside the left column */
  flex: 0 0 220px;
}

/* each slot */
.vb-company-photo {
  flex: 1 1 0;
  border-radius: 16px;
  overflow: hidden;
}

/* images inside preview column */
.vb-company-photo img,
.vb-company-photos img {
  width: 100%;
  height: 72px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: #f5f5f5;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}

/* ============================
   VELISSABAU COMPANY CARD – FINAL
   ============================ */

/* MAIN CARD */
.vb-company-card {
  display: flex;
  align-items: stretch;
  gap: 24px;
  padding: 18px 24px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #f1f1f1;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

/* LEFT SIDE – PHOTO COLLAGE */
.vb-company-photos {
  flex: 0 0 230px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  align-items: stretch;
}

/* first image = tall main preview */
.vb-company-photo:nth-child(1) {
  grid-row: 1 / 3;
}

/* photo tiles */
.vb-company-photo {
  border-radius: 18px;
  overflow: hidden;
  background: #f5f5f5;
}

/* images inside tiles */
.vb-company-photo img,
.vb-company-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* subtle hover effect */
.vb-company-photo img:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* RIGHT SIDE – MAIN INFO */
.vb-company-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 6px;
}

/* title */
.vb-company-main h3 {
  margin: 0 0 2px;
  font-size: 18px;
  font-weight: 600;
}

/* small “post_meta” line under title */
.vb-company-main p.gb-text {
  margin: 0;
  font-size: 13px;
  color: #666666;
}

/* META AREA: services, languages, address, CTA, logo */
.vb-company-meta {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "service service"
    "lang    lang"
    "addr    addr"
    "cta     logo";
  row-gap: 3px;
  column-gap: 12px;
  align-items: center;
}

/* 1st p = services */
.vb-company-meta p:nth-of-type(1) {
  grid-area: service;
}

/* 2nd p = languages */
.vb-company-meta p:nth-of-type(2) {
  grid-area: lang;
}

/* 3rd p = address */
.vb-company-meta p:nth-of-type(3) {
  grid-area: addr;
}

/* meta text style */
.vb-company-meta p {
  margin: 0;
  font-size: 13px;
  color: #777777;
}

/* CTA BUTTON */
.vb-company-meta .vb-company-cta {
  grid-area: cta;
  justify-self: flex-start;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 22px;
  border-radius: 999px;
  background: #b71c1c;
  color: #ffffff !important;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  box-shadow: 0 10px 28px rgba(183, 28, 28, 0.45);
  white-space: nowrap;
  cursor: pointer;
}

.vb-company-meta .vb-company-cta:hover {
  background: #8f1515;
  box-shadow: 0 14px 36px rgba(183, 28, 28, 0.55);
}

/* SMALL LOGO UNDER THE BUTTON (RIGHT SIDE) */
.vb-company-meta img {
  grid-area: logo;
  justify-self: flex-start;

  width: 54px;
  height: 54px;
  border-radius: 999px;
  object-fit: contain;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}

/* --------- MOBILE --------- */
@media (max-width: 768px) {
  .vb-company-card {
    flex-direction: column;
    padding: 16px 16px;
    gap: 14px;
  }

  .vb-company-photos {
    flex: none;
    width: 100%;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 100px 100px;
  }

  .vb-company-main {
    row-gap: 6px;
  }

  .vb-company-meta {
    grid-template-columns: 1fr;
    grid-template-areas:
      "service"
      "lang"
      "addr"
      "cta"
      "logo";
    column-gap: 0;
  }

  .vb-company-meta .vb-company-cta {
    width: 100%;
    justify-content: center;
  }

  .vb-company-meta img {
    margin-top: 4px;
  }
}

/* Vertical spacing in main info area */
.vb-company-main {
    display: flex;
    flex-direction: column;
    row-gap: 4px;          /* space between title + line below */
}

/* Vertical spacing between meta rows (service, lang, address, button/logo row) */
.vb-company-meta {
    display: grid;
    row-gap: 4px;          /* adjust to 6px if you want looser spacing */
}

.vb-company-main .gb-text,
.vb-company-meta .gb-text {
    margin: 0 !important;      /* let gap handle spacing */
    line-height: 1.4 !important;
}

/* SERVICE CHIPS */
.vb-company-meta p:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vb-company-meta p:first-child a {
    background: #F0F0F2;             /* more visible */
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 13px;
    color: #333;
    text-decoration: none;
    border: 1px solid #E0E0E0;        /* subtle border */
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    transition: 0.2s ease;
}

.vb-company-meta p:first-child a:hover {
    background: #e5e5e8;
}

/* VelissaBau – Company Card Meta */

/* 1) SERVICE TAGS – pill chips */
.vb-company-meta p:first-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.vb-company-meta p:first-child a,
.vb-company-meta p:first-child span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #F5F5F7;
    border-radius: 999px;
    font-size: 13px;
    color: #333333;
    border: 1px solid #E1E4EC;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.vb-company-meta p:first-child a:hover {
    background: #ECEFF4;
    border-color: #CBD2E1;
    transform: translateY(-1px);
}

/* 2) ADDRESS CHIP – .vb-address */
.vb-address {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin-top: 4px;
    background: #FFF4E8;
    border-radius: 14px;
    border: 1px solid #F4D4B5;
    font-size: 13px;
    color: #8A4B16;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.vb-address img,
.vb-address svg,
.vb-address i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.9;
}

.vb-address:hover {
    background: #FFEBD9;
    border-color: #F0C7A1;
    transform: translateY(-1px);
}

/* ============================================
   ADDRESS CHIP – auto width + pin icon
   ============================================ */

.vb-address {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 12px;
    margin-top: 4px;

    background: #FFF4E8;             /* soft cream */
    border-radius: 14px;
    border: 1px solid #F4D4B5;
    font-size: 13px;
    color: #8A4B16;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);

    width: auto;                     /* ❗ auto-sizing fix */
    display: inline-flex;            /* ❗ ensures no stretching */
    max-width: fit-content;          /* ❗ prevents horizontal expansion */

    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

/* PIN ICON (you can use SVG, IMG, or icon font) */
.vb-address::before {
    content: "📍";                    /* clean emoji pin (no stretch) */
    font-size: 14px;
    opacity: 0.9;
}

/* HOVER */
.vb-address:hover {
    background: #FFEBD9;
    border-color: #F0C7A1;
    transform: translateY(-1px);
}

/* ===== ONLY ROUND CORNERS, NOTHING ELSE ===== */

/* All cards */
.vb-card,
.vb-owner-strip,
.vb-how-card,
.vb-trust-card,
.vb-cta-block {
  border-radius: 14px;
}

/* Search selects + inputs */
.vb-card.vb-search select,
.vb-card.vb-search input,
.vb-card.vb-search .facetwp-facet select,
.vb-card.vb-search .facetwp-facet input {
  border-radius: 12px;
}

/* Search button */
.vb-btn-primary,
.vb-btn-search {
  border-radius: 14px;
}

/* Ghost buttons */
.vb-btn-ghost,
.vb-btn-sm {
  border-radius: 14px;
}

/* Service pills */
.vb-service {
  border-radius: 14px;
}

/* Featured companies cards (if they use vb-card or similar) */
.vb-featured .vb-card,
.vb-featured .vb-company {
  border-radius: 14px;
}

/* Make the entire filter box look like the rounded homepage card */
.vb-searchbar {
  background: #ffffff;
  border-radius: 22px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.5rem; /* optional: matches homepage spacing */
}

/* Round the dropdowns inside the filter box */
.vb-searchbar .facetwp-facet select,
.vb-searchbar .facetwp-facet input,
.vb-searchbar .vb-searchbar-field select,
.vb-searchbar .vb-searchbar-field input {
  border-radius: 999px !important;   /* pill shape like homepage */
}

/* Round the reset + action buttons/links */
.vb-searchbar .vb-searchbar-link,
.vb-searchbar .vb-searchbar-link--primary,
.vb-searchbar .vb-searchbar-link--muted {
  border-radius: 999px;
  padding: 0.4rem 0.9rem;            /* matches homepage pill button style */
}

/* If any part looks too square, force rounding on all children */
.vb-searchbar * {
  border-radius: 999px;
}

/* --- VelissaBau Mobile: Button + Meta Cleanup --- */
@media (max-width: 768px){

  /* Meta row stacked cleanly */
  .vb-searchbar-row--meta{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin-top:8px; /* small space above meta section */
  }

  /* LEFT + RIGHT meta groups both full width */
  .vb-searchbar-meta-left,
  .vb-searchbar-meta-right{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  /* Small subtle text links */
  .vb-searchbar-link,
  .vb-searchbar-link--muted{
    padding:0;
    background:none !important;
    border:none !important;
    font-size:13px;
    font-weight:500;
    text-align:left;
  }

  /* Reset link in red but subtle */
  .vb-searchbar-link{
    color:#b71c1c;
    font-weight:600;
  }

  /* Save search muted */
  .vb-searchbar-link--muted{
    color:#777;
  }

  /* PRIMARY CTA = full-width big button */
  .vb-searchbar-link--primary{
    display:block;
    width:100%;
    background:#b71c1c !important;
    color:#fff !important;
    padding:14px 16px;
    border-radius:999px;
    text-align:center;
    font-size:15px;
    font-weight:700;
    margin-top:8px;
    box-shadow:0 12px 24px rgba(183,28,28,0.35);
  }

  .vb-searchbar-link--primary:hover{
    background:#9d1a1a !important;
  }
}

/* === VelissaBau – GOLD MOBILE BUTTON LAYOUT FOR SEARCH FILTER === */
@media (max-width: 768px){

  /* Whole meta row: one tight vertical group under the filters */
  .vb-search-page .vb-searchbar-row--meta{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    margin-top: 10px !important;
  }

  /* Left part: reset + chips (stacked, centered) */
  .vb-search-page .vb-searchbar-meta-left{
    order: 1;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;
  }

  /* Right part: save + big button (stacked, centered) */
  .vb-search-page .vb-searchbar-meta-right{
    order: 2;
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 3px;                 /* small gap between "Suche speichern" and button */
    margin-top: 0 !important;
  }

  /* Text links: tight, minimal, no extra padding */
  .vb-search-page .vb-searchbar-link,
  .vb-search-page .vb-searchbar-link--muted{
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Reset = red, slightly stronger */
  .vb-search-page .vb-searchbar-link{
    color: #B71C1C !important;
    font-weight: 600;
  }

  /* Save search = muted grey */
  .vb-search-page .vb-searchbar-link--muted{
    color: #777 !important;
    font-weight: 500;
  }

  /* BIG PRIMARY BUTTON – sits VERY close under "Suche speichern" */
  .vb-search-page .vb-searchbar-link--primary{
    display: block !important;
    width: 100% !important;
    text-align: center !important;

    padding: 12px 16px !important;
    margin-top: 4px !important;   /* tiny gap under "Suche speichern" */

    border-radius: 999px !important;
    background: #B71C1C !important;
    color: #fff !important;
    border: none !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    box-shadow: 0 12px 26px rgba(183,28,28,0.40);
  }

  .vb-search-page .vb-searchbar-link--primary:hover{
    background: #9d1a1a !important;
  }

  /* Chips (if any) stay tidy under reset */
  .vb-search-page .vb-searchbar-selections{
    width: 100%;
    margin-top: 2px;
  }
  .vb-search-page .vb-searchbar-selections .facetwp-selections{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
}

/* === MOBILE FILTER TOGGLE – VelissaBau Companies === */

/* Desktop: show panel always, hide toggle button */
/* === MOBILE FILTER TOGGLE – SLIM, NO RANDOM WHITE BLOCK === */
@media (max-width: 768px){

  /* hide native checkbox */
  .vb-filter-toggle-input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* kill the big white card on mobile */
  .vb-search-page .vb-searchbar{
    margin: 8px 12px 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /* FILTERN pill – looks like one clean control, not a card */
  .vb-filter-toggle{
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #e1e3ea;
    background: #f7f7f9;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    font-size: 15px;
    font-weight: 600;
    color: #222;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    cursor: pointer;
  }

  .vb-filter-toggle-label{
    margin: 0;
    line-height: 1.2;
  }

  /* small circular chevron on the right */
  .vb-filter-toggle-icon{
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #ffffff;
    color: #777;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    transform: rotate(0deg);
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
  }

  /* panel closed by default */
  .vb-filter-panel{
    display: none;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
  }

  /* when checkbox is checked -> open panel */
  .vb-filter-toggle-input:checked + .vb-filter-toggle + .vb-filter-panel{
    display: block;
  }

  /* rotate chevron & invert a bit on open */
  .vb-filter-toggle-input:checked + .vb-filter-toggle .vb-filter-toggle-icon{
    transform: rotate(180deg);
    background: #ececf2;
    color: #333;
  }

  /* make the dropdown stack tight & card-like */
  .vb-filter-panel .vb-searchbar-row{
    gap: 8px;
  }

  .vb-filter-panel .facetwp-facet{
    margin-bottom: 0 !important;
  }

  .vb-filter-panel .facetwp-facet select,
  .vb-filter-panel .facetwp-facet .facetwp-dropdown{
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(15,23,42,0.06);
  }
}

/* === DESKTOP: ALWAYS SHOW PANEL, HIDE MOBILE TOGGLE === */
@media (min-width: 769px){
  .vb-filter-toggle-input{ display: none !important; }
  .vb-filter-toggle{ display: none !important; }
  .vb-filter-panel{ display: block !important; }
}


/* Mobile: show button, hide panel by default */
@media (max-width: 768px){

  /* Toggle button */
  .vb-filter-toggle{
    width: 100%;
    margin: 4px 0 8px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #d4d4d4;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  }

  .vb-filter-toggle-icon{
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.16s ease;
  }

  /* closed by default */
  .vb-filter-panel{
    display: none;
    margin-top: 4px;
  }

  /* when panel is open (JS adds this class) */
  .vb-filter-panel.is-open{
    display: block;
  }

  /* rotate chevron when open (JS adds .is-open on button too) */
  .vb-filter-toggle.is-open .vb-filter-toggle-icon{
    transform: rotate(180deg);
  }
}

/* === MOBILE FILTER TOGGLE – PURE CSS VERSION (AESTHETIC) === */
@media (max-width: 768px){

  /* hide native checkbox */
  .vb-filter-toggle-input{
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  /* outer card (same idea as homepage, just tighter) */
  .vb-search-page .vb-searchbar{
    margin: 8px 12px 12px;
    padding: 12px 10px 12px;
    border-radius: 18px;
    border: 1px solid #e4e4e8;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    display: block;
  }

  /* FILTERN pill */
  .vb-filter-toggle{
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #e1e3ea;
    background: #f7f7f9;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    font-size: 15px;
    font-weight: 600;
    color: #222;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    cursor: pointer;
  }

  .vb-filter-toggle-label{
    margin: 0;
    line-height: 1.2;
  }

  /* small circular chevron on the right */
  .vb-filter-toggle-icon{
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: #ffffff;
    color: #777;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    transform: rotate(0deg);
    transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
  }

  /* panel closed by default */
  .vb-filter-panel{
    display: none;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #e5e5ec;
  }

  /* when checkbox is checked -> open panel */
  .vb-filter-toggle-input:checked + .vb-filter-toggle + .vb-filter-panel{
    display: block;
  }

  /* rotate chevron & invert a bit on open */
  .vb-filter-toggle-input:checked + .vb-filter-toggle .vb-filter-toggle-icon{
    transform: rotate(180deg);
    background: #ececf2;
    color: #333;
  }

  /* tighten inner facet spacing a bit */
  .vb-filter-panel .vb-searchbar-row{
    gap: 8px;
  }
  .vb-filter-panel .facetwp-facet{
    margin-bottom: 0 !important;
  }
}

/* === DESKTOP: ALWAYS SHOW PANEL, HIDE MOBILE TOGGLE === */
@media (min-width: 769px){
  .vb-filter-toggle-input{ display: none !important; }
  .vb-filter-toggle{ display: none !important; }
  .vb-filter-panel{ display: block !important; }
}


  /* Filter "button" (label) */
  .vb-filter-toggle{
    width: 100%;
    margin: 8px 0 4px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #d4d4d4;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
    cursor: pointer;
  }

  .vb-filter-toggle-icon{
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.16s ease;
  }

  /* panel closed by default */
  .vb-filter-panel{
    display: none;
    margin-top: 4px;
  }

  /* when checkbox is checked -> open panel */
  .vb-filter-toggle-input:checked + .vb-filter-toggle + .vb-filter-panel{
    display: block;
  }

  /* rotate chevron when open */
  .vb-filter-toggle-input:checked + .vb-filter-toggle .vb-filter-toggle-icon{
    transform: rotate(180deg);
  }

  /* change label text to "Filter ausblenden" when open */
  .vb-filter-toggle-label::after{
    content: "";
  }
  .vb-filter-toggle-input:checked + .vb-filter-toggle .vb-filter-toggle-label::after{
    content: " ausblenden";
    margin-left: 4px;
    font-weight: 500;
    font-size: 14px;
  }
}

/* === DESKTOP: ALWAYS SHOW PANEL, HIDE MOBILE TOGGLE === */
@media (min-width: 769px){
  .vb-filter-toggle-input{ display: none !important; }
  .vb-filter-toggle{ display: none !important; }
  .vb-filter-panel{ display: block !important; }
}

/* keep label text just "Filter" */
.vb-filter-toggle-label::after {
  content: none !important;
}

/* ===============================================
   VELISSABAU — MOBILE PRO COMPANY CARD LAYOUT
   =============================================== */
@media (max-width: 768px){

  /* CARD CONTAINER */
  .vb-company-card {
    margin: 14px 14px 18px;
    padding: 16px 16px 20px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #e9e4da;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* ===============================================
     IMAGE COLLAGE — Top of card
     =============================================== */
  .vb-company-photos {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 115px 115px;
    gap: 10px;
    width: 100%;
  }

  .vb-company-photo {
    border-radius: 16px;
    overflow: hidden;
    background: #f7f7f7;
  }

  .vb-company-photo:nth-child(1) {
    grid-row: 1 / 3;
  }

  .vb-company-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ===============================================
     MAIN TEXT SECTION — Title & Description
     =============================================== */
  .vb-company-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .vb-company-main h1,
  .vb-company-main h2,
  .vb-company-main h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #222;
  }

  .vb-company-main > p.gb-text {
    margin: 0;
    font-size: 13.5px;
    color: #555;
  }

  /* ===============================================
     META SECTION — Organized Professional Grid
     =============================================== */
  .vb-company-meta {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 10px;
  }

  /* SERVICES TAGS */
  .vb-company-meta p:nth-of-type(1) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
  }

  .vb-company-meta p:nth-of-type(1) span,
  .vb-company-meta p:nth-of-type(1) a {
    padding: 6px 12px;
    border-radius: 999px;
    background: #f4f5f7;
    font-size: 12.5px;
    color: #333;
    border: 1px solid #e2e3ea;
  }

  /* LANGUAGES */
  .vb-company-meta p:nth-of-type(2) {
    font-size: 13px;
    margin: 0;
    color: #666;
  }

  /* ADDRESS */
  .vb-company-meta p:nth-of-type(3) {
    margin: 0;
  }

  .vb-address {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 12px;
    background: #fff5ec;
    border: 1px solid #f2d5b3;
    font-size: 13px;
    color: #8f4c12;
    box-shadow: 0 3px 6px rgba(0,0,0,0.04);
  }

  .vb-address::before {
    content: "📍";
    font-size: 14px;
  }

  /* ===============================================
     CTA BUTTON — Full width, centered
     =============================================== */
  .vb-company-meta .vb-company-cta {
    width: 100%;
    padding: 12px 0;
    border-radius: 999px;
    text-align: center;
    background: #b71c1c;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    box-shadow: 0 10px 24px rgba(183, 28, 28, 0.35);
  }

  /* ===============================================
     LOGO BOTTOM LEFT — Signature style
     =============================================== */
  .vb-company-meta img {
    justify-self: start;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    margin-top: 4px;
  }
}

/* Uber Velissabau CSS */

.vb-about-page {
  padding: 32px 0 48px;
  box-sizing: border-box;
}

.vb-about-page .vb-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.vb-about-page .vb-section {
  margin: 32px 0;
}

.vb-about-page .vb-about-hero,
.vb-about-page .vb-about-cta {
  margin-top: 16px;
  margin-bottom: 40px;
}

.vb-about-page .vb-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
  color: #B71C1C;
  margin-bottom: 10px;
}

.vb-about-page .vb-heading-xl {
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #1A1A1A;
  line-height: 1.2;
  margin: 0 0 10px;
  font-size: 24px;
}

.vb-about-page .vb-heading-lg {
  font-weight: 800;
  letter-spacing: -0.2px;
  color: #1A1A1A;
  line-height: 1.25;
  margin: 0 0 10px;
  font-size: 20px;
}

.vb-about-page .vb-heading-md {
  font-weight: 700;
  color: #222;
  margin: 0 0 8px;
  font-size: 18px;
}

.vb-about-page .vb-heading-sm {
  font-weight: 700;
  color: #222;
  margin: 0 0 6px;
  font-size: 15px;
}

.vb-about-page .vb-text-lg {
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}

.vb-about-page .vb-text {
  font-size: 14px;
  line-height: 1.55;
  color: #555;
  margin: 0 0 8px;
}

.vb-about-page .vb-text-sm {
  font-size: 13px;
  line-height: 1.5;
  color: #666;
  margin: 0;
}

.vb-about-page .vb-text-quote {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 600;
  color: #1A1A1A;
  margin: 0 0 8px;
}

.vb-about-page .vb-text-strong {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A;
  margin-top: 10px;
}

.vb-about-page .vb-section-header {
  max-width: 700px;
  margin-bottom: 20px;
}

.vb-about-page .vb-section-header-center {
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}

.vb-about-page .vb-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 14px;
  color: #555;
}

.vb-about-page .vb-list li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.vb-about-page .vb-list-ordered {
  list-style: decimal;
}

.vb-about-page .vb-column .vb-list,
.vb-about-page .vb-card .vb-list {
  margin-top: 4px;
}

.vb-about-page .vb-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.vb-about-page .vb-two-column-top {
  align-items: flex-start;
}

.vb-about-page .vb-two-column-middle {
  align-items: center;
}

.vb-about-page .vb-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.vb-about-page .vb-column {
  min-width: 0;
}

.vb-about-page .vb-column-highlight {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
  padding: 16px 18px;
}

.vb-about-page .vb-about-hero {
  margin-top: 12px;
}

.vb-about-page .vb-about-hero-container {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 50px rgba(0,0,0,0.06);
  padding: 22px 20px 22px;
}

.vb-about-page .vb-about-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.vb-about-page .vb-about-hero-left {
  display: grid;
  gap: 10px;
}

.vb-about-page .vb-about-hero-right {
  padding: 14px;
  border-radius: 16px;
  background: #FEF9F3;
  border: 1px solid #F1E7D8;
}

.vb-about-page .vb-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #E7E4DD;
  box-shadow: 0 12px 32px rgba(0,0,0,0.05);
  padding: 14px 14px 16px;
  display: grid;
  gap: 6px;
}

.vb-about-page .vb-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 8px;
}

.vb-about-page .vb-timeline-item {
  position: relative;
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #E7E4DD;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.vb-about-page .vb-faq-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.vb-about-page .vb-faq-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #E7E4DD;
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.vb-about-page .vb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.06s ease;
}

.vb-about-page .vb-button:active {
  transform: translateY(1px);
}

.vb-about-page .vb-button-primary {
  background: #B71C1C;
  border-color: #B71C1C;
  color: #fff;
  box-shadow: 0 12px 28px rgba(183,28,28,0.35);
}

.vb-about-page .vb-button-primary:hover {
  background: #991717;
  border-color: #991717;
  box-shadow: 0 16px 40px rgba(183,28,28,0.45);
}

.vb-about-page .vb-button-outline {
  background: #ffffff;
  border-color: #B71C1C;
  color: #B71C1C;
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
}

.vb-about-page .vb-button-outline:hover {
  background: #B71C1C;
  color: #ffffff;
}

.vb-about-page .vb-about-cta .vb-button {
  margin-top: 8px;
}

@media (min-width: 720px) {
  .vb-about-page .vb-heading-xl {
    font-size: 28px;
  }
  .vb-about-page .vb-heading-lg {
    font-size: 22px;
  }
}

@media (min-width: 960px) {
  .vb-about-page {
    padding-top: 40px;
  }
  .vb-about-page .vb-section {
    margin: 40px 0;
  }
  .vb-about-page .vb-about-hero-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
  }
  .vb-about-page .vb-about-hero-container {
    padding: 26px 26px 26px;
  }
  .vb-about-page .vb-heading-xl {
    font-size: 32px;
  }
  .vb-about-page .vb-text-lg {
    font-size: 16px;
  }
  .vb-about-page .vb-two-column {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
  .vb-about-page .vb-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .vb-about-page .vb-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vb-about-page .vb-faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .vb-about-page .vb-container {
    padding: 0;
  }
  .vb-about-page .vb-heading-xl {
    font-size: 34px;
  }
  .vb-about-page .vb-card-grid {
    gap: 18px;
  }
}

/* =========================
   ÜBER VELISSABAU – POLISH
   ========================= */

.vb-about-page {
  padding: 32px 0 40px;
}

/* Container width + side padding */
.vb-about-page .vb-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* ---------- HERO ---------- */

.vb-about-page .vb-about-hero {
  padding-top: 20px;
  padding-bottom: 40px;
}

.vb-about-page .vb-about-hero-container {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ef 45%, #fdf0e2 100%);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.10);
  padding: 26px 26px 26px;
}

.vb-about-page .vb-about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
  gap: 26px;
  align-items: stretch;
}

/* Left hero text */

.vb-about-page .vb-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vb-primary, #B71C1C);
}

.vb-about-page .vb-heading-xl {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: #111111;
}

.vb-about-page .vb-text-lg {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #555555;
  max-width: 640px;
}

/* Right hero box */

.vb-about-page .vb-about-hero-right {
  background: #fffaf4;
  border-radius: 18px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  position: relative;
}

.vb-about-page .vb-about-hero-right::before {
  content: "Kurz erklärt";
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--vb-primary, #B71C1C);
  opacity: 0.85;
}

.vb-about-page .vb-about-hero-right .vb-heading-md {
  margin: 4px 0 10px;
  font-size: 18px;
  font-weight: 700;
}

.vb-about-page .vb-about-hero-right .vb-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- GLOBAL SECTION RHYTHM ---------- */

.vb-about-page .vb-section {
  margin-bottom: 38px;
}

.vb-about-page .vb-section:last-of-type {
  margin-bottom: 0;
}

/* subtle separators between sections */
.vb-about-page .vb-section + .vb-section {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  padding-top: 28px;
}

/* Headings + intros */

.vb-about-page .vb-section-header,
.vb-about-page .vb-section-header-center {
  margin-bottom: 18px;
  max-width: 720px;
}

.vb-about-page .vb-section-header-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.vb-about-page .vb-heading-lg {
  margin: 0 0 6px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #161616;
}

.vb-about-page .vb-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #555555;
}

/* ---------- GRID + COLUMNS ---------- */

.vb-about-page .vb-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.vb-about-page .vb-two-column-top {
  align-items: flex-start;
}

.vb-about-page .vb-two-column-middle {
  align-items: center;
}

.vb-about-page .vb-column {
  min-width: 0;
}

/* about highlight column */
.vb-about-page .vb-column-highlight {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.vb-about-page .vb-text-quote {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #111111;
}

.vb-about-page .vb-heading-sm {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- CARDS ---------- */

.vb-about-page .vb-card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

.vb-about-page .vb-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 18px 18px;
  border: 1px solid #e7e4dd;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.vb-about-page .vb-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(183, 28, 28, 0.0), rgba(183, 28, 28, 0.55), rgba(183, 28, 28, 0.0));
}

.vb-about-page .vb-card .vb-heading-sm {
  margin-top: 4px;
}

.vb-about-page .vb-text-sm {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}

/* ---------- TIMELINE ---------- */

.vb-about-page .vb-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  position: relative;
  margin-top: 10px;
}

.vb-about-page .vb-timeline::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04), rgba(183, 28, 28, 0.3), rgba(0, 0, 0, 0.04));
}

.vb-about-page .vb-timeline-item {
  position: relative;
  padding-top: 18px;
}

.vb-about-page .vb-timeline-item::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 3px solid rgba(183, 28, 28, 0.8);
  box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.12);
}

.vb-about-page .vb-timeline-item .vb-heading-sm {
  padding-left: 24px;
}

/* ---------- FAQ ---------- */

.vb-about-page .vb-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.vb-about-page .vb-faq-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px 16px;
  border: 1px solid #e7e4dd;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

/* ---------- CTA ROW ---------- */

.vb-about-page .vb-about-cta .vb-two-column {
  align-items: center;
}

.vb-about-page .vb-about-cta {
  margin-top: 30px;
}

.vb-about-page .vb-about-cta .vb-column {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 20px 20px;
  border: 1px solid #e7e4dd;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06);
}

.vb-about-page .vb-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
}

.vb-about-page .vb-button-primary {
  background: #B71C1C;
  color: #ffffff;
  border-color: #B71C1C;
  box-shadow: 0 14px 36px rgba(183, 28, 28, 0.40);
}

.vb-about-page .vb-button-primary:hover {
  background: #991717;
  border-color: #991717;
}

.vb-about-page .vb-button-outline {
  background: #ffffff;
  color: #B71C1C;
  border-color: #B71C1C;
}

.vb-about-page .vb-button-outline:hover {
  background: #B71C1C;
  color: #ffffff;
}

/* ---------- LISTS ---------- */

.vb-about-page .vb-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #555555;
}

.vb-about-page .vb-list-ordered {
  padding-left: 20px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .vb-about-page .vb-about-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-about-page .vb-about-hero-container {
    padding: 20px 18px 22px;
  }

  .vb-about-page .vb-heading-xl {
    font-size: 26px;
  }

  .vb-about-page .vb-section-header,
  .vb-about-page .vb-section-header-center {
    margin-bottom: 16px;
  }

  .vb-about-page .vb-card-grid {
    gap: 12px;
  }

  .vb-about-page .vb-timeline {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-about-page .vb-timeline::before {
    display: none;
  }

  .vb-about-page .vb-timeline-item::before {
    left: 0;
  }

  .vb-about-page .vb-timeline-item .vb-heading-sm {
    padding-left: 24px;
  }

  .vb-about-page .vb-faq-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-about-page .vb-two-column {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-about-page .vb-about-cta .vb-column {
    text-align: left;
  }
}

/* ==== Über VelissaBau – glow up ==== */

.vb-about-page {
  padding: 40px 16px 72px;
  background: radial-gradient(circle at top left, #fff7f2 0, #f5f5f8 40%, #f1f2f6 100%);
}

/* Container */
.vb-about-page .vb-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.08);
}

/* Space between sections */
.vb-about-page .vb-section + .vb-section {
  margin-top: 32px;
}

/* HERO */
.vb-about-page .vb-about-hero {
  background: linear-gradient(135deg, #fff5ec 0, #ffe9df 40%, #fff 100%);
  border-radius: 32px;
  box-shadow: 0 28px 70px rgba(148, 27, 27, 0.12);
}

.vb-about-page .vb-about-hero .vb-container {
  background: transparent;
  box-shadow: none;
  padding: 40px 36px;
}

.vb-about-page .vb-about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: stretch;
}

.vb-about-page .vb-about-hero-left h1 {
  font-size: 34px;
  line-height: 1.22;
}

.vb-about-page .vb-about-hero-right {
  background: #fffdf9;
  border-radius: 24px;
  padding: 24px 24px 22px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  position: relative;
}

.vb-about-page .vb-about-hero-right::before {
  content: "KURZ ERKLÄRT";
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b71c1c;
}

.vb-about-page .vb-about-hero-right h2 {
  margin-top: 12px;
}

/* Kicker */
.vb-about-page .vb-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b71c1c;
  margin-bottom: 12px;
}

/* Section headings */
.vb-about-page .vb-section-header h2,
.vb-about-page .vb-section-header-center h2 {
  position: relative;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.vb-about-page .vb-section-header h2 {
  padding-left: 18px;
}

.vb-about-page .vb-section-header h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 60%;
  border-radius: 999px;
  background: linear-gradient(180deg, #b71c1c, #d4af37);
}

.vb-about-page .vb-section-header-center h2 {
  text-align: center;
}

.vb-about-page .vb-section-header-center h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  border-radius: 999px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, #b71c1c, #d4af37);
}

/* Intro text under headings */
.vb-about-page .vb-section-header p,
.vb-about-page .vb-section-header-center p {
  margin-top: 10px;
  color: #4b5563;
}

/* Lists – checkmarks */
.vb-about-page .vb-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.vb-about-page .vb-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 9px;
  color: #374151;
}

.vb-about-page .vb-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(183, 28, 28, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: #ffffff;
  color: #b71c1c;
  box-shadow: 0 6px 14px rgba(148, 27, 27, 0.26);
}

/* Ordered lists – numbered pills */
.vb-about-page .vb-list-ordered {
  list-style: none;
  padding-left: 0;
  counter-reset: vb-step;
}

.vb-about-page .vb-list-ordered li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 10px;
  counter-increment: vb-step;
}

.vb-about-page .vb-list-ordered li::before {
  content: counter(vb-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #b71c1c;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(148, 27, 27, 0.4);
}

/* Card grids */
.vb-about-page .vb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.vb-about-page .vb-card {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 22px 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1px solid rgba(148, 163, 184, 0.24);
}

.vb-about-page .vb-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, #b71c1c, #d4af37);
}

/* Timeline badges */
.vb-about-page .vb-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.vb-about-page .vb-timeline-item {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 22px 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
  overflow: hidden;
}

.vb-about-page .vb-timeline-item::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 3px solid #ffffff;
  background: radial-gradient(circle at 30% 30%, #ffffff 0, #ff6b6b 30%, #b71c1c 80%);
  box-shadow: 0 8px 18px rgba(148, 27, 27, 0.45);
}

/* Light connecting line */
.vb-about-page .vb-timeline-item::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: -40px;
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.4), transparent);
}

/* Two-column layouts -> cards */
.vb-about-page .vb-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.vb-about-page .vb-two-column .vb-column {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 22px 18px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

/* Highlighted quote block */
.vb-about-page .vb-column-highlight {
  background: radial-gradient(circle at 0 0, #fff5ec 0, #ffffff 55%);
  border: 1px solid rgba(212, 175, 55, 0.55);
}

/* Quote text in highlight */
.vb-about-page .vb-text-quote {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* FAQ list as cards */
.vb-about-page .vb-faq-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.vb-about-page .vb-faq-item {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.09);
  border: 1px solid rgba(148, 163, 184, 0.22);
  position: relative;
  overflow: hidden;
}

.vb-about-page .vb-faq-item::before {
  content: "?";
  position: absolute;
  right: 18px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(183, 28, 28, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #b71c1c;
  background: #fff7f4;
}

/* CTA section */
.vb-about-page .vb-about-cta .vb-container {
  background: #fff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
  border-radius: 28px;
}

.vb-about-page .vb-about-cta .vb-two-column .vb-column {
  border-radius: 22px;
  background: radial-gradient(circle at 0 0, #fff5ef 0, #ffffff 55%);
  box-shadow: none;
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.vb-about-page .vb-about-cta .vb-button-primary {
  font-size: 15px;
  padding: 10px 22px;
}

.vb-about-page .vb-about-cta .vb-button-outline {
  font-size: 15px;
  padding: 10px 22px;
}

/* Hover effects */
.vb-about-page .vb-card,
.vb-about-page .vb-two-column .vb-column,
.vb-about-page .vb-faq-item,
.vb-about-page .vb-about-hero-right,
.vb-about-page .vb-timeline-item {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.vb-about-page .vb-card:hover,
.vb-about-page .vb-two-column .vb-column:hover,
.vb-about-page .vb-faq-item:hover,
.vb-about-page .vb-about-hero-right:hover,
.vb-about-page .vb-timeline-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.16);
  border-color: rgba(183, 28, 28, 0.5);
}

/* Responsive */
@media (max-width: 960px) {
  .vb-about-page .vb-container {
    padding: 24px 18px;
    border-radius: 22px;
  }
  .vb-about-page .vb-about-hero .vb-container {
    padding: 28px 20px;
  }
  .vb-about-page .vb-about-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .vb-about-page {
    padding: 24px 12px 40px;
  }
  .vb-about-page .vb-container {
    padding: 20px 16px;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
  }
  .vb-about-page .vb-section + .vb-section {
    margin-top: 24px;
  }
}

/* ================================
   ÜBERARBEITETE KONTAKTSEITE
   ================================ */

.vb-contact-page {
  background: #f3f4f6;
  padding: 56px 0 80px;
}

/* Generic layout tweaks inside contact page */
.vb-contact-page .vb-section {
  padding-top: 0;
  padding-bottom: 40px;
}

.vb-contact-page .vb-container {
  max-width: 1120px;
  margin: 0 auto;
}

/* --------------------------------
   HERO
----------------------------------- */

.vb-contact-page .vb-contact-hero-container {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: 32px;
  align-items: stretch;
  padding-bottom: 40px;
}

.vb-contact-page .vb-contact-hero-content .vb-kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b71c1c;
  margin-bottom: 10px;
}

.vb-contact-page .vb-contact-hero-content .vb-heading-xl {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 14px;
}

.vb-contact-page .vb-contact-hero-content .vb-text-lg {
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
}

/* Hero highlight card (E-Mail) */

.vb-contact-page .vb-contact-hero-highlight {
  position: relative;
  background: linear-gradient(135deg, #fff7f3, #ffe4dd);
  border-radius: 24px;
  padding: 24px 26px 22px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.vb-contact-page .vb-contact-hero-highlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(183, 28, 28, 0.14), transparent 55%);
  opacity: 0.9;
}

.vb-contact-page .vb-contact-hero-highlight::after {
  content: "";
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(254, 249, 243, 0));
  top: -18px;
  right: -16px;
  opacity: 0.9;
}

.vb-contact-page .vb-contact-hero-highlight > * {
  position: relative;
  z-index: 1;
}

.vb-contact-page .vb-contact-hero-highlight .vb-heading-sm {
  font-size: 18px;
  margin-bottom: 8px;
}

.vb-contact-page .vb-contact-hero-highlight .vb-text-sm {
  font-size: 14px;
  line-height: 1.6;
}

.vb-contact-page .vb-contact-hero-highlight a {
  color: #b71c1c;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(183, 28, 28, 0.22);
}

.vb-contact-page .vb-contact-hero-highlight a:hover {
  border-bottom-color: rgba(183, 28, 28, 0.6);
}

.vb-contact-page .vb-contact-response-time {
  margin-top: 10px;
  font-style: italic;
  color: #6b7280;
}

/* --------------------------------
   MAIN LAYOUT (INFO + FORM)
----------------------------------- */

.vb-contact-page .vb-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.25fr);
  gap: 30px;
}

/* Left info stack */

.vb-contact-page .vb-contact-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.vb-contact-page .vb-contact-info-block {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 24px 22px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.25);
  position: relative;
  overflow: hidden;
}

.vb-contact-page .vb-contact-info-block::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b71c1c, #d97706);
}

.vb-contact-page .vb-contact-info-block .vb-heading-md {
  font-size: 20px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.vb-contact-page .vb-contact-info-block .vb-text {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
}

.vb-contact-page .vb-contact-info-block .vb-list {
  margin-top: 8px;
  padding-left: 18px;
}

.vb-contact-page .vb-contact-info-block .vb-list li {
  margin-bottom: 4px;
}

/* Hinweis box */

.vb-contact-page .vb-contact-note {
  background: #fff7ed;
  border-radius: 20px;
  border: 1px solid rgba(248, 180, 68, 0.45);
  box-shadow: 0 14px 32px rgba(248, 180, 68, 0.25);
}

.vb-contact-page .vb-contact-note::before {
  background: linear-gradient(90deg, #f97316, #facc15);
}

.vb-contact-page .vb-contact-note .vb-heading-sm {
  font-size: 15px;
  margin-bottom: 4px;
}

.vb-contact-page .vb-contact-note .vb-text-sm {
  font-size: 14px;
  color: #92400e;
  line-height: 1.7;
}

/* Right form card */

.vb-contact-page .vb-contact-form-wrapper {
  display: flex;
}

.vb-contact-page .vb-contact-form-card {
  width: 100%;
  background: #ffffff;
  border-radius: 24px;
  padding: 22px 24px 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.34);
  position: relative;
  overflow: hidden;
}

.vb-contact-page .vb-contact-form-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(183, 28, 28, 0.1), transparent 60%);
  opacity: 1;
}

.vb-contact-page .vb-contact-form-card > * {
  position: relative;
  z-index: 1;
}

.vb-contact-page .vb-contact-form-card .vb-heading-md {
  font-size: 19px;
  margin-bottom: 6px;
}

.vb-contact-page .vb-contact-form-card .vb-text-sm {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Gravity Forms basic styling hook */

.vb-contact-page .vb-contact-form-card .gform_wrapper {
  margin-top: 8px;
}

.vb-contact-page .vb-contact-form-card .gform_wrapper input[type="text"],
.vb-contact-page .vb-contact-form-card .gform_wrapper input[type="email"],
.vb-contact-page .vb-contact-form-card .gform_wrapper textarea {
  border-radius: 12px;
  border: 1px solid #d1d5db;
  padding: 10px 12px;
  font-size: 14px;
}

.vb-contact-page .vb-contact-form-card .gform_wrapper input[type="submit"],
.vb-contact-page .vb-contact-form-card .gform_wrapper button {
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(135deg, #b71c1c, #ef4444);
  color: #ffffff;
  border: none;
  cursor: pointer;
}

.vb-contact-page .vb-contact-form-card .gform_wrapper input[type="submit"]:hover,
.vb-contact-page .vb-contact-form-card .gform_wrapper button:hover {
  filter: brightness(1.05);
}

/* --------------------------------
   FAQ SECTION
----------------------------------- */

.vb-contact-page .vb-contact-faq {
  padding-top: 16px;
}

.vb-contact-page .vb-contact-faq .vb-section-header-center {
  text-align: left;
  margin-bottom: 18px;
}

.vb-contact-page .vb-contact-faq .vb-heading-lg {
  font-size: 24px;
}

.vb-contact-page .vb-contact-faq-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vb-contact-page .vb-contact-faq-list .vb-faq-item {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
  border: 1px solid rgba(148, 163, 184, 0.32);
  position: relative;
  overflow: hidden;
}

.vb-contact-page .vb-contact-faq-list .vb-faq-item::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 0;
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #b71c1c, #d97706);
}

.vb-contact-page .vb-contact-faq-list .vb-heading-sm {
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.vb-contact-page .vb-contact-faq-list .vb-text-sm {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

/* --------------------------------
   RESPONSIVE
----------------------------------- */

@media (max-width: 1023px) {
  .vb-contact-page .vb-contact-hero-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-contact-page .vb-contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vb-contact-page .vb-contact-form-wrapper {
    order: -1;
  }
}

@media (max-width: 768px) {
  .vb-contact-page {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .vb-contact-page .vb-contact-hero-container {
    gap: 24px;
    padding-bottom: 28px;
  }

  .vb-contact-page .vb-contact-hero-content .vb-heading-xl {
    font-size: 26px;
  }

  .vb-contact-page .vb-contact-hero-highlight {
    border-radius: 20px;
    padding: 18px 18px 16px;
  }

  .vb-contact-page .vb-contact-layout {
    gap: 22px;
  }

  .vb-contact-page .vb-contact-info-block {
    border-radius: 18px;
    padding: 18px 18px 18px;
  }

  .vb-contact-page .vb-contact-form-card {
    border-radius: 20px;
    padding: 18px 18px 20px;
  }

  .vb-contact-page .vb-contact-faq-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================
   VELISSABAU – SEARCH FILTER BAR TWEAKS
   ========================================= */

/* Overall filter section: a bit taller + more padding */
.vb-searchbar {
    padding: 16px 18px 14px; /* increase vertical padding */
}

/* Facet row: flex with gap, aligned nicely */
.vb-searchbar-row--facets {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;               /* space between dropdowns */
    margin-bottom: 10px;
}

/* Make each facet take equal space on desktop */
.vb-searchbar-field {
    flex: 1 1 0;
}

/* Increase height of the FacetWP dropdowns inside the fields */
.vb-searchbar-field select {
    height: 46px !important;      /* + ~10px vs normal */
    padding: 0 14px !important;
    font-size: 15px;
    border-radius: 10px;
}

/* Meta row (reset + selections + save/extended search) */
.vb-searchbar-row--meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* Left side: reset button + selections */
.vb-searchbar-meta-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Right side: "Suche speichern" + "Erweiterte Suche" with spacing */
.vb-searchbar-meta-right {
    display: flex;
    align-items: center;
    gap: 10px; /* this is what stops the buttons being cramped */
}

/* Base styling for all filter-bar links/buttons */
.vb-searchbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    background: #ffffff;
    cursor: pointer;
    white-space: nowrap;
}

/* Muted link (Suche speichern) */
.vb-searchbar-link--muted {
    color: #555;
    background: #ffffff;
}

/* Primary link (Erweiterte Suche) */
.vb-searchbar-link--primary {
    border-color: #b71c1c;
    background: #ffffff;
    color: #b71c1c;
}

/* Hover states */
.vb-searchbar-link:hover {
    background: #f5f5f5;
}

/* Mobile: stack the meta row nicely */
@media (max-width: 768px) {
    .vb-searchbar-row--meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .vb-searchbar-meta-right {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Smaller, cleaner results title */
.vb-results-title {
    font-size: 20px;         /* Adjust this value to your liking */
    font-weight: 600;
    margin: 10px 0 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
}

/* Count number styling */
.vb-results-count-number {
    font-size: 20px;
    font-weight: 600;
}

/* “Firmen gefunden” text */
.vb-results-title-text {
    font-size: 20px;
    font-weight: 400;
    color: #555;
}

/* =========================================
   VelissaBau – Filter bar toggle (mobile)
   ========================================= */

/* hide the checkbox by default */
.vb-filter-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* desktop: panel always visible, toggle hidden */
.vb-filter-toggle {
    display: none;
}

.vb-filter-panel {
    display: block;
}

/* --------- mobile behaviour --------- */
@media (max-width: 768px) {

    /* show the small "Filtern" bar */
    .vb-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid #e2e2e2;
        background: #ffffff;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        gap: 6px;
    }

    .vb-filter-toggle-label {
        display: inline-block;
    }

    .vb-filter-toggle-icon {
        font-size: 12px;
    }

    /* hide the big filter panel by default on mobile */
    .vb-filter-panel {
        display: none;
        margin-top: 10px;
    }

    /* when checkbox is checked → show panel */
    .vb-filter-toggle-input:checked ~ .vb-filter-panel {
        display: block;
    }
}

/* =========================================
   VELISSABAU – COMPANY CARD (PIXEL STYLE)
   ========================================= */

/* ------------ OUTER CARD ------------- */

.vb-card {
    background: #ffffff;
    border-radius: 26px;
    padding: 26px 28px 22px;
    border: 1px solid #ececec;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
}

/* red accent strip */
.vb-card::before {
    content:"";
    position: absolute;
    left: 0;
    top: 26px;
    bottom: 26px;
    width: 6px;
    background: linear-gradient(180deg,#b71c1c,#d94c4c);
    border-radius: 999px;
}

/* ------------ TOP ROW: LOGO + TITLE + BADGES ------------- */

.vb-card-top {
    display: flex;
    gap: 22px;
    align-items: flex-start;
}

/* logo */
.vb-logo {
    width: 110px;
    height: 110px;
    border-radius: 26px;
    object-fit: contain;
    background: #f7f7f7;
    border: 1px solid #ececec;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.10);
}

/* right side of logo */
.vb-title-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* company name */
.vb-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #111827;
}

/* badges row */
.vb-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* base badge style */
.vb-badge {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    background: #f3f4f6;
    color: #374151;
}

/* second badge (Top-Bewertung) = yellow */
.vb-badges .vb-badge:nth-child(2) {
    background: #fde9a9;
    color: #7a5800;
}

/* verified badge if you use it somewhere else */
.vb-badge-verified {
    background: #e5f7e7;
    color: #256d35;
}

/* ------------ SERVICES (GERÜSTE / GIPS / MONTAGE) ------------- */

/* wrapper – remove any GB background/padding */
.vb-services {
    margin-top: 2px;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* headline that holds {{term_list}} */
.vb-service-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

/* each term becomes a light-grey pill */
.vb-service-list > * {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #f3f4f6;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
}

.vb-service-list > *:hover {
    background: #e7e8eb;
}

/* ------------ ADDRESS + LANGUAGES ------------- */

.vb-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    font-size: 15px;
    color: #4b5563;
}

/* address line with small pin */
.vb-address {
    position: relative;
    padding-left: 18px;
    margin: 0;
}

.vb-address::before {
    content: "📍";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
}

/* languages text */
.vb-languages {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
}

/* ------------ BUTTONS (SCOPED TO CARD) ------------- */

.vb-card .vb-actions {
    display: flex;
    gap: 14px;
    margin-top: 10px;
}

/* base button */
.vb-card .vb-btn {
    flex: 1;
    padding: 14px 22px !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center;
    cursor: pointer;
}

/* target GB button element too */
.vb-card .vb-btn.gb-button {
    border-width: 0;
}

/* red filled button */
.vb-card .vb-btn-primary {
    background: linear-gradient(135deg,#d72626,#b11212) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 16px 40px rgba(183, 38, 38, 0.45) !important;
}

/* white with red outline */
.vb-card .vb-btn-outline {
    background: #ffffff !important;
    color: #d72626 !important;
    border: 2px solid #d72626 !important;
    box-shadow: 0 8px 26px rgba(0,0,0,0.04) !important;
}

/* hover states */
.vb-card .vb-btn-primary:hover {
    filter: brightness(0.96);
}

.vb-card .vb-btn-outline:hover {
    background: #fff5f5 !important;
}


/* ------------ STATS ROW (3 COLUMNS) ------------- */

.vb-stats {
    margin-top: 12px;
    padding: 16px 22px;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 22px;
    text-align: center;
}

.vb-stat {
    border-right: 1px solid #ede5e5;
    padding-right: 18px;
}

.vb-stat:last-child {
    border-right: none;
    padding-right: 0;
}

/* label */
.vb-stat-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9ca3af;
    margin-bottom: 3px;
}

/* value */
.vb-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

/* ------------ OPTIONAL LOWER STATS ROW ------------- */

.vb-stats-extra {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1e7e7;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 18px;
    font-size: 14px;
    color: #4b5563;
}

.vb-stat-extra {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.vb-stat-extra .vb-stat-label {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: #6b7280;
}

.vb-stat-extra .vb-stat-value {
    font-size: 18px;
}

/* ------------ MOBILE ------------- */

@media (max-width: 768px) {
    .vb-card {
        padding: 22px 18px 20px;
        gap: 12px;
    }

    .vb-card-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .vb-title-box {
        align-items: center;
    }

    .vb-logo {
        margin-bottom: 4px;
    }

    .vb-actions {
        flex-direction: column;
    }

    .vb-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .vb-stat {
        border-right: none;
        border-bottom: 1px solid #ede5e5;
        padding-right: 0;
        padding-bottom: 8px;
    }

    .vb-stat:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .vb-stats-extra {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   VelissaBau – Compact tuning for card
   (final tweaks)
   ========================================= */

/* Overall card a bit smaller */
.vb-card {
    max-width: 880px;
    margin-inline: auto;
    padding: 18px 22px;
    border-radius: 20px;
}

/* Top row: slightly tighter */
.vb-card-top {
    align-items: flex-start;
    gap: 16px;
}

/* Logo – override any manual width/height from GB */
.vb-card-logo,
.vb-card-logo img {
    width: 110px !important;
    height: 110px !important;
}

.vb-card-logo {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

/* Title box spacing */
.vb-title-box {
    gap: 6px;
    margin-top: 4px;
}

/* Company name a bit smaller */
.vb-title {
    font-size: 22px;
    line-height: 1.2;
}

/* Badges a touch smaller & closer */
.vb-badges {
    gap: 6px;
}

.vb-badges .gb-headline {
    padding: 4px 9px;
    font-size: 11px;
}


.vb-service-list a {
    padding: 4px 10px;
    font-size: 13px;
}

/* Address line */
.vb-address {
    margin-top: 12px;
    font-size: 15px;
}

/* ------------ BUTTONS (compact) ------------- */

.vb-card .vb-actions {
    margin-top: 14px;
    gap: 12px;
    justify-content: flex-start;
}

/* same width, less “tall” */
.vb-card .vb-btn {
    flex: 0 0 230px;          /* both buttons ~same width */
    padding: 10px 18px !important;
    font-size: 15px !important;
    border-radius: 999px !important;
}

/* Primary red button */
.vb-card .vb-btn-primary {
    box-shadow: 0 10px 24px rgba(183, 38, 38, 0.4) !important;
}

/* Stats area a bit calmer */
.vb-stats {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    gap: 8px;
}

.vb-stat-value {
    font-size: 15px;
}

.vb-stat-label {
    font-size: 11px;
}

/* Mobile: keep it tidy */
@media (max-width: 768px) {
    .vb-card {
        padding: 16px 16px;
    }

    .vb-card-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .vb-card-logo,
    .vb-card-logo img {
        width: 100px !important;
        height: 100px !important;
    }

    .vb-card .vb-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .vb-card .vb-btn {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* FINAL SIZE FOR SERVICE PILLS (desktop & tablet) */
.vb-service-list > *,
.vb-service-list a,
.vb-service-list span {
    padding: 5px 12px !important;   /* slightly taller & wider */
    font-size: 15px !important;     /* tiny bit bigger */
    font-weight: 500;
    line-height: 1.3;
}

/* ADDRESS PILL ON DESKTOP — only as wide as text */
.vb-info .vb-address {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: #fff5ec;
    border: 1px solid #f2d5b3;
    color: #8f4c12;
    padding: 5px 10px !important;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    width: auto !important;
    max-width: max-content !important;
    position: relative; /* keeps the pin icon aligned */
}

.vb-info .vb-address::before {
    content: "📍";
    font-size: 14px;
    position: relative;
    top: 0.5px;
}