* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 15%, #181818 0%, #0d0d0d 48%, #080808 100%);
    color: #e8e5df;
    font-family: Arial, Helvetica, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,...");
    z-index: 9999;
}

header {
    padding: 42px 5vw 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

canvas#topo {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 40;
}

canvas#archive-canvas-still {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 40;
}

canvas#archive-canvas-moving {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 40;
}

canvas#mouse-grid-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 40;
}

.title {
    font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 700;
    letter-spacing: -0.10em;
    color: #e8e5df;
}

#collectionTitleHeader {
    color: #77736d;
    padding-right: 5px;
}

.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    flex: 1;
}

.count {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #77736d;
}

.back {
    display: none;
    border: 0;
    background: none;
    padding: 0;
    color: #a7a39c;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
}

.back:hover {
    color: #e8e5df;
}

.controls {
    width: 90%;
    max-width: 1500px;
    margin: 25px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collection-title {
    display: none;
    color: #d8d4cc;
    font-size: 13px;
    letter-spacing: 0.08em;
    font-family: "Courier New", Courier, monospace;
}

.sort {
    margin-left: auto;
    background: transparent;
    color: #a7a39c;
    border: none;
    padding: 9px 0 9px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    outline: none;
    cursor: pointer;
    min-width: 86px;
}

.sort:hover {
    color: #e8e5df;
}

.collections {
    width: 90%;
    max-width: 1500px;
    margin: 65px auto 120px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 70px 30px;
    align-items: start;
    z-index: 100;
}

.collection {
    cursor: pointer;
}

.collection:nth-child(6n + 1) {
    grid-column: 1 / span 7;
}

.collection:nth-child(6n + 2) {
    grid-column: 9 / span 4;
    margin-top: 100px;
}

.collection:nth-child(6n + 3) {
    grid-column: 2 / span 5;
    margin-top: 20px;
}

.collection:nth-child(6n + 4) {
    grid-column: 8 / span 5;
    margin-top: 130px;
}

.collection:nth-child(6n + 5) {
    grid-column: 1 / span 5;
    margin-top: 40px;
}

.collection:nth-child(6n + 6) {
    grid-column: 7 / span 6;
    margin-top: 0;
}

.collection-paper {
    position: relative;
    background: #f7f6f2;
    padding: 14px 14px 16px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.32),
        0 3px 10px rgba(0, 0, 0, 0.2);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.collection:hover .collection-paper {
    transform: translateY(-5px);
    box-shadow:
        0 27px 60px rgba(0, 0, 0, 0.42),
        0 5px 14px rgba(0, 0, 0, 0.22);
}

.collection-cover {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: contain;
    z-index: 1;
}

.collection-info {
    padding-top: 14px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}

.collection-name {
    color: #77736d;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    letter-spacing: 0.04em;
}

.collection-count {
    color: #77736d;
    font-size: 9px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gallery {
    display: none;
    position: relative;
    width: 90%;
    max-width: 1500px;
    margin: 50px auto 100px;
    grid-template-columns: repeat(12, 1fr);
    gap: 80px 30px;
    align-items: start;
    z-index: 100;
}

.photo {
    position: relative;
    cursor: zoom-in;
}

.photo:nth-child(6n + 1) {
    grid-column: 1 / span 7;
}

.photo:nth-child(6n + 2) {
    grid-column: 9 / span 4;
    margin-top: 110px;
}

.photo:nth-child(6n + 3) {
    grid-column: 3 / span 5;
    margin-top: 30px;
}

.photo:nth-child(6n + 4) {
    grid-column: 8 / span 5;
    margin-top: 160px;
}

.photo:nth-child(6n + 5) {
    grid-column: 1 / span 5;
    margin-top: 50px;
}

.photo:nth-child(6n + 6) {
    grid-column: 7 / span 6;
    margin-top: 10px;
}

.paper {
    position: relative;
    background: #f7f6f2;
    padding: 14px 14px 15px;
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        0 3px 10px rgba(0, 0, 0, 0.18);
    z-index: 100;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.paper:hover {
    transform: translateY(-5px);
    box-shadow:
        0 27px 60px rgba(0, 0, 0, 0.42),
        0 5px 14px rgba(0, 0, 0, 0.22);
}

.paper img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 1;
}

.date {
    margin-top: 0;
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.photo-meta {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: baseline;
    gap: 20px;
    container-type: inline-size;
}

.photo-number {
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
}

.photo-camera {
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: right;
}


/* CAMERA geht in die nächste Zeile */
@container (max-width: 360px) {
    .photo-meta {
        grid-template-columns: 1fr 1fr;
    }

    .date {
        grid-column: 1;
        text-align: left;
    }

    .photo-number {
        grid-column: 2;
        text-align: right;
    }

    .photo-camera {
        grid-column: 1;
        text-align: left;
    }
}


/* NUMBER geht ebenfalls in die nächste Zeile */
@container (max-width: 240px) {
    .photo-meta {
        grid-template-columns: 1fr;
    }

    .date,
    .photo-number,
    .photo-camera {
        grid-column: 1;
        text-align: left;
    }
}

.photo-meta .date {
    margin-top: 0;
}

.empty {
    width: 100%;
    text-align: center;
    color: #66635e;
    padding: 100px 20px;
    font-size: 13px;
    letter-spacing: 0.05em;
}

.loading {
    width: 100%;
    text-align: center;
    color: #66635e;
    padding: 100px 20px;
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.99);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.lightbox.active {
    display: flex;
}

.lightbox-date {
    position: fixed;
    bottom: 25px;
    left: 25px;
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lightbox-camera {
    position: fixed;
    bottom: 25px;
    right: 25px;
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lightbox-page {
    position: fixed;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lightbox-collection {
    position: fixed;
    top: 28px;
    left: 25px;
    border: none;
    background: none;
    padding: 0;
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    display: none;
}

.lightbox-collection:hover {
    color: #e8e5df;
}

.lightbox-stage {
    width: min(70vw, 1000px);
    height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#lightboxImage {
    cursor: zoom-in;
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform-origin 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#lightboxImage.zoom-in-cursor {
    cursor: zoom-in;
}

#lightboxImage.zoom-out-cursor {
    cursor: zoom-out;
}

.lightbox-thumbs {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 101;
}

.lightbox-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    opacity: 0.75;
    cursor: pointer;
    filter: grayscale(25%);
    transition:
        opacity 0.35s ease,
        filter 0.35s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.35s ease,
        height 0.35s ease;
    will-change: transform, opacity;
}

.lightbox-thumb.current-thumb {
    width: 62px;
    height: 62px;
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.08);
    z-index: 2;
}

.lightbox-thumb.current-thumb:hover {
    transform: scale(0.92);
}

.lightbox-thumb.thumb-prev-2,
.lightbox-thumb.thumb-next-2 {
    opacity: 0.42;
    transform: scale(0.88);
}

.lightbox-thumb.thumb-prev-1,
.lightbox-thumb.thumb-next-1 {
    opacity: 0.68;
    transform: scale(0.94);
}

.lightbox-thumb:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.08);
}

body.bw-mode .lightbox-thumb {
    filter: grayscale(100%);
}

body.bw-mode .lightbox-thumb:hover {
    filter: grayscale(100%);
}

.lightbox-exif {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    color: #77736d;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
}

.close {
    position: fixed;
    top: 15px;
    right: 20px;
    border: 0;
    background: none;
    color: #a7a39c;
    font-size: 30px;
    cursor: pointer;
    font-weight: 200;
    display: inline-block;
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

.close:hover {
    color: #e8e5df;
    transform: rotate(-45deg);
}

.arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: #77736d;
    font-size: 40px;
    font-weight: 200;
    cursor: pointer;
    padding: 20px;
}

.arrow:hover {
    color: #e8e5df;
}

.arrow-left {
    left: 10px;
}

.arrow-right {
    right: 10px;
}

.home-layout {
    width: 90%;
    max-width: 1500px;
    margin: 65px auto 120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 70px;
    align-items: start;
}

.home-layout .collections {
    width: 100%;
    margin: 0;
}

.collage {
    position: sticky;
    top: 35px;
    min-height: 760px;
    padding: 0 10px 10px;
    z-index: 100;
}

.collage-label {
    color: #77736d;
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 22px 5px;
}

.collage-grid {
    position: relative;
    width: 100%;
    height: 700px;

    perspective: 1000px;

}

.collage-item {
    position: absolute;
    background: #f7f6f2;
    padding: 10px 10px 11px;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.35),
        0 3px 10px rgba(0, 0, 0, 0.22);
    cursor: zoom-in;
    transition:
        opacity 0.7s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, box-shadow;
}

.collage-item:hover {
    z-index: 9999 !important;
    transform:
        translate3d(0, -18px, 45px) rotateX(2deg) rotateY(-2deg) rotate(0deg) scale(1.06) !important;
    box-shadow:
        0 32px 65px rgba(0, 0, 0, 0.48),
        0 7px 18px rgba(0, 0, 0, 0.28);
}

.collage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.collage-item:nth-child(1) {
    width: 48%;
    height: 330px;
    left: 3%;
    top: 3%;
    transform: rotate(-2deg);
}

.collage-item:nth-child(2) {
    width: 34%;
    height: 250px;
    right: 4%;
    top: 0;
    transform: rotate(3deg);
}

.collage-item:nth-child(3) {
    width: 38%;
    height: 300px;
    right: 8%;
    top: 27%;
    transform: rotate(-4deg);
}

.collage-item:nth-child(4) {
    width: 44%;
    height: 270px;
    left: 0;
    top: 42%;
    transform: rotate(2deg);
}

.collage-item:nth-child(5) {
    width: 30%;
    height: 230px;
    left: 34%;
    top: 53%;
    transform: rotate(-3deg);
}

.collage-item:nth-child(6) {
    width: 39%;
    height: 260px;
    right: 0;
    bottom: 2%;
    transform: rotate(2deg);
}

.collage-item:nth-child(7) {
    width: 31%;
    height: 220px;
    left: 9%;
    bottom: 0;
    transform: rotate(-5deg);
}

.collage-item:nth-child(8) {
    width: 27%;
    height: 210px;
    left: 49%;
    top: 8%;
    transform: rotate(5deg);
}

.collage-item.fade-out {
    opacity: 0;
    transform: scale(0.97) rotate(0deg);
}

.bw-toggle {
    background: transparent;
    border: none;
    color: #a7a39c;
    padding: 0;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.bw-toggle:hover {
    color: #e8e5df;
}

body.bw-mode img {
    filter: grayscale(100%);
    opacity: 90%;
}

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    border: none;
    background: none;
    color: #a7a39c;
    font-size: 22px;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    z-index: 50;

    transition:
        opacity 0.8s ease,
        color 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    color: #e8e5df;
    animation: backToTopPhysics 1.4s cubic-bezier(0.36, 0, 0.64, 1) infinite;
}

@keyframes backToTopPhysics {
    0% {
        transform: translateY(0) scaleY(1);
    }

    8% {
        transform: translateY(1px) scaleY(0.94);
    }

    18% {
        transform: translateY(-5px) scaleY(1.03);
    }

    38% {
        transform: translateY(-13px) scaleY(1);
    }

    58% {
        transform: translateY(0) scaleY(0.97);
    }

    68% {
        transform: translateY(-3px) scaleY(1.01);
    }

    78% {
        transform: translateY(0) scaleY(1);
    }

    100% {
        transform: translateY(0) scaleY(1);
    }
}

.site-footer {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px 0px 35px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #55524d;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

body.bw-mode .paper,
body.bw-mode .collection-paper {
    container-type: inline-size;
    position: relative;

    background: rgba(255, 255, 255, 0.01);
    box-shadow: none;
    padding: 42px 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32), 0 3px 10px rgba(0, 0, 0, 0.2);
}

body.bw-mode .paper:hover {
    transform: translateY(-5px);
    box-shadow:
        0 27px 60px rgba(0, 0, 0, 0.42),
        0 5px 14px rgba(0, 0, 0, 0.22);
}

body.bw-mode .paper::before,
body.bw-mode .paper::after,
body.bw-mode .collection-paper::before,
body.bw-mode .collection-paper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;

    height: clamp(15px, 5cqw, 30px);

    background: rgba(8, 8, 8, 0.58);

    -webkit-mask-image: radial-gradient(ellipse clamp(5px, 1.3cqw, 8px) clamp(7px, 1.8cqw, 10px) at center,
            transparent 0,
            transparent 70%,
            #000 73%);

    mask-image: radial-gradient(ellipse clamp(5px, 1.3cqw, 8px) clamp(7px, 1.8cqw, 10px) at center,
            transparent 0,
            transparent 70%,
            #000 73%);

    -webkit-mask-size: clamp(28px, 7.5cqw, 46px) 100%;
    mask-size: clamp(28px, 7.5cqw, 46px) 100%;

    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;

    z-index: 3;
}

body.bw-mode .paper::before,
body.bw-mode .collection-paper::before {
    top: 0;
}

body.bw-mode .paper::after,
body.bw-mode .collection-paper::after {
    bottom: 0;
}

body.bw-mode .paper img,
body.bw-mode .collection-cover {
    position: relative;
    z-index: 1;
}

body.bw-mode .photo-meta,
body.bw-mode .date,
body.bw-mode .photo-number,
body.bw-mode .photo-camera,
body.bw-mode .collection-name,
body.bw-mode .collection-count,
body.bw-mode .collection-title {
    font-family:
        "Courier New",
        Courier,
        monospace;
    color: #d8d8d8;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.bw-mode .collection-name {
    font-size: 13px;
    letter-spacing: 0.16em;
}

body.bw-mode .photo-meta {
    font-size: 9px;
    letter-spacing: 0.18em;
}

body.bw-mode .collection-info {
    font-family:
        "Courier New",
        Courier,
        monospace;
}

/* =========================================
   BW COLLAGE
   ========================================= */

body.bw-mode .collage {
    background: transparent !important;
}

/* Bilder ohne Papierkarten */
body.bw-mode .collage-item {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;

    transition:
        opacity 0.6s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


/* -----------------------------------------
   IMAGE
   ----------------------------------------- */

body.bw-mode .collage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0.84;

    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    filter:
        grayscale(100%) contrast(1.12) brightness(0.88);

    transform: none;

    transition:
        opacity 0.5s ease,
        filter 0.5s ease;
}


body.bw-mode .collage-item:nth-child(1) img {
    opacity: 0.90;
}

body.bw-mode .collage-item:nth-child(2) img {
    opacity: 0.76;
}

body.bw-mode .collage-item:nth-child(3) img {
    opacity: 0.82;
}

body.bw-mode .collage-item:nth-child(4) img {
    opacity: 0.70;
}

body.bw-mode .collage-item:nth-child(5) img {
    opacity: 0.86;
}

body.bw-mode .collage-item:nth-child(6) img {
    opacity: 0.80;
}

body.bw-mode .collage-item:nth-child(7) img {
    opacity: 0.68;
}

body.bw-mode .collage-item:nth-child(8) img {
    opacity: 0.74;
}

/* -----------------------------------------
   ORGANISCHE KANTEN
   etwas subtiler
   ----------------------------------------- */

body.bw-mode .collage-item:nth-child(1) img {
    clip-path: polygon(3% 2%,
            96% 0%,
            100% 8%,
            98% 94%,
            93% 100%,
            5% 97%,
            0% 91%,
            2% 10%);
}

body.bw-mode .collage-item:nth-child(2) img {
    clip-path: polygon(1% 6%,
            92% 2%,
            98% 10%,
            100% 88%,
            94% 96%,
            82% 100%,
            4% 94%,
            0% 15%);
}

body.bw-mode .collage-item:nth-child(3) img {
    clip-path: polygon(6% 0%,
            100% 4%,
            97% 91%,
            91% 98%,
            12% 100%,
            2% 94%,
            0% 18%);
}

body.bw-mode .collage-item:nth-child(4) img {
    clip-path: polygon(0% 8%,
            7% 2%,
            94% 0%,
            100% 11%,
            97% 97%,
            87% 100%,
            4% 95%);
}

body.bw-mode .collage-item:nth-child(5) img {
    clip-path: polygon(4% 0%,
            89% 3%,
            98% 9%,
            100% 82%,
            94% 97%,
            8% 100%,
            1% 91%);
}

body.bw-mode .collage-item:nth-child(6) img {
    clip-path: polygon(0% 12%,
            5% 4%,
            96% 1%,
            100% 15%,
            96% 93%,
            89% 100%,
            3% 96%);
}


/* -----------------------------------------
   POSITIONIERUNG
   etwas mehr Luft
   ----------------------------------------- */

body.bw-mode .collage-item:nth-child(1) {
    width: 50%;
    height: 370px;
    left: 2%;
    top: 5%;
    transform: rotate(-1.2deg);
    z-index: 5;
}

body.bw-mode .collage-item:nth-child(2) {
    width: 36%;
    height: 275px;
    right: 3%;
    top: 1%;
    transform: rotate(1.5deg);
    z-index: 8;
}

body.bw-mode .collage-item:nth-child(3) {
    width: 38%;
    height: 285px;
    right: 8%;
    top: 28%;
    transform: rotate(-1deg);
    z-index: 10;
}

body.bw-mode .collage-item:nth-child(4) {
    width: 41%;
    height: 265px;
    left: 1%;
    top: 53%;
    transform: rotate(1.2deg);
    z-index: 4;
}

body.bw-mode .collage-item:nth-child(5) {
    width: 30%;
    height: 210px;
    left: 35%;
    top: 59%;
    transform: rotate(-1.6deg);
    z-index: 11;
}

body.bw-mode .collage-item:nth-child(6) {
    width: 39%;
    height: 280px;
    right: 1%;
    bottom: 4%;
    transform: rotate(1.1deg);
    z-index: 7;
}

body.bw-mode .collage-item:nth-child(7) {
    width: 27%;
    height: 200px;
    left: 10%;
    bottom: 1%;
    transform: rotate(-2deg);
    z-index: 6;
}

body.bw-mode .collage-item:nth-child(8) {
    width: 28%;
    height: 205px;
    left: 49%;
    top: 8%;
    transform: rotate(2deg);
    z-index: 9;
}


/* -----------------------------------------
   HOVER
   ----------------------------------------- */

body.bw-mode .collage-item:hover {
    transform:
        translateY(-7px) scale(1.025) rotate(0deg);

    z-index: 9999 !important;
}

body.bw-mode .collage-item:hover img {
    opacity: 0.94;

    filter:
        grayscale(100%) contrast(1.08) brightness(0.96);
}



@media (max-width: 1300px) {
    .lightbox-thumbs {
        display: none;
    }
}

@media (max-width: 1000px) {
    .home-layout {
        grid-template-columns: 1fr;
    }

    .collage {
        position: relative;
        top: auto;
        min-height: 650px;
        order: -1;
    }

    .collage-grid {
        height: 600px;
    }

    /* Die Collage-Karten behalten beim Verkleinern ihre Proportionen. */
    .collage-item {
        padding: clamp(5px, 1.2vw, 10px) clamp(5px, 1.2vw, 10px) clamp(5px, 1.2vw, 11px);
    }

    .collage-item:nth-child(1) {
        aspect-ratio: 1.02 / 1;
        height: auto;
    }

    .collage-item:nth-child(2) {
        aspect-ratio: 0.95 / 1;
        height: auto;
    }

    .collage-item:nth-child(3) {
        aspect-ratio: 0.89 / 1;
        height: auto;
    }

    .collage-item:nth-child(4) {
        aspect-ratio: 1.14 / 1;
        height: auto;
    }

    .collage-item:nth-child(5) {
        aspect-ratio: 0.91 / 1;
        height: auto;
    }

    .collage-item:nth-child(6) {
        aspect-ratio: 1.05 / 1;
        height: auto;
    }

    .collage-item:nth-child(7) {
        aspect-ratio: 0.99 / 1;
        height: auto;
    }

    .collage-item:nth-child(8) {
        aspect-ratio: 0.90 / 1;
        height: auto;
    }

    .back-to-top {
        right: 15px;
    }
}

@media (max-width: 800px) {
    header {
        padding: 28px 6vw 22px;
    }

    .header-right {
        gap: 12px;
    }

    .count {
        font-size: 10px;
    }

    .back {
        font-size: 10px;
    }

    .controls {
        width: 88%;
        margin-top: 20px;
    }

    .collections {
        width: 88%;
        display: block;
        margin-top: 40px;
    }

    .collection {
        margin: 0 0 55px !important;
    }

    .collection-paper {
        padding: 9px 9px 11px;
    }

    /* Collection-Cover wie Galerie-Fotos vollständig über die Kartenbreite
       skalieren; die Desktop-Maximalhöhe erzeugt sonst große weiße Seiten. */
    .collection-cover {
        width: 100%;
        max-height: none;
        height: auto;
        object-fit: contain;
    }

    .collection-info {
        padding-top: 10px;
    }

    .collection-name {
        font-size: 12px;
    }

    .collection-count {
        font-size: 8px;
    }

    .gallery {
        width: 88%;
        display: none;
        margin-top: 35px;
    }

    .gallery[style*="display: grid"],
    .gallery[style*="display: block"],
    .gallery.active,
    .gallery.is-visible {
        display: block !important;
    }

    .back-to-top {
        display: none;
    }

    .photo {
        display: block;
        width: 100%;
        min-width: 0;
        margin: 0 0 55px !important;
    }

    .paper {
        padding: 9px 9px 11px;
    }

    .date {
        margin-top: 9px;
        font-size: 9px;
    }

    /* Galerie auf kleinen Screens konsequent einspaltig halten. */
    .gallery .photo,
    .gallery .photo:nth-child(n) {
        grid-column: auto;
        margin-top: 0 !important;
    }

    /* Metadaten bleiben innerhalb der Papierkarte und dürfen sauber umbrechen. */
    .photo-meta {
        width: 100%;
        min-width: 0;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px;
    }

    .photo-meta>*,
    .photo-meta .date,
    .photo-number,
    .photo-camera {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .photo-meta .date,
    .photo-number,
    .photo-camera {
        line-height: 1.35;
    }

    .lightbox {
        padding: 20px;
    }

    .lightbox-thumbs {
        display: none;
    }

    .arrow {
        font-size: 30px;
        padding: 10px;
    }

    .home-layout {
        width: 88%;
        display: flex;
        flex-direction: column;
        margin-top: 40px;
        gap: 35px;
    }

    .home-layout .collections {
        width: 100%;
        margin: 0;
        margin-top: 100px;
    }

    .collage {
        width: 100%;
        min-height: 520px;
        padding: 0;
        order: -1;
    }

    .collage-grid {
        height: 480px;
    }

    .collage-label {
        margin-left: 0;
        margin-bottom: 15px;
    }

    .collage-item:nth-child(1) {
        width: 55%;
        height: 220px;
    }

    .collage-item:nth-child(2) {
        width: 38%;
        height: 180px;
    }

    .collage-item:nth-child(3) {
        width: 43%;
        height: 210px;
        top: 28%;
    }

    .collage-item:nth-child(4) {
        width: 48%;
        height: 190px;
        top: 43%;
    }

    .collage-item:nth-child(5) {
        width: 34%;
        height: 170px;
        top: 54%;
    }

    .collage-item:nth-child(6) {
        width: 42%;
        height: 180px;
    }

    .collage-item:nth-child(7) {
        width: 35%;
        height: 160px;
    }

    .collage-item:nth-child(8) {
        width: 30%;
        height: 155px;
    }

    .side-nav {
        display: none;
    }

    .site-footer {
        width: 88%;
        padding: 25px 0 30px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        line-height: 1.5;
    }
}


/* =========================================================
   MOBILE / SMALL SCREENS
   Desktop layout remains unchanged.
   ========================================================= */

/* Header: keep title + B&W + back + count visually aligned
   without changing the desktop composition. */
@media (max-width: 800px) {
    header {
        min-width: 0;
        align-items: center;
        gap: 14px;
    }

    .title {
        min-width: 0;
        display: flex;
        align-items: baseline;
        gap: 0;
        white-space: nowrap;
        flex: 1 1 auto;
    }

    .title>span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bw-toggle {
        flex: 0 0 auto;
        white-space: nowrap;
        line-height: 1;
    }

    .header-right {
        flex: 0 0 auto;
        display: flex;
        align-items: baseline;
        gap: 12px;
        white-space: nowrap;
    }

    .back,
    .count {
        line-height: 1;
    }

    /* More reliable touch targets without changing their visual size. */
    .bw-toggle,
    .back,
    .sort {
        min-height: 32px;
    }

    /* Prevent long filenames / collection titles from forcing overflow. */
    .collection-name,
    .collection-count,
    .photo-meta>* {
        min-width: 0;
    }

    .collection-info {
        gap: 10px;
    }

    .collection-name {
        overflow-wrap: anywhere;
    }

    .collection-count {
        flex: 0 0 auto;
    }

    /* Photo metadata stays a clean three-column row. */
    .photo-meta {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
    }

    .photo-camera {
        overflow-wrap: anywhere;
    }

    /* Lightbox: make the image area use the available viewport,
       while keeping controls out of the image. */
    .lightbox {
        padding: 56px 14px 52px;
    }

    .lightbox-stage {
        width: 100%;
        height: calc(100dvh - 108px);
    }

    .lightbox-image {
        max-width: 100%;
        max-height: 100%;
    }

    .close {
        display: none;
    }

    .arrow {
        top: auto;
        bottom: 14px;
        transform: none;
        font-size: 28px;
        padding: 8px 14px;
        z-index: 102;
    }

    .arrow-left {
        left: 10px;
    }

    .arrow-right {
        right: 10px;
    }

    .lightbox-date {
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        max-width: 42%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
    }

    .lightbox-camera {
        right: 14px;
        bottom: 18px;
        max-width: 32%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 9px;
    }

    /* EXIF bleibt immer sichtbar – auch auf kleinen Screens.
       Bei wenig Platz darf der Text umbrechen. */
    .lightbox-exif {
        display: block;
        position: fixed;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        max-width: min(78vw, 520px);
        white-space: normal;
        line-height: 1.5;
        text-align: center;
        font-size: 9px;
    }

    /* Collection-Link sitzt direkt am Bildbereich und darf sich
       auf kleinen Displays mit den EXIF-Daten stapeln. */
    .lightbox-collection {
        display: block;
        position: fixed;
        left: 50%;
        top: auto;
        bottom: 18px;
        transform: translateX(-50%);
        max-width: min(78vw, 520px);
        white-space: normal;
        line-height: 1.5;
        text-align: center;
    }

    .lightbox-page {
        top: 18px;
        font-size: 9px;
    }

    /* The collage remains part of the design, but becomes substantially
       shorter so it does not dominate a phone viewport. */
    .collage {
        min-height: 390px;
    }

    .collage-grid {
        height: 350px;
    }

    .collage-item:nth-child(1) {
        width: 54%;
        height: 155px;
        left: 2%;
        top: 3%;
    }

    .collage-item:nth-child(2) {
        width: 37%;
        height: 125px;
        right: 2%;
        top: 0;
    }

    .collage-item:nth-child(3) {
        width: 41%;
        height: 145px;
        right: 7%;
        top: 27%;
    }

    .collage-item:nth-child(4) {
        width: 47%;
        height: 135px;
        left: 1%;
        top: 43%;
    }

    .collage-item:nth-child(5) {
        width: 33%;
        height: 115px;
        left: 35%;
        top: 54%;
    }

    .collage-item:nth-child(6) {
        width: 40%;
        height: 125px;
        right: 1%;
        bottom: 3%;
    }

    .collage-item:nth-child(7) {
        width: 31%;
        height: 105px;
        left: 8%;
        bottom: 1%;
    }

    .collage-item:nth-child(8) {
        width: 28%;
        height: 105px;
        left: 49%;
        top: 7%;
    }
}


@media (max-width: 660px) {

    /* Der komplette rechte Header-Bereich folgt unter dem Titel. */
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    .title,
    .header-right {
        width: 100%;
    }

    .header-right {
        flex: 0 0 auto;
        justify-content: flex-start;
        gap: 14px;
    }

    .home-layout .collections {
        width: 100%;
        margin: 0;
        margin-top: 50px;
    }
}

/* Very narrow phones: protect the header from wrapping/overflow and
   give the content a little more horizontal breathing room. */
@media (max-width: 520px) {
    header {
        padding: 22px 5vw 18px;
        gap: 8px;
    }

    .title {
        font-size: clamp(17px, 5vw, 22px);
    }

    .bw-toggle {
        font-size: 8px;
        letter-spacing: 0.05em;
    }

    .header-right {
        gap: 8px;
    }

    .back {
        font-size: 8px;
        letter-spacing: 0.10em;
    }

    .controls,
    .home-layout,
    .gallery,
    .site-footer {
        width: 90%;
    }

    .home-layout {
        margin-top: 25px;
        gap: 28px;
    }

    .collage {
        min-height: 330px;
    }

    .collage-grid {
        height: 295px;
    }

    .collage-item:nth-child(1) {
        height: 130px;
    }

    .collage-item:nth-child(2) {
        height: 105px;
    }

    .collage-item:nth-child(3) {
        height: 120px;
    }

    .collage-item:nth-child(4) {
        height: 112px;
    }

    .collage-item:nth-child(5) {
        height: 95px;
    }

    .collage-item:nth-child(6) {
        height: 105px;
    }

    .collage-item:nth-child(7) {
        height: 88px;
    }

    .collage-item:nth-child(8) {
        height: 88px;
    }

    .collection,
    .photo {
        margin-bottom: 42px !important;
    }

    .collection-paper,
    .paper {
        padding: 8px 8px 10px;
    }

    .collection-name {
        font-size: 11px;
    }

    .count {
        font-size: 8px;
    }

    .collection-count .date,
    .photo-meta {
        font-size: 8px;
    }

    .site-footer {
        font-size: 8px;
    }

    .lightbox-exif,
    .lightbox-collection {
        max-width: 82vw;
    }

    /* Beide Informationen liegen bewusst im selben unteren Bereich
       und können untereinander stehen. */
    .lightbox-collection {
        bottom: 38px;
    }

    .lightbox-exif {
        bottom: 16px;
    }
}

/* Phones in portrait orientation get slightly larger touch controls. */
@media (max-width: 800px) and (orientation: portrait) {

    /* Auf Smartphones: Navigation per Swipe statt Pfeile. */
    .arrow {
        display: none;
    }
}

/* On devices where hover is not meaningful, don't reserve the desktop
   hover animation as part of the interaction. */
@media (hover: none) and (pointer: coarse) {

    .collection:hover .collection-paper,
    .paper:hover,
    .collage-item:hover {
        transform: none;
    }

    .close:hover,
    .arrow:hover,
    .bw-toggle:hover,
    .back:hover,
    .sort:hover,
    .back-to-top:hover {
        color: inherit;
        animation: none;
    }
}

/* =========================================================
   FINAL MOBILE LIGHTBOX TUNING
   - Pfeile ab 800px ausblenden
   - Collection direkt oberhalb des Bildes
   - EXIF direkt unterhalb des Bildes
   - lightbox-date bleibt an seiner bisherigen Position
   ========================================================= */
@media (max-width: 800px) {

    /* Auf kleinen Screens Navigation per Swipe statt Pfeile. */
    .arrow {
        display: none !important;
    }

    .lightbox {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 48px 14px 28px;
        overflow: hidden;
    }

    /* Collection direkt an das Bild angeheftet – oberhalb, mit sehr wenig Abstand. */
    .lightbox-collection {
        position: static;
        order: 1;
        display: block;
        width: auto;
        max-width: min(90vw, 1000px);
        margin: 0 0 7px;
        padding: 0;
        transform: none;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Bildbereich flexibel halten, damit auch Portraitbilder vollständig passen. */
    .lightbox-stage {
        order: 2;
        width: 100%;
        height: auto;
        max-height: calc(100dvh - 155px);
        min-height: 0;
        flex: 0 1 auto;
    }

    .lightbox-image {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: calc(100dvh - 155px);
    }

    /* EXIF direkt unter dem Bild. */
    .lightbox-exif {
        position: static;
        order: 3;
        width: 100%;
        max-width: min(90vw, 1000px);
        margin: 6px auto 0;
        padding: 0;
        transform: none;
        text-align: center;
        white-space: normal;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    /* Kamera direkt darunter, ebenfalls mit minimalem Abstand. */
    .lightbox-camera {
        position: static;
        order: 4;
        width: 100%;
        max-width: min(90vw, 1000px);
        margin: 2px auto 0;
        padding: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.25;
    }

    /* Datum bewusst unverändert als separater, fixer Anker unten links. */
    .lightbox-date {
        position: fixed;
        left: 50%;
        bottom: 18px;
        transform: translateX(-50%);
        max-width: 42%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lightbox-page {
        top: 18px;
    }
}

@media (max-width: 520px) {
    .lightbox {
        padding: 42px 10px 24px;
    }

    .lightbox-collection,
    .lightbox-exif,
    .lightbox-camera {
        max-width: 92vw;
    }

    .lightbox-collection {
        margin-bottom: 5px;
    }

    .lightbox-stage,
    .lightbox-image {
        max-height: calc(100dvh - 138px);
    }

    .lightbox-exif {
        margin-top: 5px;
    }

    .lightbox-camera {
        margin-top: 1px;
    }
}

/* Finale responsive Collage-Regeln: Proportionen bleiben erhalten und
   der Papierabstand wird mit dem verfügbaren Platz kleiner. */
@media (max-width: 800px) {
    .collage-item {
        height: auto !important;
        padding: clamp(4px, 1.2vw, 9px) clamp(4px, 1.2vw, 9px) clamp(4px, 1.2vw, 10px);
    }

    .collage-item:nth-child(1) {
        aspect-ratio: 1.02 / 1;
    }

    .collage-item:nth-child(2) {
        aspect-ratio: 0.95 / 1;
    }

    .collage-item:nth-child(3) {
        aspect-ratio: 0.89 / 1;
    }

    .collage-item:nth-child(4) {
        aspect-ratio: 1.14 / 1;
    }

    .collage-item:nth-child(5) {
        aspect-ratio: 0.91 / 1;
    }

    .collage-item:nth-child(6) {
        aspect-ratio: 1.05 / 1;
    }

    .collage-item:nth-child(7) {
        aspect-ratio: 0.99 / 1;
    }

    .collage-item:nth-child(8) {
        aspect-ratio: 0.90 / 1;
    }
}

@media (max-width: 520px) {
    .collage-item {
        height: auto !important;
        padding: clamp(4px, 1.2vw, 9px) clamp(4px, 1.2vw, 9px) clamp(4px, 1.2vw, 10px);
    }
}