/* https://preview.linon.de/idastyles/matisse-beyeler/matisse.css */
/* ------------------------------------------------------------------------------ */
body {
    --list-item-background: #fff;
    --list-border-color: #e0e0e0;
    --thumb-border-color: transparent;
    --slider-bg: #333;
    --slider-caption-fullscreen-color: #FFF;
    --slider-caption-bg: #fff;
    --fullscreen-player-bg: #fff;
    --fullscreen-player-button-color: #000;
    --font-family-sans: Matisselibre, Roboto, Verdana, Helvetica, Arial, sans-serif;
    --font-family-serif: Matisselibre, Roboto, Verdana, Helvetica, Arial, sans-serif;
    --richtext-headline-font-family:  Matisselibre, Roboto, Verdana, Helvetica, Arial, sans-serif;
    --swiper-pagination-bottom: 4px;
    --link-font-color: #0081BD;
    --popup-image-size: 130px;
    --page-headline-font-size: 1.375rem;
    --page-headline-color: #0081BD;
    --max-page-width: 760px;
    --menu-item-size: 1.125rem;
    text-rendering: optimizelegibility;
}


body.dark {
    background-color: #222;
    --slider-bg: #222;
    --fullscreen-player-bg: #000;
    --fullscreen-player-button-color: #fff;
    --slider-caption-fullscreen-color: #fff;

}

[data-id="about"] .imageslider-advanced {
    --imageslider-image-height: auto !important;
}

.dark .richtext :where(h1, h2, h3, h4) {
    color: #FFF;
}
.richtext {
    font-family: Matisselibre, Verdana, Helvetica, Arial, sans-serif;
    font-size: clamp(1rem, 2.6vw, 1.4rem)
}

.large-image {
    width: 100%;
    height: clamp(400px, 60vw, 550px);
}

span[style*="color"] {
    color: revert !important;
}

span[style*="background-color"] {
    background-color: revert !important;
}


.richtext h2 {
    margin-top: 10px;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.2;
    font-weight: bold;
}
.richtext h2+h3 {font-size: clamp(1rem, 2vw, 1.3rem);font-weight: 550;margin-bottom: 15px;}


.leaflet-popup-content {
    margin: 4px;
}
.leaflet-popup-content .label {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}
.map-marker #text {
    font-family: Roboto;
    font-weight: 700;
    font-size: 40px
}
ul.base-list svg text {
    font-family: Roboto;
    font-weight: 700;
    font-size: 44px;
    letter-spacing: -3px;
}




.base ul.base-list {
    margin: 0 8px;
}

.base .list-item {
    margin-bottom: 0;
}

.base .List-listItem {
    border-bottom: 1px solid var(--list-border-color);
}

.base .list-item:last-of-type li.List-listItem {
    border-bottom: none;
}

.base .List-listImg:not(.hero):not(.icon) {
    margin: 8px 8px 8px 0;
    width: clamp(120px, 18vw, 250px);
    min-width: clamp(120px, 18vw, 250px);
    height: clamp(120px, 18vw, 250px);
    /* background: #353535; */
    border-color: transparent;
    border: 0;
}

.List-listItem:not(:has(.List-listImg)) .List-titleDiv {
    padding-left: 0;
}

.base .List-title1 {
    font-weight: 550;
    font-size: clamp(1rem, 2.6vw, 1.4rem);
    text-transform: none;
    margin-bottom: 0;
    line-height: 1.35;
}

.base .inline-list-headline .List-title1 {
    font-weight: 700;
    font-size: 1.375rem;
}

.large-image {
    width: 100%;
    height: clamp(275px, 60vw, 550px);
    /* padding: 0 8px; */
    border-radius: 0px;
    background-clip: padding-box;
}
[data-id="root"] .large-image {
    height: clamp(305px, 60vw, 550px);
}

.large-image > div, .large-image > div:before, .large-image > div:after {
    border-radius: 0px;
    background-clip: padding-box;

}

.stretch .main-container main .EntityPage-root .large-image > div {
    border-radius: 0px;
}



.MainMenu-menu a.MainMenu-item {
    font-weight: 500;
    font-size: clamp(1.125rem, 2.6vw, 1.4rem);
}

.imageslider-advanced .caption-inline {
    font-size: var(--font-size-default);
    font-weight: 400;}

.imageslider-advanced .FullScreenWrapper-fullscreen .caption-inline {
    bottom: 24px;
    font-size: 0.875rem;
    font-weight: 400;
}

.imageslider-advanced.with-player.single .FullScreenWrapper-fullscreen:not(:has(.swiper-pagination)) .caption-inline {
    bottom: 0;
    font-size: 0.9375rem;
}

swiper-container::part(pagination) {
    background: #fff;
    bottom: 0;
}

.imageslider-advanced.with-player .FullScreenWrapper-fullscreen .swiper .carousel-child .gatsby-image-wrapper img {
    height: calc(100vh - 150px);
    height: calc(100dvh - 160px);
}

.TopBar-rightItems button {
    margin-left: 8px;
}



.Collapsible__trigger {
    font-weight: 600 !important;
    font-size: 1rem;
}

.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-top: 150px;
    }

    100% {
        margin-top: 0;
    }
}

[data-testid="ArrowForwardIosIcon"] {
    font-size: 1em;
}




/* fullscreen helle buttons */
.imageslider-advanced .FullScreenWrapper-fullScreenButton {
    background-color: hsl(0deg 0% 100% / 55%) !important;
    box-shadow: 0px 1px 2px #00000042;
}
.dark .imageslider-advanced .FullScreenWrapper-fullScreenButton {
    background-color: hsl(0deg 0% 0% / 55%) !important;

}
.imageslider-advanced .FullScreenWrapper-fullScreenButton svg {
    color: #333 !important;
    font-size: 24px
}
.dark .imageslider-advanced .FullScreenWrapper-fullScreenButton svg {
    color: #fff !important;
}

.swiper .overlay-toggle {
    background-color: hsl(0deg 0% 100% / 55%) !important;
    box-shadow: 0px 1px 2px #00000069;
}
.dark .swiper .overlay-toggle {
    background-color: hsl(0deg 0% 0% / 55%) !important;

}
.swiper .overlay-toggle {
    color: #333 !important;
    font-size: 24px;
}
.dark .swiper .overlay-toggle {
    color: #fff !important;
    font-size: 24px;
}

.FullScreenWrapper-fullscreen swiper-container::part(pagination) {
    background: var(--slider-bg);
    bottom: 0px;
    height: 25px;
}

.imageslider-advanced .FullScreenWrapper-fullscreen .caption-inline {
    position: absolute;
    bottom: 25px;
}
.FullScreenWrapper-fullscreen:not(:has(.swiper-pagination)) .caption-inline {
    bottom: 4px !important;
}

.imageslider-advanced .overlay-text {
    background: var(--slider-bg);
    color: var(--darkest);
}
.dark .imageslider-advanced .overlay-text {
    background: var(--slider-bg);
    color: #fff ;
}
/* xxxxxx end helle buttons */


/* MARK: Fullscreen restrict 900px ========================================================------------------------------------ */
.FullScreenWrapper-fullscreen {
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

@media (pointer: fine) {
    .FullScreenWrapper-fullscreen {
        max-width: var(--max-page-width, 900px);
    }
}
@media (min-width: 900px) {
    body:not(.fullscreen) .outer-main-container {
        box-shadow: 0 0 50px hsl(0deg 0% 0% / 16%);
        max-width: var(--max-page-width, 900px);
    }
}

.TopBar-appBar {
    max-width: var(--max-page-width, 900px);
    right: auto;
}

[data-id="about"] {
    --slider-bg: #fff;
}

.dark .image-block img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(351deg) brightness(200%) contrast(241%);
}

.base .List-numCode {
    color: var(--font-color);
}

/* MARK: Menu ========================================================------------------------------------ */

.TopBar-appBar {
    max-width: unset;
}
@media (pointer: fine) {
    .MainContainer-main .TopBar-appBar {
        overflow-x: clip;
        overflow-y: visible;
        max-width: var(--max-page-width, 900px);
        }
    }
     /* hack f0r safari only. overflow clip on fixed element bug*/
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
    .MainContainer-main .TopBar-appBar {
        overflow-x: visible !important;
    }
    }
.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(var(--menu-item-size), 3vw, var(--menu-item-size) * 1.25);
    border-bottom: 1px solid var(--list-border-color);
    color: var(--font-color);
    text-decoration: none;
    font-weight: var(--menu-item-weight);
    text-transform: var(--menu-item-case);
}
/* textsize buttons serif */
.textsize-switch * {
    font-family: serif !important;
}
/*  underline current text-size */
html:not(.textsize-large):not(.textsize-xl) .switch-small {
    text-decoration: underline;
    text-underline-offset: 5px;
}
html.textsize-large .switch-large {
    text-decoration: underline;
    text-underline-offset: 5px;
}
html.textsize-xl .switch-xl {
    text-decoration: underline;
    text-underline-offset: 5px;
}
/* move darkswitch to left more distance to sizeswitch */
.MainMenu-menu div > div:has(.PrivateSwitchBase-input) {
    margin-left: 0 !important;
}
.MainMenu-menu .MuiSwitch-root:has(.PrivateSwitchBase-input) {
    margin-right: 60px;
}
.TopBar-rightItems button { margin-left: 10px; }

.base .List-numCode {
    font-size: clamp(0.8rem, 2.6vw, 1rem);
}