/*
 * Variablen-Deklaration für Kundenspezifisches Design.
 * Kundenspezifische Änderungen sollten NUR HIER (in dieser css) vorgenommen werden.
 * 
 * Diese Datei MUSS einzeln existieren, damit sie vor allen anderen .css-Datein geladen werden kann.
 * 
*/


:root {
    --dc-dark-accent-color: #ff3c00;
    --dc-light-neutral-color: f0f0f0;
    --dc-font-family: "Baton Turbo Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/**
*   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. Fixes am Xima-Layout und Barrierefreiheit
    1. Allgmeine Stile
    2. Banner
    3. Zoom von Bildern (Zoomen beim Hovern)
    4. Karuselle (aus Slick)
    5. Modal: Medien
    6. Alternative Stile für eigenen Einstiegspunkt
    7. Kollkektionen
    8. Barrierefreiheit
    9. Cookie-Modal
    10. Einfacher Audio-Player
    11. Einstellungen (nur zu Testzwecken)

*/

/************************************************************************************/
/* 0. Fixes am Xima-Layout */
/************************************************************************************/

/* 
 * SKD ahat in der Anzeige des Zählers auf der Startseite mittlerweile zu lange 
 * Zahlen. Deshalb ist hier ein zusätzlicher Break-point notwenig.
*/
@media (min-width: 992px) and (max-width: 1199px) {
    .skd-module-odometer .odometer {
        font-size: 64px;
        line-height: 90px;
    }
}

@media (min-width: 1200px) {
    .skd-module-odometer .odometer {
        font-size: 80px;
        line-height: 120px;
    }
}

.skd-link-caret {
    cursor: pointer;
}

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


/* 
 * Hier wird das alte Cookie-Banner ausgeblendet.
*/

.cc_banner-wrapper {
    display: none;
}

/* Show-More-Button-Inhalt wird abgeschnitten */
.skd-btn-show-more-content.skd-active {
    max-height: max-content !important;
}


/************************************************************************************/
/* 1. Allgemeine Stile */
/************************************************************************************/
body {
    padding-right: 0 !important;
}


/* Anzeige aller Links auf folgende Weise, siehe Redmine #21469 */
p a {
    font-family: "Baton Turbo Bold","Helvetica Neue", Helvetica,Arial,sans-serif;
    text-decoration: none;
}

p a::after {
    content: '\e972';
    font-family: 'skd', 'Arial', sans-serif;
    display: inline-block;
    vertical-align: bottom;
    width: 10px;
    margin-right: 5px;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

input {
    background-color: white;
}

.px-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.block {
    display: block;
}

.mtop0 {
    margin-top: 0;
}

.w-100 {
    width: 100%
}

.non-visible {
    display: none;
    opacity: 0;
    -o-transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    -o-animation: fade-in .5s linear 0s forwards;
    -webkit-animation: fade-in .5s linear 0s forwards;
    -moz-animation: fade-in .5s linear 0s forwards;
    animation: fade-in .5s linear 0s forwards;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}

.disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.65;
    box-shadow: none;
}

/* spans in Links Grau und in gleicher Zeile anzeigen */
.detail-module-text a span {
    display: inline;
    color: #444444;
    font-family: "The Sans LP3 Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}

p a:focus, p a:active {
    color: inherit;
    background: inherit;
}

/* Skalierung des dot deaktivieren*/
.skd-logo-zoom.skd-active .skd-logo-dot {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.hr-grey {
    border-top: 1px solid #eee;
}

@media(min-width: 768px) {
    .float-right-sm {
        float: right !important;
    }
    .text-right-sm {
        text-align: right;
    }
}

.simple-link {
    font-family: "Baton Turbo Regular","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: normal;
    text-decoration: none;
    text-decoration: underline;
}

.simple-link:hover {
    text-decoration: underline;
}

/* Stile für Links, welche wie Button ausshen sollen */
a.btn.btn-prinary {
    color: white;
    background-color: black;
}

a.btn.btn-prinary:focus-visible {
    background-color: gray;
}

.btn-bordered.btn-default {
    color: black;
    border-color: rgb(85, 85, 85) !important;
}

.skd-logo-dot {
    display: block;
    width: 150px;
    height: 150px;
    margin: auto;
    border-radius: 100%;
    background-image: radial-gradient(#ff3c00 30%, rgba(255, 60, 0, 0) 70%);
    filter: blur(5px);
}

.modal-dialog-centered {
    margin-top: auto;
    margin-bottom: auto;
}

.button-link {
    all: unset;
    font-weight: bold;
    font-family: "Baton Turbo Bold","Helvetica Neue",Helvetica,Arial,sans-serif;
    cursor: pointer;
}

    .button-link:hover, .button-link:focus-visible {
        text-decoration: underline;
    }

/************************************************************************************/
/* 2. Banner */
/************************************************************************************/

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

.banner-background-color {
    color: white;
    background-color: rgba(255,60,0,1)
}

.home-container {
    padding-top: 20px;
}

.home-container-title {
    margin-top: 20px
}

.home-container-title h2 {
    margin-top: -30px
}

.grid-row-gap-10 {
    display: grid;
    gap: 10px;
}

/************************************************************************************/
/* 3. Zoom von Bildern (Zoomen beim Hovern) */
/************************************************************************************/

.zoom-image-container {
    overflow: hidden;
}

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

/* Reinzoomen eines Bildes beim Hover*/
.zoom-image:hover {
    -webkit-transform: scale(1.05); /* Safari and Chrome */
    -moz-transform: scale(1.05); /* Firefox */
    -ms-transform: scale(1.05); /* IE 9 */
    -o-transform: scale(1.05); /* Opera */
    transform: scale(1.05);
}


/************************************************************************************/
/* 4. Karuselle (aus Slick) */
/************************************************************************************/

.slick-list {
    width: 100%;

}

.slick-arrow {
    width: 30px;
    height: 30px;
    background-color: black;
    border: 5px solid black;
    border-radius: 15px;
}

.slick-arrow:hover {
    opacity: 0.5;
    background: black;
}

.slick-arrow.slick-disabled {
    opacity: 0.25;
    background: black;
}


.slick-prev {
    left: -50px;
}

.slick-next {
    right: -50px;
}

.slick-next:before {
    content: '❯';
    opacity: 1;
    line-height: 0.5;
}

.slick-prev:before {
    content: '❮';
    opacity: 1;
    line-height: 0.5;
}

.slick-prev:focus {
    background: black;
}

.slick-next:focus {
    background: black;
}

/************************************************************************************/
/* 5. Modal: Medien */
/************************************************************************************/

#modal-medien.modal.in {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding-right: 0 !important;
}

#modal-medien .close {
    right: -56px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 21px;
    background-color: white;
}

@media (max-width: 1200px) {
    #modal-medien .close {
        z-index: 1;
        right: 18px;
    }
}


#modal-medien .close:hover {
    background-color: black;
}


#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: 16px;

    height: 100%;
    width: 100%;

}

#modal-medien .modal-header {
    padding: 16px 24px 0 24px;
}

    #modal-medien .modal-header h1 {
        font-size: 20px;
        margin-bottom: 0;
        padding-right: 40px;
        padding-left: 40px;
        line-height: inherit
    }


#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 24px 0px 24px;
}

#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 16px 40px;
    width: 100%;
}


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


#modal-medien .medium-modal-footer-bottom-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 215px;
    margin-right: 30px;
    overflow: hidden;

}

#modal-medien .medien-modal-reproduktion {
    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;
    margin-left: 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:hover {
        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 img {
    outline: 2px solid black;
    outline-offset: 2px;
}

    .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;
}

/************************************************************************************/
/* 6. Alternative Stile für eigenen Einstiegspunlt (_LayoutNoHeaderNoFooter.cshtml) */
/************************************************************************************/
/* Content-Container für eigenen Einstiegspunkt */
.body-alt {
    background-image: none;
}

/* Ausblenden des Cookie-Banners für eigenen Einstiegspunkt */
.body-alt .cc_banner {
    display: none;
}

/* Content-Container für eigenen Einstiegspunkt */
.main-content-alt {
    margin: 20px 10px 10px 10px;
}

/************************************************************************************/
/* 7. Kollektionen */
/************************************************************************************/

#id-section-collektions {
    margin-top: -8rem;
}

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

@media (max-width: 1200px) {
    .collections-overview-grid {
        padding-right: 3rem !important;
        padding-left: 3rem !important;
    }
}

    .collections-overview-grid.container::before, .collections-overview-grid.container::after {
        all: unset;
    }

/*
    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);
    }
}


/*Drei Spalten ab 992px*/
@media (max-width: 1240px) {
    .collections-overview-grid {
        margin: 0 3rem;
    }
}

.collection-element {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

/************************************************************************************/
/* 8. Barreirefreiheit Startseite */
/************************************************************************************/

.navbar .skd-header-portal-name a:focus {
    outline: none;
}

.navbar .skd-header-portal-name a:focus-visible span {
    outline: 2px solid black;
    outline-offset: 10px;
}

.skd-carousel-nav-prev:focus, .skd-carousel-nav-next:focus {
    outline: none !important;
}

.skd-carousel-nav-prev:focus-visible, .skd-carousel-nav-next:focus-visible {
    outline: 3px solid black !important;
    outline-offset: 3px;
}


/************************************************************************************/
/* 9. Cookie-Modal  */
/************************************************************************************/

/* 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 .modal-dialog {
    max-width: 720px;
    overflow: hidden;
    pointer-events: auto;
}

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

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


#id-modal-cookies .modal-header {
    padding: 40px 30px 0 30px;
}

    #id-modal-cookies .modal-header h3 {
        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: 0 30px 0 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 {
            left: -9px;
            font-size: 13px !important;
            padding-top: 1px;
            width: 25px !important;
            height: 25px !important;
        }

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

    /* Disabled-Stil der Checkbox */
    #id-modal-cookies .cookie__checkbox input[type=checkbox]:disabled + label:before {
        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;
}

@media (max-width: 500px) {
    #id-modal-cookies .buttons {
        flex-direction: column;
    }
}

#id-modal-cookies .buttons .btn {
    min-width: 245px
}

/************************************************************************************/
/* 10. 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;
}

/************************************************************************************/
/* 11. Einstellungen */
/************************************************************************************/


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

    #id-einstellungen * {
        all: revert !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;
        }
/**************** PAGINATION****************/
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination > li {
    display: inline;
}

.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    text-decoration: none;
    border: 1px solid #e6e6e6;
    color: #000;
    background: #fff;
}

.pagination > li > a:hover {
    color: #fff;
    background: #000;
}

.pagination a {
    text-decoration: none !important;
}


.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
    margin-left: 0;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

/*aktive Page grau unterlegen*/
.pagination li.active a,
.pagination li.active span {
    color: #fff;
    background: #000;
}

.pagination li.disabled a{
    background: #FCFBFB;
    color: #5E5E5E;
}

.pagination .skd-icon-md:nth-child(2) {
    margin-left: -10px;
}

#id-nav-mini-icons {
    transition: transform .5s;
    transform: translate3d(0, 55px, 0);
    font-size: 16px;
}

#id-nav-mini-icons button {
    font-size: 16px;
}

.skd-header.affix.skd-nav-down #id-nav-mini-icons {
    transform: translate3d(0, 0, 0);
}


/*
    Diese .css-Datei enthält CSS-Regeln, die für Seiten mit 
    Wasserfall oder Listenansicht genutzt werden, sowohl mit
    als auch ohne Header/Footer.


    Diese .css-Datei enthält folgenden Inhalt:

    0. Allgemein
    1. Wasserfall/Kachelansicht
    2. Listenansicht 
    3. Carousel 
    4. Textansicht
    5. Bereich über Suchergebnisse: Suchergbnis-Steuerelemente
    6. Facetten
    7. Multi-Range-Slider 
    8. Titel für spezielle Suchergebnisseiten
*/

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

#id-search-results-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;

    max-width: 1200px;
    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 (max-width: 992px) {
    #id-search-results-grid {
        position: relative;
        grid-template-columns: 1fr !important;
    }
}


/************************************************************************************/
/* 1. Wasserfall */
/************************************************************************************/

/* Text Overlay für Bilder, die aus ethischen Gründen augeblendet werden */
.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%);
    text-align: center;
    padding: 1em;
}


/* derzeit nicht genutzt */
.media-text-centered, .media-text-centered h3 {
    text-align: center;
}

/* Header über dem Wasserfall */
.tile-start-container {
    margin-bottom: 20px;
}

/* Text in Buttons der Web-Kennzeichen groß schreiben */
section > .tile-start-container > .row > div > a {
    text-transform: uppercase;
}

/*
    Wird gesetzt, damit man den Wasserfall mittels .show() 
    via jquery zeigen kann nachdem er geladen wurde
*/
.waterfall {
    display: none;
}

/* 
    bei Auflösungen < 1200px braucht der Wasserfall 
    links und rechts etwas margin 
*/
@media (max-width: 1200px) {
    .waterfall {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* 
    Container, der bei einem Bild (im Wasserfall) beim
    Hovern noch zusätzliche Informationen anzeigt.
*/
.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);

    word-wrap: break-word;
}

/* Text für den Hover-Container nur beim Hovern mit der Maus angezeigt */
.tile-item:hover .hover-container {
    display: block;
}

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



.tile-item:hover .hover-container a {
    position: relative;
}

.tile-item .image-ethical-text {
    font-size: 0.7em;
    width: 95%;
}

/* 
    Platz unter Bildern im Hover-Container, 
    damit alle Ränder gleich groß sind
*/
.hover-container img {
    margin-bottom: 15px;
}

.hover-container span:not(:last-child) {
    display: block;
    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;
}

/* Den Pfeil an Links vom SKD Layout ausblenden */
section > .container > .waterfall a::after {
    content: '';
    font-family: 'skd', sans-serif;
    display: none;
}

/************************************************************************************/
/* 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-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;
}
    .list-view .card-button.btn-default {
        border-color: rgb(85, 85, 85);
        background-color: transparent;
    }
        .list-view .card-button.btn-default:disabled {
            border-color: rgb(85, 85, 85);
            background-color: transparent;
            opacity: 0.6;
        }


.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;
    }
}

.list-view-header {
    font-weight: bold;
}

/* 
    Text in den Elementen der Listenansicht (außer dem Titel des Objekts) 
    soll zeilenweise angezeigt werden
*/
.list-view span:not(.list-view-header) {
    display: block;
    font-family: "The Sans LP3 Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    margin-bottom: 20px;
}

/*
    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 {
    font-family: "The Sans LP3 Light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: normal;
}

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

/************************************************************************************/
/* 3. Carousel */
/************************************************************************************/
@media (min-width: 992px) {
    .skd-carousel .skd-carousel-nav-prev, .skd-carousel .skd-carousel-nav-next {
        line-height: 0.79;
    }
}

/************************************************************************************/
/*  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: "Baton Turbo Regular","Helvetica Neue", Helvetica, Arial, sans-serif;
        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;
}

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

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

@media only screen and (max-width: 1245px) {
    #id-search-result-controls {
        margin-right: 15px;
        margin-left: 15px;
    }
}


/* 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 .fa {
    font-size: 16px;
    color: #CCCCCC;
}

.viewmode-buttons {
    display: flex;
    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 5px;

}

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

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

/* Padding nach oben und unten am Sortier Dropdown entfernen*/
.sort-box .bootstrap-select > .dropdown-toggle {
    padding-top: 0;
    padding-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 as rechter Drawer */
@media only screen and (max-width: 992px) {
    #id-search-results-facets {
        display: none;
        z-index: 100;
        position: absolute;
        right: 0;
        width: 320px;
        height: max-content;
        height: -webkit-fill-available;
        max-width: 100vw;
        padding-top: 25px;
        box-shadow: 1px 1px 5px lightgray;
    }

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

/* Responsives Verhalten: Filter als gesamte Seite */
@media only screen and (max-width: 768px) {
    #id-search-results-facets {
        width: 100vw;
        height: auto;
        padding-right: 4rem;
        padding-left: 4rem
    }
}


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


#id-search-results-facets summary {
    display: flex;
    flex-wrap: nowrap;
    cursor: pointer;
    font-family: "Baton Turbo Bold","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-size: 16px;
}

#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: "Baton Turbo Regular","Helvetica Neue",Helvetica,Arial,sans-serif !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: 'skd', sans-serif !important;
    content: "\e900";
}

#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;
}
/************************************************************************************/
/*  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: 6rem;
    padding: 0 1rem;

    text-align: center;
    font-size: 2rem;
    line-height: 1.6;
}





/**
*   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. Allgemein
    1. Oberes Karusell auf der Detailseite
    2. Links
    3. Präsensenzstatus
    4. Objektinformationen
    5. Kommentare
    6. Auch Wissenswert
    7. Zensur
    8. Zugeordnete Objekte
    9. Copyright-Anzeige in den Detail-Daten eines Bildes
    10. Karuselle in den ausklappbaren Bereichen der Detail-Daten eines Bildes
    11. Share-Modal
    12. Cluster
    13. Medien-Seite

*/

/************************************************************************************/
/* 1. Oberes Karusell auf der Detailseite */
/************************************************************************************/

/* anhängen der Pfeile vom SKD Layout überschreiben */
section .detail-image-row .skd-carousel-nav-prev::after,
section .detail-image-row .skd-carousel-nav-next::after {
    content: initial;
}

.detail-image-row .skd-carousel-nav-prev,
.detail-image-row .skd-carousel-nav-next {
    display: block;
    z-index: 1;
    width: 30px;
    height: 30px;
    font-size: 30px;
    font-family: "Baton Turbo Regular","Helvetica Neue", Helvetica,Arial,sans-serif;
    line-height: .79;
    text-align: center;
    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;
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .detail-image-row .skd-carousel-nav-prev,
    .detail-image-row .skd-carousel-nav-next {
        position: absolute;
        top: 50%;
        margin-bottom: 15px;
    }

        .detail-image-row .skd-carousel-nav-prev:focus,
        .detail-image-row .skd-carousel-nav-next:focus,
        .detail-image-row .skd-carousel-nav-prev:hover,
        .detail-image-row .skd-carousel-nav-next:hover {
            color: #fff;
            text-decoration: none;
            background: #333
        }

        .detail-image-row .skd-carousel-nav-prev.disabled,
        .detail-image-row .skd-carousel-nav-next.disabled {
            opacity: 0;
            pointer-events: none
        }

        .detail-image-row .skd-carousel-nav-prev::after,
        .detail-image-row .skd-carousel-nav-next::after {
            display: none
        }
}


@media (min-width: 768px) {
    .detail-image-row .skd-carousel-nav-prev {
        left: auto;
        right: 0;
    }

    .detail-image-row .skd-carousel-nav-next {
        left: 0;
        right: auto
    }
}

/* Columns links und rechts vom Bild gleich hoch machen */
@media (min-width: 768px) {
    .detail-image-row {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}

/* Text bei ethnisch bedenklichen Bilder, der über dem Bild angezeigt wird */
.detail-image-row .image-ethical-text {
    position: absolute;
    left: 50%;
    top: 80%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

@media(max-height:300px) {
    .detail-image-row .image-ethical-text {
        top: 70%;
    }
}

@media(max-width:470px) {
    .detail-image-row .image-ethical-text {
        width: 80%;
    }
}

@media(min-width:768px) {
    .detail-image-row .image-ethical-text {
        width: 80%;
    }
}

@media(min-width:910px) {
    .detail-image-row .image-ethical-text {
        width: auto;
    }
}

.detail-module-text h2,
.detail-module-text a {
    text-align: center;
    display: block;
}

.detail-module-text div {
    margin-top: 40px;
    display: block;
}

/* Row mit QuickLinks, Detailbild und Share Icon */
.detail-module-image {
    margin-top: 50px;
    margin-bottom: 30px;
    padding: 0 15px;
}


@media (min-width: 768px) {

    .detail-module-image .object-links {
        position: absolute;
        bottom: 0;
        width: 100%
    }
}

figure.skd-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}

.skd-image-inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
    max-height: 550px;
    max-width: 100%;
}

#detailMainImage {
    opacity: 1;
    height: inherit;
    width: inherit;
    max-width: inherit;
    max-height: inherit;
    padding: 10px;

    object-fit: contain;

}

#detailMainImage:hover {
    cursor: pointer;
}

#id-main-image-icon {
    position: absolute;
    height: 58px;
    width:58px;
}
    #id-main-image-icon img {
        width: 58px;
        pointer-events: none;
    }


/******************* Thumbnails *************************/
.detail-module-thumbnails {
    margin-bottom: 40px;
}

    .detail-module-thumbnails span {
        text-transform: uppercase;
    }

    .detail-module-thumbnails .skd-width-xs {
        text-align: center;
    }

    .detail-module-thumbnails .owl-carousel .owl-item img {
        max-height: 120px;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
    }

    /* Aktives Thumbnail unterm Detailbild */
    .detail-module-thumbnails img.active {
        border: 3px black solid;
    }

    .detail-module-thumbnails img[id^="thumb-"]:hover {
        opacity: 0.75;
    }


/********************* Picture Tools********************/
/*Icons größer machen*/

.object-links i {
    font-size: 25px;
}

    .object-links i:hover {
        color: gray;
    }

.object-links a:focus,
.object-links a:active {
    color: #000;
    background: none;
}

/* Anzeige von Icons in den Vorschaubildern */
.icon-container {
    position: relative;
    text-align: center;
}

.icon-container .center-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 40px;
    width: 40px;
    border-radius: 25px;
    color: white;
    max-width: 100%;
}


/************************************************************************************/
/* 2. Links */
/************************************************************************************/
.detail-module-image a {
    text-decoration: none;
}

.detail-module-image a:hover {
    text-decoration: underline;
}

.object-links a:not(.icon-link) {
    margin-bottom: 5px;
    line-height: 1.75;
    display: block;
}

.link-hover-pointer {
    cursor: pointer;
}

.object-links .fa,
.picture-tools .fa {
    font-size: 35px;
    text-decoration: none;
}

.link-with-icon {
    width: 16px;
    vertical-align: baseline;
}

/************************************************************************************/
/* 3. Präsensenzstatus */
/************************************************************************************/

.status-container {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .status-container a.status-link {
        margin-bottom: 0;
        cursor: pointer;
    }

i.status {
    text-transform: none;
}

i.status {
    color: #62ca01;
    font-size: 16px !important;
}

i.status:hover {
    color: #62ca01;
}


/************************************************************************************/
/* 4. Objektinformationen */
/************************************************************************************/

/* bei kleineren Auflösungen sollen die Infotext links/rechts Abstand zum Bildschirmrand haben*/
@media (max-width: 768px) {
    .detail-module-objektinfos {
        margin-right: 15px;
        margin-left: 15px;
    }
}

.detail-module-objektinfos .row:not(:last-child) {
    padding-bottom: 20px;
}

.detail-module-objektinfos .skd-headline-roof {
    white-space: normal;
}

.detail-module-objektinfos #reproRechteLink::after {
    content: none;
}

.modal .input-group {
    width: 100%;
}

.input-group input {
    width: 100%;
}

.modal textarea {
    width: 100%;
}

/************************************************************************************/
/* 5. Kommentare */
/************************************************************************************/

.detail-module-objektinfos .alert {
    padding: 7px;
    text-align: center;
}

.alert-success {
    background: #e4f5e4;
}

.alert-warning {
    background: #fdeddc;
}

/************************************************************************************/
/* 6. Auch Wissenswert */
/************************************************************************************/

.interesting-objects {
    padding-bottom: 30px;
}

.interesting-objects img {
    max-height: 220px;
    width: auto;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
}

.interesting-objects .skd-module-teasers-3 .skd-headline-roof {
    margin-bottom: 10px;
}

.skd-accordion .row:not(:last-child) {
    padding-bottom: 20px;
}

@media (max-width: 768px) {
    .interesting-objects .skd-module-teasers-3 .skd-headline-roof {
        margin-top: 20px;
        margin-bottom: 5px;
    }
}

.objects-centered {
    display: flex;
    justify-content: center;
}



/************************************************************************************/
/* 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 .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 10px;
}

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

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

    #censored-modal .buttons .btn {
        width: 100%;
       margin: 0;
    }
}

/************************************************************************************/
/* 8. Zugeordnete Obejekte */
/************************************************************************************/
#svg-container {
    position: relative;
    width: 100%;
    height: 100%;
}

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

.legend-relations-conatiner {
    position: absolute;
    bottom: 55px;
    right: 30px;

    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: 30px;
    bottom: 10px;
    z-index: 1000; /* z-index muss über z-Index von Hilfe-Button sein!*/
    cursor: pointer;
}

.fa-icon-skd-style {
    background-color: black;
    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-skd-style nicht zentriert! */
.fa-icon-skd-style-list {
    background-color: #808080;
    padding: 11px 12px;
    height: 40px;
    width: 40px;
    border-radius: 25px;
    color: white;
    max-width: 100%;
}




/************************************************************************************/
/* 9. Copyright-Anzeige in den Detail-Daten eines Bildes */
/************************************************************************************/

#id-rechte-container {
    display: flex;
    align-items: center;
    width: fit-content;
    height: fit-content;
    margin-top: 15px;
    /* margin-bottom: 15px; Redmine #21685 */
}

#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 p {
    display: flex;
    align-items: center;

    height: fit-content;
    text-transform: none;
    margin-bottom: 0;
}

#id-rechte-container a {
    height: fit-content;
    padding-top: 8px;
    margin-bottom: 0;
}

/************************************************************************************/
/* 10. Karuselle in den ausklappbaren Bereichen der Detail-Daten eines Bildes */
/************************************************************************************/

#carousell-provenienz, #carousell-werkmappe {
    margin-top: 60px;
}

.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;
    overflow: hidden;
    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*/
}

/************************************************************************************/
/* 11. Share-Modal  */
/************************************************************************************/

#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;
}

#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;
}


.medien-toolbox-tool svg {
    color: var(--dc-dark-accent-color);
}
/************************************************************************************/
/* 12. Cluster  */
/************************************************************************************/

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

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

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

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

.cluster-text-container .list-icon {
    background-size: 1.6rem 1.6rem;
    background-repeat: no-repeat;
    background-position-y: 0.2rem;
    background-position-x: 0.2rem;
    padding-left: 28px;
    font-family: "Baton Turbo Bold","Helvetica Neue",Helvetica,Arial,sans-serif;
}

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

#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: -12px;
    }

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

    #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;
}

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

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

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

        #id-reproduktion-elemente-container .merkliste-button-container a {
            margin-bottom: 0px !important;
        }

.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;
}

.transcription-footnote-highlight {
    -webkit-animation: transcription-footnote-fade 3s 1;
    -moz-animation: transcription-footnote-fade 3s 1;
    animation-delay: 500ms;
}

@-webkit-keyframes transcription-footnote-fade {
    0% {
        background-color: var(--bgstart);
    }

    100% {
        background-color: var(--bgend);
    }
}

@-moz-keyframes transcription-footnote-fade {
    0% {
        background-color: var(--bgstart);
    }

    100% {
        background-color: var(--bgend);
    }
}


/************************************************************************************/
/* 13. Medien-Seite  */
/************************************************************************************/
.separate-media-page-content {
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
}

.separate-media-page-content .component-external-media-viewer-container {
    margin-left: auto;
    margin-right: auto;
}

.component-external-media-viewer-info-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-column-gap: 50px;
    grid-row-gap: 0px;
    padding-top: 25px;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    row-gap: 15px;
}

.component-external-media-viewer-info-grid-column1 {
    text-align: left;
}

.component-external-media-viewer-info-grid-column2 {
    text-align: left;
}

.component-external-media-viewer-usage-list {
    display: flex;
    flex-direction: column;
}
/**
*   Diese .css-Datei bildet die zusätzlichen Designs für die Suche ab.

    Diese .css-Datei enthält folgenden Inhalt:

    1. Allgmeine Stile
    2. Schnellsuche
    3. Erweiterte Suche: Suchergbenisse
    4. Erweiterte Suche: Suchfelder
    5. -Erweiterte Suche: Steuerelemente- (verschoben)
    6. Erweiterte Suche: Suchergebnisse - Künstlerbiographie
    7. Modal: Suchmodus ändern
    8. Ethische Leitlinie
    9. Layout der Such-Buttons
    10. Layout der Hilfe-Seite für die erweiterte Suche
    11. Titel für Suchergebnisseiten

*/


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

.typeahead {
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
    font-size: 12px
}

/************************************************************************************/
/* 2. Schnellsuche */
/************************************************************************************/

#skd-modal-search .modal-full {
    bottom: auto;
}

.startpage-search .btn::after {
    content: initial;
}

.startpage-search .btn:not(.btn-sm):not(.btn-lg):not(.dropdown-toggle) {
    font-size: 20px;
    height: auto;
    padding: 16px 27px;
}

.startpage-search input {
    padding: 20px;
    height: auto;
}

#id-fastsearch-info {
    margin-bottom: 10px;
}


/************************************************************************************/
/* 3. Erweiterte Suche: Suche */
/************************************************************************************/

.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;
    }
}

.searchfield, .searchfield button {
    max-height: 42px;
}

.searchfield input {
    margin-bottom: 0px;
}


/* Select-Felder sytlen */
.suche-section .bootstrap-select > .dropdown-toggle {
    /*Bootstrap Selects mit grauem Border versehen*/
    border: 1px solid #cacaca !important;
    color: #000 !important;
    text-transform: none;
    font-size: 16px;
    font-family: inherit;
    letter-spacing: inherit;
}

    .suche-section .bootstrap-select > .dropdown-toggle .filter-option {
        color: #333 !important;
    }

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

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


/* weißen Text im Autocomplete schwarz machen*/
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: #000;
}


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

/* Datierung stylen */

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

#id-searchfield-date .datierung-von {
    border-right: none;
    background-image: url(/Content/images/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. Erweiterte Suche: Bereich über Suchergebnisse: Suchfelder */
/************************************************************************************/

/* Section die Grid/List Buttons und Sortierdropdown enthält */


.search-words a,
.search-words span {
    text-decoration: none;
}

.search-words a:hover {
    text-decoration: underline;
}

.search-words {
    padding-bottom: 0;
}

/* ein wenig Abstand beim Container mit den Filtern nach oben zum Rand */
.search-words > .container {
    padding-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;
}

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

#id-searchfield-sprache {
    display: none;
}

/************************************************************************************/
/* 6. Erweiterte Suche: Biografie */
/************************************************************************************/
#id-search-biography-container a {
    padding-left: 15px;
    text-align: left;
    cursor: pointer;
}


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

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

#id-modal-suchmodus .buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 10px;

    margin-top: 40px;
}

#id-modal-suchmodus .btn {
    margin-top: 0;
}

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

    }
}

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

/************************************************************************************/
/*  8. Ethische Leitlinie */
/************************************************************************************/

#id-ethische-leitlinie a {
    font-weight: bold;
}

/************************************************************************************/
/*  9. Layout der Such-Buttons */
/************************************************************************************/

.help-button-round {
    height: 30px;
    width: 30px;
    text-align:center;
    border-radius: 50%;
    margin: 0;
    padding: 0;
}

.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/
*/

.parent-button-grid {
    display: grid;
    grid-template-columns: 2fr 9fr 2fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 0px;

    margin-top: 6rem;
}

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

.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;
        margin-right: 30px;
    }
}


/* 
    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;
        margin-bottom: 5px;
    }

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

/************************************************************************************/
/*  10. Layout der Hilfe-Seite für die erweiterte Suche */
/************************************************************************************/
#help-page-modal ul li {
    font-size: 14px;
}

#help-page-modal.modal-body {
    padding-bottom: 20px;
    padding-right: 45px;
    padding-left: 45px;
    max-width: 800px;
}

/* Der Okay-Button soll von der Ausrichtung zum X-Button oben rechts passen */
#help-page-modal-button {
    padding-right: 30px;
}

/* 
   Das Padding unter dem Okay-Button wird sonst vom
   regulären .modal-body übernommen (40px), das ist zu viel...
*/
#help-page-modal-button.modal-body {
    padding-bottom: 20px;
}

#extended-search-help {
    border-radius: 50%;
}

/*
   Hilfe-Button muss beim verkleinern der Seitenbreite
   die gleiche Höhe behalten wie die drei Buttons
   daneben, darf nicht durchgängig 40px groß sein.
*/
@media(max-width: 1200px) {
    #extended-search-help {
        padding: 8px 11px;
        height: 31.5px;
        width: 31.5px;
        font-size: 0.9em;
    }
}

/************************************************************************************/
/*  11. Autocomplete-Felder */
/************************************************************************************/

.ui-autocomplete .subtext {
    display: block;
    font-family: var(--dc-font-family);
}

/************ Bereiche über den Suchergebnissen: Karte ********/
/**************************************************************/

.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;
}


#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');
    font-size: 1.2em;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/************ Zoombilder **************************************/
/**************************************************************/

.leaflet-container {
    background-color: #f0f0f0;
}

#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;

    display: flex;
    justify-content: center;
    flex-direction: column;
}

#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-controls button {
    all: unset;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    margin: 3px;
    font-size: 14px;
}

#modal-medien .medien-animation-navigation-controls button {
    all: unset;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin: 3px;
    background-color: black;
    font-size: 14px;
}

    #modal-medien .medien-animation-navigation-controls button img {
        filter: invert();
    }

    #modal-medien #id-animation-home img {
        filter: none;
        
    }

#modal-medien .medien-animation-controls button {
    all: unset;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    font-size: 14px;
    margin-right: 3px;
}

#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-visible,
#modal-medien .medien-animation-controls button:focus-visible {
    outline: solid black 2px !important;
    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 {
    cursor: pointer;
    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;
}

#modal-medien #id-animation-left {
    grid-row: 2;
    grid-column: 1;
}

#modal-medien #id-animation-home {
    grid-row: 2;
    grid-column: 2;
}

#modal-medien #id-animation-right {
    grid-row: 2;
    grid-column: 3;
}

#modal-medien #id-animation-bottom {
    grid-row: 3;
    grid-column: 2;
}

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

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

#modal-medien .medien-modal-controls-right {
    left: unset;
    right: 2%;
}

@media print {
    header,
    .search-words,
    .pictue-tools,
    .object-links,
    .skd-btn-show-more,
    .interesting-objects,
    .objekt-feedback, 
    footer {
        display: none;
    }

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

    .container {
        width: auto;
        min-width: 750px;
        padding-left: 50px;
        padding-right: 50px;
    }

    #detailMainImage {
        max-height: 5cm;
    }

    a[href]:after {
        content: none !important;
    }

    section {
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }

    .skd-content {
        padding-top: 30px;
        padding-bottom: 0;
    }

    .skd-btn-show-more-content {
        max-height: initial !important;
        padding-bottom: 0;
        margin-top: 20px;
    }

    .detail-module-image {
        margin-top: 0;
        margin-bottom: 0;
    }
    .detail-module-objektinfos {
        margin-top: 10px;
    }

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

    .panel-collapse {
        display: block;
        height: initial;
    }
    .collapse {
        display: block;
    }
}
/*
    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;
}

/* 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%;
}

.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;
}

/**
    OC Browser
*/

.section-no-bottom-padding {
    padding-bottom: 0;
}

#art-browser {
    padding-top: 50px;
    margin-left: auto;
    margin-right: auto;
}


@media screen and (max-width: 992px) {
    #art-browser {
        width: 100%;
    }
}

#oc-browser-loading-indicator {
    height: 100px;
    width: 100%;
}

#spinning-circle {
    filter: invert(35%) sepia(100%) saturate(4151%) hue-rotate(1deg) brightness(102%) contrast(107%);
    background: url(../img/loading.svg) 50% 50% no-repeat;
    -o-animation: infinite-spinning 1s linear infinite;
    -webkit-animation: infinite-spinning 1s linear infinite;
    -moz-animation: infinite-spinning 1s linear infinite;
    animation: infinite-spinning 1s linear infinite;
    height: 100%;
}

/*
    Externer Medien-Viewer
*/

.component-external-media-viewer-container {

}

.component-external-media-viewer-content-and-navigation {
    display: flex;
    flex-direction: row;
    background-color: unset !important;
    height: 700px !important;
    min-height: 700px !important;
    width: 1200px !important;
    min-width: 800px !important;
}

.component-external-media-viewer-next-prev {
    z-index: initial;
    position: initial;
    margin-top: auto;
    margin-bottom: auto;

}

.component-external-media-viewer-next-prev icon {
    width: 27px;
}

.external-media-viewer-body {
    margin: 0 10px 0 10px !important;
}
/**
*   Diese .css-Datei bildet die Stile für die Merkliste ab.
*   Diese .css-Datei enthält folgenden Inhalt:
*
*   0. Allgmein
*   1. Spinner mit Text
*
*/

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

.merkliste-container .h1 {
    margin-bottom: 2rem !important;
}
.merkliste-container button {
    font-weight: bold;
}

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

    margin-bottom: 5rem;

    font-size: 2rem;
}

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

.merkliste-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding-bottom: 5rem;
}

.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 {
    display: flex;
    gap: 14px;
    padding: 20px 20px 70px 20px;
    justify-content: center;
}

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

/************************************************************************************/
/* 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-standard-template .modal-dialog {
    width: calc(100% - 17px); /* 17px für eventuellen Scrollbalken */
    max-width: 800px;
}

.modal-standard-template.modal.in {
    display: flex !important;
}

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

.modal-standard-template .modal-content {
    height: fit-content;
    padding-bottom: 40px;
}


.modal-standard-template .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-standard-template .modal-dialog .buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}