/**
 * Formatierungen für bielefeld.de
 * (als Ergänzungen zu design.css)
 */

.post-wrap article header article {
  padding: 0;
  margin: 0;
}

.content .layout__region--main {
  padding: 1rem 1rem 3.5rem;
}
.content .layout__region--important > .block {
  padding: 1rem;
}
.content .layout:not(.transparent) .layout__region--main:not(.region-empty),
.content .layout:not(.transparent) .layout__region--important > .block:not(.sidebar-box) {
  background-color: white;
}
.content .layout__region--main.region-empty {
  padding: 0;
}

@media (min-width : 576px) {
  .content .layout__region--main {
    padding : 1.5rem 1.5rem 2.5rem
  }
  .content .layout__region--important > .block {
    padding : 1rem 1.5rem 1rem 1.5rem;
  }
}

@media (min-width : 768px) {
  .content .layout__region--main {
    padding: 2rem 2rem 3.5rem
  }
  .content .layout__region--important > .block {
    padding: 1rem 2rem 1rem 2rem;
  }
  .layout__region--main .sidebar-box div.text,
  .layout__region--main .sidebar-box div.picture-bottom-text,
  .layout__region--main .sidebar-box > .content > .without-picture,
  .layout__region--main .sidebar-box .block-back-link,
  .layout__region--main .sidebar-box.akkordeon {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}


/* damit z.B. weisse Bloecke buendig aneinanderfolgen, sofern kein 'abstand-unten' angegeben */
.layout__region--main .sidebar-box {
  margin-bottom: 0;
}

.content article .layout.transparent .layout__region--main {
  background-color : transparent;
}

@media (min-width: 992px) {
  .layout--bootstrap-bielfeld-two-col > .layout__region--first.col-lg-6 {
    flex-basis   : calc(50% - 15px);
    max-width: calc(50% - 15px); /* 'max-width'-Angaben nur zwecks IE11 notwendig */
    margin-right : 15px;
  }
  .layout--bootstrap-bielfeld-two-col > .layout__region--second.col-lg-6 {
    flex-basis  : calc(50% - 15px);
    max-width: calc(50% - 15px);
    margin-left : 15px;
  }
  .layout--bootstrap-bielfeld-two-col > .layout__region--first.col-lg-8,
  .layout--bootstrap-bielfeld-two-col-two-region > .col-lg-8 {
    flex-basis   : calc(66.6666% - 15px);
    max-width: calc(66.6666% - 15px);
    margin-right : 15px;
  }
  .layout--bootstrap-bielfeld-two-col > .layout__region--second.col-lg-4,
  .layout--bootstrap-bielfeld-two-col-two-region > .col-lg-4 {
    flex-basis  : calc(33.3333% - 15px);
    max-width: calc(33.3333% - 15px);
    margin-left : 15px;
    overflow-x: auto;  /* solange Chrome keine Silbentrennung macht?! */
  }
}
@media (min-width: 1200px) {
  .layout--bootstrap-bielfeld-two-col > .layout__region--first.col-lg-8,
  .layout--bootstrap-bielfeld-two-col-two-region > .col-lg-8 {
    flex-basis   : calc(75% - 10px);
    max-width: calc(75% - 10px);
  }
  .layout--bootstrap-bielfeld-two-col > .layout__region--second.col-lg-4,
  .layout--bootstrap-bielfeld-two-col-two-region > .col-lg-4 {
    flex-basis  : calc(25% - 20px);
    max-width: calc(25% - 20px);
  }
}

/* Container 'pos-top-before-container' und 'pos-top-after-container'
 *  werden bei Bedarf per global.js erzeugt.
 * Hier verhindern, dass ein horizontaler Scrollbalken entsteht.
 */
.pos-top-before-container, .pos-top-after-container {
  overflow: hidden;
}

.is-unpublished, .node--unpublished, .media--unpublished {
  box-shadow: 0 0 5px inset rgba(255, 165, 0, 0.5);
  outline: rgba(255, 165, 0, 0.5) dashed 2px;
}
.node--unpublished, .media--unpublished {
  box-shadow: 0 0 10px rgba(255, 165, 0, 0.7);
  padding: inherit;
}
.is-missing {
  box-shadow: 0 0 5px inset rgb(255, 0, 0);
  outline: rgba(255, 0, 0, 0.5) dashed 2px;
}

.block-bielefeld-block-gallery {
  padding: 0;
  /*overflow: hidden;*/
}

/* Sonderbehandlung Ellipsis in stickySidebar */
.theiaStickySidebar .ellipsis > a {
  white-space: normal;
  overflow: hidden;
  height: 1.3rem;
  text-overflow: ellipsis;
}


/* Breadcrumb anpassen */
.block.breadcrumbs {
  padding-left: 0;
}
.breadcrumb {
  padding: inherit;
  background-color: inherit;
  margin-bottom: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: ""; /* "›";*/
  speak: none;
  width: 0;
  height: 0;
  border-top: 0.2rem solid transparent;
  border-bottom: 0.2rem solid transparent;
  border-left: 0.2rem solid var(--grau);
  padding-right: 0.2rem;
  margin-bottom: 0.1rem;
  float: none;
  display: inline-block;
}

/* Meldungen vom System "normaler" anzeigen */
div.alert-wrapper {
  position: inherit;
  z-index: inherit;
  max-height: inherit;
}
div.alert > svg {
  max-width: 1.5rem;
  max-height: 1.5rem;
}
div.alert .alert-heading {
  display: none;
}
div.alert.alert-dismissible {
  padding: 0.7rem 2rem 0.7rem 0.7rem;
}
div.alert.alert-dismissible .btn-close {
  padding: 0.5rem;
  font-size: 0.75rem;
}

/* WAI-Links (versteckte Sprunglinks am Anfang des Kopfbereichs (Inhalt, Suche, Menue anspringen)) */
.wai-menu {
  position: absolute;
  min-width: 10em;
  top: 1rem;
}
.wai-menu a.wai-link {
  border: 0;
  clip: rect(1px,1px,1px,1px);
  display: inline-block !important;
  top: 0;
  left: 0;
  position: absolute;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0.2rem;
  overflow: hidden;
  font-size: 15px;
  background-color: white;
  line-height: inherit;
  border-radius: inherit;
}
.wai-menu a.wai-link:focus {
  clip: auto;
  width: auto;
  height: auto;
}

/* Kennzeichnung als Staging oder Entwicklungsbereich */
.websitetype-marker {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}



/* der Standard sieht fuer Bilder immer ein Float und Abstand vor, was wir aber nicht wollen (ION RKN 16.08.2022) */
.node .field--type-image {
  float: unset;
  margin-right: 0;
}

/* Webform */
.block-webform > .content > a {
  display: inherit;
}
.webform-submission-form, .node form {
  background-color: rgba(128, 128, 128, 0.1);
  padding: 0.5rem 1rem 0.5rem 1rem;
  --bs-border-color: var(--grau);
}
.webform-submission-form fieldset, .node form fieldset, .node form details {
  background-color: white;
}
.webform-submission-form .form-group, .node form .form-group {
  margin-bottom: 0.5rem;
  padding-right: 0;
  padding-left: 0;
}
.webform-submission-form label, .node form label {
  margin-bottom: 0;
}
.webform-submission-form label.form-check, .node form label.form-check {
  padding-left: 0.2rem;
}
.webform-submission-form .form-text, input.form-text {
  margin-top: 0;
}
.form-check-input[type="checkbox"]:not([role="switch"]) {
  border-radius: inherit;
}
.webform-submission-form .form-control,
.node form .form-control {
  height      : calc(1.5em + .3rem + 2px);
  padding     : .15rem .3rem;
  line-height : 1.3;
  border-radius: inherit;
}
.node form .form-select {
  padding-top: .15rem;
  padding-bottom: .15rem;
  padding-left: .3rem;
  border-radius: inherit;
}
.webform-submission-form textarea.form-control,
.node form textarea.form-control {
  height: inherit;
}
.webform-submission-form fieldset legend,
.node form fieldset legend,
.node form details legend {
  font-size: 1rem;
}
.webform-submission-form fieldset.webform-type-fieldset,
.node form fieldset.field-group-fieldset {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
}
.webform-submission-form fieldset.webform-type-fieldset > legend,
.node form fieldset.field-group-fieldset > legend {
  padding: 0.2rem;
  margin-top: 0.3rem;
  margin-left: -1.1rem;
}
.webform-submission-form fieldset.webform-type-fieldset > legend span,
.node form fieldset.field-group-fieldset > legend span,
.node form details.field-group-details > summary {
  font-weight: bold;
  background-color: white;
  display: inline-block;
  padding: 0 1rem 0 0.8rem;
  letter-spacing: 0.05rem;
  border-radius: 0.2rem;
}
.webform-element-description {
  padding-left: inherit;
  padding-right: inherit;
  font-size: 0.9rem;
}
.webform-submission-form .text-count-wrapper {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--grau);
}

.webform-submission-form .form-actions,
.node form .form-actions {
  margin-top: 1em;
}
.node form.views-exposed-form .col-auto {
  margin-right : 0.35em;
}
.node form.views-exposed-form .col-auto:nth-last-child(2) {
  margin-right: 1em;
}
.node form.views-exposed-form .form-actions {
  background-color: inherit;
  padding: inherit;
}
.webform-submission-form .form-required::after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  background-image: url(../../../../core/misc/icons/ee0000/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}
.webform-confirmation__message, .webform-confirmation__back {
  padding-top: 1em;
}
.webform-submission-form .btn {
  padding: 0.1rem .5rem;
}
/* kuerzerer Formular-Elemente */
form .item-short {
  width: 25% !important;
  min-width: 5em;
}
form .item-medium {
  width: 50% !important;
  min-width: 10em;
}
form .item-long {
  width: calc(100% - 10em) !important;
  min-width: 10em;
}
form .container-inline > .form-control,
.webform-element--title-inline > input {
  width: inherit;
  display: inline-block;
}
form .container-inline > label,
.webform-element--title-inline > label {
  display: inline-block;
  min-width: 10em;
}
form .item-rounded {
  border-radius: 2rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  height: auto;
}
.webform-submission-form details > summary {
  color: var(--rot);
}
.contrast-mode .webform-submission-form details > summary {
  color: black;
}
.webform-submission-form details > .details-wrapper {
  padding-left: 1.2rem;
}
.sidebar-box .webform-submission-form, .node .sidebar-box form {
  background-color: inherit;
  padding: inherit;
}
.webform-multiple-table td {
  white-space: inherit;  /* 'nowrap' rückgängig machen */
}
.webform-multiple-table a.tabledrag-handle .handle {
  width: 25px;
  height: 25px;
}
.form-type-webform-custom-composite.kompakt .webform-multiple-table .tabledrag-toggle-weight-wrapper,
.form-type-webform-custom-composite.kompakt .webform-multiple-table thead {
  display: none;
}
.form-type-webform-custom-composite.kompakt .webform-element-description {
  font-size: 0.8rem;
}

/* Vorschau-Ansicht bei Webforms */
.webform-preview .webform-element > label {
  color: var(--grau);
  width: 30%;
  min-width: 10em;
  margin-right: 1rem;
}
.webform-preview .webform-element-type-textarea > label {
  display: block;
  width: auto;
  margin-right: inherit;
}
.webform-preview .item-list ul li {
  padding-left: 1rem;
  border: 0;
}



/* Besondere Elemente im Footer (werden auch im Serviceportal genutzt) */
.footer-icon-links {
}
.footer-icon-links a {
  /*color     : white;*/
  font-size : 1.3rem;
  padding   : 0.4rem;
  border: 1px solid white;
  border-radius: 2rem;
  margin-right: 0.7rem;
  line-height: 90%;
  display: block;
  /*transition: background-color 0.3s ease;*/
}
.footer-icon-links li:last-of-type a {
  margin-right: 0;
}
.contrast-mode .footer-icon-links a {
  /*color : white;*/
}
.footer-icon-links a:hover, .footer-icon-links a:focus {
  background-color: var(--grau);
  /*border-bottom: 1px solid;*/
  text-decoration: none;
}

.footer .logo-wrap {
  flex-grow         : 1;
  display           : flex;
  justify-content   : flex-end;
  align-items       : flex-end;
}
@media (max-width : 400px) {
  .footer .logo-wrap {
    justify-content  : center
  }
}
.footer .logo-wrap {
  padding-bottom: 60px;
}
.footer .logo-wrap svg {
  width          : 60px;
}


/* Tabellenformat von bootstrap_barrio rueckgaengig machen */
table {
  font-size: 0.95rem;
}
tr {
  border-bottom: inherit;
  padding: inherit;
  background: inherit;
}
tr td, tr th {
  border: inherit;
  vertical-align: top;
  padding-left: 0;
  padding-right: 1rem;
}
tr td:last-of-type, tr th:last-of-type {
  padding-right: 0;
}

.field--type-entity-reference {
  margin-bottom: 0;
}

/* Tabellen bei mobiler Darstellung optimieren */
@media (max-width: 768px) {
  table.table {
    hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    font-size: 0.92rem;
  }
}
@media (max-width: 576px) {
  table.table.table-sm {
    font-size: 0.8rem;
  }
}

/* Tabelle fuer zwei Spalten mit Werteliste der Form "Bezeichnung (th): Wert (td)" */
table.table-label-value {
  font-size: inherit;
}
table.table-label-value th, table.table-label-value td {
  border-top: 0;
  border-bottom: 0;
}
table.table-label-value th {
  background-color: unset;
  color: unset;
  font-weight: normal;
  max-width: 30%;
}

.field-group-icon {
  position: relative;
  padding-left  : 1.75rem;
  margin-bottom : 0.5rem;
}
.field-group-icon i:first-of-type {
  margin-left : -1.75rem;
  position: absolute;
  top: 0.2rem;
  font-size: 1.25rem;
}
.field-group-icon p {
  margin-bottom: 0.5rem;
}

.bielefeldicon-inline  {
   vertical-align: middle;
}

/* vergroesserte Schrift von bootstrap_barrio rueckgaengig machen */
.node__content {
  font-size: inherit;
  margin-top: 0;
}


/* grosse Abstaende bei Aufklapp-Knoepfen von bootstrap_barrio rueckgaengig machen */
.js td .dropbutton-multiple {
  margin-right: 0;
  padding-right: 0;
}

ul.menu ul {
  margin-left: 1rem;
}

blockquote, p.blockquote, div.blockquote {
  border-left: 1px solid var(--rot);
  padding: 1rem;
  margin: 1rem 0;
  background-color: var(--hellgrau);
}
blockquote p:last-child {
  margin-bottom: 0;
}
.contrast-mode blockquote, .contrast-mode p.blockquote, .contrast-mode div.blockquote {
  border-color: black;
}

/* Zitat (mit Autor) */
div.zitat {
  padding-top  : 0.75rem;
  padding-bottom: 1.5rem;
  padding-left:  calc(max(3rem, min(5rem, 15%)));
  padding-right: calc(max(1rem, min(5rem, 10%)));
  position : relative;
  clear: both;
}
div.zitat:before {
  font-family: 'bielefeld-ui', sans-serif;
  content: "\e92e";
  color: var(--rot);
  font-size: 1.8rem;
  font-weight: bold;
  position: absolute;
  margin-left: -1.5em;
  margin-top: -0.2em;
}
div.zitat q { }
div.zitat q:before {
  content : none;
}
div.zitat q:after {
  content : "\"";
}
.contrast-mode div.zitat:before {
  color : black;
}
div.zitat cite {
  font-size   : 0.9em;
  color: var(--grau);
  font-style  : unset;
  display     : inline-block;
  margin-left : 0.5rem;
}
.contrast-mode div.zitat cite {
  color: var(--dunkelgrau);
}
div.zitat cite:before {
  content: "– ";
}
.sidebar-box-red div.zitat:before,
.text-weiss div.zitat:before {
  color: white;
}
.sidebar-box-red div.zitat cite,
.text-weiss div.zitat cite {
  color : var(--hellgrau);
}

a.picture-link {
  display: block;
}
.sidebar-box a.picture-link {
  padding-left: 0;
}


.view-filters {
  margin-bottom: 1em;
}
/* Exposed Filter in Views ausblenden (z.B. bei ineinander verschachtelten Views) */
.hide-view-filters .view-filters {
  display: none;
}
/* Sonderklassen, die am Eltern-Element gesetzt werden, um view-content zu beeinflussen */
.view-content--ms--3 .view-content,
.view-content--ml--3 .view-content {
  margin-left: -1rem;
}

.sidebar-box, .layout__region--second.col-xl-3,
.box-item {
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
}
.sidebar-box-red li a, .sidebar-box-red li a:hover, .sidebar-box-red li a:focus {
  color: white;
}
.sidebar-box-red a:not(.generic-button):hover,
.sidebar-box-red a:not(.generic-button):focus {
  text-decoration: underline;
}

ul.list-unstyled, article ul.list-unstyled {
  margin: 0;
}
ul.list-unstyled > li:before, article ul.list-unstyled > li:before, article ul.dropbutton > li::before {
  content: none !important;
}
ul.list-unstyled > li ul:not(.list-unstyled) {
  margin-left: 1em;
}
table.views-table ul.list-group .list-group-item {
  border: inherit;
  background-color: inherit;
  padding-left: 1em;
}

/* Links mit Icon (Grundlayout) */
a.link-extern:before,
a.link-intern:before,
a.link-mail:before,
a.link-download:before {
  font-family: 'bielefeld-ui', sans-serif;
  font-size: 0.75em;
  margin-right: 0.4em;
}
/* Download */
a.link-download:before {
  content: "\e901";
}
/* externer Link mit Icon */
a.link-extern:before {
  content: "\e903";
}
/* interner Link mit Icon */
a.link-intern:before {
  content: "\e908";
}
/* Mail Link mit Icon */
a.link-mail:before {
  content: "\e902";
}
/* Download Link mit Icon */
a.link-download:before,
a[href$=".pdf"].link-extern:before,
a[href$=".pdf"] span.text-link-icon:before {
  content: "\e901";
}
/* Mail-Link */
a.mailto {
  display: inline-block;
}


.link-list a.link-extern:after,
.link-list a.link-intern:after,
.link-list a.link-mail:after,
.link-list a.link-file:after,
.link-list a.link-download:after {
  font-family: 'bielefeld-ui', sans-serif;
  font-size: 0.75em;
  margin-left: 0.4em;
}
.link-list a.link-extern:before,
.link-list a.link-intern:before,
.link-list a.link-mail:before,
.link-list a.link-file:before,
.link-list a.link-download:before {
  content: "";
}
.link-list a.link-extern:after {   content: "\e903";  }
.link-list a.link-intern:after {   content: "\e908";  }
.link-list a.link-mail:after {   content: "\e902";  }
.link-list a.link-file:after {   content: "\e901";  }
.link-list a.link-download:after {   content: "\e901";  }


/* Icons zu manchen Links hinzufuegen (Grundkonfiguration ueber Modul extlink)
  aber einige externe Links sollen keine Icons erhalten (aber dennoch in einem neuen Fenster aufgehen!)
*/
.no-extlink a.link-extern:before,
a.no-extlink:before,
a.box-item.link-extern:before,
ul.links.icon a.link-extern:before,
/* ul.link-list a.link-extern:before,*/
footer .footer-icon-links span.extlink, .no-extlink span.extlink,
ul.links.icon span.extlink, .box-item > span.extlink {
  display: none;
}

.sidebar-box > .content > .without-picture {
  padding: 1rem 1rem 0.1rem 1rem;
}
/* letzter Absatz in einer Box ohne Abstand unten */
.sidebar-box > div > p:last-child {
  margin-bottom: 0;
}
.sidebar-box > .content > .without-picture  > ul:not(.list-unstyled) {
  padding-left: 1rem;
}

.block-bielefeld-block-text.sidebar-box {
  padding-bottom: 1rem;
}
.block-bielefeld-block-text-picture.sidebar-box > .block-title {
  padding: 1rem 1rem 0 1rem;
}
.block-bielefeld-block-text-picture.sidebar-box > .block-title.contains-toc-number {
  padding-left: 3rem;
}
.block-bielefeld-block-text-picture.sidebar-box > .block-title.contains-toc-number .toc-number {
  margin-top: 1.5rem;
  margin-left: 1rem;
}
.block-bielefeld-block-text-picture.sidebar-box {
  padding: 0;
}
.block-bielefeld-block-text-picture.sidebar-box > .content > .row {
  margin-left: 0;
  margin-right: 0;
}
.block-bielefeld-block-text-picture.sidebar-box > .content > .row > div:first-child {
  margin-top: 1rem;
  /* margin: .75rem 1rem 2rem; */
}
.block-bielefeld-block-text-picture.sidebar-box > .content > .row > div.picture-top {
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.block-bielefeld-block-text-picture.sidebar-box > .content > .row > div.picture-bottom {
  margin: 0.5rem 0 0 0;
  padding: 0;
}
.block-bielefeld-block-text-picture.sidebar-box > .content > .row > div.picture-top-text,
.block-bielefeld-block-text-picture.sidebar-box > .content > .row > div.picture-bottom-text {
  padding-bottom: 1rem;
}

/* Anpassungen fuer Bloecke, die fast global vorkommen */
.block-bielefeld-block-contact .field--name-field-bemerkung {
  margin-top: 0.5rem;
}
.address .field--name-field-oeffnungszeiten .field__label {
  font-weight: bold;
}
.address .oeffnungszeiten {
  margin-top: 0.3rem;
}
.address .oeffnungszeiten > p {
  margin-top: 0;
}

.block-back-link {
  padding: 0.5rem 0 1rem 0;
}
.block-back-link .icon {
  font-size: 1.25rem;
  margin-right: 0.5rem;
  vertical-align: top;
}
.sidebar-box .block-back-link {
  padding-left: 1rem;
  padding-bottom: 1rem;
}
.block-back-link a::before {
  margin-left: 0.2rem;
  margin-right: 0.6rem;
}

.block.abstand-unten {
  margin-bottom: 2rem;
}

/** Abstand zwischen Blöcken erzeugen, der wie der Abstand zwischen Abschnitten aussieht. */
.block.abstand-breakout:before {
  background-color: var(--lichtgrau);
  width: calc(100% + 2em);
  margin-left: -1em;
  padding: 1.5em 0;
  margin-bottom: 1em;
  content: "";
  display: block;
}
@media (min-width: 576px) {
  .block.abstand-breakout:before {
    width: calc(100% + 3em);
    margin-left: -1.5em;
    margin-bottom: 1.5em;
  }
}
@media (min-width: 768px) {
  .block.abstand-breakout:before {
    width: calc(100% + 4em);
    margin-left: -2em;
  }
}

/* Infoblock (aehnlich dem Block Krisenkommunikation) */
.block-infoblock {
  z-index: 1;
  position: relative;
  background-image: url("../img/warning-bg-transparent.png");
  padding: 1rem;
}
.contrast-mode .block-infoblock {
  background-color: black;
}
.block-infoblock.bg-light {
  border-color: var(--hellgrau);
  border-style: solid;
  border-width: 1px 0 1px 0;
}

/* letzten Block in der Sidebar unten ohne Abstand */
.layout__region:not(.layout__region--important) .sidebar-box:last-of-type {
  margin-bottom: 0;
}
/* wenn lange Worte ueberlappen, rutscht die sidebar sonst unter den content */
div.col-12.stickysidebar {
  overflow-x: hidden !important;
}

.box-transparent {
  background-color: inherit;
}

.sidebar-box.bg-lighter {
  background-color: rgba(255,255,255,0.8);
}
.sidebar-box.bg-darker {
  background-color: rgba(0,0,0,0.5);
}
.contrast-mode .bg-lighter {
  background-color: white;
}
.contrast-mode .bg-darker {
  background-color: black;
}

.subpage-image-bg nav.tabs {
  background-color: rgba(255,255,255,0.8);
}

/* Menue-Block (z.B. in einer Sidebar) formatieren */
/* (koennte ggf. vereinfacht werden, wenn dem Block, bzw. der UL passende Standard-Klassen gesetzt werden) */
.main-content .block-menu ul.nav {
  display: inherit;
}
.main-content .block-menu ul.menu {
  padding: 0;
}
.main-content .block-menu ul li.nav-item:before {
  content: none !important;
}
.main-content .block-menu ul li.nav-item .nav-link {
  font-weight: normal;
  font-size: 1rem;
  display: inline;
  padding: 0.3rem 0 0.1rem 1rem;
  line-height: 120%;
  color: inherit;
}
.main-content .block-menu ul li.nav-item a.active {
  font-weight: bold;
}
.main-content .block-menu ul li.nav-item a:after {
  display: none;
}
.main-content .block-menu ul li.nav-item a:hover, .main-content .block-menu ul li.nav-item a:focus {
  color: var(--rot);
}

.main-content .sidebar-box-red .block-menu ul li.nav-item a:before,
.main-content .sidebar-box-red .block-menu ul li.nav-item a:hover,
.main-content .sidebar-box-red .block-menu ul li.nav-item a:focus {
  color: inherit;
  border-left-color: inherit;
}

/* Media-Image wenn es im Text-Editor platziert wurde */
.text-formatted .field--type-image,
.contains-text .field--type-image {
  float: unset;
  margin: 0;
}
.text-formatted .field--type-image img,
.contains-text .field--type-image img,
.block-bielefeld-block-text .field--type-image img {
  margin-bottom: 0;
}

/* Korrektur max. Bildgroesse fuer IE11 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Bilder ueberlappen (max-width: 100% greift nicht?!) */
  .field--type-image > .img-fluid {
    width  : 100%;
    height : auto;
  }
  /* Bild-Unterzeile steht ueber dem Text (position: relative am Elternelement macht Aerger?!) */
  .block .picture .picture-inner, .block .carousel-item {
    position: static;
  }
}

/* image caption (block text + picture or block gallery) */
.picture .picture-inner {
  position: relative;
}
.picture .picture-inner .caption,
.carousel-item .caption {
  font-size: 0.85rem;
  color: var(--grau);
  padding: 0.2rem 0 0.7rem 0;
}
.sidebar-box-red .picture .caption,
.sidebar-box-red .carousel-item .caption {
  color: unset;
}
.contrast-mode .picture .picture-inner .caption,
.contrast-mode .carousel-item .caption {
  color: inherit;
}


.picture.width-12 > .picture-inner > .field--type-image {
  float: none;
  margin-right: 0;
}
.picture.width-12 img.image-style-large {
  width: 100%;
}
.picture.width-12 > .field--type-image,
.masonry-item .field--type-image, .masonry-view-item .field--type-image {
  margin-right: 0;
}
.picture.width-12 .field--type-image img,
.masonry-view-item .field--type-image img {
  margin-bottom: 0;
}
.contains-text .picture.width-12.picture-top {
  margin-bottom: 1rem;
}

/* wenn zwei Bilder (im Text-Editor) aufeinanderfolgen, etwas zusammendruecken,
   da sonst whitespace fuer einen Umbruch sorgen kann */
.picture.d-inline-block + .picture {
  margin-left : -0.28rem;
}

/* block gallery */
.gallery .field--type-image {
  margin-right: 0;
  float: none;
}
.gallery > div.row {
  margin-bottom: -1rem;
}
.gallery .picture img  {
  max-width: 100%;
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
.gallery .picture a,
.gallery .field--type-image > a {
  display: block;
}
.gallery a:hover img, .gallery a:focus img {
  opacity: 0.7;
}
.gallery .gallery-thumbs-more-info {
  display: none;
}

.carousel .field--type-image {
  float: none;
  margin-right: 0;
}
.carousel .field--type-image img {
  margin-bottom: 0;
  width: 100%;
}
.carousel .carousel-control-prev:hover, .carousel .carousel-control-next:hover,
.carousel .carousel-control-prev:focus, .carousel .carousel-control-next:focus {
  background-color: rgba(255,255,255,0.2);
}
.carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.carousel .carousel-control-prev:focus .carousel-control-prev-icon,
.carousel .carousel-control-next:hover .carousel-control-next-icon,
.carousel .carousel-control-next:focus .carousel-control-next-icon {
  width: 2rem;
  height: 2rem;
  background-color : var(--rot);
  border: 0.3rem solid var(--rot);
}

/* Kopfbild */
.parallax-mirror.position-y-top > img {
  margin-top: 53px;
}
@media (min-width : 768px) {
  .parallax-mirror.position-y-top > img {
    margin-top: 66px;
  }
}

.region-first-lower.masonry-layout .block.masonry-item {
  padding-left: 0;
}

.layout.masonry-layout .masonry-item .box-item,
.layout.masonry-layout .block-bielefeld-block-text-picture.masonry-item .without-picture {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.layout.masonry-layout .block-bielefeld-block-text-picture.masonry-item .contains-picture .text {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.layout.masonry-layout .block-bielefeld-block-text-picture.masonry-item .box-item,
.layout.masonry-layout .block-bielefeld-block-text-picture-news.masonry-item .box-item {
  padding-left: 0;
  padding-right: 0;
}
.layout.masonry-layout .box-item a {
  color: black;
}
.layout.masonry-layout .box-item:hover a, .layout.masonry-layout .box-item:focus a {
  color: white;
}

.box-item.bg-rot:hover, .box-item.bg-rot:focus {
  background-color: white;
  color: var(--rot) !important;
  fill: var(--rot);
}

/* Sonderloesung (erst mal) fuer News-Bloecke mit Icons in Kacheln mit gleicher Hoehe:
   Icon unten rechts in der Kachel positionieren */
.sameheight-parent  div.text-align-right.icon-wrapper-absolute {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
}

/* Kacheln auf weissem Hintergrund mit leichtem Rahmen versehen.
   (sollte eigentlich redaktionell vermieden werden) */
.layout:not(.transparent) .layout__region--main .masonry-item a.box-item,
.sidebar-box-white .masonry-item a.box-item,
.layout:not(.transparent) .layout__region--main .grid-item a.box-item,
.sidebar-box-white .grid-item a.box-item {
  border: 1px solid var(--hellgrau);
  box-shadow: 1px 1px 3px var(--hellgrau);
}

/* neue Version von masonry_views setzt irgendwoher ein 'col-auto' */
.view-content > .masonry.col-auto {
  padding-left: 0;
  padding-right: 0;
}

/* #container-content .views-element-container {
  padding: inherit;
} */

/* defining the bootstrap default colors //  Farben fuer Bielefeld festlegen */
/* rote Schrift (z.B. bei Ueberschriften) */
.text-primary {       color: var(--rot) !important; }
.color-red, .text-rot{color: var(--rot); fill: var(--rot); }
.text-grau {          color: var(--grau); fill: var(--grau); }
.text-blau {          color: var(--blau); fill: var(--blau); }
.text-hellblau {      color: var(--hellblau); fill: var(--hellblau); }
.text-gruen {         color: var(--gruen); fill: var(--gruen); }
.text-hellgruen {     color: var(--hellgruen); fill: var(--hellgruen); }
.text-pink {          color: var(--pink); fill: var(--pink); }
.text-orange {        color: var(--orange); fill: var(--orange); }
.text-graublaugruen { color: var(--taubenblau); fill: var(--taubenblau); }  /* deprecated */
.text-sand {          color: var(--sand); fill: var(--sand); }
.text-taubenblau {    color: var(--taubenblau); fill: var(--taubenblau); }
.text-graugruen {     color: var(--graugruen); fill: var(--graugruen); }
.text-weinrot {       color: var(--weinrot); fill: var(--weinrot); }
.text-braun {         color: var(--braun); fill: var(--braun); }
.text-dunkelbraun {   color: var(--dunkelbraun); fill: var(--dunkelbraun); }
.text-oliv {          color: var(--oliv); fill: var(--oliv); }
.text-gelb {          color: var(--gelb); fill: var(--gelb); }
.text-weiss {         color: white;   fill: white; }
.text-schwarz {       color: black;   fill: black; }

.bg-primary {         background-color: var(--rot) !important; }
.bg-secondary {       background-color: var(--grau) !important; }
.bg-light {           background-color: var(--lichtgrau) !important; }
.bg-lichtblau {       background-color: var(--lichtblau); }
.bg-rot {             background-color: var(--rot); }
.bg-grau {            background-color: var(--grau); }
.bg-blau {            background-color: var(--blau); }
.bg-hellblau {        background-color: var(--hellblau); }
.bg-gruen {           background-color: var(--gruen); }
.bg-hellgruen {       background-color: var(--hellgruen); }
.bg-lila {            background-color: var(--lila); }
.bg-pink {            background-color: var(--pink); }
.bg-orange {          background-color: var(--orange); }
.bg-graublaugruen {   background-color: var(--taubenblau); }  /* deprecated */
.bg-sand {            background-color: var(--sand); }
.bg-taubenblau {      background-color: var(--taubenblau); }
.bg-graugruen {       background-color: var(--graugruen); }
.bg-weinrot {         background-color: var(--weinrot); }
.bg-braun {           background-color: var(--braun); }
.bg-dunkelbraun {     background-color: var(--dunkelbraun); }
.bg-oliv {            background-color: var(--oliv); }
.bg-gelb {            background-color: var(--gelb); }
.bg-weiss {           background-color: white; }
.bg-schwarz {         background-color: black; }

.box-item.text-blau:hover,    .box-item.text-blau:focus    { background-color: var(--blau); }
.box-item.text-gruen:hover,   .box-item.text-gruen:focus   { background-color: var(--gruen); }
.box-item.text-lila:hover,    .box-item.text-lila:focus    { background-color: var(--lila); }
.box-item.text-pink:hover,    .box-item.text-pink:focus    { background-color: var(--pink); }
.box-item.text-orange:hover,  .box-item.text-orange:focus  { background-color: var(--orange); }
.box-item.text-taubenblau:hover,  .box-item.text-taubenblau:focus  { background-color: var(--taubenblau); }
.box-item.text-graublaugruen:hover,  .box-item.text-graublaugruen:focus  { background-color: var(--taubenblau); }
.box-item.text-gelb:hover,    .box-item.text-gelb:focus    { background-color: var(--gelb); }
.box-item.text-schwarz:hover, .box-item.text-schwarz:focus { background-color: black; }

.box-item.bg-blau.text-weiss:hover,    .box-item.bg-blau.text-weiss:focus    { color: var(--blau) !important; fill: var(--blau); background-color: white; }
.box-item.bg-gruen.text-weiss:hover,   .box-item.bg-gruen.text-weiss:focus   { color: var(--gruen) !important; fill: var(--gruen); background-color: white; }
.box-item.bg-lila.text-weiss:hover,    .box-item.bg-lila.text-weiss:focus    { color: var(--lila) !important; fill: var(--pink); background-color: white; }
.box-item.bg-pink.text-weiss:hover,    .box-item.bg-pink.text-weiss:focus    { color: var(--pink) !important; fill: var(--pink); background-color: white; }
.box-item.bg-orange.text-weiss:hover,  .box-item.bg-orange.text-weiss:focus  { color: var(--orange) !important; fill: var(--orange); background-color: white; }
.box-item.bg-graublaugruen.text-weiss:hover,  .box-item.bg-graublaugruen.text-weiss:focus  { color: var(--taubenblau) !important; fill: var(--taubenblau); background-color: white; }
.box-item.bg-gelb.text-schwarz:hover,  .box-item.bg-gelb.text-schwarz:focus  { color: var(--gelb) !important; fill: var(--gelb); background-color: black; }
.box-item.bg-schwarz.text-weiss:hover, .box-item.bg-schwarz.text-weiss:focus { color: black !important; fill: white; background-color: white; }
.box-item.bg-hellblau.text-weiss:hover,  .box-item.bg-hellblau.text-weiss:focus    { color: var(--hellblau) !important; fill: var(--hellblau); background-color: white; }
.box-item.bg-hellgruen.text-weiss:hover, .box-item.bg-hellgruen.text-weiss:focus    { color: var(--hellgruen) !important; fill: var(--hellgruen); background-color: white; }

.box-item:hover .svg-icon .text-rot, .box-item:focus .svg-icon .text-rot { color: white; fill: white; }

.contrast-mode .text-primary, .contrast-mode .color-red, .contrast-mode .text-rot,
.contrast-mode .text-blau, .contrast-mode .text-hellblau, .contrast-mode .text-gruen,
.contrast-mode .text-hellgruen, .contrast-mode .text-lila, .contrast-mode .text-pink, .contrast-mode .text-orange,
.contrast-mode .text-graublaugruen, .contrast-mode .text-gelb, .contrast-mode .text-grau,
.contrast-mode .text-sand, .contrast-mode .text-taubenblau, .contrast-mode .text-graugruen,
.contrast-mode .text-weinrot, .contrast-mode .text-braun, .contrast-mode .text-dunkelbraun,
.contrast-mode .text-oliv {
  color: black !important;
}
.contrast-mode .bg-primary, .contrast-mode .bg-secondary,
.contrast-mode .bg-rot, .contrast-mode .bg-blau, .contrast-mode .bg-hellblau,
.contrast-mode .bg-grau, .contrast-mode .bg-gruen, .contrast-mode .bg-hellgruen,
.contrast-mode .bg-lila, .contrast-mode .bg-pink, .contrast-mode .bg-orange, .contrast-mode .bg-graublaugruen,
.contrast-mode .bg-gelb, .contrast-mode .bg-sand, .contrast-mode .bg-taubenblau,
.contrast-mode .bg-graugruen, .contrast-mode .bg-weinrot, .contrast-mode .bg-braun,
.contrast-mode .bg-dunkelbraun, .contrast-mode .bg-oliv {
  background-color: black !important;
  color: white !important;
}
.contrast-mode .bg-gelb.text-schwarz {
  color: white;
}
.contrast-mode .box-item:hover, .contrast-mode .box-item:focus {
  color: white !important;
  background-color: black !important;
}
.contrast-mode .box-item.bg-rot.text-weiss:hover,
.contrast-mode .box-item.bg-rot.text-weiss:focus,
.contrast-mode .box-item.bg-blau.text-weiss:hover,
.contrast-mode .box-item.bg-blau.text-weiss:focus,
.contrast-mode .box-item.bg-gruen.text-weiss:hover,
.contrast-mode .box-item.bg-gruen.text-weiss:focus,
.contrast-mode .box-item.bg-lila.text-weiss:hover,
.contrast-mode .box-item.bg-lila.text-weiss:focus,
.contrast-mode .box-item.bg-pink.text-weiss:hover,
.contrast-mode .box-item.bg-pink.text-weiss:focus,
.contrast-mode .box-item.bg-orange.text-weiss:hover,
.contrast-mode .box-item.bg-orange.text-weiss:focus,
.contrast-mode .box-item.bg-graublaugruen.text-weiss:hover,
.contrast-mode .box-item.bg-graublaugruen.text-weiss:focus,
.contrast-mode .box-item.bg-hellblau.text-weiss:hover,
.contrast-mode .box-item.bg-hellblau.text-weiss:focus,
.contrast-mode .box-item.bg-hellgruen.text-weiss:hover,
.contrast-mode .box-item.bg-hellgruen.text-weiss:focus {
  background-color: white !important;
  color: black !important;
}
.contrast-mode .box-item.bg-gelb.text-schwarz:hover,
.contrast-mode .box-item.bg-gelb.text-schwarz:focus {
  background-color: white !important;
  color: black !important;
}
.text-weiss a {
  color: white;
  text-decoration: underline;
}
.text-weiss a.btn-primary, .text-weiss a.generic-button {
  text-decoration: none;
  background-color: white;
  color: var(--rot);
  outline-color: var(--rot);
}
.text-weiss a.btn-primary:hover, .text-weiss a.generic-button:hover {
  background-color: var(--dunkelrot);
  color: white;
}
.text-schwarz a:not(.btn-primary, .generic-button) {
  color: black;
  text-decoration: underline;
}
.text-schwarz a.btn-primary, .text-schwarz a.generic-button {
  text-decoration: none;
}
.contrast-mode .text-weiss a.btn-primary, .contrast-mode  .text-weiss a.generic-button {
  color: black;
  outline-color: var(--hellgrau);
}
.contrast-mode .text-weiss a.btn-primary:hover, .contrast-mode .text-weiss a.generic-button:hover {
  background-color : var(--dunkelgrau);
  color: white;
}

/* Element in der Ausgabe ausblenden (aber im Layout Builder sichtbar halten) */
.ausblenden {
  display: none;
}


/* Elemente mit farbigem Hintergrund und Text (z.B. fuer bunte Icons) */
.farbig {
  display: inline-block;
  padding: 0.1rem;
}

/* Link zum Aufruf des Feedback-Formular (unten rechts in der Ecke */
#block-blockfeedbacklink {
  position: fixed;
  z-index: 200;
  bottom: 0;
  right: 2%;
  background-color: var(--rot);
  box-shadow: 0 0 5px white;
}
#block-blockfeedbacklink a {
  display: inline-block;
  padding: 0.3em 0.5em;
}
.contrast-mode #block-blockfeedbacklink {
  background-color: black;
}
/*
#block-blockfeedbacklink a:hover, #block-blockfeedbacklink a:focus {
  background-color: var(--rot);
}*/

.section-breakout, .backdrop-breakout {
  width: calc(100vw - calc(var(--scrollbar-width) / 2));
  max-width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 2em 0;
  overflow-x: hidden;
}
.section-breakout:not(.w-container) > .container {
  max-width: inherit;
}

.background-cover {
  background-size: cover;
}

.subpage-image-bg.backdrop-blur {
  padding-top: 66px;
}


.ajax-progress.ajax-progress-throbber {
  position: absolute;
}


/* accessibility elements (icons) as block content */
.accessibility-block {
  position: absolute;
  top: 0.3rem;
  right: 0.5rem;
  z-index : 100;
}
.accessibility-block a {
  padding: 0.2rem 0.3rem;
}
.accessibility-block a:hover, .accessibility-block a:focus {
  box-shadow: 0 0 3px var(--grau);
}


/* sliding-popup (eu cookie compliance) */
#sliding-popup {
  background-color: var(--dunkelrot);
  color: white;
  width: 100%;
  padding-top: 1rem;
  box-shadow: 0 -1px 1rem rgba(255,255,255, 0.5);
}
#sliding-popup .eu-cookie-compliance-content {
  max-width: inherit;
}
#sliding-popup .eu-cookie-compliance-message {
  max-width: 100%;
}
#sliding-popup a {
  color: white;
  text-decoration: underline;
}
#sliding-popup button {
  background-color: rgba(0,0,0,0.2);
  color: white;
  padding: 0.5rem 1rem;
  border: 0;
  margin-top: 0.3rem;
  margin-bottom: 1rem;
}
#sliding-popup button:focus, #sliding-popup button:hover {
  background-color: rgba(0,0,0,0.4);
}
.contrast-mode #sliding-popup {
  background-color: black;
}
.contrast-mode #sliding-popup button {
  border: 1px solid white;
}
.contrast-mode #sliding-popup button:focus, .contrast-mode #sliding-popup button:hover {
  background-color: rgba(255,255,255,0.3);
}
@media (min-width: 576px) {
  #sliding-popup .eu-cookie-compliance-message {
    max-width: 75%;
  }
}


/* Seiten ohne Abstand zum Footer ermoeglichen */
body.no-space-before-footer section {
  padding-bottom: 0;
}
body.no-space-before-footer .footer {
  margin-top: 0 !important;
}

/* Anpassung Layout Pop-Up-Dialog (von Modul popup_message) */
#popup-message-window {
  border: 5px solid var(--rot);
  border-radius: 0;
  max-width: 90%;
  max-height: 90%;
  padding: 0 2em 1em;
}

/* Anpassung Login-Formular für passwortgeschützte Seite (Modul protected_pages) */
form.protected-pages-enter-password {
  padding-top : 1.5em;
}
form.protected-pages-enter-password div.form-type-password {
  display: inline-block;
  max-width: 15em;
  padding-left: 0;
}


/* Highlight-Darstellung (z.B. von News auf der Startseite) */
.box-highlight {
  display: flex;
  flex-direction: row;
  margin-bottom: 2em;
}
.box-highlight.text-pos-left {
  flex-direction: row-reverse;
}
.box-highlight .col-texte {
  width   : 34%;
  z-index : 1;
}
.box-highlight .col-texte .texte {
  min-height : calc(100% - 4em);
  padding    : 7% 9% 7% 9%;
  margin-top : 2em;
  margin-left : -4em;
}
.box-highlight.text-pos-left .col-texte .texte {
  margin-left: inherit;
  margin-right : -4em;
}
.box-highlight .col-medien {
  width: 66%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.box-highlight .col-medien img {
  min-width: 100%;
  height: auto;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .box-highlight {
    display: inherit;
  }
  .box-highlight .col-texte,
  .box-highlight .col-medien {
    width: 100%;
    position: relative;
  }

  .box-highlight .col-texte .texte,
  .box-highlight.text-pos-left .col-texte .texte {
    padding: 4%;
    margin-top : -1em;
    height: auto;
    margin-left: 1em;
    margin-right: 1em;
    width: auto;
  }
}

/* Besonderheiten Darstellung Swiper für Highlight-News */
@media (max-width: 768px) {
  .block-views-blocknews-swiper-block-1 .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom : inherit;
    top: min(41vw, 240px);
  }

  .block-views-blocknews-swiper-block-1 div.swiper-button-prev,
  .block-views-blocknews-swiper-block-1 div.swiper-button-next {
    top: min(200px, 30vw);
  }
}
@media (max-width: 576px) {
  .block-views-blocknews-swiper-block-1 .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom : inherit;
    top    : min(53vw - 3rem);
  }
}

/* Besonderheiten Darstellung View Higlight-News als Swiper */
.view-news-swiper .view-content {
  position: relative;  /* damit die Prev-/Next-Buttons einen Bezug haben */
}


/* Styles für Text mit Overlap */
.block .overlap {
  /*outline: 1px solid greenyellow;*/
}
.block .overlap .text-inner {
  padding: 1.5rem;
  margin-top: -2rem;
  margin-right: 2rem;
  margin-left: 2rem;
  z-index: 2;
  position: relative;
}
.block .overlap .text-inner > p:last-of-type {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .block .row.overlap > div {
    align-self: center;
  }
  .block .overlap .text-inner {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .block .left-overlap .text-inner {
    margin-left: -4rem
  }
  .block .right-overlap .text-inner {
    margin-right: -4rem;
  }
  .block .row.right-overlap {
    flex-direction: row-reverse;
  }
}


/* Elemente innerhalb des Blocks an den Rändern positionieren */
.block .position-x-right {
  /*outline: 2px solid yellow;*/
  position: absolute;
  right: 1rem;
}
.block .row .position-x-right {
  right: 2rem; /* 2rem da bereits padding durch col */
}
.block .position-x-left {
  /*outline: 2px solid yellow;*/
  position: absolute;
  left: 1rem;
}
.block .row .position-x-left {
  left: 2rem;
}
.block .position-x-center {
  /*outline: 2px solid yellow;*/
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.block .position-y-top {
  /*outline: 2px solid yellow;*/
  position: absolute;
  top: 1rem;
}
.block .position-y-bottom {
  /*outline: 2px solid yellow;*/
  position: absolute;
  bottom: 1rem;
  margin-bottom: 0;
}
.block .position-y-center {
  /*outline: 2px solid yellow;*/
  position: absolute;
  top: 50%;
  transform: translate(-50%);
}

/* Proportionen (Zuschnitte) auch als Styles verfügbar machen (z.B. für Video) */
.aspect-ratio-3x1 { aspect-ratio: 3; }
.aspect-ratio-2x1 { aspect-ratio: 2; }
.aspect-ratio-3x2 { aspect-ratio: calc(3/2); }
.aspect-ratio-4x3 { aspect-ratio: calc(4/3); }
.aspect-ratio-1x1 { aspect-ratio: 1; }
.aspect-ratio-3x4 { aspect-ratio: calc(3/4); }
.aspect-ratio-2x3 { aspect-ratio: calc(2/3); }


/*
 * Formatierungen für Medien (Bild oder Video) als Hintergrund des Block-Textes
 *  Die Spalten von Bild und Text werden erstmal nebeneinander gesetzt,
 *  auf gleiche Größe gebracht und dann aufeinander geschoben.
*/
.row.block-text-overlay {
  flex-wrap: nowrap;
}
.row.block-text-overlay .text {
  transform: translateX(-100%);
  padding: 1rem 2rem;
}
.row.overlay-cover {
  position: relative;
  overflow: hidden;
}
.row.overlay-cover .picture-inner {
  height: 100%;
  width: 100%;
}
.row.overlay-cover:not(.media-aspect-ratio) .picture-inner {
  position: absolute;  /* damit das Bild die Box nicht in ggf. vergrößert */
  width: calc(100% - 30px); /* Padding durch cols wieder ausgleichen */
}
.media-format-cover video,
.row.overlay-cover .picture-inner > img,
.row.overlay-cover .picture-inner > .field > img {
  min-width: 100%;
  min-height: 100%;
  width: inherit; /* eine Größe muss gesetzt sein, damit object-fit funktioniert */
  height: inherit;
  max-width: unset;
  object-fit: cover;
}
.row.overlay-cover .picture-inner a.picture-link,
.row.overlay-cover .picture-inner .media {
  height: 100%;
}
/* ein Video mit "Zuschnitt" wird immer füllend angezeigt */
.row.media-aspect-ratio .picture-inner video {
  object-fit: cover;
}