/* page layout.css for >FIXME< */

/* page rollover searchbox */
@media screen {
    .page-rollover-searchbox[aria-hidden="true"] {
        margin-top: -100vh;
    }

    .page-rollover-searchbox {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100vw;
        height: 100vh;
        margin-top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(51, 51, 51, 0.9);
        transition: var(--animation-default);
        transition-property: margin-top;
    }
    .hide-while-init {
        top: -100vh !important;
    }
    .page-rollover-searchbox .search-label {
        position: absolute;
        left: 0;
        width: 4rem; /* FIXME! */
        bottom: 100%;
        color: rgb(255, 255, 255);
        font-size: 125%;
        font-weight: 600;
        /*! text-transform: uppercase; */
    }

    .page-rollover-searchbox .searchbox-inner input {
        background: rgb(255, 255, 255);
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
    }

    .searchbox input:focus,
    .searchbox input:focus:not(:focus-visible) {
        outline: none;
    }

    .page-rollover-searchbox .search-word {
        color: rgb(0, 0, 0);
        padding: 0.625rem 0.625rem;
    }

    .page-rollover-searchbox .search-close {
        position: absolute;
        right: 0;
        bottom: calc(100% + 0.625rem);
        color: rgb(255, 255, 255);
        background: none;
        border: 0;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.3125rem;
    }
    .page-rollover-searchbox .search-icon-close {
        position: relative;
        display: block;
        height: 0.3125rem;
    }

    .page-rollover-searchbox .search-icon-close::before,
    .page-rollover-searchbox .search-icon-close::after {
        content: "";
        background: rgb(255, 255, 255);
        display: block;
        height: 0.3125rem;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        left: 0;
        right: 0;
    }
    .page-rollover-searchbox .search-icon-close::after {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}

/* page layout */
@media all {
    html,
    body,
    .page {
        width: 100%;
        overflow-x: hidden;
    }

    .page {
        max-width: 120rem;
        margin: 0 auto;
    }
    .mm-slideout {
        transition: var(--animation-default);
        transition-property: transform;
    }
    .page-fixed {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .wrap-inner {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .cc-window.cc-banner {
        -ms-flex-align: flex-start;
        align-items: flex-start;
        max-width: 120rem;
        margin: 0 auto;
    }
    .cc-menu {
        margin: 0.5em 0;
    }
    .cc-menu li + li {
        margin-left: 1em;
    }
    .cc-menu .item {
        padding: 0.5em 0;
    }

    /* sticky header */
    .page-header-topbar {
        background-color: var(--color-primary);
    }
    .page-header-topbar-inner {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        /*! padding-top: .3125rem; */
        /*! padding-bottom: .3125rem; */
    }
    .page-header-main-inner {
        display: flex;
        justify-content: space-between;
        /*! justify-content: flex-end; */
        align-items: center;
        padding-top: 0.3125rem;
        padding-bottom: 0.3125rem;
        gap: 0.3125rem;
        transition: padding 0.125s ease;
    }
    .page-header > div {
        max-width: 120rem;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .page-header-sticky .page-header {
        position: fixed;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgb(255, 255, 255);
    }
    .page-header-sticky {
        padding-top: 4.25rem;
    }
    .page-header-sticky .page-header-topbar {
        overflow: hidden;
        max-height: 1.5rem;
        transition: max-height 0.25s ease;
        z-index: 2;
    }
    .page-header-sticky.page-scrolled .page-header-topbar {
        max-height: 0;
    }

    .page-header-navigation {
        flex-grow: 1;
        order: 2;
    }

    .page-logo {
        height: 2rem;
        padding: 0.3125rem 0;
        flex-grow: 0;
        order: 1;
        display: flex;
        justify-content: center;
        align-content: center;
        justify-items: center;
        align-items: center;
        box-sizing: content-box;
        margin-right: auto;
    }

    .page-logo-portal.page-logo {
        margin-right: 0;
        margin-left: auto;
        align-items: flex-start;
        margin-right: var(--size-x4);
    }

    .logo-link {
        display: block;
        position: relative;
        z-index: 10;
        height: 100%;
        width: auto;
    }

    .logo-img {
        max-width: 100%;
        display: block;
        height: 100%;
    }

    .page-header-main {
        /*! background-color: rgb(255, 255, 255); */
        transition: box-shadow 0.125s ease;
    }

    .page-scrolled .page-header-main {
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.1);
    }

    .search-link,
    .search-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.5rem;
        width: 1.5rem;
        padding: 0.3125rem;
        margin: 0;
        border: 0 none transparent;
        color: inherit;
        box-sizing: content-box;

        -webkit-appearance: none;
        order: 3;
        flex-grow: 0;
        background-color: rgb(245, 245, 245);
        border-radius: var(--border-radius);
    }

    .search-link,
    .search-toggle-inner {
        justify-content: center;
        align-items: center;
    }

    .search-link .fa,
    .search-toggle .fa {
        display: block;
        font-size: 150%;
        line-height: 1;
    }

    .page-modifier-search .search-link,
    .page-modifier-search .search-toggle,
    .page-modifier-search .page-rollover-searchbox {
        display: none !important;
    }

    /* stage */
    .page-stage .page-stage-teaser .ce-grid-slider,
    .page-stage .page-stage-teaser .ce-element {
        margin: 0;
    }

    .page-stage .ce-row {
        margin: 0;
    }
    .page-stage .ce-column {
        margin: 0;
        padding: 0;
    }
    /* stage may have a heading */
    .page-stage .ce-slider {
        background-color: rgb(51, 51, 51);
    }

    .page-stage .slick-dots {
        position: relative;
        text-align: center;
        margin: 0 0 0.625rem;
        color: rgb(255, 255, 255);
    }

    .page-stage .ce-frame-headerimage {
        margin: 0 -30vw;
    }
    .page-stage .ce-frame-headerimage .ce-header {
        position: absolute;
        bottom: 0.625rem;
        left: 50vw;
        margin: 0;
        margin-left: calc(-50vw + 0.625rem);
        color: rgb(255, 255, 255);
    }

    /* shadows */
    .page-stage {
        position: relative;
        z-index: 0;
        /*! margin-bottom: var(--size-x2); */
    }
    .page-stage-inner {
        /*! padding-bottom: var(--size-x4); */
    }

    .page-stage::before {
        content: "";
        position: absolute;
        margin-top: -3.625rem;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -2;
        background: var(--gradient-shared-header);
    }

    .page-stage::after {
        content: "";
        display: block;
        position: relative;
        right: 0;
        bottom: -2px;
        left: 0;
        padding-top: 2.875%;
        z-index: -1;
        background-image: url("/typo3conf/ext/dw_base_sb/Resources/Public/Images/gfx_wave.svg");
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }

    .page-footer::before {
        content: "";
        display: block;
        position: relative;
        right: 0;
        top: -2px;
        left: 0;
        padding-top: 2.875%;
        z-index: 1;
        transform: rotate(180deg);
        background-image: url("/typo3conf/ext/dw_base_sb/Resources/Public/Images/gfx_wave.svg");
        background-size: cover auto;
        background-position: center bottom;
        background-repeat: no-repeat;
        margin-bottom: var(--size-x4);
        aspect-ratio: 1920 / 52;
    }

    .page-stage-inner::before {
        top: auto;
        bottom: 100%;
    }

    /* content */
    .page-stage,
    .page-content {
        padding-top: var(--size-x6);
    }

    /* footer */
    .page-footer {
        position: relative;
        /* overflow: hidden; */
    }

    .page-footer,
    .page-footer.ce-frame-inverted > div {
        background: var(--color-primary);
        color: var(--color-text-neg);
    }

    .page-footer.ce-frame-inverted > div.page-footer-bottom {
        background: rgba(0, 0, 0, 0.125);
        background: rgba(255, 255, 255, 0.1);
    }

    rgba(0,0,0,0.125) .page-footer-top {
        padding-top: 1.25rem;
    }
    .page-footer-bottom {
        background: rgba(0, 0, 0, 0.125);
        padding-bottom: var(--size-x16);
    }

    .topnav {
        display: flex;
        justify-content: flex-end;
        /*! justify-content: space-between; */
        width: 100%;
    }

    .topnav > .menu {
        width: 100%;
        display: flex;
        justify-content: space-between;
        justify-content: space-around;
    }

    .topnav > .menu .fab {
        display: none;
    }

    .topnav .item i {
        margin-right: 0.3125rem;
    }

    .page-stage-teaser {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: var(--size-x6);
    }

    .page-stage-teaser::after {
        content: "";
        display: block;
        position: absolute;
        transform: translateY(50%);
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: calc(148% / 1200 * 100);
        z-index: 0;
        opacity: 0.1;
        background-image: url("/typo3conf/ext/dw_base_sb/Resources/Public/Images/gfx_shadow_1200px.png");
        background-position: center bottom;
        background-size: cover;
    }

    .page-stage-teaser > .ce-element {
        position: relative;
        z-index: 1;
        text-align: center;
        background: rgb(255, 255, 255);
        box-shadow: var(--box-shadow);
        /* border-radius: var(--border-radius); */
        overflow: hidden;
        /* margin-bottom: var(--size-x2); */
        align-content: center;
        border-bottom: 0.0625rem solid rgba(var(--rgb-primary), 0.1);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .page-stage-teaser > .ce-element.ce-is-teaserlink {
        transition: var(--animation-default);
        transition-property: transform, all;
    }

    .page-stage-teaser > .ce-element.ce-is-teaserlink:focus,
    .page-stage-teaser > .ce-element.ce-is-teaserlink:hover {
        transform: translateX(var(--size-x1));
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-outer {
        transition: transform 0.25s ease;
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-outer:hover {
        transform: translateX(0.25rem);
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-outer .ce-gallery figure {
        transition: transform 0.25s ease;
    }

    .page-stage-teaser
        > .ce-element
        .ce-teaserlink-outer:hover
        .ce-gallery
        figure {
        transform: scale(1.1) rotate(6deg);
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-inner {
        padding: var(--size-x2);
    }

    .page-stage-teaser > .ce-element:first-child {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }

    .page-stage-teaser > .ce-element:last-child {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        border-bottom: none;
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-outer,
    .page-stage-teaser > .ce-element p {
        margin-bottom: 0;
    }

    .page-stage-teaser .ce-element .ce-textpic {
        display: flex;
        gap: var(--size-x2);
    }

    .page-stage-teaser .ce-element .ce-textpic-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .page-stage-teaser .ce-element .ce-gallery {
        min-width: var(--size-x8);
        max-width: var(--size-x8);
        margin-bottom: 0;
    }

    .content-institutions .institutions-categories {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-x1);
        margin-bottom: var(--size-x4);
    }

    .content-institutions .institutions-categories .btn {
        margin-left: 0;
    }

    .ce-frame-shortcut_teaser::before {
        display: none;
    }

    .ce-frame-shortcut_teaser,
    .content-institutions .ce-grid-institutions {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: var(--size-x6);
        margin: 0;
        gap: var(--size-x1);
    }

    .ce-frame-shortcut_teaser > .ce-element,
    .content-institutions .ce-grid-institutions > .ce-element {
        text-align: left;
        background: rgb(255, 255, 255);
        box-shadow: var(--box-shadow);
        color: var(--color-text);
        overflow: hidden;
        /*! margin-bottom: 0; */
        align-content: center;
        border-radius: var(--border-radius);
        transition: transform var(--animation-attributes);
        margin-bottom: 0;
    }

    .ce-frame-shortcut_teaser > .ce-element:focus,
    .ce-frame-shortcut_teaser > .ce-element:hover,
    .content-institutions .ce-grid-institutions > .ce-element:focus,
    .content-institutions .ce-grid-institutions > .ce-element:hover {
        transform: translateX(var(--size-x1));
    }

    .ce-frame-shortcut_teaser > .ce-element:last-child,
    .content-institutions .ce-grid-institutions > .ce-element:last-child {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        border-bottom: none;
    }

    .ce-frame-shortcut_teaser > .ce-element .ce-teaserlink-outer,
    .ce-frame-shortcut_teaser > .ce-element p,
    .content-institutions .ce-grid-institutions > .ce-element .ce-teaserlink-outer,
    .content-institutions .ce-grid-institutions > .ce-element p {
        margin-bottom: 0;
        line-height: 1.375;
    }

    .ce-frame-shortcut_teaser .ce-element .ce-textpic,
    .content-institutions .ce-grid-institutions .ce-element .ce-textpic {
        display: flex;
    }

    .ce-frame-shortcut_teaser .ce-element .ce-textpic-inner,
    .content-institutions .ce-grid-institutions .ce-element .ce-textpic-inner {
        margin-left: var(--size-x2);
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: calc(100% - 8rem);
    }

    .ce-frame-shortcut_teaser > .ce-element .ce-gallery,
    .content-institutions .ce-grid-institutions > .ce-element .ce-gallery {
        width: 8rem;
        margin-bottom: 0;
        position: relative;
    }

    .ce-frame-shortcut_teaser > .ce-element .ce-gallery figure,
    .content-institutions
        .ce-grid-institutions
        > .ce-element
        .ce-gallery
        figure {
        border-radius: 0;
    }

    .ce-frame-shortcut_teaser > .ce-element + .ce-element .ce-gallery::before,
    .content-institutions
        .ce-grid-institutions
        > .ce-element
        + .ce-element
        .ce-gallery::before {
        content: "";
        display: block;
        position: absolute;
        top: -0.0625rem;
        left: 0;
        right: 0;
        height: 0.0625rem;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .ce-frame-shortcut_teaser > .ce-element .ce-column,
    .content-institutions .ce-grid-institutions > .ce-element .ce-column {
        margin-bottom: 0;
    }

    .ce-frame-shortcut_teaser .ce-element,
    .content-institutions .ce-grid-institutions .ce-element {
        transition: var(--animation-default);
        display: none;
        opacity: 0;
        will-change: transform;
    }

    .ce-frame-shortcut_teaser .ce-element,
    .no-js .content-institutions .ce-grid-institutions .ce-element,
    .content-institutions .ce-grid-institutions .ce-element.visible {
        opacity: 1;
    }

    .content-institutions .ce-grid-institutions .ce-element .category-info,
    .content-institutions .ce-grid-institutions,
    .no-js .institutions-filters {
        display: none;
    }

    .ce-frame-shortcut_teaser,
    .content-institutions .ce-grid-institutions[data-show-category],
    .no-js .content-institutions .ce-grid-institutions {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    
    .ce-frame-shortcut_teaser.clear::before,
    .ce-frame-shortcut_teaser.clear::after {
        display: none;
    }

    .ce-frame-shortcut_teaser .ce-element,
    .no-js .content-institutions .ce-grid-institutions .ce-element,
    .content-institutions
        .ce-grid-institutions[data-show-category="*"]
        .ce-element,
    .content-institutions
        .ce-grid-institutions[data-show-category="1"]
        .ce-element.cat-1,
    .content-institutions
        .ce-grid-institutions[data-show-category="2"]
        .ce-element.cat-2,
    .content-institutions
        .ce-grid-institutions[data-show-category="3"]
        .ce-element.cat-3,
    .content-institutions
        .ce-grid-institutions[data-show-category="4"]
        .ce-element.cat-4,
    .content-institutions
        .ce-grid-institutions[data-show-category="5"]
        .ce-element.cat-5,
    .content-institutions
        .ce-grid-institutions[data-show-category="6"]
        .ce-element.cat-6,
    .content-institutions
        .ce-grid-institutions[data-show-category="7"]
        .ce-element.cat-7,
    .content-institutions
        .ce-grid-institutions[data-show-category="8"]
        .ce-element.cat-8,
    .content-institutions
        .ce-grid-institutions[data-show-category="9"]
        .ce-element.cat-9,
    .content-institutions
        .ce-grid-institutions[data-show-category="10"]
        .ce-element.cat-10 {
        display: block;
    }

    .ce-grid-fullwidth-bg {
        position: relative;
    }

    .ce-grid-fullwidth-bg::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 7.5rem;
        background: rgb(51, 51, 51);
        background: linear-gradient(
            0deg,
            rgba(51, 51, 51, 0) 0%,
            rgba(51, 51, 51, 1) 100%
        );
        display: block;
        opacity: 0.05;
    }

    .filter-buttons .btn {
        cursor: pointer;
    }

    .filter-buttons .btn.selected {
        color: var(--color-text-neg);
        background-color: var(--color-primary);
        position: relative;
    }

    .filter-buttons .btn.selected::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 0.75rem solid transparent;
        border-top-color: var(--color-primary);
    }

    .navigation-institutions-container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(100%);
        transition: var(--animation-default);
        background-color: var(--color-shared-secondary);
        width: 80vw;
        max-width: 60rem;
        overflow: hidden;
        overflow-y: scroll;
        transition-delay: 0.25s;
    }

    .navigation-institutions-container {
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .navigation-institutions-container .institutions-headline {
        margin-top: var(--size-x4);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .navigation-institutions-container .institutions-headline .ce-header {
        margin: 0;
        color: var(--color-text-neg);
        padding: 0;
        padding-right: var(--size-x4);
    }

    .navigation-institutions-container
        .institutions-headline
        .ce-header
        > *:before {
        background-color: var(--color-text-neg);
    }

    .navigation-institutions-container::-webkit-scrollbar {
        display: none;
    }

    .navigation-institutions-container::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--color-shared-secondary);
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.1);
    }

    /*
    .navigation-institutions-container:focus ,
    .navigation-institutions-container:hover ,
    .institutions-toggle:focus + .navigation-institutions-container ,
    .institutions-toggle:hover + .navigation-institutions-container ,
    */
    .navigation-institutions-container[aria-hidden="false"] {
        transform: none;
        transition-delay: 0s;
    }

    .institutions-toggle {
        position: fixed;
        bottom: var(--size-x2);
        right: var(--size-x12);
        padding: var(--size-x1) var(--size-x2);
        /*! border-top-left-radius: 0; */
        /*! border-top-right-radius: 0; */
        transform: none;
        transform-origin: right top;
        color: var(--color-text-neg);
        border: none;
        background: var(--gradient-shared-secondary);
        margin-right: -0.0625rem;
        box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.1);
        z-index: -1;
        font-weight: 700;
        z-index: 100;
        min-height: var(--size-x8);
        cursor: pointer;
        line-height: 1;
    }

    .mm-menu_opened ~ .institutions-toggle {
        margin-right: 22.5rem;
    }

    .institutions-toggle:hover {
        background: var(--gradient-shared-secondary-alt);
    }

    .institutions-toggle i {
        margin-right: var(--size-x1);
    }

    .institutions-toggle[aria-expanded="false"] i.fa-window-close,
    .institutions-toggle[aria-expanded="true"] i.fa-th {
        display: none;
    }

    .institutions-toggle[aria-expanded="true"] i.fa-window-close,
    .institutions-toggle[aria-expanded="false"] i.fa-th {
        display: inline;
    }

    .institutions-toggle .button-title-default {
        display: none;
    }

    .navigation-institutions-container .institutions-toggle i {
        padding-right: var(--size-x2);
    }

    .navigation-institutions-container .wrap-outer {
        position: relative;
        z-index: 1;
    }

    .institutions-blocker {
        position: absolute;
        display: block;
        top: 0;
        bottom: 0;
        right: 0;
        width: 0;
        z-index: 100;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.25);
        background-color: rgba(255, 255, 255, 0.5);
        transition: width var(--animation-duration) var(--animation-type) 0.25s,
            opacity var(--animation-duration) var(--animation-type) 0s;
    }

    .page-fixed ~ .institutions-blocker {
        transition: width var(--animation-duration) var(--animation-type) 0s,
            opacity var(--animation-duration) var(--animation-type) 0.25s;
        width: 100%;
        opacity: 1;
    }

    .institutions-close {
        cursor: pointer;
    }

    .institutions-close:focus,
    .institutions-close:hover {
        color: var(--color-text-neg);
        background-color: var(--color-primary-alt);
    }

    .ce-element .ce-header,
    .ce-element p,
    .ce-element ol,
    .ce-element ul,
    .rc-container {
        max-width: calc(((80rem - 15rem) / 3 * 2) + 10rem);
        margin-left: -2.5rem;
        margin-right: -2.5rem;
        padding: 0 2.5rem;
    }

    .ce-element .ce-bodytext ol,
    .ce-element .ce-bodytext ul {
        padding-left: 3.875rem;
    }

    .ce-element .ce-bodytext ol li,
    .ce-element .ce-bodytext ul li {
        position: relative;
    }

    .ce-element .ce-bodytext ol li::before,
    .ce-element .ce-bodytext ul li::before {
        content: "";
        left: -1rem;
        top: 0.875em;
        transform: translateY(-50%);
        background-color: var(--color-primary);
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 100%;
        position: absolute;
        display: none;
    }

    /*

    p:before ,
    p:after {
        content: "";
        display: block;
    }

    p:before {
        margin-top: -.5em;
    }

    p:after {
        margin-bottom: -.25em;
    }

    p .btn {
        margin-bottom: .25rem;
    }

    */

    .ce-element.ce-layout-box.ce-is-teaserlink,
    .ce-element.ce-layout-box.ce-is-teaserlink .ce-layout-box-outer {
        transition: var(--animation-default);
        transition-property: transform, all;
    }

    .ce-element.ce-layout-box.ce-is-teaserlink:focus,
    .ce-element.ce-layout-box.ce-is-teaserlink:hover {
        transform: translateY(var(--size-n1));
    }

    .ce-element.ce-layout-box.ce-is-teaserlink:focus .ce-layout-box-outer,
    .ce-element.ce-layout-box.ce-is-teaserlink:hover .ce-layout-box-outer {
        box-shadow: var(--box-shadow-hover);
    }

    .page-content .news-gallery > .ce-row:first-child {
        display: none;
    }

    .ce-frame-hide-mobile {
        display: none;
    }
}

@media all and (min-width: 24em) {
    .topnav > .menu .fab {
        display: unset;
    }
}

@media all and (min-width: 30em) {
    .wrap-inner {
        padding-left: var(--size-x4);
        padding-right: var(--size-x4);
    }
    .page-header-sticky {
        padding-top: 4.875rem;
    }
    .page-header-main-inner {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
        gap: 0.625rem;
    }

    .page-stage .ce-frame-headerimage {
        margin: 0 -15vw;
    }

    .page-stage .ce-frame-headerimage .ce-header {
        margin-left: calc(-50vw + 1.25rem);
    }
}

/* tablet + print */
@media all and (min-width: 47.5em), print {
    /* page layout */

    .page-logo {
        height: 2.25rem;
        padding: 0;
    }

    .search-link,
    .search-toggle,
    body .nav-toggle-link {
        height: 1.5rem;
        width: 1.5rem;
        padding: 0.625rem;
    }

    .page-header-searchbox .searchbox .search-word {
        padding: 0.5rem;
    }

    /* sticky header */
    .page-header-sticky {
        padding-top: 5.5rem;
    }
    .page-stage .ce-frame-headerimage {
        margin: 0;
    }
    .page-stage .ce-frame-headerimage .ce-header {
        position: absolute;
        bottom: 1.25rem;
        left: 50%;
        margin: 0;
        margin-left: calc(-50% + 1.25rem);
    }
    .page-header-sticky.page-scrolled .page-header-topbar {
        /* max-height: unset; */
    }

    .page-stage-teaser {
        flex-direction: row;
        margin-bottom: 0;
    }

    .page-stage-teaser > .ce-element,
    .page-stage-teaser > .ce-element:first-child,
    .page-stage-teaser > .ce-element:last-child {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0px;
        margin-bottom: 0;
        border-bottom: none;
        border-radius: var(--border-radius);
    }

    .page-stage-teaser > .ce-element a {
        cursor: pointer;
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-inner {
        padding: var(--size-x4) var(--size-x2);
        line-height: 1.375;
        font-size: 1rem;
    }

    .page-stage-teaser > .ce-element:hover {
    }

    .page-stage-teaser > .ce-element + .ce-element {
        margin-left: var(--size-x2);
    }

    .page-stage-teaser .ce-element .ce-textpic {
        display: block;
    }

    .page-stage-teaser .ce-element .ce-textpic-inner {
        margin-top: var(--size-x2);
        margin-left: 0;
    }

    .page-stage-teaser .ce-element .ce-gallery {
        max-width: var(--size-x16);
        margin: 0 auto;
    }

    .page-stage.teaser-array-visible::before,
    .page-stage.teaser-array-visible::after {
        position: absolute;
        margin-bottom: var(--size-x12);
    }

    .ce-frame-shortcut_teaser,
    .content-institutions .ce-grid-institutions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--size-x4);
        justify-content: start;
    }

    .ce-frame-shortcut_teaser,
    .content-institutions .ce-grid-institutions[data-show-category],
    .no-js .content-institutions .ce-grid-institutions {
        grid-template-columns: repeat(3, 1fr);
    }

    .ce-frame-shortcut_teaser .ce-element,
    .content-institutions .ce-grid-institutions > .ce-element {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0px;
        padding: 0;
        border-bottom: none;
        border-radius: var(--border-radius);
        overflow: hidden;
        margin: 0;
    }

    .ce-frame-shortcut_teaser > .ce-element:focus,
    .ce-frame-shortcut_teaser > .ce-element:hover,
    .content-institutions .ce-grid-institutions > .ce-element:focus,
    .content-institutions .ce-grid-institutions > .ce-element:hover {
        transform: translateY(var(--size-n1));
        box-shadow: var(--box-shadow-hover);
    }

    .ce-frame-shortcut_teaser > .ce-element .ce-textpic,
    .content-institutions .ce-grid-institutions .ce-element .ce-textpic {
        width: 100%;
        display: block;
    }

    .ce-frame-shortcut_teaser > .ce-element .ce-textpic-inner,
    .content-institutions .ce-grid-institutions .ce-element .ce-textpic-inner {
        padding: var(--size-x4);
        margin-top: 0;
        margin-left: 0;
        width: 100%;
    }

    .ce-frame-shortcut_teaser > .ce-element .ce-gallery,
    .content-institutions .ce-grid-institutions .ce-element .ce-gallery {
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
    }

    .ce-frame-shortcut_teaser > .ce-element + .ce-element .ce-gallery::before,
    .content-institutions
        .ce-grid-institutions
        > .ce-element
        + .ce-element
        .ce-gallery::before {
        display: none;
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-outer .ce-gallery figure {
        transform-origin: center;
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-outer:hover {
        transform: none;
    }

    .page-stage-teaser
        > .ce-element
        .ce-teaserlink-outer:hover
        .ce-gallery
        figure {
        transform: scale(1.1) rotate(6deg);
    }

    .page-stage-teaser > .ce-element.ce-is-teaserlink:focus,
    .page-stage-teaser > .ce-element.ce-is-teaserlink:hover {
        transform: translateY(var(--size-n1));
        box-shadow: var(--box-shadow-hover);
    }

    .content-institutions .institutions-categories {
        gap: var(--size-x2);
    }
    .page-stage-inner {
        /*! padding-bottom: var(--size-x4); */
    }

    .institutions-toggle .button-title-short {
        display: none;
    }

    .institutions-toggle .button-title-default {
        display: inline;
    }

    .page-logo-portal .logo-link {
        height: 50%;
    }
}

/* desktop */
@media all and (min-width: 62.5em) {
    .page-header-searchbox .search-label {
        clip: rect(1px, 1px, 1px, 1px) !important;
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
        height: 1px !important;
        overflow: hidden !important;
        position: absolute !important;
        width: 1px !important;
        white-space: nowrap !important;
    }

    /* page layout */

    .mainnav {
        box-shadow: var(--box-shadow);
        border-radius: var(--border-radius);
        background-color: #fff;
    }

    .page-scrolled .mainnav {
        border-top-right-radius: 0;
        border-top-left-radius: 0;
    }

    .page-header-sticky .page-header-topbar {
        max-height: unset;
    }

    .wrap-inner {
        padding-left: var(--size-x8);
        padding-right: var(--size-x8);
    }

    .page-grid-large {
        margin-left: -2.5rem;
        margin-right: -2.5rem;
    }
    .page-grid-large .page-col {
        float: left;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
        max-width: 100%;
        min-height: 1px;
    }
    .page-grid-large-66-33 .page-col {
        width: 66.6666%;
    }
    .page-grid-large-66-33 .page-col:last-child {
        width: 33.3333%;
    }
    .page-header-main-inner {
        padding-top: var(--size-x6);
        padding-bottom: var(--size-x6);
        gap: 1.25rem;
        position: relative;
    }
    .page-footer-top,
    .page-footer-top > div {
        position: relative;
    }
    .page-footer-top::before,
    .page-header-main-inner::before {
        content: "";
        display: var(--background-header-display);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: bottom right;
    }
    .page-footer-top::before {
        /* background-image: var(--background-footer-image); */
    }
    .page-header-main-inner::before {
        /* background-image: var(--background-header-image); */
        margin: 0 var(--size-x8);
    }
    .page-scrolled .page-header-main-inner {
        /*! padding-top: 1.25rem; */
        /*! padding-bottom: 1.25rem; */
        /*! padding-top: 0; */
        /*! padding-bottom: 0; */
    }
    .page-header-sticky .page-header-topbar,
    .page-header-sticky .page-header-topbar .page-header-topbar-inner,
    .page-header-sticky .page-header-topbar .topnav {
        max-height: 2.25rem;
    }
    .page-header-sticky .page-header-topbar .topnav li {
        display: flex;
    }
    .page-header-sticky .page-header-main {
        max-height: 12.625rem;
    }
    .page-logo {
        height: 2.875em;
    }
    .topnav {
        margin-right: var(--size-n2);
        /*! justify-content: flex-end; */
    }
    .page-header-searchbox {
        order: 3;
        margin: 0;
        width: 12rem;
        transition: width ease 0.25s;
        margin-left: var(--size-x4);
    }
    .page-header-searchbox:focus-within {
        width: 18rem;
    }
    .page-header-searchbox .searchbox {
        min-height: 36px; /* no searchbox on searchpage, but keep the height */
    }

    .page-header-searchbox .search-button {
        /*! background-color: rgb(235, 235, 235); */
    }

    .page-header-searchbox .searchbox .search-word {
        padding: var(--size-x2) var(--size-x4);
        background: rgba(0, 0, 0, 0);
        color: rgb(255, 255, 255);
        border-radius: 0;
        line-height: 1;
    }
    .page-header-searchbox .searchbox .search-word::placeholder {
        color: rgb(255, 255, 255, 0.5);
    }
    .page-stage .ce-frame-headerimage .ce-header {
        margin-left: calc(-50% + 2.5rem);
    }
    .page-stage,
    .page-content {
        padding-top: var(--size-x6);
    }
    .page-content {
        /*! padding-bottom:var(--size-x2); */
    }

    .page-footer-top {
        padding-top: var(--size-x8);
    }

    /* sticky header */
    .page-header-sticky .page-header {
        position: relative;
        background-color: transparent;
    }
    .page-header-sticky {
        padding-top: 0;
    }
    .page-header-sticky .page-header-main {
        overflow: hidden;
        max-height: 25rem;
        transition: max-height 0.25s ease;
    }
    .page-header-sticky.page-scrolled .page-header-main {
        max-height: unset;
    }
    .page-header-bottombar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
    .page-header-sticky.page-scrolled .page-header-bottombar {
        position: fixed;
        top: 0;
    }
    .page-stage-inner {
        /*! padding-bottom: var(--size-x12); */
    }

    .page-stage-teaser > .ce-element + .ce-element {
        margin-left: var(--size-x4);
    }

    .ce-frame-shortcut_teaser,
    .content-institutions .ce-grid-institutions {
        gap: var(--size-x6) var(--size-x8);
        padding-bottom: var(--size-x6);
    }

    .content-institutions .institutions-categories {
        gap: var(--size-x4);
    }

    .navigation-institutions-container .institutions-headline {
        margin-top: var(--size-x8);
    }

    .page-logo-portal.page-logo {
        margin-right: 0;
    }

    .ce-element .ce-bodytext ol,
    .ce-element .ce-bodytext ul {
        /*! padding-left: 5rem; */
    }

    .topnav > .menu {
        justify-content: flex-end;
    }

    .ce-frame-show-mobile {
        display: none;
    }
    .ce-frame-hide-mobile {
        display: block;
    }
}

/* desktop - xlarge */
@media (min-width: 82.5em) {
    html {
        overflow-x: hidden;
    } /* needed to hide scrollbar with 100% width elements */
    body {
        max-width: 120rem;
        margin: 0 auto;
        overflow: hidden;
    } /* Full HD */

    .wrap-outer {
        margin: 0 auto;
        max-width: 80rem;
    }

    .page-stage,
    .page-content {
        padding-top: var(--size-x12);
    }
    .page-header-sticky .page-header-topbar,
    .page-header-sticky .page-header-topbar .page-header-topbar-inner,
    .page-header-sticky .page-header-topbar .topnav {
        max-height: 3.5rem;
        ul {
            margin: 0;
        }
    }

    .page-header-main-inner {
        margin: 0 auto;
        padding-top: var(--size-x12);
        padding-bottom: var(--size-x12);
        max-width: 80rem;
    }
    .page-header-searchbox .searchbox .search-word {
        padding: var(--size-x3) var(--size-x4);
        max-height: 3.75rem;
    }
    .page-header-sticky .page-header-topbar {
        max-height: 3.5rem;
    }
    .page-header-topbar {
        padding: 0;
    }
    .topnav {
        margin-right: -0.625rem;
    }

    .page-logo {
        height: 5rem;
    }
    .page-header-searchbox {
        width: 12rem;
    }
    /* sticky header */
    .page-header-sticky {
        /*! padding-top: 8.75rem; */
    }
    .page-header-main-inner {
        position: relative;
    }

    .page-scrolled .mainnav::before {
        display: none;
    }

    .page-stage .ce-frame-headerimage .ce-header {
        margin-left: calc(-32.5rem - 2.5rem);
    }

    .page-content {
        padding-bottom: 0rem;
    }

    .page-stage::before {
        margin-top: -3.75rem;
    }

    .ce-frame-shortcut_teaser,
    .content-institutions .ce-grid-institutions {
        gap: var(--size-x16);
        grid-row-gap: var(--size-x12);
        padding-bottom: var(--size-x12);
    }

    .navigation-institutions-container .institutions-headline {
        margin-left: var(--size-x4);
        margin-right: var(--size-x4);
        margin-top: var(--size-x12);
    }

    .page-stage-teaser > .ce-element .ce-teaserlink-inner {
        padding: var(--size-x6) var(--size-x4);
    }

    .page-stage-teaser .ce-element .ce-textpic-inner {
        margin-top: var(--size-x4);
    }

    .content-institutions .institutions-categories {
        margin-bottom: var(--size-x8);
    }
}

/* desktop - xlarge + */
@media (min-width: 92em) {
    .institutions-toggle {
        position: fixed;
        top: 50%;
        right: 0;
        bottom: unset;
        padding: var(--size-x6) var(--size-x8);
        transform: rotate(90deg) translateX(50%);
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        transition: var(--animation-default);
        transition-property: right;
        transition-delay: 0.25s;
    }

    .institutions-toggle[aria-expanded="true"] {
        right: 60rem;
        transition-delay: 0s;
    }
}

/* desktop - xlarge + */
@media (min-width: 120em) {
    body {
        position: relative;
        overflow: hidden;
    }

    .institutions-toggle:hover,
    .institutions-toggle {
        left: 50%;
        right: auto;
        transform-origin: left top;
        margin-left: 60rem;
        transform: rotate(90deg) translateX(-50%);
        transition-property: margin;
    }

    .institutions-toggle[aria-expanded="true"] {
        right: auto;
        margin-left: 0;
    }

    .navigation-institutions-container {
        position: absolute;
    }
}

/* news */
@media {
 
    .news .news-list-teaser::before ,
    .news .news-list-teaser::after ,
    .news .news-list-item-teaser::before ,
    .news .news-list-item-teaser::after ,
    .news-single .ce-gallery::before ,
    .news-single .ce-gallery::after {
        display: none !important;
    }

    .news .news-list-teaser {
        display: flex;
        flex-direction: column;
    }

    .news .news-list-item-teaser {
        display: grid;
    }
    
    .news-single .ce-gallery {
        display: grid;
        gap: var(--size-4);
        gap: 2rem;
        grid-template-columns: repeat(var(--news-gallery-columns), minmax(0, 1fr));
    }
    
    .news-single .ce-gallery[data-ce-columns="1"] {
        --news-gallery-columns: 1;
    }
    
    .news-single .ce-gallery[data-ce-columns="2"] {
        --news-gallery-columns: 2;
    }
    
}

/* news */
@media all and (min-width: 47.5em) {

    .news .news-list-teaser {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
}