/* CTA-Button (Ghost -> Fill on Hover) */
.cta-ghost-yellow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: 12px 18px;
  border-radius: 999px;

  border: 2px solid #f4b400;          /* euer Gelb */
  color: #111;
  background: transparent;

  font-weight: 700;
  text-decoration: none;
  line-height: 1;

  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.cta-ghost-yellow:hover,
.cta-ghost-yellow:focus-visible{
  background: #f4b400;
  color: #111;
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  outline: none;
}

.cta-ghost-yellow:active{
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* kleiner Pfeil als Akzent */
.cta-ghost-yellow::after{
  content: "→";
  font-weight: 800;
}

/* optional: wenn der Link alleine in einer Zeile steht */
.cta-inline-wrap{
  margin: 10px 0 0;
}