/**
 * Allgemeine Styles für das Portal (werden auf jeder Seite eingebunden)
 */

/*!* fehlerhafte Formularfelder deutlicher kennzeichnen *!*/
/*div.form-item.has-error {*/
/*  color: red;*/
/*}*/
/*input.form-checkbox.error {*/
/*  box-shadow: 0 0 3px red;*/
/*}*/

/*!** Link als Knopf *!*/
/*a.knopf {*/
/*  display: inline-block;*/
/*  padding: 0.2em;*/
/*  background-color: lightblue;*/
/*}*/

/* Box für die Vorschau von Mail-Texten */
div.mail-preview {
  max-width: 40em;
  background-color: #F4F4F4;
  padding: 0.5em;
}

/* Media Library kompakter darstellen */
body .media-library-item--grid .field--name-thumbnail img {
  height: 80px;
}
body .media-library-item__name {
  font-size: 12px;
  overflow: inherit;
  white-space: inherit;
  text-overflow: inherit;
  hyphens: auto;
}

/* Admin-Form Felder Titel und Titelformat in einer Zeile */
.node-form .paragraph-type--medien .field--name-field-titelformat,
.node-form .paragraph-type--medien .field--name-field-titel {
  display: inline-block;
}


/**
 * Kompakte Darstellung von Feldern 'felder-kompakt' in Admin-Masken.
 */
@media screen and (min-width: 600px) {
  /* Label vor das Eingabefeld */
  .felder-kompakt .form-item > label,
  .felder-kompakt .js-form-item > label {
    display   : inline-block;
    min-width : 11.5em;
  }
  .felder-kompakt .form-item > input.form-text,
  .felder-kompakt .form-item > select,
  .felder-kompakt .js-form-item > input.form-control,
  .felder-kompakt .js-form-item > select {
    max-width : calc(100% - 12em);
    display: inline-block;
  }
}
/* Beschreibung (description) an manchen Feldern ausblenden */
.felder-kompakt .field--type-image .image-widget-data .description,
.felder-kompakt .field--type-file .form-managed-file .description,
.felder-kompakt .field--type-link .description {
  display: none;
}
/* Bilder-Liste anpassen */
.felder-kompakt .image-widget {
  display: flex;
}
.felder-kompakt .image-widget .image-preview {
  float: none;
  width: 20%;
  min-width: 50px;
}
.felder-kompakt .image-widget .image-widget-data {
  float: none;
  width: 80%;
  min-width: 200px;
}