/* Siehe global.css */
.edit-post-visual-editor__content-area,
.layout-container:not(:has(main.gutenberg-full-editor)) {
  .webform-flexbox {
    margin: 0;
    gap: var(--spacing-2);
  }

  .webform-flex--container {
    margin: 0;
  }

  .form-item,
  .webform-flex--container > .form-item {
    margin-top: 24px;
  }

  .form-item > select {
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-medium);
    background: transparent;
    border-radius: 0;
    border: none;
    border-bottom: 1px #D0D0D0 solid;
    appearance: none;
  }

  .form-item > select:focus-visible {
    outline: none;
  }

  /* Checkbox */

  .form-item.form-type-checkbox {
    display: grid;
    grid-template-columns: 35px auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "checkbox label"
      "hinweis hinweis";
    grid-column-gap: 28px;
    grid-row-gap: 8px;
  }

  .form-item.form-type-checkbox > div.description {
    grid-area: hinweis;
    font-size: var(--font-size-small);
  }

  .form-item > input[type="checkbox"] {
    width: 35px;
    height: 35px;
    border-radius: 0;
    border: 1px #D0D0D0 solid;
  }

  .form-item > input[type="checkbox"]:checked {
    accent-color: var(--color-yellow);
  }

  /* Input (ohne Checkbox) und Textarea */

  .webform-flex--container > .form-item > input:not([type="checkbox"]) {
    width: calc(100% - 16px);
    padding: 0 8px 4px;
  }

  .form-item > input:not([type="checkbox"]),
  .form-item > div > textarea {
    font-size: var(--font-size-regular);
    font-weight: var(--font-weight-medium);
    border-radius: 0;
    border: none;
    border-bottom: 1px #D0D0D0 solid;
  }

  .form-item > div > textarea {
    width: calc(100% - 16px);
    height: 128px;
    resize: none;
    border: none;
    outline: 1px #D0D0D0 solid;
    padding: 4px 8px;
  }

  .form-item > input:not([type="checkbox"]):focus {
    outline: none;
    border-bottom: 2px #D0D0D0 solid;
  }

  .form-item > div > textarea:focus {
    outline: 2px #D0D0D0 solid;
  }

  /* Der Abstand wird nur eingefügt wenn das Label unter dem Input ist. */

  .form-item > input:not([type="checkbox"]):has(+ label) {
    margin-bottom: 8px;
  }

  /* Da wir den unteren Border um 1px größer machen beim Fokus muss der Abstand zum label um 1px verringert werden. */

  .form-item > input:not([type="checkbox"]):has(+ label):focus {
    margin-bottom: 7px;
  }

  /* Buttons
    Weitere Buttonstile sind unter:
    - global.css
    - toolbar.css
  */

  input[type="button"],
  input[type="submit"] {
    border: 0;
    border-radius: 4px;
    padding: 16px 20px;
    text-transform: uppercase;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    background-color: var(--color-yellow);
    cursor: pointer;
    text-wrap: auto;
  }

  input[type="button"]:hover,
  input[type="submit"]:hover {
    /*box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.64) inset;*/
	background-color: #00618d;
	color:#fff;
  }

  .form-actions {
    margin-top: 24px;
  }

  .form-item > label {
    color: #6A6A6A;
    line-height: 1.2;
  }

  .form-item > label.form-required::after {
    content: ' *';
  }
}