/* Basiseinstellungen für die Navigation */
.ddsubnav-relative {
    position:relative;
}

.navbar-mainnavigation .nav-item {
  display: unset !important;
}

.navbar-mainnavigation .nav-link:not(.nav-link-toggle)::before {
  display: none !important;
  visibility: hidden !important;
}

.navbar-mainnavigation {
    padding-top: 0px;
}

#page-header .navbar-brand-image img.logo {
  max-height: var(--ddnet-logo-max-height, 80px);
  transform: unset;
  top: 0;
  margin-bottom: 10px;
  width: auto;
  height: auto;
}

.cf-cookie-openconsent {
  left: 15px;
  right: unset;
  
}

/*
 * Die Höhe gilt nur für Bootstrap-Package-Inhaltselemente mit Hintergrundbild
 * in der Kopfspalte. Slider behalten ihre eigene Höhe.
 */
.ddnet-header-media .frame-has-backgroundimage {
    height: var(--ddnet-header-background-height, auto);
    overflow: hidden;
}

/*
 * Ein reines Bild-Inhaltselement nutzt im Kopfbereich die gesamte verfügbare
 * Breite. Die Containerbegrenzung des Bootstrap Package bleibt im normalen
 * Seiteninhalt unverändert bestehen.
 */
.ddnet-header-media .frame-type-image {
    padding-top: 0;
    padding-bottom: 0;
}

.ddnet-header-media .frame-type-image > .frame-group-container > .frame-group-inner > .frame-container {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.ddnet-header-media .frame-type-image .gallery-row {
    gap: 0;
}

.ddnet-header-media .frame-type-image .gallery-item,
.ddnet-header-media .frame-type-image .gallery-item figure,
.ddnet-header-media .frame-type-image .gallery-item figure > a,
.ddnet-header-media .frame-type-image .gallery-item picture {
    width: 100%;
    max-width: none;
}

.ddnet-header-media .frame-type-image .gallery-item figure {
    margin-right: auto;
    margin-left: auto;
}

.ddnet-header-media .frame-type-image .gallery-item img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}


/* background: #e1e1e1; */ /* wird über scss gesetzt */

.cf-cookie-openconsent #icon {
		font-size: 32px;
	
}	
/*	color: gray; */ /* wird über scss gesetzt */

.embed-responsive [data-autoscale]{    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width:100%;
    height: 100%;
    border: 0;
}    

 .navbar > .container.navbar-toogler {
    display: none;
    background-color: #ededed;
    border-color: transparent;
    border-radius: 0;
    margin-top: 20px;
 }

 .navbar-toggler:focus {
     box-shadow: none;
 }

.textpic-flex-header,
.textmedia-flex-header {
    width: 100%;
}

.gallery-item img, .gallery-item picture {
    width: auto;
}

/*
 * Bei den eigenen Umfluss-Positionen 201/202 beschreibt imagewidth die
 * maximale Breite eines einzelnen Bildes. Die Galeriebreite ergibt sich aus
 * der vom Bootstrap Package ausgegebenen Spaltenklasse und dem Bildabstand.
 */
:is(.textpic-flex-gallery, .textmedia-flex-gallery).ddnet-flex-gallery-fixed-width {
    --ddnet-gallery-target-width: var(--ddnet-gallery-image-width);
}

:is(.textpic-flex-gallery, .textmedia-flex-gallery).ddnet-flex-gallery-fixed-width:has(.gallery-item-size-2) {
    --ddnet-gallery-target-width: calc(var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--gallery-gap));
}

:is(.textpic-flex-gallery, .textmedia-flex-gallery).ddnet-flex-gallery-fixed-width:has(.gallery-item-size-3) {
    --ddnet-gallery-target-width: calc(var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--gallery-gap) + var(--gallery-gap));
}

:is(.textpic-flex-gallery, .textmedia-flex-gallery).ddnet-flex-gallery-fixed-width:has(.gallery-item-size-4) {
    --ddnet-gallery-target-width: calc(var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--gallery-gap) + var(--gallery-gap) + var(--gallery-gap));
}

:is(.textpic-flex-gallery, .textmedia-flex-gallery).ddnet-flex-gallery-fixed-width:has(.gallery-item-size-5) {
    --ddnet-gallery-target-width: calc(var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--gallery-gap) + var(--gallery-gap) + var(--gallery-gap) + var(--gallery-gap));
}

:is(.textpic-flex-gallery, .textmedia-flex-gallery).ddnet-flex-gallery-fixed-width:has(.gallery-item-size-6) {
    --ddnet-gallery-target-width: calc(var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--ddnet-gallery-image-width) + var(--gallery-gap) + var(--gallery-gap) + var(--gallery-gap) + var(--gallery-gap) + var(--gallery-gap));
}

:is(.textpic-flex-gallery, .textmedia-flex-gallery).ddnet-flex-gallery-fixed-width .gallery-item {
    flex: 0 0 min(100%, var(--ddnet-gallery-image-width));
    width: auto;
}

:is(.textpic-centered, .textmedia-centered) .gallery-item > figure.image,
.gallery-item > figure.image:is(.imageorient-0, .imageorient-8) {
    margin-inline: auto;
}

.gallery-item > figure.image:has(> figcaption.caption) {
    display: table;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}

.gallery-item > figure.image > figcaption.caption {
    display: table-caption;
    caption-side: bottom;
    overflow-wrap: anywhere;
}


@media (min-width: 768px) and (max-width: 991px) {
  .textmedia-right.textmedia-right-flex .textmedia-item, 
  .textmedia-right.textmedia-right-flex .textpic-item, 
  .textmedia-left.textmedia-left-flex .textmedia-item, 
  .textmedia-left.textmedia-left-flex .textpic-item, 
  .textpic-right.textpic-right-flex .textmedia-item, 
  .textpic-right.textpic-right-flex .textpic-item, 
  .textpic-left.textpic-left-flex .textmedia-item, 
  .textpic-left.textpic-left-flex .textpic-item {
    width: 100%;
  }
}

@media (min-width: 992px) {
    .textpic.textpic-left.textpic-left-flex,
    .textpic.textpic-right.textpic-right-flex,
    .textmedia.textmedia-left.textmedia-left-flex,
    .textmedia.textmedia-right.textmedia-right-flex
    
    {
        display:flow-root;
    }
    .textpic-left-flex .textpic-item.textpic-gallery.textpic-flex-gallery,
    .textmedia-left-flex .textmedia-item.textmedia-gallery.textmedia-flex-gallery {
        width: auto;
        max-width: 66%;
        float: left;
        margin-right: 1.25rem;
        padding-top: 7px;
    }
    
    .textpic-right-flex .textpic-item.textpic-gallery.textpic-flex-gallery,
    .textmedia-right-flex .textmedia-item.textmedia-gallery.textmedia-flex-gallery {
        width: auto;
        max-width: 66%;
        float: right;
        margin-left: 1.25rem;
        padding-top: 7px;
    }

    .textpic-left-flex .textpic-item.textpic-gallery.textpic-flex-gallery.ddnet-flex-gallery-fixed-width,
    .textmedia-left-flex .textmedia-item.textmedia-gallery.textmedia-flex-gallery.ddnet-flex-gallery-fixed-width,
    .textpic-right-flex .textpic-item.textpic-gallery.textpic-flex-gallery.ddnet-flex-gallery-fixed-width,
    .textmedia-right-flex .textmedia-item.textmedia-gallery.textmedia-flex-gallery.ddnet-flex-gallery-fixed-width {
        width: var(--ddnet-gallery-target-width);
    }
    
    .textpic-item.textpic-text.flex-grow-1.textpic-flex-text,
    .textmedia-item.textmedia-text.flex-grow-1.textmedia-flex-text
    {
        width: auto;
    }
  /*  
  
    .textpic-left-flex .textpic-item, 
    .textpic-right-flex .textpic-item {
        max-width: 66%;
        padding-top: 7px;
        width: auto;    
    }
    .textpic-left-flex .textpic-item  {
        float: left;
        padding-right: 7px;
    }
    .textpic-right-flex .textpic-item {
        float: right;
        padding-left: 7px;
    }
  */
}

@media (max-width:991px) {
 .navbar-mainnavigation .dropdown-toggle:after {
  display:none;
 }
 
 .navbar >  .container.navbar-toogler {
     display: block;
 }
}

/* Transparenter Tabellenhintergrund bei Tabellen über den RTE */

figure .table {
    --bs-table-bg: transparent;
}



/* Erweiterung auf 5 Spalten für Cardgroup, MenuCardDir, MenuThumbnailDir */

@media (min-width:576px) {
  .card-group-element-columns-5
  {
    --cardgroup-columns: 2;
  }
  
  .card-menu-columns-5
  {
    --cardmenu-columns: 2;
  }

  .thumbnail-menu-columns-5
  {
    --thumbnailmenu-columns: 2;
  }
}
@media (min-width:768px) {
   .card-group-element-columns-5
  {
    --cardgroup-columns: 3;
  }
  
  .card-menu-columns-5
  {
    --cardmenu-columns: 3;
  }

  .thumbnail-menu-columns-5
  {
    --thumbnailmenu-columns: 3;
  }
}
@media (min-width:992px) {
   .card-group-element-columns-5  
   {
    --cardgroup-columns: 4;
  }
  
  .card-menu-columns-5
  {
    --cardmenu-columns: 4;
  }

  .thumbnail-menu-columns-5
  {
    --thumbnailmenu-columns: 4;
  }
}
@media (min-width:1200px) {
   .card-group-element-columns-5
  {
    --cardgroup-columns: 5;
  }
  
  .card-menu-columns-5
  {
    --cardmenu-columns: 5;
  }

  .thumbnail-menu-columns-5
  {
    --thumbnailmenu-columns: 5;
  }
}