/* FAQ-CTA (1.13.0). Mobile First: Basis ist 360 px, die Desktop-Ansicht kommt per min-width dazu.
   Die !important-Regeln sind nötig, weil .faq p und .faq h3 im Theme selbst !important setzen. */

.wp-block-post-content .faq .fa-fq { margin: 0 0 1.1rem; font-size: 15px; line-height: 1.4; }
.fa-fq a { text-decoration: none !important; }
.wp-block-post-content .faq .fa-fq p { margin: 0; }

.wp-block-post-content .faq .fa-fq .fa-fq__titel {
  font-family: "Schibsted Grotesk", sans-serif;
  font-size: 15px; font-weight: 700; line-height: 1.3;
  color: var(--navy) !important; margin-bottom: 7px;
}

/* Prozentbreite statt fester Breite: die nächste Karte reißt in jeder Handy- und Tablet-Breite an */
.fa-fq__liste {
  display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 2px; scrollbar-width: none;
}
.fa-fq--n1 .fa-fq__liste { grid-auto-columns: 100%; }
.fa-fq__liste::-webkit-scrollbar { display: none; }

.fa-fq__karte {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 3px 8px; align-content: start; align-items: center;
  scroll-snap-align: start;
  background: var(--surface, #fff); border: 1px solid var(--grey-200); border-radius: 12px; padding: 10px;
}
.fa-fq__logo { display: flex; align-items: center; justify-content: flex-start; width: 52px; height: 30px; }
.fa-fq__logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Logo und Kurzname in einer Zeile, Vorteil und Fakt darunter über die volle Breite */
.fa-fq__text { display: contents; }
.wp-block-post-content .faq .fa-fq .fa-fq__name { font-size: 14.5px; font-weight: 700 !important; line-height: 1.25; color: var(--navy) !important; }
.fa-fq__badge, .fa-fq__fakt { grid-column: 1 / -1; font-size: 13px; line-height: 1.3; }
.fa-fq__badge { font-weight: 600; color: var(--blue-700); }
.fa-fq__fakt { color: var(--muted); }
.fa-fq__name, .fa-fq__badge, .fa-fq__fakt { word-break: normal; overflow-wrap: break-word; hyphens: none; }

/* Navy-Text statt Coral: Coral auf Weiß erreicht bei 14 px nicht den nötigen Kontrast */
html body .wp-block-post-content a.fa-fq__btn {
  grid-column: 1 / -1; align-self: end;
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; margin-top: 5px; padding: 7px 14px;
  border: 1.5px solid var(--coral); border-radius: var(--r-pill, 999px);
  background: transparent; color: var(--navy) !important;
  font-weight: 700; font-size: 14px; line-height: 1.2; text-align: center;
  transition: background .15s, color .15s;
}
html body .wp-block-post-content a.fa-fq__btn:hover,
html body .wp-block-post-content a.fa-fq__btn:focus-visible { background: var(--coral); color: #fff !important; }
html body .wp-block-post-content a.fa-fq__btn--blau { border-color: var(--blue); }
html body .wp-block-post-content a.fa-fq__btn--blau:hover,
html body .wp-block-post-content a.fa-fq__btn--blau:focus-visible { background: var(--blue); }
html body a.fa-fq__btn::after { content: none !important; }

.wp-block-post-content .faq .fa-fq .fa-fq__note,
.wp-block-post-content .faq .fa-fq .fa-ad-footnote,
.wp-block-post-content .faq .fa-fq .fa-risk {
  grid-column: 1 / -1; margin-top: 5px; padding: 0 !important;
  font-size: 11px !important; line-height: 1.35 !important; color: var(--muted) !important;
}

@media (min-width: 768px) {
  .fa-fq__liste { grid-auto-columns: minmax(0, 1fr); overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { html body a.fa-fq__btn { transition: none; } }