/* ──────────────────────────────────────────────────────────────
   Abschluss-Baustein („Anfrage-Sub-Footer"), eine Quelle für alle Seiten.
   Die weiße Karte überlappt bewusst die Kante zum Footer – dadurch
   verschmelzen Inhaltsende und Footer zu einem Abschluss.
   Gehört zu includes/cta.php. Farben fest, weil die Snapshot-Seiten
   variables.css NICHT laden (nur das eingefrorene Tailwind-CSS).
   ────────────────────────────────────────────────────────────── */
.vl-cta{
  background:#faf8f5;                 /* cream – endet an der Footer-Kante */
  padding:0 1.5rem;
  position:relative;
}
/* Der Abschnitt direkt über der Karte: einheitlich knapper Abstand.
   Ohne das sind es je Seite 144 / 96 / 64 px – Dennis: „zu viel Luft" (25.09.). */
.vl-before-cta{ padding-bottom:4rem !important; }

.vl-cta__inner{ max-width:72rem; margin:0 auto; display:flex; justify-content:center; }
.vl-cta__card{
  max-width:28rem; width:100%; background:#fff;
  padding:2.75rem 2.25rem;
  box-shadow:0 18px 50px rgba(80,83,90,.13);
  position:relative; z-index:2;
  margin-bottom:-12rem;               /* NUR die Karte taucht ein, nicht ihr Hintergrund */
}
.vl-cta__eyebrow{
  font-size:10px; letter-spacing:.35em; text-transform:uppercase;
  color:#c9c0b3; margin:0 0 1.25rem;
}
.vl-cta__title{
  font-family:var(--font-display,"Playfair Display",Georgia,serif);
  font-size:1.875rem; line-height:1.2; font-weight:400;
  color:#50535a; margin:0 0 1.5rem;
}
.vl-cta__rule{ width:2rem; height:1px; background:#c9c0b3; margin-bottom:1.75rem; }
.vl-cta__text{ font-size:.875rem; line-height:1.7; color:#50535a; margin:0 0 2rem; }
.vl-cta__button{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#50535a; color:#fff; padding:.875rem 2rem;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s; margin-bottom:2rem;
}
.vl-cta__button:hover{ background:#3f4248; }
.vl-cta__social{ display:flex; align-items:center; gap:1rem; padding-top:1.5rem; border-top:1px solid #f2ede6; }
.vl-cta__social a{ color:#c9c0b3; transition:color .2s; display:inline-flex; }
.vl-cta__social a:hover{ color:#50535a; }

@media (max-width:640px){
  .vl-cta__card{ margin-bottom:-8rem; }
  .vl-before-cta{ padding-bottom:2.5rem !important; }
  .vl-cta__card{ padding:2.25rem 1.5rem; }
  .vl-cta__title{ font-size:1.625rem; }
}

/* ── Ab 1100 px: Karte sitzt RECHTS, der Footer-Inhalt rückt nach links ──
   Wunsch Dennis (25.09.): „den Footer nach links verschieben, sodass die Karte
   da rein passt." Unterhalb dieser Breite bleibt die Karte mittig über der Kante,
   weil Raster und Karte sonst nicht nebeneinander passen. */
@media (min-width:1100px){
  .vl-cta__card{ margin-bottom:-24rem; max-width:26rem; }  /* sitzt fast ganz im Footer */
  .vl-cta__inner{ justify-content:flex-end; }
}