/**
 * Anpassungen für Webform Formulare
 */

fieldset.webform-type-fieldset {
  border: 1px solid var(--lichtblau);
  border-radius: 0.3em;
  padding: 0 0.5em;
  margin-top: 1.5em;
}
fieldset.webform-type-fieldset > legend {
  font-size: 1rem;
  margin-top: -0.8em;
  float: inherit;
  width: inherit;
}
fieldset.webform-type-fieldset > legend > span.fieldset-legend {
  display: inline-block;
  padding: 0 0.5em;
}

fieldset.webform-type-fieldset .field-prefix .webform-element-description {
  margin-bottom: 1em;
}

.webform-element .field-value .field-prefix,
.webform-element .field-value .field-suffix {
  color: var(--grau);
}

.webform-submission-form .form-hidden {
  display: none;
}

/* Elemente in der Oberfläche unsichtbar, aber als Felder dennoch im POST berücksichtigen */
.webform-submission-form .visibility-hidden {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
  visibility: hidden !important;
}

/* Felder mit Eingabemaske kenntlich machen */
.js-webform-input-mask {
  outline: 1px dashed var(--hellgrau);
}

.webform-submission-form .form-control:disabled,
.webform-submission-form .form-select:disabled {
  background-color: var(--lichtgrau);
  color: var(--grau);
}

.webform-element-help {
  background-color: var(--dunkelblau);
  border-color: var(--dunkelblau);
}

button.webform-button--draft {
  background-color: var(--hellblau);
  margin-right: 1em;
}

.checkbox.form-no-label.has-error label {
  text-shadow: 0 0 1px var(--rot);
}

/**
 * Formatierung von Titel (Label) als inline-Element links neben dem Feld
 * Ist nur für breite Formulare sinnvoll, daher wird auf
 *  eine CSS-Klasse 'js-webform-title-inline-enable' geprüft,
 *  die per JavaScript (@see ../js/webform.js) gesetzt wird.
 * (eine (statische) CSS-Klasse 'webform-title-inline-disable' am Formular verhindert im JS,
    dass die Klasse 'js-webform-title-inline-enable' gesetzt wird)
*/
/*.js-webform-title-inline-enable {
  border: 1px solid green;
}
.js-webform-title-inline-disable {
  border: 1px solid red;
}*/
.form-composite.webform-fieldset--title-inline .fieldset-wrapper {
  display: inherit;
}
.js-webform-title-inline-enable .webform-element--title-inline > div.container-inline {
  display: inline-block;
}
.js-webform-title-inline-enable .webform-element--title-inline > .form-control,
.js-webform-title-inline-enable .webform-element--title-inline > .form-select,
.js-webform-title-inline-enable .webform-element--title-inline > .select-wrapper,
.js-webform-title-inline-enable .webform-element--title-inline > .form-textarea-wrapper,
.js-webform-title-inline-enable .webform-element--title-inline > .fieldset-wrapper,
.js-webform-title-inline-enable .webform-element--title-inline > .description {
  display: inline-block;
  width: 60%;
}
.js-webform-title-inline-enable .webform-element--title-inline > .input-group {
  max-width: calc(60% + 0.3rem);
  float: right;
}
.js-webform-title-inline-enable .webform-element--title-inline > .description {
  margin-left: 40%;
}

.js-webform-title-inline-enable .webform-element--title-inline > label,
.js-webform-title-inline-enable .webform-element--title-inline > legend {
  display: inline-block;
  width: calc(40% - 0.5em);
  min-width: 12em;
  vertical-align: top;
  margin: 0;
  padding: 0;
}
.js-webform-title-inline-enable .webform-element--title-inline > .fieldset-wrapper {
  padding-left: 0.3rem;
}
.js-webform-title-inline-enable .webform-element--title-inline.form-type-date > .field-value {
  display: inline-block;
}

.webform-submission-form strong.error.form-item--error-message {
  position: absolute;
  margin-top: -0.8em;
  font-size: 0.9em;
  background-color: rgba(255,220,220, 0.7);
  line-height: 100%;
  padding: 0.2em;
  border-radius: 0.7em;
  border: 1px solid var(--hellgrau);
}

.webform-submission-form .invalid-feedback {
  font-size: inherit;
  color: var(--rot);
}
.webform-submission-form .has-error > .invalid-feedback {
  display: inherit;
}

/* manche Elemente in Webforms besonders formatieren */
details#edit-gruppe-anfrage > summary,
details#edit-gruppe-anfrageoptionen > summary {
  background-color: var(--lichtgrau);
  text-shadow: none;
}

.webform-submission-form .webform-details-toggle-state-wrapper {
  display: none;
}