/* ============================================================
   FAQ Visual – animierte Fragezeichen-Grafik rechts neben der
   Fragenliste auf allen Seiten mit "Häufige Fragen".
   ============================================================ */

/* The section that contains a FAQ becomes the positioning context */
section:has(> .container > .faq),
section:has(> .container > .faq-row) {
  position: relative;
}

/* faq-row no longer flexes — visual is absolutely positioned. Just a wrapper. */
.faq-row {
  display: block;
  max-width: none;
  margin: 0;
}
.faq-row > .faq {
  margin-top: 3rem;
  max-width: 860px;
  margin-inline: auto;
}

/* The visual itself: pin to top-right of the FAQ section, level with the heading */
.faq-visual {
  position: absolute;
  top: clamp(3rem, 6vw, 5rem);
  right: clamp(1.5rem, 4vw, 4rem);
  width: clamp(140px, 14vw, 180px);
  z-index: 2;
  pointer-events: none;
}
.faq-visual svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(20, 33, 61, 0.10));
}

/* ---- Animations ---- */

/* Outer dashed orbit rotates */
.faq-visual .fq-orbit {
  transform-box: fill-box;
  transform-origin: center;
  animation: fq-rotate 40s linear infinite;
}
@keyframes fq-rotate {
  to { transform: rotate(360deg); }
}

/* Main ring breathes */
.faq-visual .fq-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: fq-ring 4.5s ease-in-out infinite;
}
@keyframes fq-ring {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.04); opacity: 0.85;}
}

/* Question mark gentle float */
.faq-visual .fq-mark {
  transform-box: fill-box;
  transform-origin: center;
  animation: fq-mark 4s ease-in-out infinite;
}
@keyframes fq-mark {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}

/* Floating chip (rotates lazily) */
.faq-visual .fq-chip-rot {
  transform-box: fill-box;
  transform-origin: center;
  animation: fq-chip-rot 8s ease-in-out infinite;
}
@keyframes fq-chip-rot {
  0%, 100% { transform: rotate(0deg)  translateY(0); }
  50%      { transform: rotate(45deg) translateY(-2px); }
}

/* Floating dot — orbital bobbing */
.faq-visual .fq-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: fq-dot 3s ease-in-out infinite;
}
.faq-visual .fq-dot:nth-of-type(2) { animation-delay: 0.8s; }
.faq-visual .fq-dot:nth-of-type(3) { animation-delay: 1.5s; }
@keyframes fq-dot {
  0%, 100% { transform: translateY(0)    scale(1);    opacity: 0.45; }
  50%      { transform: translateY(-4px) scale(1.25); opacity: 1;    }
}

/* Mini line accent — slides sideways */
.faq-visual .fq-line {
  transform-box: fill-box;
  transform-origin: center;
  animation: fq-line 3.6s ease-in-out infinite;
}
@keyframes fq-line {
  0%, 100% { transform: translateX(0);   opacity: 0.5; }
  50%      { transform: translateX(4px); opacity: 1;   }
}

/* ---- Mobile: tuck visual into corner more tightly ---- */
@media (max-width: 1100px) {
  .faq-visual {
    width: clamp(110px, 14vw, 150px);
    right: clamp(1rem, 3vw, 2rem);
    top: clamp(2rem, 5vw, 4rem);
  }
}
@media (max-width: 760px) {
  /* On narrow screens, hide the visual to keep the header readable */
  .faq-visual { display: none; }
  .faq-row > .faq { margin-top: 2rem; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .faq-visual svg * {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ---- Fragezeichen-Symbol rechts neben der Überschrift ---------------------
   In allen Bereichen mit Klasse .faq-head sitzt das Symbol direkt rechts
   neben der Überschrift „Häufige Fragen / Frequently asked questions".
   Auf schmaleren Viewports stapeln sich Überschrift und Symbol untereinander,
   damit nichts überläuft. */
.section-head.faq-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  flex-wrap: wrap;
}
.section-head.faq-head .faq-head-text {
  text-align: center;
}
.faq-visual.faq-visual--inline {
  position: static;
  top: auto;
  right: auto;
  width: clamp(72px, 7vw, 110px);
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .section-head.faq-head {
    gap: 0.5rem;
  }
  .faq-visual.faq-visual--inline {
    width: clamp(56px, 18vw, 90px);
  }
}