/* https://preview.linon.de/idastyles/kulf-magdeburg/kulf.css */

body * {-webkit-tap-highlight-color: transparent;}


/* MARK: Variables */
body {
    --background-color: #f8f8f8;
    --topbar-background: #f8f8f8;
    --menu-background: #f8f8f8;
    --slider-bg: #f8f8f8;
    --fullscreen-button-bg: #dddddd8c;
    --fullscreen-button-color: #222;
    --fullscreen-player-bg: #e9e9e9;
    --fullscreen-player-button-color: var(--darker);
    --slider-caption-fullscreen-color: var(--darkest);
    --list-item-background: #f8f8f8;
    --list-border-color: #5f5f5f;
    --list-border-width: 1px;
    --thumb-border-color: #ddd;
    --thumb-border-width: 0px;
    --thumbnail-width: 120px;
    --thumbnail-height: 120px;
    --thumbnail-margin-top-bottom: 10px;
    --font-color: var(--darker);
    --font-family-sans: opensans, Verdana, Helvetica, Arial, sans-serif;
    --font-family-serif: serif;
    --link-font-color: var(--accent-color), var(--color-primary);
    --page-headline-font-family: var(--font-family-sans);
    --page-headline-font-size: clamp(1.75rem, 1.25rem + 2vw, 2.375rem);
    --page-headline-padding: 18px 8px;
    --page-headline-color: var(--accent-foreground-color, inherit);
    --page-headline-background-color: var(--accent-color, inherit);
    --richtext-headline-font-family: inherit;
    --richtext-headline-color: inherit;
}

body.dark {
    background-color: #000000;
}
html .indoor-map {
    --map-bg: #fff;
}
html .dark .indoor-map {
    --map-bg: #000;
}

.dark {
    --topbar-background: #333333;
    --menu-background: #333;
    --list-border-color: #666;
    --slider-bg: #333;
    --fullscreen-player-bg: #111;
    --fullscreen-button-bg: #111;
    --fullscreen-button-color: #FFF;
    --fullscreen-player-button-color: #FFF;
}

/* MARK: Topbar ------------------------------------------------------------------------------------------------ */
.MainContainer-main .TopBar-appBar {
    background-color: var(--topbar-background);
    }
.MainContainer-main .MainMenu-menu {
    background-color: var(--menu-background);}
.MainContainer-main .MainMenu-SlideRoot {
    background-color: var(--menu-background);}



    /* MARK: Large Image */
.large-image {
    width: 100%;
    height: clamp(290px, 58vw, 600px);
}




/* MARK: Liste ------------------------------------------------------------------------------------------------ */
.MainContainer-main:has(.page-headline):has(.base-list) .base-list {
    margin-top: -8px;
}
.base .list-item {
    margin-bottom: 0;
}
.base .List-listItem {
    border-bottom: var(--list-border-width) var(--list-border-color) solid
}
.base ul div.list-item:last-of-type li.List-listItem {
    border-bottom: unset;
}
.base .list-item:not(:has(.gatsby-image-wrapper)) .List-titleDiv {
    padding-left: 0;
}
.base .list-item:not(.inline-list-headline) .List-titleDiv {
    padding-top: 10px;
    padding-bottom: 10px;
}
.base .List-listImg:not(.hero):not(.icon) {
        width: clamp(var(--thumbnail-width), 20vw, 180px);
        min-width: clamp(var(--thumbnail-width), 20vw, 180px);
        min-height: clamp(var(--thumbnail-height), 20vw, 180px);
        margin: var(--thumbnail-margin-top-bottom) 0 var(--thumbnail-margin-top-bottom) 0;
        border-width: var(--thumb-border-width);
        border-radius: 4px;
}
.base .list-item:not(.inline-list-headline) .List-titleFlex {
    min-height: clamp(70px, 14vw, 120px);
}
.base .List-title1 {
    font-size: clamp(1rem, 2.6vw, 1.4rem) !important;
    text-transform: uppercase;
}
.base .List-title2 {
    font-size: clamp(1rem, 2.6vw, 1.3rem) !important;
}
.base .List-title3 {
    font-size: clamp(0.9375rem, 2.4vw, 1.125rem) !important;
    margin-top: 2px;
}
.base .List-numCode {
    font-size: 14px;
    color: var(--font-color);
}

h1.page-headline {
    font-weight: 500;
    text-transform: uppercase;
    font-family: var(--font-family-sans);
    font-size: clamp(1.7rem, 4vw, 1.8rem);
    line-height: 1;
}

/* MARK: Richtext ------------------------------------------------------------------------------------------------ */
.richtext {
    font-size: clamp(1rem, 3vw, 1.4rem);
}
.richtext h2 {
    font-family: var(--font-family-sans);
    text-transform: uppercase;
    font-size: clamp(1rem, 3vw, 1.6rem);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 8px;
}
.richtext h3 {
    margin-bottom: 10px;
    margin-top: 18px;
    line-height: 1.2;
    font-weight: 700;
    font-size: clamp(1rem, 3vw, 1.4rem);
}

.richtext a {
    color: var(--link-font-color);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 5px;
}



/* MARK: Fullscreen restrict 900px ------------------------------------------------------------------------------------------------ */
.FullScreenWrapper-fullscreen {
    width: 100%;
    height: 100%;
    max-width: 900px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.OuterMainContainer-main {
    max-width: 900px;
    margin: 0 auto;
}



/* MARK: Menu ------------------------------------------------------------------------------------------------ */
.MainContainer-main .TopBar-appBar {
    overflow-x: clip;
    }
.TopBar-rightItems .MainMenu-SlideRoot {
    position: absolute;
    z-index: 100;
    height: 100vh;
    top: 0px;
    left: 0px;
    right: 0;
    margin: auto;
}
.TopBar-rightItems .MainMenu-SlideRoot .MainMenu-menu {
    width: 94%;
    height: auto;
    position: absolute;
    right: 0;
    top: 49px;
    z-index: 8000;
    margin: 0px 10px;
    overflow: auto;
    max-height: 90vh;
}
.MainMenu-menu .MainMenu-item {
    font-size: clamp(1.125rem, 3vw, 1.6rem);
    border-bottom: 1px solid var(--list-border-color);
    color: var(--font-color);
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 600;
    padding-block: 8px;
}



.TopBar-rightItems button { margin-left: 8px; } .Collapsible__trigger {font-weight: 400 !important;font-size: 1.25rem;} .Collapsible__trigger:after { font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: normal; font-family: inherit; font-size: 24px; line-height: 1; top: 12px; content: '+'; transform: rotate(0deg); } .Collapsible__trigger.is-open:after { transform: rotateZ(135deg); top: 12px; font-size: 24px; } .Collapsible__contentOuter { transition: height 150ms ease-out 0s !important; } main { animation: fadeup 350ms ease-out 0s 1 forwards; } @keyframes fadeup { 0% { margin-left: 200px; } 100% { margin-left: 0; } } [data-testid="ArrowForwardIosIcon"] { font-size: 1em; }
/* wenn main von links kommt overflow abschneiden */
.OuterMainContainer-main {
    overflow-x: clip;
}
main {
    min-width: 100%;
}

.entity-overlays {
    max-width: 900px;
    margin: 0 auto;
}

/* MARK: language */
.language-selection .List-listImg:not(.hero):not(.svg) {
    border: 1px solid;
    border-color: var(--thumb-border-color);
    border-radius: 100%;
    width: 50px;
    min-width: 50px;
    height: 50px;
    margin: 8px;
}
.language-selection .large-image {
    width: 100%;
    height: calc(100vh - 211px);
}
.language-selection .List-title1 {
    font-size: 1.125rem;
    text-transform: uppercase;
}
.language-selection.wma.wma-list {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid #eee;
    box-shadow: 0 0 50px hsl(0deg 0% 0% / 25%);
}



/* MARK: helle buttons fullscreen */
.imageslider-advanced .FullScreenWrapper-fullScreenButton {
    background-color: var(--fullscreen-button-bg) !important;
}
.imageslider-advanced .FullScreenWrapper-fullScreenButton svg {
    color: var(--fullscreen-button-color) !important;
    font-size: 24px
}
.swiper .overlay-toggle {
    background-color: var(--fullscreen-button-bg) !important;
}
.swiper .overlay-toggle {
    color: var(--fullscreen-button-color) !important;
    font-size: 24px;
}
.FullScreenWrapper-fullscreen swiper-container::part(pagination) {
    background: var(--slider-bg);
    bottom: 0px;
    height: 25px;
}
.FullScreenWrapper-fullscreen:has(.swiper-slide-zoomed) swiper-container::part(pagination) {
    display:none;
}
.FullScreenWrapper-fullscreen:has(.swiper-slide-zoomed) :where(swiper-container::part(button-prev), swiper-container::part(button-next)) {
    display:none;
}

/* MARK:  caption inline positioning TODO */
.imageslider-advanced .caption-inline {
    font-weight: 400;
}
.imageslider-advanced .FullScreenWrapper-fullscreen:has(.swiper-custom-buttons):not(:has(.swiper-pagination)) .caption-inline {
    bottom: 20px !important;
}
.imageslider-advanced .FullScreenWrapper-fullscreen:has(.swiper-custom-buttons):has(.swiper-pagination) .caption-inline {
    bottom: 25px !important;
}


.MuiMenu-list a {
    font-size: clamp(1rem, 2.6vw, 1.4rem);
}










.player-controls .MuiBox-root {
    padding-top: 6px;
}







.map-marker #text {
    font-size: 32px;
    font-weight: 700;
}

.leaflet-popup-content-wrapper {
    /* min-width: 170px; */
}

.leaflet-popup-content {
    font-size: 16px;
    min-width: 140px;
}

.gatsby-image-wrapper.MainMenu-logo {
    width: 50%;
    margin-bottom: 10px;
}
.dark .gatsby-image-wrapper.MainMenu-logo {
    filter: invert(1);
}

.imageslider-advanced.with-player .FullScreenWrapper-fullscreen .swiper .carousel-child .gatsby-image-wrapper img {
    max-width: 98%;
    margin-left: 1%;
    max-height: 80vh;
}

.swiper-custom-buttons:empty {
    display: none;
}

.base .list-item:not(:has(.gatsby-image-wrapper)) .List-titleDiv {
    padding-block: 25px;
}

.EntityPage-root:has(.ida-map) .list-item:not(:has(.gatsby-image-wrapper)) .List-titleDiv {
    padding-block: 8px;
}


.leaflet-popup-content .label {
    margin-block: 15px;
    font-weight:700
}

.indoor-map .leaflet-popup-content .gatsby-image-wrapper {
    height: unset;
}