/* Bildergalerie (Mosaik) v1.0.5 | MIT License | @MatthiasRke */
/* CSSgram | MIT License | una.im/cssgram */

/* Zeilenumbruch entfernen */
#page-mod-data-view #region-main br:first-of-type {
    display: none;
}

/* Eintrag hinzufügen */
.nav-tabs .nav-item a[href*="edit"] {
    color: #fff;
    background: #28a745;
    border-color: #28a745;
}
.nav-tabs .nav-item a[href*="edit"]:hover {
    background: #218838;
    border-color: #1e7e34;
}
.nav-tabs .nav-item a[href*="edit"]:focus {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, .5);
}
.nav-tabs .nav-item a[href*="edit"]::before {
    font-family: "FontAwesome";
    font-weight: 900;
    content: "\f067";
    margin-right: .5rem;
}

/* Felder bei Eintrag hinzufügen */
#page-mod-data-edit .mod-data-input {
    margin-left: 0;
}

/* Neuer Eintrag */
.box h3 {
    text-align: center;
}

/* Feld bei Eintrag hinzufügen */
#page-mod-data-edit .basefieldinput,
#page-mod-data-edit .entry,
#page-mod-data-edit .entry-img {
    width: 100%;
    max-width: 600px;
}

/* Kommentare und Bewertungen */
.comment-link,
.comment-ctrl,
.ratingform,
.rating-aggregate-container {
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1rem;
}
.comment-link {
    margin-top: 1rem;
}
.rating-aggregate-container {
    display: block;
}

/* Listenansicht */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); */
    grid-gap: 2px;
}

/* Bildformat (1:1 - padding-top: 100%; 4:3 - padding-top: 75%; 3:2 - padding-top: 66.67%; 16:9 - padding-top: 56.25%) */
/* .gallery-item {
    aspect-ratio: 1;
} */
.gallery-item {
    position: relative;
    width: 100%;
    padding-top: 100%;
}
.gallery-item img {
    position: absolute;
    top: 0;
}

/* Bilder in Listenansicht */
.gallery-item {
    position: relative;
}
#page-mod-data-view .gallery-item .list_picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* Einzelansicht */
.gallery-single {
    width: -moz-fit-content;
    width: fit-content;
}
.gallery-single img {
    display: block;
    max-width: 1200px;
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

/* Bildbeschriftung */
.gallery-caption {
    opacity: 0;
    transition: opacity .5s;
    text-shadow: 1px 1px 1px rgb(0, 0, 0, .5);
}
.gallery-item:hover .gallery-caption {
    opacity: 1;
    transition: opacity .5s;
}
.gallery-caption a,
.gallery-caption a:hover,
.gallery-caption a:focus {
    color: #fff;
}
.gallery-text {
    max-width: 800px;
}
.filter-text::before {
    content: "- Filter: ";
}
.filter-text:empty,
.gallery-icons:empty {
    display: none;
}

/* Vollbild */
@media all and (display-mode: fullscreen) {
    #page-header,
    #nav-drawer,
    .navbar,
    h2,
    .dropdown,
    #page-mod-data-view .region_main_settings_menu_proxy,
    .nav-tabs,
    #intro,
    #options,
    .activity-navigation,
    #page-footer {
        display: none;
    }
    .d-fs-none {
        display:none !important;
    }
    #page {
        margin-top: 15px;
    }
    #learningcontent {
        max-width: none;
    }
    #page-mod-data-view .gallery-single .list_picture {
        width: auto;
        max-width: none;
        max-height: 75vh;
    }
}

/* Filter */
.aden {
    position: relative;
    -webkit-filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);
    filter: hue-rotate(-20deg) contrast(.9) saturate(.85) brightness(1.2);
}

.aden:after,
.aden:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
}

.aden img {
    width: 100%;
    z-index: 1;
}

.aden:before {
    z-index: 2;
}

.aden:after {
    z-index: 3;
}

.aden::after {
    background: -webkit-linear-gradient(left, rgba(66, 10, 14, .2), transparent);
    background: linear-gradient(to right, rgba(66, 10, 14, .2), transparent);
    mix-blend-mode: darken;
}

.gingham::after,
.perpetua::after,
.reyes::after {
    mix-blend-mode: soft-light;
}

.inkwell {
    position: relative;
    -webkit-filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
    filter: sepia(.3) contrast(1.1) brightness(1.1) grayscale(1);
}

.inkwell:after,
.inkwell:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
}

.inkwell img {
    width: 100%;
    z-index: 1
}

.inkwell:before {
    z-index: 2
}

.inkwell:after {
    z-index: 3
}

.perpetua {
    position: relative
}

.perpetua:after,
.perpetua:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.perpetua img {
    width: 100%;
    z-index: 1
}

.perpetua:before {
    z-index: 2
}

.perpetua:after {
    z-index: 3
}

.perpetua::after {
    background: -webkit-linear-gradient(top, #005b9a, #e6c13d);
    background: linear-gradient(to bottom, #005b9a, #e6c13d);
    opacity: .5
}

.reyes {
    position: relative;
    -webkit-filter: sepia(.22) brightness(1.1) contrast(.85) saturate(.75);
    filter: sepia(.22) brightness(1.1) contrast(.85) saturate(.75)
}

.reyes:after,
.reyes:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.reyes img {
    width: 100%;
    z-index: 1
}

.reyes:before {
    z-index: 2
}

.reyes:after {
    z-index: 3
}

.reyes::after {
    background: #efcdad;
    opacity: .5
}

.gingham {
    position: relative;
    -webkit-filter: brightness(1.05) hue-rotate(-10deg);
    filter: brightness(1.05) hue-rotate(-10deg)
}

.gingham:after,
.gingham:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.gingham img {
    width: 100%;
    z-index: 1
}

.gingham:before {
    z-index: 2
}

.gingham:after {
    z-index: 3
}

.gingham::after {
    background: #e6e6fa
}

.toaster {
    position: relative;
    -webkit-filter: contrast(1.5) brightness(.9);
    filter: contrast(1.5) brightness(.9)
}

.toaster:after,
.toaster:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.toaster img {
    width: 100%;
    z-index: 1
}

.toaster:before {
    z-index: 2
}

.toaster:after {
    z-index: 3
}

.toaster::after {
    background: -webkit-radial-gradient(circle, #804e0f, #3b003b);
    background: radial-gradient(circle, #804e0f, #3b003b);
    mix-blend-mode: screen
}

.walden {
    position: relative;
    -webkit-filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6);
    filter: brightness(1.1) hue-rotate(-10deg) sepia(.3) saturate(1.6)
}

.walden:after,
.walden:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.walden img {
    width: 100%;
    z-index: 1
}

.walden:before {
    z-index: 2
}

.walden:after {
    z-index: 3
}

.walden::after {
    background: #04c;
    mix-blend-mode: screen;
    opacity: .3
}

.hudson {
    position: relative;
    -webkit-filter: brightness(1.2) contrast(.9) saturate(1.1);
    filter: brightness(1.2) contrast(.9) saturate(1.1)
}

.hudson:after,
.hudson:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.hudson img {
    width: 100%;
    z-index: 1
}

.hudson:before {
    z-index: 2
}

.hudson:after {
    z-index: 3
}

.hudson::after {
    background: -webkit-radial-gradient(circle, #a6b1ff 50%, #342134);
    background: radial-gradient(circle, #a6b1ff 50%, #342134);
    mix-blend-mode: multiply;
    opacity: .5
}

.earlybird {
    position: relative;
    -webkit-filter: contrast(.9) sepia(.2);
    filter: contrast(.9) sepia(.2)
}

.earlybird:after,
.earlybird:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.earlybird img {
    width: 100%;
    z-index: 1
}

.earlybird:before {
    z-index: 2
}

.earlybird:after {
    z-index: 3
}

.earlybird::after {
    background: -webkit-radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
    background: radial-gradient(circle, #d0ba8e 20%, #360309 85%, #1d0210 100%);
    mix-blend-mode: overlay
}

.mayfair {
    position: relative;
    -webkit-filter: contrast(1.1) saturate(1.1);
    filter: contrast(1.1) saturate(1.1)
}

.mayfair:after,
.mayfair:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.mayfair img {
    width: 100%;
    z-index: 1
}

.mayfair:before {
    z-index: 2
}

.mayfair:after {
    z-index: 3
}

.mayfair::after {
    background: -webkit-radial-gradient(40% 40%, circle, rgba(255, 255, 255, .8), rgba(255, 200, 200, .6), #111 60%);
    background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, .8), rgba(255, 200, 200, .6), #111 60%);
    mix-blend-mode: overlay;
    opacity: .4
}

.lofi {
    position: relative;
    -webkit-filter: saturate(1.1) contrast(1.5);
    filter: saturate(1.1) contrast(1.5)
}

.lofi:after,
.lofi:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.lofi img {
    width: 100%;
    z-index: 1
}

.lofi:before {
    z-index: 2
}

.lofi:after {
    z-index: 3
}

.lofi::after {
    background: -webkit-radial-gradient(circle, transparent 70%, #222 150%);
    background: radial-gradient(circle, transparent 70%, #222 150%);
    mix-blend-mode: multiply
}

._1977 {
    position: relative;
    -webkit-filter: contrast(1.1) brightness(1.1) saturate(1.3);
    filter: contrast(1.1) brightness(1.1) saturate(1.3)
}

._1977:after,
._1977:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

._1977 img {
    width: 100%;
    z-index: 1
}

._1977:before {
    z-index: 2
}

._1977:after {
    z-index: 3;
    background: rgba(243, 106, 188, .3);
    mix-blend-mode: screen
}

.brooklyn {
    position: relative;
    -webkit-filter: contrast(.9) brightness(1.1);
    filter: contrast(.9) brightness(1.1)
}

.brooklyn:after,
.brooklyn:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.brooklyn img {
    width: 100%;
    z-index: 1
}

.brooklyn:before {
    z-index: 2
}

.brooklyn:after {
    z-index: 3
}

.brooklyn::after {
    background: -webkit-radial-gradient(circle, rgba(168, 223, 193, .4) 70%, #c4b7c8);
    background: radial-gradient(circle, rgba(168, 223, 193, .4) 70%, #c4b7c8);
    mix-blend-mode: overlay
}

.xpro2 {
    position: relative;
    -webkit-filter: sepia(.3);
    filter: sepia(.3)
}

.xpro2:after,
.xpro2:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.xpro2 img {
    width: 100%;
    z-index: 1
}

.xpro2:before {
    z-index: 2
}

.xpro2:after {
    z-index: 3
}

.xpro2::after {
    background: -webkit-radial-gradient(circle, #e6e7e0 40%, rgba(43, 42, 161, .6) 110%);
    background: radial-gradient(circle, #e6e7e0 40%, rgba(43, 42, 161, .6) 110%);
    mix-blend-mode: color-burn
}

.nashville {
    position: relative;
    -webkit-filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2);
    filter: sepia(.2) contrast(1.2) brightness(1.05) saturate(1.2)
}

.nashville:after,
.nashville:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.nashville img {
    width: 100%;
    z-index: 1
}

.nashville:before {
    z-index: 2
}

.nashville:after {
    z-index: 3
}

.nashville::after {
    background: rgba(0, 70, 150, .4);
    mix-blend-mode: lighten
}

.nashville::before {
    background: rgba(247, 176, 153, .56);
    mix-blend-mode: darken
}

.lark {
    position: relative;
    -webkit-filter: contrast(.9);
    filter: contrast(.9)
}

.lark:after,
.lark:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.lark img {
    width: 100%;
    z-index: 1
}

.lark:before {
    z-index: 2
}

.lark:after {
    z-index: 3
}

.lark::after {
    background: rgba(242, 242, 242, .8);
    mix-blend-mode: darken
}

.lark::before {
    background: #22253f;
    mix-blend-mode: color-dodge
}

.moon {
    position: relative;
    -webkit-filter: grayscale(1) contrast(1.1) brightness(1.1);
    filter: grayscale(1) contrast(1.1) brightness(1.1)
}

.moon:after,
.moon:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.moon img {
    width: 100%;
    z-index: 1
}

.moon:before {
    z-index: 2
}

.moon:after {
    z-index: 3
}

.moon::before {
    background: #a0a0a0;
    mix-blend-mode: soft-light
}

.moon::after {
    background: #383838;
    mix-blend-mode: lighten
}

.clarendon {
    position: relative;
    -webkit-filter: contrast(1.2) saturate(1.35);
    filter: contrast(1.2) saturate(1.35)
}

.clarendon:after,
.clarendon:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.clarendon img {
    width: 100%;
    z-index: 1
}

.clarendon:before {
    z-index: 2;
    background: rgba(127, 187, 227, .2);
    mix-blend-mode: overlay
}

.clarendon:after {
    z-index: 3
}

.willow {
    position: relative;
    -webkit-filter: grayscale(.5) contrast(.95) brightness(.9);
    filter: grayscale(.5) contrast(.95) brightness(.9)
}

.willow:after,
.willow:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.willow img {
    width: 100%;
    z-index: 1
}

.willow:before {
    z-index: 2
}

.willow:after {
    z-index: 3
}

.willow::before {
    background-color: radial-gradient(40%, circle, #d4a9af 55%, #000 150%);
    mix-blend-mode: overlay
}

.willow::after {
    background-color: #d8cdcb;
    mix-blend-mode: color
}

.rise {
    position: relative;
    -webkit-filter: brightness(1.05) sepia(.2) contrast(.9) saturate(.9);
    filter: brightness(1.05) sepia(.2) contrast(.9) saturate(.9)
}

.rise:after,
.rise:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.rise img {
    width: 100%;
    z-index: 1
}

.rise:before {
    z-index: 2
}

.rise:after {
    z-index: 3
}

.rise::after {
    background: -webkit-radial-gradient(circle, rgba(232, 197, 152, .8), transparent 90%);
    background: radial-gradient(circle, rgba(232, 197, 152, .8), transparent 90%);
    mix-blend-mode: overlay;
    opacity: .6
}

.rise::before {
    background: -webkit-radial-gradient(circle, rgba(236, 205, 169, .15) 55%, rgba(50, 30, 7, .4));
    background: radial-gradient(circle, rgba(236, 205, 169, .15) 55%, rgba(50, 30, 7, .4));
    mix-blend-mode: multiply
}

.slumber {
    position: relative;
    -webkit-filter: saturate(.66) brightness(1.05);
    filter: saturate(.66) brightness(1.05)
}

.slumber:after,
.slumber:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.slumber img {
    width: 100%;
    z-index: 1
}

.slumber:before {
    z-index: 2
}

.slumber:after {
    z-index: 3
}

.slumber::after {
    background: rgba(125, 105, 24, .5);
    mix-blend-mode: soft-light
}

.slumber::before {
    background: rgba(69, 41, 12, .4);
    mix-blend-mode: lighten
}

.brannan {
    position: relative;
    -webkit-filter: sepia(.5) contrast(1.4);
    filter: sepia(.5) contrast(1.4)
}

.brannan:after,
.brannan:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.brannan img {
    width: 100%;
    z-index: 1
}

.brannan:before {
    z-index: 2
}

.brannan:after {
    z-index: 3
}

.brannan::after {
    background-color: rgba(161, 44, 199, .31);
    mix-blend-mode: lighten
}

.valencia {
    position: relative;
    -webkit-filter: contrast(1.08) brightness(1.08) sepia(.08);
    filter: contrast(1.08) brightness(1.08) sepia(.08)
}

.valencia:after,
.valencia:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.valencia img {
    width: 100%;
    z-index: 1
}

.valencia:before {
    z-index: 2
}

.valencia:after {
    z-index: 3
}

.valencia::after {
    background: #3a0339;
    mix-blend-mode: exclusion;
    opacity: .5
}

.kelvin {
    position: relative
}

.kelvin:after,
.kelvin:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.kelvin img {
    width: 100%;
    z-index: 1
}

.kelvin:before {
    z-index: 2
}

.kelvin:after {
    z-index: 3
}

.kelvin::after {
    background: #b77d21;
    mix-blend-mode: overlay
}

.kelvin::before {
    background: #382c34;
    mix-blend-mode: color-dodge
}

.maven {
    position: relative;
    -webkit-filter: sepia(.25) brightness(.95) contrast(.95) saturate(1.5);
    filter: sepia(.25) brightness(.95) contrast(.95) saturate(1.5)
}

.maven:after,
.maven:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.maven img {
    width: 100%;
    z-index: 1
}

.maven:before {
    z-index: 2
}

.maven:after {
    z-index: 3;
    background: rgba(3, 230, 26, .2);
    mix-blend-mode: hue
}

.stinson {
    position: relative;
    -webkit-filter: contrast(.75) saturate(.85) brightness(1.15);
    filter: contrast(.75) saturate(.85) brightness(1.15)
}

.stinson:after,
.stinson:before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none
}

.stinson img {
    width: 100%;
    z-index: 1
}

.stinson:before {
    z-index: 2
}

.stinson:after {
    z-index: 3
}

.stinson::before {
    background: rgba(240, 149, 128, .2);
    mix-blend-mode: soft-light
}

/* Druckversion */
@media print {
    #page-header,
    #page-footer,
    .intro,
    .nav-tabs,
    .datapreferences,
    .btn-secondary,
    i.icon,
    .comment-area,
    .pagination,
    input,
    .activity-navigation {
        display: none;
    }
}