/* ==========================================================================
   Häufige Fragen als Laufband (faq-marquee.js): zwei gegenläufige Reihen mit
   Fragekarten, ziehen/wischen zum schnelleren Blättern.
   ========================================================================== */

.faq-v { padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); }
.faq-v__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-6); }
.faq-v__head h2 { margin: 0; }
.faq-v__hint { margin: 0; font-size: var(--fs-sm); color: var(--torf-leise); display: inline-flex; align-items: center; gap: 0.4rem; }
.faq-v__hint svg { width: 18px; height: 18px; color: var(--wiese); }
.faq-v__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-6); }
.faq-v__more p { margin: 0; color: var(--torf-leise); }
.faq-v__more .btn svg { width: 18px; height: 18px; }

.fq-rows { display: grid; gap: var(--space-4); }
.fq-row {
  overflow: hidden;
  touch-action: pan-y; /* senkrecht scrollt die Seite, waagerecht bewegt das Band */
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  outline: none;
}
.fq-row.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.fq-row:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); border-radius: 18px; }
.fq-track { display: flex; align-items: flex-start; will-change: transform; gap: var(--space-4); width: max-content; padding: 6px 0 10px; } /* Karten so hoch wie ihr Inhalt */
.fq-card {
  flex: none;
  width: min(var(--w, 27rem), 82vw); /* Breite nach Textlänge: alle Karten etwa gleich hoch */
  padding: var(--space-5);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 1px 0 rgb(36 33 28 / 0.05), 0 14px 30px -24px rgb(36 33 28 / 0.5);
}
.fq-card h3 {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-md);
  line-height: 1.25;
}
.fq-card h3::before {
  content: "?";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--wiese);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
}
.fq-card p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--torf-leise); max-width: none; }
.fq-card a { color: var(--wiese); }
.fq-row:nth-child(2) .fq-card { background: var(--nebel); }


/* niedrige Laptop-Bildschirme: kompakter, damit der Abschnitt auf einen Bildschirm passt */
@media (min-width: 961px) and (max-height: 860px) {
  .faq-v__head { margin-bottom: var(--space-4); }
  .fq-rows { gap: var(--space-2); }
  .fq-card { padding: var(--space-4); }
  .fq-card h3 { margin-bottom: var(--space-2); font-size: 1.1rem; }
  .faq-v__more { margin-top: var(--space-4); }
}