/*
 * Preis + Vertrauen unter dem Hero-CTA (Baustein tm-hero-fakten,
 * docs/design/site-chrome/hero_fakten.py). Erbt die Textfarbe vom Hero,
 * damit er auf hellen (Landing-Kit) und dunklen Heros (Makler) passt.
 */
.tm-hf { display: grid; gap: 8px; margin: 14px 0 0; font-size: 15px; line-height: 1.4; }
.tm-hf-preis { margin: 0; }
.tm-hf-preis b { font-weight: 700; }
.tm-hf-trust { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; opacity: .85; }
.tm-hf-trust li { display: inline-flex; align-items: center; gap: 6px; }
.tm-hf-trust li::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px;
  background: var(--pl-success, #1D6B3A);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 520px) {
  .tm-hf { margin-top: 10px; font-size: 14px; gap: 6px; }
  /* Hero-Knoepfe nebeneinander, damit Preis + Haken im ersten Bildschirm bleiben */
  .tm-hf-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin: 18px 0 0; }
  .tm-hf-cta > a { justify-content: center; margin: 0; padding-inline: 10px; text-align: center; }
  .tm-hf-trust { gap: 2px 12px; font-size: 13px; }
}