/* RETRO BOXING e. V. – v1446: reCAPTCHA tatsaechlich mittig.
 * Die v1445-Kombination left:50% + translateX(-50%) verschob bei
 * grid-/flex-zentrierten Formfeldern das Widget nochmals nach rechts.
 * Stattdessen die vorhandene Formularbreite als Bezugsflaeche verwenden.
 * Kein Eingriff in Google-Skripte, Challenge-Dialog oder Validierung. */

/* Die volle jeweilige Formularzeile ist der Bezugspunkt, nicht die Viewportbreite. */
html body .form-row:has(.g-recaptcha) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
html body .form-row:has(> .g-recaptcha),
html body .rb-recaptcha-consent:has(> .g-recaptcha) {
  container-type: inline-size;
}

/* Google-Consent wird beim Laden per JS UM das Widget herum eingefuegt.
 * Dieser Wrapper muss die Zeilenbreite benutzen, sonst ist die Zentrierung
 * nur innerhalb einer schmalen Teilspalte korrekt. */
html body .form-row:has(> .g-recaptcha:not([hidden])) {
  display: grid !important; /* auch wenn ein Elternstyle die reine Captcha-Zeile auf flex setzt */
}
html body .form-row > .rb-recaptcha-consent {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
}
/* Bereits vor der Aktivierung auch den Einwilligungs-Button zentriert zeigen. */
html body .rb-recaptcha-consent:not(.is-active) {
  justify-items: center;
  text-align: center;
}
html body .rb-recaptcha-consent:not(.is-active) > .btn {
  justify-self: center;
}

/* Position vom CSS-Grid bestimmen lassen: kein zusaetzlicher 50%-Offset.
 * Zentrierung der 304px-Box bleibt auch bei skalierten Widgets exakt. */
html body .form-row > .g-recaptcha:not([hidden]),
html body .rb-recaptcha-consent > .g-recaptcha:not([hidden]) {
  box-sizing: border-box !important;
  display: block !important;
  width: 304px !important;
  min-width: 304px !important;
  max-width: none !important;
  justify-self: center !important;
  align-self: center !important;
  float: none !important;
  clear: both !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  margin: 8px auto 12px !important;
  transform: scale(var(--rb-captcha-scale, 1)) !important;
  transform-origin: center top !important;
}
/* Das aktive Consent-Gitter soll seinen Inhalt nicht von selbst dehnen. */
html body .rb-recaptcha-consent.is-active {
  justify-items: center !important;
}

/* Skalierung richtet sich nach tatsaechlicher Formularbreite (nicht viewport).
 * 304 px ist die Originalbreite des Google-reCAPTCHA-v2-Kaestchens. */
@container (max-width: 303px) {
  html body .form-row > .g-recaptcha:not([hidden]),
  html body .rb-recaptcha-consent > .g-recaptcha:not([hidden]) {
    --rb-captcha-scale: .90;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    justify-self: start !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) scale(var(--rb-captcha-scale, 1)) !important;
  }
}
@container (max-width: 285px) {
  html body .form-row > .g-recaptcha:not([hidden]),
  html body .rb-recaptcha-consent > .g-recaptcha:not([hidden]) { --rb-captcha-scale: .81; margin-bottom: -2px !important; }
}
@container (max-width: 255px) {
  html body .form-row > .g-recaptcha:not([hidden]),
  html body .rb-recaptcha-consent > .g-recaptcha:not([hidden]) { --rb-captcha-scale: .71; margin-bottom: -5px !important; }
}
@container (max-width: 225px) {
  html body .form-row > .g-recaptcha:not([hidden]),
  html body .rb-recaptcha-consent > .g-recaptcha:not([hidden]) { --rb-captcha-scale: .62; margin-bottom: -8px !important; }
}
/* Fallback ohne CSS-Containment, etwa in alten WebViews. */
@supports not (container-type: inline-size) {
  @media (max-width: 360px) {
    html body .g-recaptcha:not([hidden]) { --rb-captcha-scale: .80; }
  }
}