/* Forms with Brevo (inc/formular.php): required mark, error line per field, select, status line, confirmation,
   sending. Tokens of site.css only. Selectors that start at ":root body main" beat the system layer of site.css,
   which sets the border of the fields in the white form card. */

/* site.css gives these a display; "hidden" must still hide them. */
.tj-form[hidden], .tj-form__ok[hidden], .tj-form__status[hidden], .tj-field__fehler[hidden] { display: none; }

.tj-pflicht { color: var(--tj-text-strong); }
/* E-Mail, address and phone never break at their hyphen (tj_formular_html). */
.tj-form__wrap .tj-nw { white-space: nowrap; }
.tj-field__fehler { margin: 0; font-size: var(--tj-label); line-height: var(--tj-label-lh); font-weight: 500; color: var(--tj-c-red); }
.tj-check a { color: inherit; text-decoration: underline; }
.tj-wahl { position: relative; }
.tj-form__status { grid-column: 1 / -1; margin: 0; padding: var(--tj-sp-12) var(--tj-sp-20); background: var(--tj-c-paper);
  color: var(--tj-text-strong); font-size: var(--tj-label); line-height: var(--tj-label-lh); }
/* After sending, the confirmation stands in the middle of the card, which keeps its height. */
.tj-innercard--brevo { display: flex; flex-direction: column; }
.tj-innercard--brevo > .tj-form__wrap { flex: 1; display: flex; flex-direction: column; }
.tj-form__ok { display: flex; gap: var(--tj-sp-20); align-items: flex-start; margin-block: auto; }
.tj-form__ok .ic { flex: none; color: var(--tj-text-strong); }
.tj-form__ok p { margin: 0; font-size: var(--tj-intro); line-height: var(--tj-intro-lh); color: var(--tj-text-strong); }

/* ds-allow-hardcode:start - rings and lines as on .tj-input and :focus-visible in site.css (1 and 2 px, offset 2),
   room for the arrow of the select (arrow 18 px plus its inset), the bot field off screen, the dimmed sending button. */
:root body main .tj-form .tj-input[aria-invalid="true"] { border-color: var(--tj-c-red); box-shadow: 0 0 0 1px var(--tj-c-red); }
:root body main .tj-form .tj-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 2px var(--tj-c-red); }
.tj-check input[aria-invalid="true"] { outline: 2px solid var(--tj-c-red); outline-offset: 2px; }
.tj-check a { text-underline-offset: 2px; }
.tj-form__status { border-left: 3px solid var(--tj-c-red); }

/* Select: the native list with the arrow of the theme. */
.tj-wahl select { appearance: none; padding-right: 44px; cursor: pointer; }
.tj-wahl__pfeil { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: var(--tj-text-strong); }
@media (hover: hover) and (pointer: fine) {
  :root body main .tj-form .tj-wahl:hover select:not([aria-invalid="true"]) { border-color: var(--tj-c-ink); }
}

/* Hidden field against bots: out of sight, but no display: none, which simple bots skip. */
.tj-form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Sending: the button keeps its place and says so. */
.tj-form[aria-busy="true"] .tj-btn[aria-disabled="true"] { cursor: progress; opacity: .7; }
/* ds-allow-hardcode:end */