/* input(1331,10): run-time error CSS1030: Expected identifier, found '#id-modal-cookies'
input(1331,30): run-time error CSS1025: Expected comma or open brace, found ')' */
/*
*   Diese .css-Datei bildet die Basis für das Design. Hier werden die .css-Regeln hinterlegt, welche über mehrere Seiten verwendet werden, 
*   oder so grundlegend sind, dass keine Einordnung auf eine Unterseite Sinn macht.

    Diese .css-Datei enthält folgenden Inhalt:

    0. Standard-Schriftart
    1. Allgemeine Stile
    2. Footer
    3. Buttons
    4. Container
    5. Karuselle (aus Slick)
    6. Bilder und Zoom von Bildern (Zoomen beim Hovern)
    7. Banner
    8. Modal: Medien
    9. Counter
    10. Was ist Daphne Collection?
    11. Modal: Generischer Text
    12. Modal: Anmwekung Verfassen
    13. -Ethisch Bedenklich-
    14. Wasserfall
    15. Ladeindikator, Modal: Bitte warten
    16. Modal: Share
    17. Modal: Mail/Digitale Vorlage
    18: Sammlungskarusell
    19. Modal: Cookie
    20. Einfacher Audio-Player
    21. Einstellungen (nur zu Testzwecken)

*/

/************************************************************************************/
/* 0. Standard-Schriftart */
/************************************************************************************/

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/fallback/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Roboto'), local('Roboto-Regular'),
         url('../fonts/fallback/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fallback/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/fallback/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/fallback/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/fallback/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/fallback/roboto-v18-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Roboto Bold'), local('Roboto-Bold'),
         url('../fonts/fallback/roboto-v18-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fallback/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/fallback/roboto-v18-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/fallback/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/fallback/roboto-v18-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* cuprum-regular - latin */
@font-face {
    font-family: 'Cuprum';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/fallback/cuprum-v9-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Cuprum Regular'), local('Cuprum-Regular'),
         url('../fonts/fallback/cuprum-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fallback/cuprum-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/fallback/cuprum-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/fallback/cuprum-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/fallback/cuprum-v9-latin-regular.svg#Cuprum') format('svg'); /* Legacy iOS */
}
/* cuprum-700 - latin */
@font-face {
    font-family: 'Cuprum';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/fallback/cuprum-v9-latin-700.eot'); /* IE9 Compat Modes */
    src: local('Cuprum Bold'), local('Cuprum-Bold'),
         url('../fonts/fallback/cuprum-v9-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/fallback/cuprum-v9-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/fallback/cuprum-v9-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/fallback/cuprum-v9-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/fallback/cuprum-v9-latin-700.svg#Cuprum') format('svg'); /* Legacy iOS */
}

/************************************************************************************/
/* 1. Allgemeine Stile */
/************************************************************************************/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

*::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.form-control {
    border-radius: 0;
    height: calc(3rem);
}

.form-control:focus {
    border-color: #000000;
    border-color: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
}


html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;   /* Fallback for IE */
    font-family: var(--dc-font-family);
    color: #333333;
    background-color: #fff;
    padding-top: 97px;
}

@media only screen and (max-width:768px) {
    body {
        padding-top: 83px;
    }
}

body.body-alt {
    padding-top: 0 !important;
}


h1, h2, h3, h4 {
    font-family: "Cuprum", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Fallback for IE */
    font-family: var(--dc-font-family-accent);
}

a {
    color: black;
    text-decoration: none;
}

a:hover {
    color: rgb(78, 78, 84);
    text-decoration: none;
}

/*
    Links im Text wie auch Überschriften beim Hover unterstrichen werden
*/
section a:not(.btn):hover {
    text-decoration: underline;
}




.clickable {
    cursor: pointer;
}

.custom-internetkommentar {
    margin-top: 2.5rem;
    text-align: start !important;
}

.hidden {
    display: none !important;
}


a.skd-link-caret:hover {
    text-underline-offset: 3px;
}

a.skd-link-caret:focus-visible {
    outline: 2px solid black;
    outline-offset: 2px;
}


/* From Font Awesome Documentation: https://fontawesome.com/v5/docs/web/advanced/css-pseudo-elements*/
/* Step 1: Common Properties: All required to make icons render reliably */
a.right-caret::before, span.skd-link-caret::before, a.skd-link-caret::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* From Font Awesome Documentation: https://fontawesome.com/v5/docs/web/advanced/css-pseudo-elements*/
/* Step 2: Reference Individual Icons */
a.right-caret::after, span.right-caret::after, span.skd-link-caret::after, a.skd-link-caret::after {
    display: inline-block;
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    content: "\f0da";
    margin-left: 7px;
    vertical-align: -0.5px
}

    a.skd-link-caret::after:hover {
        background-color: black;
    }


/************************************************************************************/
/* 2. Footer */
/************************************************************************************/
footer {
    border-top: 1px solid #e2e2e2;
    font-size: 14px;
    margin-top: 60px;
    padding-top: 30px;
    padding-bottom: 30px;
}

footer img {
    max-height: 40px;
}

footer .block-links a {
    display: block;
}

footer .social-links a {
    margin: 0 20px;
}

footer a {
    display: inline-block;
}

footer .external-links {
    font-size: 12px;
}

/************************************************************************************/
/* 3. Buttons */
/************************************************************************************/

.btn {
    border-radius: 0;
    padding: 10px;
}


.btn-primary, .btn-dark {
    background-color: var(--dc-dark-accent-color);
    border: none;
}

    .btn-primary:hover, .btn-dark:hover, .btn-primary:active, .btn-dark:active, .btn-primary:active:focus, .btn-dark:active:focus {
        background-color: var(--dc-dark-accent-color) !important;
        opacity: 0.9 !important;
    }

    .btn-primary:focus, .btn-dark:focus {
        box-shadow: none;
    }

    .btn-primary:focus-visible, .btn-dark:focus-visible {
        outline: 2px solid black;
        outline-offset: 2px;

    }
.btn-standard-dark-neutral-color {
    background-color: var(--dc-dark-neutral-color, var(--dc-dark-accent-color));
}

.btn-secondary, .btn-default {
    color: inherit;
    background-color: var( --dc-medium-neutral-color) !important;
    border: none;
}

    .btn-secondary:hover, .btn-default:hover, .btn-secondary:focus, .btn-default:focus {
        background-color: inherit;
        filter: brightness(0.9);
    }

    .btn-secondary:active, .btn-default:active, .btn-secondary:target, .btn-default:target {
        background-color: inherit;
        filter: brightness(0.8);
    }


    .btn-secondary:focus, .btn-default:focus {
        box-shadow: none;
    }

    .btn-secondary:focus-visible, .btn-default:focus-visible {
        outline: 2px solid black;
        outline-offset: 2px;
    }

.btn-secondary:disabled, .btn-default:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


.btn-link {
    all: unset;
}

    .btn-link:hover {
        color: inherit;
        opacity: 0.8;
        text-underline-offset: 3px;
    }

.btn-bordered {
    border: none; /* Überschreiben eines nicht gewollten SKD-Stils */
}

.btn > i {
    margin-left: 5px;
}


/************************************************************************************/
/* 4. Container */
/************************************************************************************/

.text-container {
    margin-left: 15px;
    margin-right: 15px;
    padding-bottom: 10px;
    text-align: center;
    font-size: 1.1em;
}

.content-container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.bg-gray {
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(241, 241, 241, 0.7), rgb(255, 255, 255));
}

.bg-gray-light {
    color: #000;
    background-color: #eee
}

.bg-gray-lighter {
    color: #000;
    background-color: #f7f7f7
}


.crop-center {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text-container h1, h2, h3, h4 {
    margin-bottom: 20px;
}

.smaller-width {
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 992px) {
    .smaller-width {
        max-width: 800px
    }
}



.small-width {
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 768px) and (max-width:1199px) {
    .small-width {
        max-width: 1000px;
        margin-right: 15px;
        margin-left: 15px
    }
}

@media (min-width: 1200px) {
    .small-width {
        max-width: 800px
    }
}

/* Like small-width, but below 1200px it takes up the entire width of the page */
.small-to-full-width {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 992px) {
    .small-to-full-width {
        max-width: 1140px; /* Gesamte Container-Breite*/
    }
}

.medium-width {
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 768px) and (max-width:1199px) {
    .medium-width {
        max-width: 1000px;
        margin-right: 15px;
        margin-left: 15px
    }
}

@media (min-width: 1200px) {
    .medium-width {
        max-width: 1140px
    }
}

/************************************************************************************/
/* 5. Karuselle */
/************************************************************************************/

/* Blätterpfeile etwas größer und mit schwarzem Hintergrund*/
.carousel-control-prev-icon,
.carousel-control-next-icon {
    border: 2px solid black;
    border-radius: 3px;
    padding: 13px;
    background-color: black;
}

/* Caption im Text volle Breite und grau-transparenter Hintergrund */
.carousel-caption {
    background-color: rgba(6, 6, 6, 0.32);
    max-width: 1200px;
    padding: 20px;
}

.carousel-caption-fully-covered {
    background-color: rgba(6, 6, 6, 0.7);
    padding: 120px;
    height: 100%;
    width: 100%;
    bottom: 0px !important;
    right: 0 !important;
    left: 0 !important;
    max-width: 100% !important;
    display: grid;
    text-align: center;
    color: #ffffff;
}

.carousel-fully-covered-centered-text {
    margin-bottom: auto;
    margin-top: auto;
}

.carousel-fully-covered-background-image {
    height: 50vh;
    width: 100%;
    object-fit: cover;
    filter: brightness(0.75);
}

.carousel-large > .carousel-inner,
.carousel-large > .carousel-inner > .carousel-item {
    height: 500px;
}

/* Beim kleinen Carousel Caption an den unteren Rand*/
.carousel-small .carousel-caption {
    padding-bottom: 5px;
    padding-top: 5px;
    bottom: 0;
    max-width: 260px;
}

/* Beim kleinen Carousel die Pfeiler ganz links und rechts anpappen*/
.carousel-small .carousel-control-prev,
.carousel-small .carousel-control-next {
    width: inherit;
}

.carousel-small img {
    max-height: 237px;
    max-width: 100%;
}

/* Bilder Opacity Effekt, wenn Column gehovert wird */
.carousel-small .col:hover img {
    opacity: 0.85;
}

.carousel-small .fas {
    color: white;
}

.carousel-small .fas:hover {
    color: #d0d0d0;
}

#teaserCarousel .title-container {
    position: relative;
    width: 100%;
    height: 100%;
}

#teaserCarousel .title-container h1 {
    position: absolute;
    top: 50px;
    left: 15%;
    max-width: 400px;
    font-size: 42px;
    font-weight: bold;
    color: white;
}

#id-generic-carosuell-container .generic-carosuell-inner-container {
    width: 100%;
}

#id-generic-carosuell-container .slick-arrow::before {
    color: var(--dc-dark-accent-color);
    font-size: 2.5rem;
}

#id-generic-carosuell-container .slick-prev {
    left: -50px;
}


#id-generic-carosuell-container figure {
    margin: unset;
    padding: 20px;
}

#id-generic-carosuell-container .details-carousell-element-image-wrapper {
    max-height: 223px;
    overflow: hidden;
}

@media(max-width: 1200px) {
    #id-generic-carosuell-container {
        margin-left: 10px;
        margin-right: 10px;
    }

    #id-generic-carosuell-container .details-carousell-element-image-wrapper {
        max-height: 182px;
    }
}


@media(max-width: 992px) {
    #id-generic-carosuell-container .details-carousell-element-image-wrapper {
        max-height: 210px;
    }
}

@media(max-width: 768px) {

    #id-generic-carosuell-container .details-carousell-element-image-wrapper {
        max-height: 324px;
    }
}


#id-generic-carosuell-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#id-generic-carosuell-container figcaption {
    display: flex;
    flex-direction: column;
    margin-top: 1.1rem;
}

    #id-generic-carosuell-container figcaption p {
        display: -webkit-box; /* Use flexbox model for webkit browsers */
        -webkit-box-orient: vertical; /* Set the orientation to vertical */
        overflow: hidden; /* Hide the overflowed content */
        text-overflow: ellipsis; /* Add ellipsis at the end */
        -webkit-line-clamp: 3; /* Limit the number of lines to 2 */
        line-clamp: 3; /* Non-standard property for other browsers */

        font-size: 1.1em;
        text-align: left;
        display: none; /* !!!!!Standardmäßig ausgeschalten. Über customer.css einbenden */
    }



/************************************************************************************/
/* 6. Bildern und Zoom von Bildern (Zoomen beim Hovern) */
/************************************************************************************/
.shrink:hover {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
    -o-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

/* Bilder sollen beim Shrinken etwas durchsichtig werden*/
img.shrink:hover {
    opacity: 0.8;
}

.zoom-image-container {
    overflow: hidden
}

.zoom-image {
    -o-transition: transform .5s;
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    transition: transform .5s
}

.zoom-image:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05)
}


/************************************************************************************/
/* 7. Banner */
/************************************************************************************/

.banner-container {
    margin-bottom: 40px;
    padding: 27px;
}

.banner-background-color {
    color: white;
    background-color: rgba(220, 20, 60);
}

.banner-info-background-color {
    color: white;
    background-color: rgba(86, 86, 86);
}

.home-container {
    display: flex;
    align-items: center;
    padding-top: 20px;
}

.home-container-title {
    display: flex;
    flex-direction: column;
    /*margin-top: 20px*/
}

.home-container-title h2 {
    margin-bottom: -15px
}

/************************************************************************************/
/* 8. Modal: Medien */
/************************************************************************************/


#modal-medien.modal {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding-right: 0 !important;
}
#modal-medien:not(.show) {
    z-index: -1;
    display: none !important;
}

#modal-medien .modal-medien-title {
    width: 100%;
    text-align: center;
}

#modal-medien .modal-dialog {
    display: flex;
    min-width: 100vw;
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    background-color: #f7f7f7;
}

@media(min-width: 1200px) {
    #modal-medien .modal-dialog {
        min-width: 80vw;
        width: 80vw;
        min-height: 90vh;
        height: 90vh;
    }
}


#modal-medien .modal-content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    height: 100%;
    width: 100%;
}

#modal-medien .modal-header {
    padding: 40px 40px 0 40px;
    text-align: center;
}

    #modal-medien .modal-header h3 {
        margin-bottom: 0;
    }


#modal-medien .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    padding: 0;
    margin: 0px 40px 0px 40px;
}

#modal-medien .modal-medien-src-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    background: #f0f0f0;
}

    #modal-medien .modal-medien-src-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        flex-shrink: 0;
    }


#modal-medien .modal-medien-audio-player-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

#modal-medien .modal-medien-audio-player-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: auto;
}

    #modal-medien .modal-medien-audio-player-image-wrapper img {
        opacity: 0.5;
    }

#modal-medien .complex-audio-player {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
}

    #modal-medien .complex-audio-player audio {
        margin: 20px 40px 20px 40px;
        width: 100%;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        border-radius: 32px;
    }

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #modal-medien .complex-audio-player audio {
        display: none;
    }
}


#modal-medien .simple-audio-player {
    display: none;
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #modal-medien .simple-audio-player {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

#modal-medien .modal-body .modal-medien-dokumente-container {
    padding-right: 50px;
    width: 100%;
    height: 100%;
}

    #modal-medien .modal-body .modal-medien-dokumente-container embed {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

#modal-medien .modal-medien-dokumente-text {
    margin: 40px 40px 0 40px;
    flex-shrink: 0;
}

#modal-medien video {
    width: 100%;
    height: 100%;
    padding-right: 50px;
    background-color: black;
}

#modal-medien .modal-footer {
    text-align: left;
    padding: 0;
}

#modal-medien .modal-footer-content-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 0 40px 40px 40px;
    width: 100%;
}


/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    #modal-medien .modal-footer-content-container {
        flex-direction: column;
    }
}

#modal-medien .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 215px;
    margin-right: 30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

    #modal-medien .text-container a {
        margin-bottom: 0;
    }

#modal-medien .medien-bottom-functions-container {
    display: flex;
    flex: 2;
    justify-content: center;
}

#modal-medien .medien-license-container {
    flex-shrink: 0;
    margin-top: auto;
}



#modal-medien #id-rechte-container {
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: center;
    margin-top: 0;
}


    #modal-medien #id-rechte-container a {
        padding: 0;
    }

.medien-modal-next-prev {
    position: absolute;
    z-index: 1;
    width: 40px;
    height: 40px;
    font-size: 40px;
    font-family: "The Sans LP3 Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    background: #000;
    border-radius: 100%;
    border: 1px solid transparent;
    -o-transition: opacity .5s;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    transition: opacity .5s;
}

    .medien-modal-next-prev icon {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 5px;
    }


    .medien-modal-next-prev.prev {
        left: 5%;
    }

    .medien-modal-next-prev.next {
        right: 5%;
    }

@media (max-width: 1200px) {
    .medien-modal-next-prev {
        display: none;
    }
}

.medien-kommentar {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* number of lines to show */
    line-clamp: 5;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

#id-medien-toolbox {
    position: absolute;
    z-index: 10000;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px;
    height: 100%;
    transition: width 0.3s ease, background-color, 0.3s ease;
    width: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    cursor: pointer;
}

    #id-medien-toolbox:hover, #id-medien-toolbox:focus-within {
        width: 200px;
        background-color: black;
    }

    #id-medien-toolbox .medien-toolbox-icon {
        min-width: 24px;
        width: 24px;
        height: 24px;
    }

    #id-medien-toolbox img.medien-toolbox-icon {
        filter: invert();
    }



.medien-toolbox-tool {
    all: unset;
    display: flex;
    align-items: center;
    color: white;
    height: 100%;
}


    .medien-toolbox-tool:focus, .medien-toolbox-tool:focus-within {
        outline: none;
    }

    .medien-toolbox-tool:hover, .medien-toolbox-tool:focus-visible {
        margin: 0px -10px; /* Offset, damit Hover bis zum Rand geht */
        padding: 0 10px;
        background-color: rgba(255,255,255, 0.2);
    }


    .medien-toolbox-tool:focus-visible {
        outline: 2px solid white;
        outline-offset: -6px;
    }

    .medien-toolbox-tool i {
        font-size: 24px;
        width: 30px;
    }

.tool-text {
    min-width: 140px;
    width: 140px;
    padding-right: 10px;
    margin-left: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#id-medien-toolbox:hover .tool-text, #id-medien-toolbox:focus-within .tool-text {
    opacity: 1;
}


/************************************************************************************/
/* 9. Counter */
/************************************************************************************/
.odometer-counter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.odometer-element {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

.odometer-text {
    margin-bottom: 5px;
    font-size: x-small;
    color: gray;
}

.odometer-digit {
    font-size: 60px;
    font-weight: bold;
    color: var(--dc-dark-accent-color);
}


/************************************************************************************/
/* 10. Was ist Daphne Collection */
/************************************************************************************/

@media only screen and (max-width: 992px) {
    #aboutDaphneCollectionRow {
        flex-direction: column-reverse;
    }

        #aboutDaphneCollectionRow img {
            margin-bottom: 20px;
        }
}

/************************************************************************************/
/* 11. Generischer Text- Modal */
/************************************************************************************/

#id-modal-generic-text .modal-header {
    padding: 40px 40px 20px 40px;
    border: none;
}

#id-modal-generic-text .modal-body {
    padding: 20px 40px 40px 40px;
    border: none;
}

#id-modal-generic-text .buttons {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/************************************************************************************/
/* 12. Anmerkung verfassen */
/************************************************************************************/

#modalKommentarErfassung .modal-header {
    padding: 40px 40px 20px 40px;
    border: none;
}


#modalKommentarErfassung .modal-body {
    padding: 20px 40px 40px 40px;
}


/************************************************************************************/
/* 14. Wasserfall */
/************************************************************************************/


#id-dc-waterfall .container h2 {
    margin-left: 15px;
}

#id-dc-waterfall .container {
    padding: 0;
}

#id-dc-waterfall #id-dc-waterfall-caption {
    justify-content: center;
}

/************************************************************************************/
/* 15. Ladindikator */
/************************************************************************************/

.js-loading-bar .modal-body {
    display: flex;
    gap: 30px;
    justify-content: center;
    align-items: center;

    margin: 40px;
    padding: 0;
}


/************************************************************************************/
/* 16a. Kollektionen (Banner) */
/************************************************************************************/

#id-dc-kollektionen {
    overflow: hidden;
}

    #id-dc-kollektionen .jumbo-card-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 500px;
        width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('/Content/images/collection-background-platzhalter.jpg?v=_Lx9nxEg3PCQPt18FGkUBjBaHf0');
    }

#id-dc-kollektionen .jumbo-card-content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3rem;
    max-width: 800px;

}

#id-dc-kollektionen h2 {
    text-align: center;
    color: white
}

#id-dc-kollektionen p {
    text-align: center;
    color: white
}

#id-dc-kollektionen .btn-secondary {
    width: fit-content;
    margin-top: 1.6rem;
    border: 2px solid white;
    color: white !important;
    background: transparent !important;
}

/************************************************************************************/
/* 16b. Kollektionen (Unterseite) */
/************************************************************************************/

#id-section-kollektions h2 {
    hyphens: auto;
}

.collections-overview-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 70px;
}

/*
    Zwei Spalten ab 576px
    siehe https://getbootstrap.com/docs/5.0/layout/breakpoints/
*/
@media (min-width: 576px) {
    .collections-overview-grid {
    grid-template-columns: repeat(2, 1fr);
    }
}

/*Drei Spalten ab 992px*/
@media (min-width: 992px) {
    .collections-overview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.collections-grid-image {
    object-fit: cover;
    width: 100%;
    max-height: 100%;
}

.collections-detail-page-image {
    width: 100%;
}


@media (min-width: 992px) {
    .collections-detail-page-image {
        width: 800px;
    }
}



/************************************************************************************/
/* 17. Modal: Mail/Digitale Vorlage */
/************************************************************************************/

#modalMailDigitaleVorlage .modal-header {
    padding: 40px 40px 20px 40px;
    border: none;
}


#modalMailDigitaleVorlage .modal-body {
    padding: 20px 40px 40px 40px;
}

#modalMailDigitaleVorlage .buttons {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

    #modalMailDigitaleVorlage .buttons .btn {
        background-color: var(--dc-medium-neutral-color);
    }

#modalMailDigitaleVorlage .buttons .btn-primary {
    background-color: var(--dc-dark-accent-color);
}

/************************************************************************************/
/* 18. Sammlungskarusell */
/************************************************************************************/

#id-museum-carousel figcaption 
{
    justify-content: center;
}

#id-museum-carousel figure.no-hover 
{
    pointer-events: none;
    cursor: inherit;
}

#id-museum-carousel figure.no-hover:hover {
    opacity: unset;
}

/************************************************************************************/
/* 19. Cookie-Modal  */
/************************************************************************************/

#id-modal-cookies .modal-dialog {
    max-width: 720px;
    overflow: hidden;
    pointer-events: auto;
}

#id-modal-cookies.modal.in {
    display: flex !important;
}

/* Wenn Cooki-Modal sichtbar, dann nur oberer Bereich der Seite ohen Scrollbalken sichtbar */
html:has(#id-modal-cookies.in) {
    overflow: hidden;
    height: 100vh;
}

#id-modal-cookies .skd-logo-dot {
    transform: translate(-50%, -66%);
    position: absolute;
    left: 50%;
}

#id-modal-cookies .modal-header {
    padding: 0px 15px 0 15px;
    border-bottom: none;
    text-align: center;
}

    #id-modal-cookies .modal-header h3 {
        width: 100%;
        font-size: 36px;
        line-height: 3rem;
    }

        #id-modal-cookies .modal-header h3 i {
            font-family: "Baton Turbo Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 18px;
        }



@media (max-width: 1200px) {

    #id-modal-cookies .modal-header h3 {
        font-size: 26px;
        line-height: 2.5rem;
    }

        #id-modal-cookies .modal-header h3 i {
            font-size: 16px;
        }
}

/* Schließen-X an die richtige Stelle positionien  */
#id-modal-cookies button.close {
    display: none;
}

#id-modal-cookies .modal-content {
    padding: 40px 30px 20px 30px;
}



    #id-modal-cookies .modal-content form {
        margin: 20px 0;
    }



#id-modal-cookies .cookie__form summary {
    display: list-item;
    cursor: pointer;
    padding-left: 10px;
    position: relative;
    list-style: none;
    font-family: "Baton Turbo Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
}

    #id-modal-cookies .cookie__form summary::after {
        content: "";
        background: url(data:image/svg+xml;base64,CjxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB3aWR0aD0nMTYnIGhlaWdodD0nMTYnIGZpbGw9JzMwMzAzMCcgc3Ryb2tlPSdub25lJz48cGF0aCBkPSdNMTYgNS41bC0yLTItNiA2LTYtNi0yIDIgOCA4IDgtOHonPjwvcGF0aD48L3N2Zz4=) no-repeat;
        position: absolute;
        right: 10px;
        top: calc(50% - 8px);
        width: 16px;
        height: 16px;
        transition: .3s transform ease-out;
    }

#id-modal-cookies .cookie__checkbox {
    position: relative;
    display: flex;
    align-items: center;
    height: 55px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
    width: -moz-fit-content;
    width: fit-content;
}

    #id-modal-cookies .cookie__checkbox input[type=checkbox] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    #id-modal-cookies .cookie__checkbox label {
        z-index: 2;
        display: block;
        font-size: 16px;
        font-weight: normal;
        padding-left: 34px;
        margin: 0 !important;
        line-height: unset;
    }


        #id-modal-cookies .cookie__checkbox label::before {
            position: absolute;
            right: 100%;
            left: -9px;
            top: 14px;

            width: 25px !important;
            height: 25px !important;
            text-align: center;
            background-color: #eee;
            border: 1px solid transparent;
            border-radius: 2px;
            margin-right: 10px;
            content: '';
            line-height: 24px;
        }


    /* Checked-Stil der Checkbox */
    #id-modal-cookies .cookie__checkbox input[type=checkbox]:checked + label:before {
        content: '\2713';
        background-color: black;
        color: white;
    }

    /* Disabled-Stil der Checkbox */
    #id-modal-cookies .cookie__checkbox input[type=checkbox]:disabled + label:before {
        content: '\2713';
        background-color: #989898;
        color: white;
    }

    /* Disabled-Stil der Checkbox */
    #id-modal-cookies .cookie__checkbox input[type=checkbox]:disabled + label:hover {
        cursor: not-allowed;
    }

#id-modal-cookies details:not(:last-child) {
    border-bottom: 1px solid #989898;
}

#id-modal-cookies summary:hover {
    background: #eee;
}

    #id-modal-cookies summary:hover label {
        cursor: pointer;
    }

        #id-modal-cookies summary:hover label:before {
            border: 1px solid #989898;
        }

#id-modal-cookies .buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/************************************************************************************/
/* 20. Einfacher Audio-Player */
/************************************************************************************/

.simple-audio-player {
    display: inline-block;
    margin: 10px 0;
}

.simple-audio-play-pause-btn {
    /* Positioning */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Box-model */
    width: 60px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* Typography */
    cursor: pointer;
    /* Visual */
    background-color: white;
    /* Misc */
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

    .simple-audio-play-pause-btn:hover {
        opacity: 0.7;
    }

    .simple-audio-play-pause-btn:focus-visible {
        outline: 2px solid black !important;
        outline-offset: 2px;
    }

.simple-audio-play-icon,
.simple-audio-pause-icon {
    /* Box-model */
    font-size: 30px;
    /* Visual */
    color: black;
}

/************************************************************************************/
/* 21. Einstellungen */
/************************************************************************************/


#id-einstellungen {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

    #id-einstellungen * {
        all: revert !important;
    }

    #id-einstellungen details {
        margin-bottom: 20px !important;
        border: 1px solid #aaa !important;
        border-radius: 4px !important;
        padding: 1.5em 1.5em 0 !important;
    }


        #id-einstellungen details summary {
            font-weight: bold !important;
            margin: -1.5em -1.5em 0 !important;
            padding: 1.5em !important;
            list-style: none !important;
            cursor: pointer !important;
        }

        #id-einstellungen details[open] {
            padding: 1.5em !important;
        }

            #id-einstellungen details[open] summary {
                border-bottom: 1px solid #aaa !important;
                margin-bottom: 1.5em !important;
            }


    #id-einstellungen form div {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important;
        margin-bottom: 2px !important;
    }


    #id-einstellungen form input[type='checkbox'] {
        align-self: center !important;
    }

    #id-einstellungen form .button-container {
        display: flex !important;
        justify-content: center !important;

    }

        #id-einstellungen form .button-container button {
            display: flex !important;
            justify-content: center !important;
        }



/**
*   Diese .css-Datei bildet die Stile für alle Navigationselemente (Menü, ...)
*   Diese .css-Datei enthält folgenden Inhalt:
*
*          1. Menüleiste: Logo Left
*          2. Schnellsuche-Bar 
*          3. Responsive Design für Menüleiste
*          4. Paginierungsleiste
*          5. Menüleiste: Logo Middle
*          
*/


/************************************************************************************/
/* 1. Menüleiste: Logo Left */
/************************************************************************************/

#logo-menu-main-container {
    padding: 0
}

#id-menu-main-container {
    flex-shrink: 0;
}

#id-logo-main-container {
    flex-shrink: 1;
    width: auto;
    overflow: hidden;
}

.header-logo {
    line-height: 3.3em;
}

@media only screen and (min-width:990px) {
    .header-logo {
        line-height: inherit;
    }
}

/* Grauer Seperator zwischen Logo und Logo-Text */
.logo-text {
    border-left: 1px solid #e2e2e2;
    padding-left: 10px;
    margin-left: 10px;
}

.header-logo img {
    height: 22px;
    width: auto;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    -webkit-transition: all .4s;
    transition: all .4s;
}

@media only screen and (min-width: 576px) {
    .header-logo img {
        height: 40px;
    }
}

/* Text rechts neben dem abgeschnittenen Logo */
.logo-text {
    font-family: "Cuprum", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Fallback for IE */
    font-family: var(--dc-font-family-accent);
    font-size: 1.5rem;
    background-color: #fafafa;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    -webkit-transition: all .4s;
    transition: all .4s;
}
@media only screen and (min-width: 500px) {
    .logo-text {
        font-size: 2.0em;
    }
}

/************************************************************************************/
/* 2. Schnellsuche-Bar */
/************************************************************************************/

#quickSearchBox {
    display: none; /* Wird in Code auf display: flex gesetzt */

    background-color: #fafafa;
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    box-shadow: #adadad 0 0 2px;
}


#quickSearchBox .btn {
    border-color: black;
}

#quickSearchBox .close {
    position: absolute;
    top: 28px;
    right: 18px;
    font-size: 34px;
}

/* Die Lupe oben rechts wird im Burger Toggler normal links angezeigt (kleine Auflösungen)*/
.search-icon-container {
    display: flex;
    gap: 20px;
    width: 100%;
}

    .search-icon-container #quickSearchIcon {
        all: unset;
        color: inherit;
        cursor: pointer;
    }

.search-icon-container #quickSearchIcon:focus-visible {
    outline: solid black 2px;
    outline-offset: 2px;
}

#id-quickbar-merkliste {
    color: inherit;
    font-size: 15px;
    top: 1px;
}

    #id-quickbar-merkliste:focus-visible {
        outline: solid black 2px;
        outline-offset: 2px;
    }

    #id-quickbar-merkliste i.fa-paperclip {
        transform: rotate(-45deg);
    }

#id-fastsearch-info {
    margin-top: 20px;
}

.quickbar-element {
    position: relative
}

    .quickbar-element-separator::after {
        content: "";
        position: absolute;
        top: 3px;
        right: -11px;
        width: 1px;
        height: 16px;
        background-color: #eee;
    }

/* Bei größeren Auflösungen wird die Lupe+Merkliste direkt in der Navigationsleiste, allerdings rechtsbündig, angezeigt*/
@media only screen and (min-width: 991px) {
    .search-icon-container {
        justify-content: right;
    }

    .collapsed-menu-visible {
        display: none !important;
    }
}

/* Außerdem der Lupe - wenn sie im Toggler angezeigt wird - noch etwas Platz nach links geben*/
@media only screen and (max-width: 990px) {

    .quickbar-element-separator::after {
        content: none;
    }

    .search-icon-container {
        flex-direction: column;
        gap: 0;
    }

    .collapsed-menu-non-visible {
        display: none !important;
    }


}

/************************************************************************************/
/* 3. Responsive Design für Menüleiste */
/************************************************************************************/

/* Den Container in der Navbar für kleinere Auflösungen breiter ziehen, damit noch alles gut reinpasst*/
@media only screen and (max-width:990px) {
    nav > .container {
        max-width: 900px;
        margin-right: 15px;
    }
}

.navbar-toggler {
    border-radius: 0;
    border: none;
    position: absolute;
    right: 25px;
    top: 25px;
}

nav.navbar {
    box-shadow: #adadad 0 0 2px;
    background-color: #fafafa;
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

nav.navbar {
    padding-bottom: 0;
}
/*Navbar kleiner machen, wenn nach unten gescrollt wird*/
nav.navbar.shrink {
    -webkit-transform: translate3d(0, -37px, 0);
    -moz-transform: translate3d(0, -37px, 0);
    -ms-transform: translate3d(0, -37px, 0);
    transform: translate3d(0, -37px, 0);
}

nav.navbar .header-logo {
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

nav.navbar.shrink .header-logo {
    margin-top: 27px;
    -webkit-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* Außerdem Logo und Logo Text verkleinern, wenn Navbar kleiner ist*/
nav.navbar.shrink .header-logo img {
    height: 25px;
}

nav.navbar.shrink .logo-text {
    font-size: 1.5rem;
}

.navbar .navbar-toggler {
    padding: .25rem .45rem;
    z-index: 100;
}

@media only screen and (max-width:990px) {
    /* Ausgeklapptes Menü stylen */
    .inner-menu-container {
        margin-top: 28px;
        margin-bottom: 28px;
    }
}

.navbar .navigation-links-container {
    display: flex;
    gap: 30px;
}



.navigation-link {
    display: flex;
    justify-content: center;
    align-content: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 4rem;

}

    .navigation-link:hover a:not(.dropdown-item), .navigation-link:focus-within a:not(.dropdown-item) {
        box-shadow: inset 0 -4px 0 0 black;
    }


.filter-row .fas {
    color: #afafaf;
    font-size: 1.3em;
}

/* Aktiven Kachel/Listen Button markieren */
.filter-row .filter-button-active .fas {
    color: black;
}

/************************************************************************************/
/* 4. Paginierungsleiste */
/************************************************************************************/
.pagination {
    border-radius: 0;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 64px;
}

.page-link {
    color:#525252;
}

    .page-link:hover {
        color: #525252;
        text-decoration: none;
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

.page-link:focus {
    outline: none;
    box-shadow: none;
}

.page-item.active .page-link {
    background-color: var(--dc-dark-accent-color);
    border-color: #000;
}

/************************************************************************************/
/* 5. Stöbern-Menü */
/************************************************************************************/


#id-menu-stobern, #id-menu-stobern ul {
    background-color: inherit;
}


/******** Submenu Dropdown in Navleiste*/

.navbar .dropdown-submenu {
    position: relative;
}

/* Bei kleinen Auflösungen werden die Items im Dropdownmenü der Navleiste etwas kleiner und mit etwas weniger Abstand angezeigt */
.navbar .dropdown-item img {
    height: 50px;
    width: 50px;
    display: none;
}

.navbar .dropdown-item {
    line-height: 1.5em;
    font-size: 0.9rem;
    padding: .25rem 0.6rem;
    white-space: normal;
}

#id-menu-stobern li {
    padding: 2px;
}

#id-menu-stobern a.dropdown-item:focus-visible {
    outline: 2px solid black;
}

@media only screen and (min-width: 500px) {
    .navbar .dropdown-item {
        font-size: 1.0rem;
        padding: .25rem 1.5rem;
        white-space: nowrap;
    }

    .navbar .dropdown-item img {
        display: inline;
    }
}

.navbar .dropdown-submenu a::after {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}

.navbar .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}



/************************************************************************************/
/* 6. Menüleiste: Logo Middle */
/************************************************************************************/

#id-menu-logo-middle {
    z-index: 2000;
    height: 90px;
    padding: 0 40px;
}

    #id-menu-logo-middle.shrink {
        height: 3px;
    }

    #id-menu-logo-middle #menu-logo-middle-menu-container-top-band {
        height: 0px; /* wird von customer.css überschrieben, wenn nötig*/
    }


    #id-menu-logo-middle .menu-logo-middle-menu-container {
        display: grid;
        grid-template-columns: 2fr 1fr 2fr;
        width: 100%;
    }

    #id-menu-logo-middle #id-menu-logo-middle-title {
        justify-self: left;
        align-self: center;
    }

    #id-menu-logo-middle #id-menu-logo-middle-logo-container {
        justify-self: center;
        align-self: center;
    }




    #id-menu-logo-middle #id-menu-logo-middle-menu-content-container {
        justify-self: right;
        display: flex;
        align-items: center;
        gap: 20px;
    }


    #id-menu-logo-middle #id-menu-advanced-search {
        margin: 0;
    }

    #id-menu-logo-middle .navigation-link {
        all: unset;
        position: relative;
        font-size: 19px;
        font-weight: bold;
        text-transform: unset;
        cursor: pointer;
    }

        #id-menu-logo-middle .navigation-link:focus-visible, #id-menu-logo-middle .navigation-link:has(a:focus-visible) {
            outline: 2px solid black;
            outline-offset: 2px;
        }

        #id-menu-logo-middle .navigation-link a:focus {
            outline: none;
        }

        #id-menu-logo-middle .navigation-link a {
            display: flex;
            align-items: center;
            gap: 5px;
        }

    #id-menu-logo-middle .quickbar-element {
        all: unset;
        cursor: pointer;
    }

        #id-menu-logo-middle .quickbar-element:focus-visible, #id-menu-logo-middle #id-menu-logo-middle-logo:focus-visible {
            outline: 2px solid black;
        }


#id-menu-logo-middle .navbar-toggler {

    position: unset;
    top: 0;
    left: 0;
}

@media (min-width: 992px) and (max-width:1200px) {
    #id-menu-logo-middle {
        height: 130px;
    }


        #id-menu-logo-middle .menu-logo-middle-menu-container {
            position: relative;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 27px 10px;
        }

        #id-menu-logo-middle #id-menu-logo-middle-logo-container {
            display: flex;
            justify-content: center;
            width: 100%;
            grid-row: 1;
            grid-column: 1 / span 2;
        }

            #id-menu-logo-middle #id-menu-logo-middle-logo-container::after {
                content: '';
                display: block;
                position: absolute;
                width: 100vw;
                border-bottom: 1px solid #000;
                margin-left: -4px;
                top: 43px; /* empirisch */
            }


        #id-menu-logo-middle #id-menu-logo-middle-title {
            grid-row: 2;
            grid-column: 1;
            margin-bottom: -17px; /* empirisch */
        }

        #id-menu-logo-middle #id-menu-logo-middle-menu-content-container {
            grid-row: 2;
            grid-column: 2;
            margin-bottom: -17px; /* empirisch */
        }

        #id-menu-logo-middle #id-menu-logo-middle-logo img {
            height: 29px;
        }


}

@media (max-width: 992px) {

    #id-menu-logo-middle {
        align-items: flex-start;
        height: 117px;
    }

        #id-menu-logo-middle:has(.show), #id-menu-logo-middle:has(.collapsing) {
            height: fit-content;
        }


        #id-menu-logo-middle .menu-logo-middle-menu-container {
            position: relative;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: auto auto auto;
            gap: 0px 10px;
        }

        #id-menu-logo-middle #id-menu-logo-middle-logo-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            width: 100%;
            grid-row: 1;
            grid-column: 1 / span 2;
        }

            #id-menu-logo-middle #id-menu-logo-middle-logo-container::after {
                content: '';
                display: block;
                position: absolute;
                width: 100vw;
                border-bottom: 1px solid #000;
                margin-left: -4px;
                top: 62px;
            }


        #id-menu-logo-middle #id-menu-logo-middle-title {
            grid-row: 2;
            grid-column: 1;
            margin: 20px 0 10px 0;
        }


        #id-menu-logo-middle #id-menu-logo-middle-logo img {
            height: 29px;
        }



        #id-menu-logo-middle .navbar-toggler {
            display: block;
            grid-row: 2;
            grid-column: 2;
            margin: 20px 0 10px 0;
            width: fit-content;
            justify-self: flex-end;
        }

        #id-menu-logo-middle #id-menu-logo-middle-menu-content-container {
            flex-direction: column;
            align-items: flex-start;
            height: 0;
            width: 100%;
            overflow: hidden;
            grid-row: 3;
            grid-column: 1 / span 2;
        }
            #id-menu-logo-middle #id-menu-logo-middle-menu-content-container.show {
                height: 100%;
                overflow: visible;
            }

        #id-menu-logo-middle #quickSearchIcon {
            margin-bottom: 20px;
        }
}

@media (max-width: 500px) {

    #id-menu-logo-middle {
        padding: 0 20px;
    }
}
/**
*   Diese .css-Datei bildet die Stile der Suchergebnissanzeigen.
*   Diese .css-Datei enthält folgenden Inhalt:
*
           0. Allgemein
*          1. Wasserfallanzeige
*          2. Listenanzeige
*          3. Suche nach: Suchbegriffe
*          4. Text.Ansicht
*          5. Bereich über Suchergebnisse: Suchergbnis-Steuerelemente
*          6. Facetten
*          7. Multi-Range-Slider
*          8. Titel für Suchergebnisseite
*
*   Hinweis: Die Kartenazeige wird unter "map.css" behandelt.
*/

/************************************************************************************/
/* 0. Allgemein */
/************************************************************************************/

#id-search-results-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

    #id-search-results-grid section#id-search-result-waterfall, #id-search-results-grid section#id-search-result-list {
        padding-top: 0;
        margin-top: 0;
    }

    #id-search-results-grid.filter-left {
        grid-template-columns: 300px 1fr;
    }

    #id-search-results-grid.filter-right {
        grid-template-columns: 1fr 300px;
    }

    #id-search-results-grid.filter-none {
        grid-template-columns: 1fr;
    }

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    #id-search-results-grid {
        max-width: 960px;
    }
}

@media only screen and (max-width: 992px) {
    #id-search-results-grid {
        position: relative;
        grid-template-columns: 1fr !important;
    }
}


/************************************************************************************/
/* 1. Wasserfallanzeige */
/************************************************************************************/

.waterfall {
    display: none;
}

@media only screen and (max-width: 576px) {
    #id-dc-waterfall {
        margin-right: 15px;
        margin-left: 15px;
        margin-bottom: 3rem;
    }
}

#waterfall-loader .spinner-container {
    display: flex;
    justify-content: center;
    margin: 68px;
}

.hover-container {
    display: none;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    font-size: 14px;
    z-index: 10;
    outline: #ffffff solid 15px;
    -webkit-box-shadow: 0 0 12px 17px rgba(0,0,0,0.39);
    -moz-box-shadow: 0 0 12px 17px rgba(0,0,0,0.39);
    box-shadow: 0 0 12px 17px rgba(0,0,0,0.39);
}

.tile-item:hover .hover-container {
    display: block;
}

.tile-item:hover {
    outline: none;
}

/* Für A11y: Tastaturbedinung verbessern */
.tile-item:has(a:focus) .hover-container {
    display: block;
}



    .tile-item a {
        position: relative;
    }

.tile-item .image-ethical-text {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 15px;
    font-size: 0.7rem;
    text-align: center;
}

/* Das Bild des tile-items ausblenden, wenn der Hover-Container angezeigt wird (gibt paar weniger Bildseitenverhältnisse, wo man sonst das Bild noch sieht) */
.tile-item:hover > a {
    visibility: hidden;
}

.tile-thumb {
    display: block;
    height: auto;
    width: 100%;
    max-width: 600%;
}

.hover-container a {
    display: block;
}

.hover-container img {
    margin-bottom: 15px;
}

/* Objekttitel in der Kachel */
.hover-container span:not(:last-child) {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 10px;
}

/* spans in spans sind Zusatzinfos und werden grau angezeigt (wie Funktion der Person in der Kachel)*/
.hover-container span > span {
    color: gray;
}

#id-search-result-waterfall h2 {
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2rem;
}
/************************************************************************************/
/* 2. Listenanzeige */
/************************************************************************************/
.list-view .row img {
    max-height: 120px;
    height: fit-content;
    max-width: 100%;
    width: auto;
}

@media (min-width: 480px) {
    .list-view .row img {
        max-height: 140px;
    }
}

@media (min-width: 768px) {
    .list-view .row img {
        max-height: 180px;
    }
}


.list-view .row {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-right: 0;
    margin-left: 0;
    border-top: 1px solid #dcdcdc;
}

.list-view-image {
    position: relative;
    display: flex;
    justify-content: center;
}

.list-view-image .image-ethical-text {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 15px;
    font-size: 0.7rem;
    text-align: center;
}

.list-view-text-content {
    display: flex;
    flex-direction: column;
}

.list-view .row:hover {
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(241, 241, 241, 0.7), rgb(255, 255, 255));
}

.list-view .object-status {
    margin-top: auto;
}
.list-view .object-status .praesenz-valid, .list-view .object-status .praesenz-invalid {
    width: unset;
    margin: 0;
    padding: 0;
    margin-top: 2px;
    margin-right: 12px;
    font-size: 16px;
}


/* Als important markiert, weil sonst die display: block regel von .list-view span:not(:first-child) nicht überschrieben wird */
.list-view-inline {
    display: inline !important;
}


/************************************************************************************/
/* 2. Listenansicht */
/************************************************************************************/

.list-view .list-element-container {
    display: flex;
    gap: 70px;
    padding: 20px 0 20px 0;
    width: 100%;
    text-align: left;
}

.list-view .list-element-content-container {
    display: flex;
    flex-direction: column;
}


.list-view .list-view-header {
    font-weight: bold;
    margin-bottom: 5px;
}

.list-view .list-element-with-buttons-container {
    display: flex;
    gap: 70px;
}

.list-view .list-element-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 30%;
    width: 30%;
}

.list-view .list-element-button-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
    width: 45px;
    flex-shrink: 0
}

.list-view .card-button {
    padding: 0;
    margin: 0;
    height: 45px;
    width: 45px;
}

    .list-view .card-button i {
        margin-left: 0;
    }


    .list-view .card-button.btn-primary img {
        filter: invert();
    }





.list-view hr {
    border-top: 1px solid #eee;
    margin-top: 0;
    margin-bottom: 0;
}

.list-view .list-element-container:hover {
    background: #f5f5f5;
}



.list-view .list-element-container img {
    max-height: 120px;
    width: auto;
    max-width: 100%;
}

@media (min-width: 480px) {
    .list-view .list-element-container img {
        max-height: 140px;
    }
}

@media (min-width: 768px) {
    .list-view .list-element-container img {
        max-height: 180px;
    }
}


/*
    Regel für die Anzeige der sekundären Person zu einem Objekt

    Da zwischen der ersten und zweiten Person kein Platz zu sehen sein
    soll, kann die sekundäre Person nicht in ein eigenes <span> Element
    bewegt werden. Da würde display: block ganz normal funktionieren.
    Das führt jedoch dazu, dass die sekundäre Funktion, weil diese 
    auch in einem <span> liegen muss, auf einer separaten Zeile landet...
    
    Als important markiert, weil sonst die display: block regel von
    .list-view span:not(:first-child) nicht überschrieben wird.
*/
.list-view-inline {
    display: inline !important;
}

.list-view span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

    /* 
    spans in spans sind Zusatzinfos und werden grau angezeigt
    (wie Funktion der Person in der Kachel) 
*/
    .list-view span > span {
        color: gray;
    }

.list-view a {
    width: 100%;
}

    .list-view a::after {
        content: '';
        display: none;
    }

.list-view .image-ethical-text {
    font-size: 0.8em;
}

.list-view .status-container .fa-circle-praesenz-disabled {
    color: blue;
}

.list-element-footnote {
    font-style: italic;
    opacity: 0.6;
}

/************************************************************************************/
/* 3. Suchbegriffe */
/************************************************************************************/

#id-results-suchbegriffe {
    padding: 0;
    margin: 2rem auto 2rem auto;
}

#id-results-suchbegriffe-container hr {
    padding: 0;
}

#id-results-suchbegriffe-container p {
    margin: 0;
}


/************************************************************************************/
/*  4. Text-liste für Volltextsuche */
/************************************************************************************/

.fulltext-list-item-container {
    display: grid;
    grid-template-columns: 250px 1fr;
}

    .fulltext-title-container, .fulltext-list-item-container dt, .fulltext-list-item-container dd {
        font-family: var(--dc-font-family);
        font-weight: normal;
        font-style: normal;
    }

.fulltext-title-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 1.5rem;
}


    .fulltext-title-container .fulltext-list-item-title {
        font-weight: bold;
        min-width: 200px;
    }

    .fulltext-title-container .fulltext-list-item-note {
        min-width: 200px;
        text-align: right;
    }


.fulltext-list-item-container mark {
    background-color: orange;
}

.fulltext-list-item-note {
    font-weight: bold;    
}

/************************************************************************************/
/* 5. Bereich über Suchergebnisse: Suchergbnis-Steuerelemente */
/************************************************************************************/

#id-search-result-controls {
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 2rem 0;
}

/* Responsives Verhalten: Filter als gesamte Seite */
@media only screen and (max-width: 576px) {
    #id-search-result-controls {
        flex-wrap: wrap;
        justify-content: center;
    }

        #id-search-result-controls .search-result-count-display {
            flex-basis: 100%;
            text-align: center;
        }
}


#id-search-result-controls {
    display: flex;
}

    #id-search-result-controls .fa {
        font-size: 16px;
        color: #CCCCCC;
    }

.viewmode-buttons {
    display: flex;
    gap: 10px;
    margin-left: 10px;
}

    .viewmode-buttons .fa:hover {
        color: #333333;
    }

#id-search-result-controls .button-active .fa {
    color: black;
}

.viewmode-buttons a {
    display: flex;
    height: fit-content;
    margin: 0;
}

    /* Den Pfeil an Gird/List Links vom SKD Layout ausblenden */
    .viewmode-buttons a::after {
        content: '';
        font-family: 'skd', sans-serif;
        display: none;
    }

    .viewmode-buttons a i {
        margin: 0;
    }

#id-search-result-controls .sort-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Padding nach oben und unten am Sortier Dropdown entfernen*/
.sort-box .bootstrap-select > .dropdown-toggle {
    padding-top: 0;
    padding-bottom: 0;
}

.sort-box .dropdown {
    margin-top: -2px;
    width: unset !important;  
    border: none !important;
}

.sort-box .dropdown .filter-option-inner-inner {
    font-weight: bold;
    font-size: 15px;
}

#id-search-result-controls .sort-box label {
    margin-bottom: 0;
}


/* Responsives Verhalten: Filter als gesamte Seite */
@media only screen and (max-width: 576px) {
    #id-search-result-controls .sort-box label {
        display: none;
    }


    #id-search-result-controls .sort-box {
        margin-left: 0;
    }
}

/* Pfeil nach unten für Suchergebnisse anpassen Link*/
.after-caret-down:after {
    content: '\e973';
}

.filter-buttons {
    display: none;
    height: fit-content;
    padding-left: 10px;
    margin-left: 10px;
    border-left: #eeeeee solid 1px;
}

/* Responsives Verhalten */
@media only screen and (max-width: 992px) {
    .filter-buttons {
        display: inherit;
    }
}

.filter-buttons button {
    all: unset;
    position: relative;
    display: flex;
    cursor: pointer;
    height: fit-content;
}

#id-search-result-controls .filter-buttons button:focus-visible {
    outline: 2px solid black !important;
    outline-offset: 2px;
}

#id-search-result-controls a:focus-visible {
    outline: 2px solid black !important;
    outline-offset: 2px;
}

span.sum-active-facets-count {
    background: black;
    color: white;
    position: absolute;
    right: -9px;
    bottom: -9px;
    font-size: 10px;
    height: 16px;
    width: 16px;
    /* text-align: center; */
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

/************************************************************************************/
/* 6. Facetten */
/************************************************************************************/

#id-search-results-facets {
    margin: 0;
    margin-left: -20px;
    padding: 0;
    padding-left: 20px;
    padding-right: 20px;
    background-color: #F7F7F7
}

    #id-search-results-facets h2 {
        display: none;
    }


/* Responsives Verhalten: Filter als gesamte Seite */
@media only screen and (max-width: 992px) {
    #id-search-results-facets {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: 100;
        width: 100vw;
        height: 100%;
        min-height: 950px;
        padding: 25px 4rem;
        box-shadow: 1px 1px 5px lightgray;
    }
        #id-search-results-facets h2 {
            display: inherit;
            font-size: 26px;
            text-align: center;
            font-weight: bold;
        }
}


#id-search-results-facets details {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 7px;
    border: none;
    line-height: 1.42857143;
}


#id-search-results-facets summary {
    display: flex;
    flex-wrap: nowrap;
    padding: 0;
    cursor: pointer;
    font-family: var(--dc-font-family);
    font-weight: bold;
    font-size: 16px;
    line-height: 1.42857143;
}

#id-search-results-facets details[open] summary {
    margin-bottom: 1rem;
}

#id-search-results-facets summary .search-facet-count {
    margin: -2px 10px -1px 10px;
    padding: 5px 9px 4px 9px;
    color: white;
    background: black;
    font-size: 12px;
}

#id-search-results-facets .hide-count, #id-search-results-facets details[open] .search-facet-count {
    display: none;
}

#id-search-results-facets summary::after {
    margin-left: auto;
    float: right;
    content: '+';
}

#id-search-results-facets details[open] summary::after {
    content: '‒';
    font-weight: bold;
}

#id-search-results-facets .search-facet-group-body {
    display: flex;
    flex-direction: column;
}

#id-search-results-facets .search-facet {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 3px 0 3px 0;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--dc-font-family) !important;
    font-weight: normal;
}

    /* Ausrichten des Counts einer Facette */
    #id-search-results-facets .search-facet span {
        margin-left: auto;
        margin-right: -4px; /* Ausrichtung mit +/- des Details */
    }

    /* Ausrichten des Counts einer Facette bei der Anzeige des zusätzlichen "Schlißen"-X */
    #id-search-results-facets .search-facet.search-facet-active-facet span {
        margin-right: 0;
    }



    #id-search-results-facets .search-facet:focus {
        outline-color: black !important;
        outline-offset: 1px;
    }

#id-search-results-facets .search-facet-active-facet {
    margin: 0 -20px 0 -20px;
    padding: 5px 20px 5px 20px;
    background-color: #333333;
    color: white;
}

    #id-search-results-facets .search-facet-active-facet::after {
        display: block;
        margin-right: 1px;
        padding-top: 2px;
        float: right;
        font-size: 12px;
        font-family: 'Font Awesome 5 Free', sans-serif !important;
        content: "⨉";
    }

    #id-search-results-facets .search-facet-active-facet:focus {
        color: white;
        outline-offset: 2px;
    }

.search-facet-load-more-container {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    margin-top: 15px;
    padding-top: 15px;
    border-top: dashed #D3D3D3 1.5px;
}

.search-facet-load-more {
    border: none;
    width: 20px;
}

#id-show-filter-btn.toggled .fa {
    color: var(--dc-dark-accent-color);
}

/************************************************************************************/
/*  7. Multi-Range-Slider */
/************************************************************************************/
#id-fac_date .range_container {
    display: flex;
    flex-direction: column;
    margin-top: 3rem;
}

#id-fac_date .sliders_control {
    position: relative;
    min-height: 50px;
}

#id-fac_date .form_control {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #635a5a;
}

    #id-fac_date .form_control input {
        -moz-appearance: textfield; /* Keine Pfeile für Nummer-Feld im Firefox */
    }

        /* Keine Pfeile für Nummer-Feld in Chrome, Safari, Edge, Opera */
        #id-fac_date .form_control input::-webkit-outer-spin-button,
        #id-fac_date .form_control input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }


#id-fac_date input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 16px;
    height: 16px;
    background-color: black;
    border-radius: 50%;
    cursor: pointer;
}

#id-fac_date input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 16px;
    height: 16px;
    background-color: black;
    border-radius: 50%;
    cursor: pointer;
}

#id-fac_date #toSlider {
    margin-top: -1px; /* Leichte Verschiebung wegen Zentrierung*/
}

#id-fac_date input[type=range]::-webkit-slider-thumb:hover {
    background: #373737;
}

#id-fac_date input[type=range]:focus-within::-webkit-slider-thumb {
    background: #373737;
    outline: 1px solid black;
}



#id-fac_date input[type="number"] {
    color: #8a8383;
    width: 75px;
    padding: 6px 12px;
    border: solid 1px #cacaca;
    border-radius: 2px;
}

    #id-fac_date input[type="number"]:focus-within {
        outline: 1px solid black;
        outline-offset: 2px;
    }

#id-fac_date input[type=number]::-webkit-inner-spin-button,
#id-fac_date input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

#id-fac_date input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 3px;
    width: 100%;
    position: absolute;
    background-color: #C6C6C6;
    pointer-events: none;
}

#id-fac_date #fromSlider {
    height: 0;
    z-index: 1;
}

#id-fac_date .date-start-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 30px;
    color: #fff;
    background: #000;
    border-radius: 100%;
}


    #id-fac_date .date-start-search i {
        font-size: 10px;
    }


/************************************************************************************/
/*  8. Titel für Suchergebnisseiten */
/************************************************************************************/

.content-title-container {
    margin-top: 30px;
    max-width: 800px;
}

    .content-title-container h1 {
        font-size: 36px;
        margin-bottom: 1rem;
    }

    .content-title-container h2 {
        font-size: 32px;
    }


    .content-title-container .mini-title-container {
        display: flex;
        justify-content: center;
        margin: 30px 15px 8px 15px;
        line-height: 1.42857143;
    }

    .content-title-container p {
        margin-top: 3rem;
        padding: 0 1rem;
        text-align: center;
        font-size: 1.1rem;
        line-height: 1.5;
    }









/**
*   Diese .css-Datei definiert die Stile für die Detail-Seite.
    Diese .css-Datei enthält folgenden Inhalt:

    1. Objektinformationen
    2. Oberes Bildkarusell
    3. Cluster
    4. Zugeordnete Obejekte
    5. Karuselle in den ausklappbaren Bereichen der Detail-Daten
    6. Medienfunktionen (rechts neben dem Hauptbild)
	7. Zensur
    8. Share-Modal

*/

/************************************************************************************/
/* 1. Objektinformationen */
/************************************************************************************/

/* Bezeichner (Museum, Datum, ...) in den Objektdetails grau machen */
.objekt-details .text-uppercase {
    color:#6b6b6b;
}

.objekt-details .row {
    line-height: 2em;
}

/************************************************************************************/
/* 2. Oberes Bildkarusell */
/************************************************************************************/

#detailMainImage {
    max-height: 550px;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#detailMainImage:hover {
    filter: brightness(1.05);
    cursor: pointer;
}


.img-thumbnail {
    min-width: 80px;
    cursor: pointer;
    border-radius: 0;
}

.img-thumbnail.active {
    border: 1px #667b9a solid;
}

.col-icon {
    position: absolute;
    left: 50%;
    bottom: 4px;

    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.col-icon .fa-stack-2x {
    color: #6d6d6d;
}

.fa-music {
    /*Eigene Schriftgröße, damit Icon sich zentrieren lässt*/
    font-size: 14px;
}

#id-weitere-bilder .element-container {
    position: relative;
}

#id-weitere-bilder .icon-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor:pointer;

    font-size: 40px;
    color: rgba(255, 255, 255, 0.4);
}


.main-media-container {
    display: flex;
    justify-content: center;
}

.main-media-inner-container {
    position: relative;
}

    .main-media-inner-container .image-ethical-text {
        position: absolute;
        top: 0;
        padding: 2rem;
        transform: translateY(70%);
    }

#id-details-media-band-inner-container {
    display: flex;
    align-items: stretch;
}
/************************************************************************************/
/* 3. Cluster */
/************************************************************************************/
details {
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

details[open] {
    background-color: #FAFAFA;
}


summary {
    font-family: "Cuprum", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Fallback for IE */
    font-family: var(--dc-font-family-accent);
    font-size: 25px;
    line-height: 65px;
    padding-left: 50px;
    padding-right: 25px;
}

details > summary {
    list-style: none;
}

summary::-webkit-details-marker {
    display: none
}

summary::after {
    float: right;
    content: "▾";
}

details[open] summary:after {
    float: right;
    content: "▴";
}

.cluster-content-container {
    padding: 15px 50px 25px 50px;
}

.cluster-container {
    /*wird gebraucht, um die Borders aneinander auszurichten. Sonst sind sie bei mehreren Details zu fett, weil direkt nebeneinander statt übereinander*/
    margin-top: -1px;
    margin-bottom: -1px;

    line-height: 1.75em;
}

.cluster-inner-heading {
    color: #6b6b6b;
}


.cluster-text-heading {
    font-weight: bold;
}

.cluster-text-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

    .cluster-text-container p {
        margin-bottom: 0;
    }

        .cluster-text-container p:first-of-type {
            margin-bottom: 1rem;
        }

    .cluster-text-container .list-icon {
        background-size: 1.3rem 1.3rem;
        background-repeat: no-repeat;
        background-position-y: 0.4rem;
        background-position-x: 0.2rem;
        padding-left: 2rem;
        font-weight: bold;
    }

    .cluster-text-container ul {
        padding-left: 30px;
        margin-bottom: 0;
    }

.list-icon.icon-museum {
    /* Icon made by ByteDance and licensed under Apache 2.0. (https://github.com/bytedance/IconPark/blob/master/LICENSE, https://www.apache.org/licenses/LICENSE-2.0) */
    background-size: 1rem 1rem;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="48" height="48" viewBox="0 0 48 48"%3E%3Cmask id="ipSMuseumOne0"%3E%3Cg fill="none" stroke="%23fff" stroke-width="4"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" d="M4 44h40"%2F%3E%3Cpath fill="%23fff" stroke-linejoin="round" d="M8 8.364L24 4l16 4.364V14H8V8.364Z"%2F%3E%3Cpath stroke-linecap="round" d="M10 14v24m7-24v24m7-24v24m7-24v24m7-24v24"%2F%3E%3Cpath stroke-linejoin="round" d="M7 38h34v6H7z"%2F%3E%3C%2Fg%3E%3C%2Fmask%3E%3Cpath fill="currentColor" d="M0 0h48v48H0z" mask="url(../Content/#ipSMuseumOne0)"%2F%3E%3C%2Fsvg%3E');
    background-position-y: 0.5rem;
}

.list-icon.icon-guide {
    /* Icon made by Pictogrammers and licensed under Apache 2.0. (https://github.com/Templarian/MaterialDesign/blob/master/LICENSE, https://www.apache.org/licenses/LICENSE-2.0)  */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M17 19H7V5h10m0-4H7c-1.11 0-2 .89-2 2v18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Z"%2F%3E%3C%2Fsvg%3E');
}

.list-icon.icon-voices {
    /* Iconmade by Pictogrammers and licensed under Apache 2.0. (https://github.com/Templarian/MaterialDesign/blob/master/LICENSE, https://www.apache.org/licenses/LICENSE-2.0)  */
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="24" height="24" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="M9 21H5q-.825 0-1.413-.588T3 19v-7q0-1.875.713-3.513t1.924-2.85q1.213-1.212 2.85-1.924T12 3q1.875 0 3.513.713t2.85 1.924q1.212 1.213 1.925 2.85T21 12v7q0 .825-.588 1.413T19 21h-4v-8h4v-1q0-2.925-2.038-4.963T12 5Q9.075 5 7.037 7.038T5 12v1h4v8Z"%2F%3E%3C%2Fsvg%3E');
}


#id-reproduktion-elemente-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    #id-reproduktion-elemente-container .reproduktion-button-container button {
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 5px;
        margin-left: -6px;
        padding-right: 6px; /* Besseres Rechteck für Outline-Linie während des focus-visible */
    }

    #id-reproduktion-elemente-container .skd-link-caret {
        font-weight: bold;
    }

    #id-reproduktion-elemente-container .reproduktion-button-container span {
        margin-bottom: 0;
        line-height: 28px;
    }

    #id-reproduktion-elemente-container .reproduktion-button-container img {
        justify-self: center;
        align-self: center;
    }



    #id-reproduktion-elemente-container .merkliste-button-container {
        display: flex;
        justify-content: space-between;
    }

    @media (max-width: 1000px) {
        #id-reproduktion-elemente-container .merkliste-button-container {
            flex-direction: column;
        }
    }

    #id-reproduktion-elemente-container .checkmark-container {
        margin-left: 2px;
        justify-self: center;
    }

    #id-reproduktion-elemente-container #id-already-added-to-merkliste-medien,
    #id-reproduktion-elemente-container #id-already-added-to-merkliste-objekte {
        position: relative;
        display: grid;
        grid-template-columns: 30px 1fr;
        gap: 5px;
        width: 340px;
        margin-left: -6px;
        margin-right: auto;
        margin-top: 3px;
        overflow: hidden;
    }

        #id-reproduktion-elemente-container #id-already-added-to-merkliste-medien a,
        #id-reproduktion-elemente-container #id-already-added-to-merkliste-objekte a {
            position: absolute;
            bottom: 0px;
            margin-left: 36px;
            opacity: 0;
            font-size: 16px;
        }

.literature-columns {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.literature-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 10px;
}




/************************************************************************************/
/* 4. Zugeordnete Obejekte */
/************************************************************************************/

#svg-container {
    position: relative;
    width: 100%;
}

#rds-relations {
    width: 100%;
    height: 600px;
}

.legend-relations-conatiner {
    position: absolute;
    bottom: 30px;
    right: 25px;
    display: flex;
    flex-direction: column;
    background-color: white;
    padding: 15px 10px;
    outline: lightgray 1px solid;
    z-index: 100; /* z-index muss unter z-Index von Hilfe-Button sein!*/
}

.legend-relations-inner-conatiner {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 3px;
}

.legend-icon {
    width: 75px;
    height: 75px;
    margin-right: 10px;
}

.icon-container-help {
    position: absolute;
    right: 16px;
    bottom: 20px;
    z-index: 1000; /* z-index muss über z-Index von Hilfe-Button sein!*/
    cursor: pointer;
}

.fa-icon-custom-style {
    background-color: gray;
    padding: 11px 14px;
    height: 40px;
    width: 40px;
    border-radius: 25px;
    color: white;
    max-width: 100%;
}

.fa-icon-skd-style:hover {
    background: #555;
}

/* Listen-Icon ist mit dem normalen padding von .fa-icon-custom-style nicht zentriert! */
.fa-icon-custom-style-list {
    background-color: gray;
    padding: 11px 12px;
    height: 40px;
    width: 40px;
    border-radius: 25px;
    color: white;
    max-width: 100%;
}

#id_zugeordnete_objekte_cluster .cluster-container {
    line-height: 1.5;
}
/************************************************************************************/
/* 5. Karuselle in den ausklappbaren Bereichen der Detail-Daten  ****************** */
/************************************************************************************/
.cluster-content-container .slick-slider {
    margin-top: 20px;
}

.details-carousell-element {
    display: table;
    height: 100%;
    margin: 10px;
    cursor: pointer;
}

/* Image-Wrapper in <figure> */
.details-carousell-element div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Image in <figure> */
.details-carousell-element div img {
    height: 120px;
}

.details-carousell-element-image-wrapper {
    min-width: 150px;
    background-color: #eee;
}

.details-carousell-element:hover .details-carousell-element-image-wrapper {
    filter: brightness(0.6);
}

/* HACK: Fallback for IE, da keine filter: brightness(0.6) unterstützt wird */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .details-carousell-element:hover {
        background-color: black;
    }

        .details-carousell-element:hover img {
            opacity: 0.6;
        }
}


/* icon  in <figure> */
.details-carousell-element .details-carousell-element-icon-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 75px;
    color: white;
    opacity: 0;
}

/* HACK: Fallback for IE, da positioinierung hier nicht richtig unterstützt wird*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */

    /* icon  in <figure> */
    .details-carousell-element .details-carousell-element-icon-wrapper {
        /* Fallback for IE */
        top: 0px;
        bottom: 0px;
        right: 0px;
        left: 0px;
    }
}



.details-carousell-element:hover .details-carousell-element-icon-wrapper {
    opacity: 1;
}

/* Text in <figure> */
.details-carousell-element figcaption {
    display: table-caption;
    caption-side: bottom;
    margin-left: 0;
    text-align: center;
}

.details-carousell-element figcaption div {
    display: -webkit-box;
    margin: 14px 0 0 0;
    overflow: hidden;
    line-height: 20px;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
    max-height: calc(3*20px); /**Fallback for IE, 3 Linien à 20px Linienhöhe*/
}

#id-cluster-forschung .cluster-content-container .col-12 {
    display: flex;
    flex-direction: column;
}

#id-cluster-forschung a {
    margin-left: 14px;
    font-weight: bold;
}

/************************************************************************************/
/* 6. Medienfunktionen (rechts neben dem Hauptbild) */
/************************************************************************************/

#id-right-media-tools {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 10px;
    margin-top: 20px;
    margin-left: 20px;
    max-width: 260px;
}

@media (max-width: 992px) {
    #id-right-media-tools {
        flex-direction: row;
        justify-content: right;
        width: 100%;
        max-width: unset;
    }

    #id-right-media-tools .object-status i {
        margin-right: 0;
    }

    #id-right-media-tools .object-status span {
        display: none;
    }

    #id-right-media-tools #id-rechte-container {
        min-width: 0 !important;
    }
    #id-right-media-tools #id-rechte-container a {
        display: none;
    }
}

#id-share-button {
    display: flex;
    align-items: center;
    font-size: 28px;
}

#id-rechte-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

#id-rechte-container:hover {
        opacity: 50%;
        cursor: pointer;
    }

#id-rechte-icon-container {
    display: flex;
    align-items: center;
    margin-right: 8px;
    padding: 5px 0;
}

#id-rechte-icon-container img {
    margin-right: 4px;
    width: 30px;
    height: 30px;
}

#id-rechte-container a {
    height: fit-content;
    margin-bottom: 0;
    max-width: 172px;
}

.object-status {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.object-status i {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 7px;

    width: 30px;
    font-size: 25px;

}

.object-status .praesenz-valid {
    color: #62ca01;
}

.object-status .praesenz-invalid {
    color: #A30B37;
}

#id-merkliste-objekte-button-container {
    margin-left: -3px;
    margin-bottom: auto;
}

#id-merkliste-objekte-button-container svg {
    color: var(--dc-dark-accent-color);
}



/************************************************************************************/
/* 7. Zensur */
/************************************************************************************/
/* Die **** im zensierten Text beim Hovern beim Mouseover mit Pointer anzeigen */
.censored-tag, .censored-tag-wrapper {
    cursor: pointer;
}

    /* Die **** im zensierten Text beim Hovern mit Underline anzeigen */
    .censored-tag:hover, .censored-tag-wrapper:hover {
        text-decoration: underline;
    }



#censored-modal .row {
    margin-left: 0;
    margin-right: 0;
}

#censored-modal .col-xs-12 {
    width: 100%;
}

#censored-modal .modal-dialog {
    width: calc(100% - 17px); /* 17px für eventuellen Scrollbalken */
    max-width: 800px;
}

#censored-modal.modal.in {
    display: flex !important;
}

#censored-modal .modal-header {
    padding: 40px 40px 0px 40px;
    border: none;
}

#censored-modal .modal-content {
    height: fit-content;
    padding-bottom: 40px;
}


#censored-modal .modal-body {
    height: max-content;
    max-height: calc(100vh - 200px); /* 95px = Größe des Titel-Containers im Modal, + Padding */
    overflow-y: auto;
    padding: 20px 40px 0px 40px;
}


#censored-modal .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
    margin-top: 20px;
}

/************************************************************************************/
/* 8. Share-Modal  */
/************************************************************************************/


#modal-share .row {
    margin-left: 0;
    margin-right: 0;
}

#modal-share .col-xs-12 {
    width: 100%;
}

#modal-share .modal-dialog {
    width: calc(100% - 17px); /* 17px für eventuellen Scrollbalken */
    max-width: 800px;
}

#modal-share.modal.in {
    display: flex !important;
}

#modal-share .modal-header {
    padding: 40px 40px 20px 40px;
    border: none;
}

#modal-share .modal-content {
    height: fit-content;
    padding-bottom: 40px;
}


#modal-share .modal-body {
    height: max-content;
    max-height: calc(100vh - 200px); /* 95px = Größe des Titel-Containers im Modal, + Padding */
    overflow-y: auto;
    padding: 20px 40px 0px 40px;
}

#modal-share .share-medien-caption {
    margin-top: 1.5rem;
}

#modal-share .medien-container {
    display: flex;
    align-items: center;
    margin: 5px 0;
}

#modal-share #id-rechte-container {
    padding: unset;
    margin: 0 0 0 10px;
}

    #modal-share #id-rechte-container #id-rechte-icon-container {
        padding: unset;
        margin: unset;
    }

#modal-share .img-hover {
    position: relative;
}

    #modal-share .img-hover img {
        display: none;
        z-index: 100;
        position: absolute;
        right: 20px;
        bottom: -50%;
        width: auto;
        height: auto;
        max-width: 110px;
        max-height: 110px;
        padding: 10px;
        background-color: white;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }

    #modal-share .img-hover:hover img {
        display: flex;
    }


/**
*   Diese .css-Datei bildet die Stile der Erweiterten Suche ab.
*   Diese .css-Datei enthält folgenden Inhalt:
*
*          1. Allgemeine Stile
*          2. Auswahlfelder (Bootstrap-Select) 
*          3. Textfelder
*          4. Modal: Suchmodus ändern
*          5. Modal: Suchhilfe
*          6. Layout der Hilfe-Seite für die erweiterte Suche
*          7. Titel für Suchergebnisseiten
*          8. Autocomplete
*/

/************************************************************************************/
/* 1. Allgemeine Stile */
/************************************************************************************/

.busyindicator .modal-content {
    border-radius: 0;
}


/* Suchfeld auf Startseite */
.startpage-search input {
    font-size: 18px;
    height: auto;
}

.startpage-search .btn {
    font-size: 18px;
    height: auto;
    padding: 10px 20px;
}


/* ein wenig Abstand beim Container mit den Filtern nach oben zum Rand */
.search-words > .container {
    margin-top: 38px;
}


/*
    Zusätzliches Padding für row von "Zurück zum Objekt":
    margin-top: 38px <-- von .search-words > .container
    aber hr darunter hat lediglich:
    margin-top: 22px
*/
.back-to-object-row {
    padding-bottom: 16px;
}

.searchresult-p-function {
    opacity: 0.75;
}
.searchresult-title {
    margin-bottom: 5px;
}

/*
    jQuery Accessibility Element. Wird in der Entwicklungsumgebung nicht angezeigt,
    ist bisher nur auf dem Testsystem aufgetreten.
    Siehe https://redmine.robotron.de/issues/24602
*/
.ui-helper-hidden-accessible {
    display: none !important;
}

/************************************************************************************/
/* 2. Auswahlfelder (Bootstrap-Select) */
/************************************************************************************/
/* Wird von der Selectpicker Library als Klasse eingefügt */
.bootstrap-select {
    border: 1px solid #ced4da !important;
}

/* Hintergrund des Selectpickers weiß und Text grau machen*/
.bootstrap-select > .dropdown-toggle.bs-placeholder {
    background-color: white;
    color: #495057;
}

/* Keine Runden Ecken im Dropdown */
.dropdown-menu {
    border-radius: 0;
}
/* gefokuste Items im Dropdown sollen grauen Hintergrund haben*/
.dropdown-item.active,
.dropdown-item:active {
    background-color: #b7b7b7;
}

/* Im oberen Filterbereich beim Anzeigen der Suchergebnisse soll */
.filter-section .bootstrap-select {
    border: none;
}

    .filter-section .bootstrap-select:hover {
        outline: 1px solid #495057;
    }

    .filter-section .bootstrap-select .btn {
        background-color: white;
        border: none;
    }

    /* Dropdown Button des Sortier Selects soll nicht die graue Farbe im active State bekommen */
    .filter-section .bootstrap-select > .btn-light.dropdown-toggle:active {
        background-color: white;
    }

/* Wird von der Selectpicker Library als Klasse eingefügt */
.bootstrap-select {
    border: 1px solid #ced4da !important;
}


/* Fokus Farbe entfernen*/
.bootstrap-select .dropdown-toggle:focus {
    outline: 0;
    outline: 0 auto -webkit-focus-ring-color !important;
}

.bootstrap-select.btn-light.focus, .bootstrap-select.btn-light:focus {
    box-shadow: none;
}

/* Text Anzahl der Suchergebnisse soll etwas nach unten rücken um Bündig mit Select zu sein*/
.count-column {
    line-height: 2.7em;
}

.dropdown-menu.show {
    z-index: 10000;
}

/************************************************************************************/
/* 3. Textfelder */
/************************************************************************************/

.searchfield-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Felder links und rechts bei kleineren Auflösungen einrücken */
@media (max-width: 1200px) {
    .searchfield-container {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* Eingabefeld im Dropdown ohne Bottom Margin */
#suchesection .bs-searchbox .form-control {
    margin-bottom: 0;
}

#searchstring {
    border-color: black;
}

#id-searchfield-date {
    display: flex;
}

    #id-searchfield-date .datierung-von {
        border-right: none;
        background-image: url(/Content/img/arrow_right.png);
        background-repeat: no-repeat;
        background-position: right;
        -moz-appearance: textfield;
        -webkit-appearance: none;
        margin: 0;
    }

    #id-searchfield-date .datierung-bis {
        border-left: none;
        -moz-appearance: textfield;
        -webkit-appearance: none;
        margin: 0;
    }

#id-searchfield-fulltext {
    margin-top: 10px;
    margin-bottom: 10px;
    grid-column: 1 / -1;
}


/************************************************************************************/
/* 4. Modal: Suchmodus ändern */
/************************************************************************************/

#id-modal-suchmodus .modal-dialog {
    max-width: 576px;
}

#id-modal-suchmodus .modal-header {
    padding: 40px 40px 20px 40px;
    border-bottom: none;
}

#id-modal-suchmodus .modal-body {
    padding: 20px 40px 40px 40px;
}

#id-modal-suchmodus .buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

@media only screen and (max-width: 360px) {
    #id-modal-suchmodus .buttons {
        flex-direction: column;
    }
}

#id-modal-suchmodus .buttons .btn {
    margin: 0 5px;
}

#id-modal-suchmodus .buttons .btn:focus {
    background-color: black;
    color: white;
}

#id-modal-suchmodus .buttons .btn {
    background-color: var(--dc-medium-neutral-color);
}

#id-modal-suchmodus .buttons .btn-primary {
    background-color: var(--dc-dark-accent-color);
}


#id-modal-suchmodus .modal-body li {
    font-size: 14px;
}

/************************************************************************************/
/*  5. Modal: Suchhilfe */
/************************************************************************************/


#id-modal-suchehilfe .modal-header {
    padding: 40px 40px 20px 40px;
    border-bottom: none;
}

#id-modal-suchehilfe .modal-body {
    padding: 20px 40px 40px 40px;
}


/************************************************************************************/
/*  6. Layout für Suchseite */
/************************************************************************************/

#id-serach-help-page {
    margin-top: 3rem;
}

#extended-search-help {
    height: 100%;
    max-height: 45px;
    width: 44px;
    border-radius: 50%;
    font-size: 16px;
    color: white;
}


.button-item {
    margin-left: 15px;
    margin-right: 15px;
    white-space: nowrap;
}


/* 
    Es wird grid verwendet, um zu gewährleisten, dass
    die drei Buttons in der Mitte zentriert bleiben. 
    Die Spalte rechts ist hingegen rechtsbündig.

    Die Werte für grid-area stammen aus dem CSS Grid
    Generator: https://cssgrid-generator.netlify.app/
*/

#suchesection .parent-button-grid {
    display: grid;
    grid-template-columns: 1fr 16fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;
    margin-top: 4rem;
}

#suchesection .middle-buttons {
    grid-area: 1 / 2 / 2 / 3;
    display: flex;
    justify-content: center;
    gap: 10px;

}

.right-buttons {
    grid-area: 1 / 3 / 2 / 4;
}

/* 
    Ab 1200px wird im SKD CSS die Margin für .row reduziert,
    entsprechend muss die rechte Spalte angepasst werden
*/
@media (min-width: 1200px) {
    .right-buttons {
        margin-left: auto;
        margin-right: 0px;
    }
}

/*
    Button nach innen rücken, damit er bündig zu den
    .row Elementen darüber ist
*/
@media(min-width: 550px) and (max-width: 1200px) {
    .right-buttons {
        margin-left: auto;
    }
}


/* 
    Auf zwei Reihen wechseln,
    Hilfe-Button wird unterhalb angezeigt
*/
@media(max-width: 550px) {
    .parent-button-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
    }

    .middle-buttons {
        grid-area: 1 / 1 / 2 / 2;
        display: grid;
        gap: 10px;
        margin-bottom: 10px;
    }

    .middle-buttons .btn {
        margin-right: 0px !important;
        padding-right: 0;
    }

    .right-buttons {
        grid-area: 2 / 1 / 3 / 2;
        margin-left: auto;
        margin-right: auto;
    }
}

/************************************************************************************/
/*  7. Titel für Suchergebnisseiten */
/************************************************************************************/

.content-title-container {
    margin-top: 30px;
    max-width: 800px;
}

    .content-title-container h1 {
        font-size: 36px;
        margin-bottom: 1rem;
    }

    .content-title-container h2 {
        font-size: 32px;
        margin-bottom: 1.5rem;
    }

    .content-title-container .mini-title-container {
        display: flex;
        justify-content: center;
        margin: 30px 15px 8px 15px;
        line-height: 1.42857143;
    }

.content-container-ausstellungen {
    padding-bottom: 0;
}

/************************************************************************************/
/*  8. Autocomplete und Auswahlliste
/************************************************************************************/

.search-categories-autocomplete-list.ui-autocomplete {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    display: block;
    background-color: white;
    color: black;
    border: solid grey 1px;
    z-index: 100;
}

.ui-autocomplete-category {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bolder;
    cursor: pointer;
}

    .ui-autocomplete-category:hover {
        background-color: black;
        color: white;
    }

.ui-menu-item {
    color: #212529;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .ui-menu-item:hover {
        cursor: pointer;
    }

.search-categories-autocomplete-list.ui-autocomplete .ui-state-highlight {
    font-weight: bolder;
}

.grouped-dropdown-searchfield .dropdown-menu {
    min-width: unset !important;
    width: 100%;
}

.grouped-dropdown-searchfield .dropdown-item {
    padding: 0;
}

.grouped-dropdown-searchfield .text {
    display: unset !important;
    word-break: break-word;
    white-space: normal;
}
.grouped-dropdown-searchfield .firstelement, .grouped-dropdown-searchfield .subelements {
    padding: 0.25rem 1.5rem;
}

.grouped-dropdown-searchfield .text:hover .firstelement {
    background-color: var(--dc-dark-accent-color);
    color: white;
}

.grouped-dropdown-searchfield .text .firstelement {
    margin-bottom: 0;
    margin-left: 0;
    font-weight: bold;
}

.grouped-dropdown-searchfield .text .subelements {
    margin-bottom: 0;
    margin-left: 15px;
}

/* Nach der Selektion die Sub-elemente ausblenden und das aktive Element dem Deign anpassen */
.grouped-dropdown-searchfield .filter-option .firstelement {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.grouped-dropdown-searchfield .filter-option .subelements {
    display: none;
}


.ui-autocomplete-category .subtext, .grouped-dropdown-searchfield .subtext{
    display: block;
    font-weight: normal;
}
/**
*   Diese .css-Datei bildet die Stile für alle Kartenanzeigen 
*   sowie alle zoombaren Bilder (da beide über die gleiche Technolgie und Bibliothek angezeigt werden).
*   Diese .css-Datei enthält folgenden Inhalt:
*
*          1. Karte über Suchergebnisse
*          2. Zoombilder
*/

/************************************************************************************/
/* 1. Karte über Suchergebnisse */
/************************************************************************************/

.map-section .bootstrap-select > .dropdown-toggle {
    border: 1px solid #cacaca !important;
}

.map-section .bootstrap-select.form-control:not([class*="col-"]) {
    width: 100%;
    max-width: 100%;
}

.map-section .modal-body {
    padding-top: 40px;
    text-align: center;
    font-size: 20px;
}

.show-map a,
.show-map span {
    text-decoration: none;
}

.show-map a:hover {
        text-decoration: underline;
}

.show-map {
    padding-bottom: 0;
}

/* Dropdown Placeholder grau machen */
.suche-section .bootstrap-select > .dropdown-toggle {
    color: #000;
    text-transform: none;
    font-size: 16px;
    font-family: inherit;
    letter-spacing: inherit;
}

#mapid a:after {
    content: none;
}

.leaflet-top, .leaflet-bottom {
    z-index: 400;  /* Z-Index muss runtergestzt werden, da er sonst über unserem Menü ist*/
}

.marker-number {
    width: 41px;
    height: 41px;
    line-height: 30px;
    background-image: url('/lib/Leaflet-Cluster/marker-cluster.png?v=UHPEMbNpVbzA-rB3Hz3NzIib8NQ');
    font-size: 1.2em;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/************************************************************************************/
/* 2. Zoombilder */
/************************************************************************************/

#map-medien {
    width: 100%;
    height: 100%;
}

/* In base.css werden alle Bilder im Medienmodal auf eine bestimmte Art und Weise gezerrt.  Das muss für die einzelenen Bilder der Map-Tiles rückgängig gemacht werden. */
#modal-medien .modal-body #map-medien img {
    max-width: unset;
    max-height: unset;
    object-fit: unset;
    flex-shrink: unset;
    padding: 0px;
}

#modal-medien .map-medien-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
}

#modal-medien .map-medien-controls {
    position: absolute;
    bottom: 2%;
    left: 2%;
    z-index: 10000;
    justify-content: center;
    flex-direction: column;
    background: rgba(0,0,0, 0.2);
    padding: 10px;
    border-radius: 37px;
}

#modal-medien .map-medien-paging-controls {
    display: flex;
    margin-top: 15px;
    align-items: center;
}

    #modal-medien .map-medien-controls button,
    #modal-medien .map-medien-paging-controls button,
    #modal-medien .medien-animation-navigation-controls button,
    #modal-medien .medien-animation-controls button {
        all: unset;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 36px;
        height: 36px;
        margin: 3px;
        color: white;
        background-color: black;
        border-radius: 30px;
        font-size: 14px;
    }

        #modal-medien .map-medien-controls button:focus-within,
        #modal-medien .map-medien-paging-controls button:focus-within,
        #modal-medien .medien-animation-navigation-controls button:focus-within,
        #modal-medien .medien-animation-controls button:focus-within {
            outline: solid black 2px;
            outline-offset: 2px;
        }

        #modal-medien .map-medien-controls button:disabled,
        #modal-medien .map-medien-paging-controls button:disabled,
        #modal-medien .medien-animation-navigation-controls button:disabled,
        #modal-medien .medien-animation-controls button:disabled {
            opacity: 25%
        }

#modal-medien .manuscript-input-container {
    margin: 0 6px;
}

    #modal-medien .manuscript-input-container input {
        width: 64px;
    }

#modal-medien #sprite-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
}

#modal-medien .medien-animation-navigation-controls {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: 3;
    grid-template-rows: 3;
    margin: 12px;
}

#modal-medien #id-animation-top {
    grid-row: 1;
    grid-column: 2;
    background-color: rgba(0,0,0, 0.2);
    padding: 5px;
    padding-bottom: 0;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

#modal-medien #id-animation-left {
    grid-row: 2;
    grid-column: 1;
    background-color: rgba(0,0,0, 0.2);
    padding: 5px;
    padding-right: 0;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
}

#modal-medien #id-animation-home {
    grid-row: 2;
    grid-column: 2;
    background-color: rgba(0,0,0, 0.2);
    padding: 5px;
}

#modal-medien #id-animation-right {
    grid-row: 2;
    grid-column: 3;
    background-color: rgba(0,0,0, 0.2);
    padding: 5px;
    padding-left: 0;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}

#modal-medien #id-animation-bottom {
    grid-row: 3;
    grid-column: 2;
    background-color: rgba(0,0,0, 0.2);
    padding: 5px;
    padding-top: 0;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

#modal-medien .medien-animation-controls {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

#modal-medien .animation-cube-spinner-container {
    position: absolute;
    z-index: 0; /*z-Index hier wichtig, da geladene Bilder adrüber gelegt werden*/
}





@media print {
    header,
    footer,
    .no-print {
        display: none;
    }

    body {
        margin: 0;
        padding: 0 !important;
        min-width: 768px;
    }

    .container {
        width: auto;
        min-width: 750px;
        padding-left: 50px;
        padding-right: 50px;
    }
    
    a[href]:after {
        content: none !important;
    }

    .bg-gray {
        background: none;
    }

    .panel-group {
        margin-top: 15px;
    }

    .panel-collapse {
        display: block;
        height: initial;
    }

    .collapse {
        display: block;
    }

    #detailMainImage {
        max-height: 5cm;
    }

    .content-container {
        padding-top: 0;
        padding-bottom: 0;
    }
}
/*
    Styles für Komponenten, die mittels iFrames eingebettet werden können.
*/

.two-line-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: calc(2*20px); /**Fallback for IE, 3 Linien à 20px Linienhöhe*/
}

#id-component-tile {
    height: 250px;
    width: 500px;
}
#id-component-tile:hover {
    cursor: pointer;
}

.tile-grid {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 20px;
    padding: 20px;
}

.tile-image {
    display: flex;
    margin: auto;
    height: calc(250px - 20px - 20px);
    width: 100%;
    /* Damit das Text Overlay mit 'position: absolute' funktioniert */
    position: relative;
}

.tile-details {
    display: flex;
    flex-direction: column;
    font-size: smaller;
}

.tile-details-person-function {
    color: slategrey;
}

.tile-detail-grid {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    row-gap: 13px;
    /*justify-content: space-between;*/
}

.tile-image-thumb {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.tile-details-status .praesenz-valid {
    color: green;
}


.tile-details-status .praesenz-invalid {
    color: gray;
}

.tile-details-status span {
    color: black;
}

/* Text Overlay für Bilder, die aus ethischen Gründen augeblendet werden */
.tile-image-ethical-text {
    font-family: "Baton Turbo Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 0.8em;
    width: 95%;
    text-align: center;
}

.tile-image-position-start-start {
    object-position: left top;
}
.tile-image-position-start-centered {
    object-position: left center;
}
.tile-image-position-start-end {
    object-position: left bottom;
}


.tile-image-position-centered-start {
    object-position: center top;
}

.tile-image-position-centered-centered {
    object-position: center center;
}

.tile-image-position-centered-end {
    object-position: center bottom;
}

.tile-image-position-end-start {
    object-position: right top;
}

.tile-image-position-end-centered {
    object-position: right center;
}

.tile-image-position-end-end {
    object-position: right bottom;
}

#id-components-details-more-btn {
    margin-top: 4rem;
    margin-bottom: 2rem;
}

#id-components-details-more-btn a:hover {
    background-color: dimgray !important;
    border-color: dimgray !important;
}



/**
*   Diese .css-Datei bildet die Stile für die Merkliste ab.
*   Diese .css-Datei enthält folgenden Inhalt:
*
*   0. Allegmein
*   1. Spinner mit Text
*
*/

/************************************************************************************/
/* 0. Allgemein */
/************************************************************************************/

.merkliste-container .h1 {
    margin-bottom: 1.2rem !important;
}


.merkliste-container button
{
    font-weight: bold;
    padding-right: 20px;
    padding-left: 20px;
}


#id-merkliste-element-counter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin-bottom: 5rem;
    font-size: 1.66rem;
}

    #id-merkliste-element-counter span {
        padding: 0px 20px;
        border-radius: 30px;
        color: white;
        background-color: var(--dc-dark-accent-color);
    }

.merkliste-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

    .merkliste-buttons img {
        filter: invert();
        margin-right: 6px;
    }



.merkliste-container .btn-default {
    /* Normales Grau ist hier zu hell, da die Merkliste schon einen grauen Hintergrund hat */
    background-color: var(--dc-medium-neutral-color) !important;
}

.merkliste-more-container {
    position: relative;
    left: 50%;
    padding-top: 5rem;
    padding-bottom: 3rem;
    margin-left: -50vw;
    width: 100vw;

    background-color: #373737;
    color: white;

    text-align: center;
}

    .merkliste-more-container .btn {
        border-color: white !important;
        color: white;
    }

#id-merkliste-top-buttons {
    padding: 2rem 2rem 7rem 2rem;
}

#id-merkliste-bottom-buttons {
    padding: 5rem 0;
}

/************************************************************************************/
/* 1. Spinner mit Text */
/************************************************************************************/

.modal-with-spinner-spinner-container {
    display: flex;
    justify-content: center;
    margin: 4rem;
}

.modal-with-spinner-text-container {
    display: flex;
    justify-content: center;
}


/**
*   Diese .css-Datei bildet die Stile für die Modale ab.
*   Diese .css-Datei enthält folgenden Inhalt:
*
*   1. Allgemeiner Modal
*
*/

/************************************************************************************/
/* 1. Allgemeiner Modal */
/************************************************************************************/

 .modal {
    z-index: 10002;
}

.modal-backdrop {
    z-index: 10001;
}



.modal-standard-template .modal-dialog.modal-sm {
    max-width: 576px;
}
.modal-standard-template .modal-dialog.modal-lg {
    max-width: 768px;
}



.modal-standard-template .modal-header {
    padding: 40px 40px 20px 40px;
    border-bottom: none;
}

.modal-standard-template .modal-body {
    padding: 20px 40px 40px 40px;
}

.modal-standard-template .buttons {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

@media only screen and (max-width: 360px) {
    .modal-standard-template .buttons {
        flex-direction: column;
    }
}

.modal-standard-template .buttons .btn {
    margin: 0 5px;
}

/************************************************************************************/
/* 1. Elemente des Standard-Modals */
/************************************************************************************/

.modal-standard-template .modal-body li {
    font-size: 14px;
}

.modal-standard-template .modal-body textarea {
    width: unset;
}

.modal-standard-template .modal-footer {
    border: none;
}
/*
*   Diese .css-Datei enthält die Stile für den internen Bereich.
    Diese .css-Datei enthält folgenden Inhalt:

    0. Allgemeine Stile des internen Bereichs
    1. Login-Seite
    2. Configure-Seite
    3. Requests-Seite

*/

/************************************************************************************/
/* 0. Allgmeine Stile */
/************************************************************************************/

.internal-area-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    min-height: 800px;
    margin-top: 60px;
}

/************************************************************************************/
/* 1. Login */
/************************************************************************************/
#id-login-container {
    justify-content: center;
}

#id-login-container form {
    width: 100%;
}

    #id-login-container .error-message {
        color: red;
        margin-bottom: 20px;
    }


/************************************************************************************/
/* 2. Einrichten */
/************************************************************************************/

    #id-internal-configure form {
        width: 100%;
    }

    #id-internal-configure form button {
        margin-top: 20px;
    }

/************************************************************************************/
/* 3. Requests */
/************************************************************************************/

#id-request-objekte-container {
    width: 100%;
}
#id-request-objekte-container details {
    background-color: transparent;
}

#id-request-objekte-container summary {
    display: inline-flex;
    width: 100%;
    padding-left: 0;
}

    #id-request-objekte-container .request-inline-date {
        margin-left: auto;
        margin-right: 20px;
        opacity: 0.4;
    }

    #id-request-objekte-container .list-element-image-container {
        margin-top: -10px;
        margin-bottom: -10px;
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #f7f7f7;
    }

.request-button-container {
    display: flex;
    justify-content: right;
    gap: 1rem;

    margin-top: 2rem;
    margin-bottom: 2rem;
}