@font-face {
    font-family: 'CameraPlain';
    src: url('assets/ABCCameraPlainVariableEdu-Regular.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}

.camera-plain {
    font-family: 'CameraPlain', sans-serif;
    font-weight: 400;
}

.camera-plain-light {
    font-family: 'CameraPlain', sans-serif;
    font-weight: 200;
}

.text-body p.subchapter {
    margin-bottom: .5vw;

}

.text-body p {
    margin-bottom: 1.5vw;
}



@font-face {
    font-family: 'ABCROM';
    src: url('assets/ABCROM-Regular-Trial.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ABCROM';
    src: url('assets/ABCROM-Bold-Trial.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'ABCROM';
    src: url('assets/ABCROM-BookItalic-Trial.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

body {
    background-color: rgb(231, 231, 227);
    font-family: 'ABCROM', sans-serif;
    font-weight: normal;
    padding: 1vw 1vw 1vw 1vw;
    margin: 0px;
}


p {
    margin: 0;
}




.Content-Collapsed {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    justify-items: start;
    align-items: center;
    padding: 0vh;
    position: relative;
    background-color: rgba(255, 255, 255, 0);
    transition: all 0.25s linear;

}





.section-title,
.section-tag,
.section-close {
    display: block;
    font-family: 'ABCROM';
    font-size: 5vh;
    color: rgb(127, 127, 127);
    background-color: rgba(215, 215, 215, 0.8);
    padding-left: .25vw;
    padding-right: .25vw;
}

.section-close {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s linear;
    cursor: pointer;
}

.Content-Collapsed.is-open .section-close {
    opacity: 1;
    pointer-events: auto;
}



.Content-Collapsed:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: whitesmoke;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
}








.Content-Expanded {
    height: 0;
    width: 100%;
    overflow: hidden;
    transition: height 0.4s ease;
    font-family: serif;
    font-size: 1.1vw;
    /* background-color: blanchedalmond; */
}



.Content-Expanded-Inner {
    display: flex;
    flex-direction: row;
    height: 100%;
    overflow: visible;
    background: rgb(240, 240, 240);
}

.Content-Expanded-Text {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.text-nav {
    flex: 1;
    padding: 5vw 2vw 5vw 5vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1vw;
    overflow: hidden;
}

.text-body-scroll {
    flex: 2;
    height: 100%;
    overflow-y: scroll;
    padding: 5vw 5vw 5vw 1vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    position: relative;
}

.text-body-section {
    font-family: 'CameraPlain', sans-serif;
    font-weight: 400;
    margin-bottom: 2.5vw;
    text-align: left;
    border-bottom: 3px;
    border-left: 0px;
    border-top: 0px;
    border-right: 0px;
    border-style: solid;
    border-color: rgb(203, 203, 203);
}

.text-body-section p {
    margin-bottom: 2vw;
}

.text-body-section p.subchapter {
    margin-bottom: .5vw;
}

.text-title {
    font-family: ABCROM;
    font-weight: normal;
    color: rgb(203, 203, 203);
    font-size: 1.1vw;
    padding: 0;
    margin: 0;
    text-align: right;
    transition: color 0.25s ease;
    cursor: pointer;
}

.text-title:not(.active):hover {
    color: rgb(145, 145, 145);
}

.text-title.active {
    color: rgb(80, 80, 80);
}




.Content-Expanded-Image {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    padding: 5vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1vw;
}

.media-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* background: rgba(0, 0, 0, 0.08); */
}

.media-item img,
.media-item video,
.media-item mux-player {
    width: 75%;
    flex-shrink: 0;
    height: auto;
    display: block;
}

mux-player {
    --controls: none;
    /* aspect-ratio: 16 / 9; */
}

.media-caption {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    padding: 0.75vw;
    font-family: 'ABCROM', sans-serif;
    font-size: 0.85vw;
    line-height: 1.5;
    outline: none;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.6);
    background-color: white;
    min-height: fit-content;
}

.media-caption:empty::before {
    content: attr(data-placeholder);
    color: rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.media-caption .footnote {
    font-family: 'ABCROM', sans-serif;
    font-weight: normal;
    font-style: italic;
    font-size: 0.5vw;
    margin-top: 0.2vw;
}

.footnote-ref {
    font-family: 'CameraPlain', sans-serif;
    font-weight: 400;
    font-size: 0.5vw;
    vertical-align: 1ex;
    line-height: 0;
}



















.mainContent-Container {
    position: relative;
    z-index: 2;
}



.backdrop {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.backdrop.active {
    opacity: 1;
}

@-webkit-keyframes drift-right {
    from {
        -webkit-transform: translateX(-50%) translateZ(0);
        transform: translateX(-50%) translateZ(0);
    }

    to {
        -webkit-transform: translateX(0) translateZ(0);
        transform: translateX(0) translateZ(0);
    }
}

@keyframes drift-right {
    from {
        transform: translateX(-50%) translateZ(0);
    }

    to {
        transform: translateX(0) translateZ(0);
    }
}

.steine {
    position: fixed;
    bottom: 0vh;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: -1;
}

.steine-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0vw;
    width: max-content;
    height: 100%;
    -webkit-animation: drift-right 500s linear infinite;
    animation: drift-right 500s linear infinite;
    will-change: transform;
}

.steine-track img {
    height: 100%;
    width: auto;
    flex-shrink: 0;
    opacity: 1;
}

.lightbox {
    display: none;
    position: fixed;
    inset: 1vw;
    background: rgb(0, 0, 0);
    z-index: 200;
    cursor: none;
    align-items: flex-start;
    justify-content: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-img {
    height: 100%;
    width: auto;
    display: block;
    pointer-events: none;
}

.lightbox-video {
    height: 100%;
    width: auto;
    display: none;
    pointer-events: none;
    --controls: none;
}

.lightbox-cursor {
    position: fixed;
    pointer-events: none;
    font-family: 'CameraPlain', sans-serif;
    font-weight: 400;
    font-size: 3vw;
    color: white;
    transform: translate(-50%, -50%);
    z-index: 201;
    line-height: 1;
    user-select: none;
}

/* ── Mobile overlay ── */
#mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 200;
    align-items: center;
    justify-content: center;
    font-family: 'ABCROM', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0em;
    font-size: 5vw;
    color: whitesmoke;
    pointer-events: none;
}

@media (max-width: 1024px) {

    html,
    body {

        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    #modules-container,
    #backdrop,
    #lightbox {
        display: none;
    }

    .site-footer-caption {
        display: none;

    }

    .steine {
        z-index: 100;

    }

    #mobile-overlay {
        display: flex;
    }
}

.site-footer {
    position: relative;
    display: flex;
    justify-content: space-between;
    top: 0vh;
    font-family: 'ABCROM', sans-serif;
    pointer-events: none;
    overflow: hidden;

}

.site-footer-label {
    font-size: 15vh;
    text-transform: uppercase;
    line-height: 1;
    width: fit-content;
    padding: 3px;
    margin-bottom: 5px;
    color: rgb(238, 238, 238);
    /* background-color: rgb(0, 0, 0); */
    backdrop-filter: blur(10px);

}




.site-footer-caption {

    font-size: 2vh;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 1vw;
    padding: 2px 2px 0px 2px;
    /* background-color: brown; */
    color: rgb(245, 245, 245);
    /* background-color: rgba(0, 0, 0, 0.779); */

}

/* ── Loading screen ── */
@keyframes loading-pulse {
    0% {
        background: rgb(177, 177, 177);
    }

    25% {
        background: rgb(255, 255, 255);
    }

    50% {
        background: rgb(230, 230, 230);
    }

    75% {
        background: rgb(255, 255, 255);
    }

    100% {
        background: rgb(177, 177, 177);
    }
}

#loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: loading-pulse 3s ease-in-out infinite;
}

#loading-screen span {
    font-family: 'ABCROM', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    /* letter-spacing: 0em; */
    font-size: 2vw;
    color: rgb(180, 180, 180);
    user-select: none;
    pointer-events: none;
}