/* PQ Captcha für Contact Form 7 – Grundgestaltung im Punkt-Quadrat-Design.
   Farben über CSS-Variablen anpassbar, z. B. .pq-captcha { --pqc-accent: #ff0; } */
.pq-captcha {
  --pqc-accent: var(--pqf-yellow, #e5e03a);
  --pqc-field: var(--pqf-field, #0f111a);
  --pqc-line: var(--pqf-line, rgba(255, 255, 255, .14));
  --pqc-text: var(--pqf-text, #f2f2f6);
  display: grid;
  grid-template-columns: auto minmax(0, 240px);
  max-width: 100%;
  justify-content: start;
  gap: 12px 16px;
  align-items: center;
}
.pq-captcha *, .pq-captcha *::before, .pq-captcha *::after { box-sizing: border-box; }
.pq-captcha__box { order: -1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pq-captcha__image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--pqc-line);
  /* Theme-Regeln wie img { height: auto } dürfen das Seitenverhältnis nicht stören */
  width: auto;
  min-width: 0;
  flex: 0 1 auto;
}
.pq-captcha__reload {
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--pqc-line);
  background: var(--pqc-field);
  color: var(--pqc-text);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.pq-captcha__reload:hover { background: var(--pqc-accent); border-color: var(--pqc-accent); color: #14141b; }
.pq-captcha__reload:focus-visible { outline: 2px solid var(--pqc-accent); outline-offset: 3px; }
.pq-captcha__reload.is-loading svg { animation: pqc-spin .8s linear infinite; }
@keyframes pqc-spin { to { transform: rotate(360deg); } }
.pq-captcha__input { width: 100%; margin: 0; text-transform: uppercase; letter-spacing: .3em; font-weight: 700; }
.pq-captcha__input::placeholder { letter-spacing: normal; text-transform: none; font-weight: 400; }
.pq-captcha__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 560px) { .pq-captcha { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .pq-captcha__reload, .pq-captcha__reload.is-loading svg { transition: none; animation: none; }
}