@media screen and (max-width: 767px) {

    /* --- Root Variables --- */
    :root {
        --main-padding: 1rem;
        --text-width: 100%;
    }

    /* --- Typography --- */
    .h0 {
        font-size: 3.5rem;
        line-height: 1;
    }

    h1,
    .h1 {
        font-size: 2rem;
    }

    h2,
    .h2 {
        font-size: 1.8rem;
    }

    h3,
    .h3 {
        font-size: 1.3rem;
        /* font-size: 1rem; */
        /* hyphens: auto; */
    }

    h4,
    .h4 {
        font-size: 1.25rem;
    }

    h5,
    .h5 {
        font-size: 1.125rem;
    }

    p {
        /* font-size: 1rem; */
        max-width: 100%;
        line-height: 1.45;
    }

    .h0, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        line-height: 1.25;
    }

    /* --- Header & Footer --- */
    header.site-header {
        padding: 0.5rem var(--main-padding);
        flex-direction: row-reverse;
    }

    div.site-title {
        font-size: 1.5rem;
    }

    footer section.main-footer {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    aside.animated-d-logo {
        font-size: 60vw;
        /* position: absolute; */
        bottom: var(--main-padding);
        right: 0;
        z-index: 2;
        width: 100%;
        height: auto;
        text-align: end;
        /* align-self: end; */
    }

    /* --- Navigation --- */
    nav ul#main-menu {
        grid-template-columns: [start] 1fr [end];
        padding: 1rem;
        gap: 1.5rem;
        left: 0;
        overflow: scroll;
        height: calc(100vh - var(--header-height) - var(--admin-bar--height, 0px) + 0.25rem);
        height: calc(100svh - var(--header-height) - var(--admin-bar--height, 0px) + 0.25rem);
    }

    ul.accessibility-menu, ul#main-menu section.accessibility {
        flex-direction: column;
        align-items: flex-start;
    }

    ul#main-menu ul.accessibility-menu {
        gap: 1rem;
    }

    nav.submenu-container.sticky.navigation {
        overflow-x: hidden;
        justify-content: unset;
        display: block;
        /* width: 100%; */
        /* margin: 0; */
    }

    ul.submenu {
        justify-content: start;
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    
    ul.submenu li {
        white-space: nowrap;
    }

    /* --- Main Layout --- */
    main {
        gap: 1.5rem;
    }

    main>header.big h1 {
        padding: 2.5rem 0 4rem;
    }

    article {
        gap: 1.5rem;
    }

    article p+p,
    article h2+p,
    article h3+p,
    article h4+p,
    article h5+p,
    article p+ul {
        margin-top: 1rem;
    }

    article p+ :is(h1, h2, h3, h4, h5, h6) {
        margin-top: 2rem;
    }

    /* --- Layout Adjustments --- */
    article .column_2_grid,
    section#retrospektive-director {
        grid-template-columns: unset;
        display: flex;
        gap: 1.5rem;
        flex-direction: column;
    }

    /* Adjust sticky positioning for column layouts */
    article .sticky.r .column:nth-child(even)>*, article .sticky.l .column:nth-child(odd)>*, .director-image {
        position: static;
    }

    /* --- Content Grids --- */

    ul:is(.news-list, .events-list, .exhibition-list, .jobs-list, .external-downloads-list) {
        grid-template-columns: [start] 1fr [end];
        margin-left: 0;
        width: 100%;
        gap: 4rem 1rem;
    }

ul.retrospective-list {
    grid-template-columns: [start] repeat(auto-fill, minmax(150px, 1fr)) [end];
}

    section.gallery div#gallery-container,
    div.block.gallery div#gallery-container {
        grid-template-columns: 1fr 1fr;
    }

    article.visit-content,
    ul.rent-list,
    section.contact-content {
        grid-template-columns: [start] 1fr [end];
    }

    section.team-section ul.contact-list {
        columns: 1;
        gap: 1.5rem;
    }

    /* --- Swiper Containers --- */
    swiper-container:not(.filter, .artists) swiper-slide {
        width: 66%;
        padding: 0;
    }
    swiper-container:not(.filter, .artists) swiper-slide + swiper-slide {
        /* margin-left: 1rem; */
    }


    /* --- Home Page --- */
    main.home .home-header section.hero {
    height: calc((100vh - var(--header-height) - var(--notification-bar-height) - var(--admin-bar--height, 0px) + clamp(3rem, 33vw, 20rem)));
    margin-bottom: clamp(1rem, 17vw, 7rem);
    }

    main.home div.logo-animation {
        font-size: clamp(2rem, 12vw, 10rem);
        top: calc(40vh - var(--header-height));
    }

    main.home {
        /* gap: 2rem; */
    }

    /* --- Director & Overviews --- */
    .director-list ul {
        column-count: 1;
    }

    .block.overview {
        column-count: 1;
    }

    button.slideshow.navigation{
        display: none;
    }

    /* --- Forms & Components --- */
    button,
    .button,
    .tag {
        font-size: 0.875rem;
    }

    #sib-container .form__entry.entry_block {
        grid-template-columns: 1fr;
    }

    /* --- Accessibility --- */
    main.accessibility,
    main.accessibility p {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    /* --- Lightbox Gallery --- */
    .lg-img-wrap {
        padding: 0 1rem 1rem;
    }
    .lg-components {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: .5rem;
        position: inherit;
        align-items: center;
    }
    .lg-sub-html, .lg-counter {
        padding: 0;
        position: initial;
        font-size: 0.75rem;
    }

    .work-info-container {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .lg-prev, .lg-next{
        display: none;
    }

    /* --- Block Components --- */
    .block.logos {
        > .logos > * {
            flex: 0 0 100%;
        }

        .logo img {
            object-position: left;
        } 
    }

    

    .block.image figure.small,
    .block.image figure.medium {
        width: 100%;
    }


    article .column {
    display: contents;
    }

    article .column > * {
        order: 2;
    }

    article .column :is(
        section.event-info,
        section.article-info,
        div.block.image
        ) {  
        order: 1;
    }

    figcaption {
        font-size: .75rem;
        padding: .75rem var(--main-padding) 0;
    }

    .block.image figure, li.news-article.featured figure, .director-image figure {
        margin-left: calc(var(--main-padding)*-1);
        width: calc(100% + calc(var(--main-padding) * 2));
        max-width: unset;
        aspect-ratio: unset;
        max-height: unset;
    }

    .block.image img,
    .director-section img {
        max-height: unset;
    }
    
    nav.main-menu button {
        flex-direction: row-reverse;
    }
    
    footer {
        display: block;
        position: relative;
    }
    
    nav.main-menu {
        position: initial;
    }
    
    ul.news-list li.featured a, a.overview.exhibition {
        display: flex;
        flex-direction: column-reverse;
    }
    
    a.article.overview img {
        aspect-ratio: 5/4;
    }
    
    a.article.overview.portrait img {
        aspect-ratio: 4/5;
    }
    
    li.news-article.featured figure {
        grid-row: 2;
        /* max-height: 50vh; */
    }
    
    ul.news-list .featured img {
        width: 100%;
    }
    
    aside.sticky.events.navigation {
        flex-direction: column-reverse;
        display: flex;
        gap: 1rem;
    }
    
    nav.view-navigation {
        position: initial;
    }
    
    nav.month.navigation {
        justify-content: flex-start;
    }
    
    ul:is(.events-list, .publication-list) {
        grid-template-columns: [start] 1fr 1fr [end];
    }

    .related h3.exhibition-title.h1 {
        font-size: 1.25rem;
    }
    
    footer .wrapper {
        /* display: grid !important; */
        /* grid-template-columns: [start] 1fr 1fr [end]; */
        /* gap: 1rem; */
        align-items: end;
    }
    
    section.event-info h2.date-display {
        padding: 0;
    }
    
    .event-info :is(h2,h3,h4) {
        /* margin-top: 0.5rem; */
    }
    
    section.event-info {padding-bottom: 0;}

    main.works-in-kassel .works-description {
        column-count: 1;
    }

    /* Publication Slideshow - Mobile Specific */
    .slideshow-nav {
        width: 32px;
        height: 32px;
        font-size: 1.25rem;
    }
    
    .slideshow-counter {
        bottom: 10px;
        right: 10px;
        font-size: 0.75rem;
        padding: 3px 8px;
    }
    
    /* Ensure the product images and description have proper spacing */
    .product-images,
    .product-description {
        /* margin-bottom: 1.5rem; */
    }

    /* Product Images - Convert to Slideshow on Mobile */
    .product-images-container {
        position: relative;
        min-height: 250px; /* Minimum height to prevent layout shift */
    }
    
    .product-images-container.slideshow-initialized {
        /* Extra styles for initialized slideshow */
    }
    
    .product-image-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
        /* Remove fade effect */
        opacity: 1;
        transition: none;
    }
    
    .product-image-item[data-slide="1"] {
        display: block;
    }
    
    /* Show mobile slideshow controls */
    .mobile-slideshow-controls {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Allow clicking through to the image */
        z-index: 5;
    }
    
    /* Dot pagination */
    .slideshow-pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        z-index: 10;
        pointer-events: auto;
    }
    
    .slideshow-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    
    .slideshow-dot.active {
        background: white;
    }
    
    /* Show mobile slideshow controls */
    .mobile-slideshow-controls {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; /* Allow clicking through to the image */
        z-index: 5;
    }
    
    .slideshow-nav {
        pointer-events: auto; /* Make buttons clickable */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.2);
        color: white;
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10; /* Ensure buttons are above images */
    }
    
    .slideshow-nav:hover {
        background: rgba(0, 0, 0, 0.5);
    }
    
    .slideshow-nav.prev {
        left: 10px;
    }
    
    .slideshow-nav.next {
        right: 10px;
    }
    
    .slideshow-counter {
        pointer-events: auto; /* Make counter clickable */
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 3px 8px;
        border-radius: 15px;
        font-size: 0.75rem;
        z-index: 10; /* Ensure counter is above images */
    }

    /* Product Images - Mobile Swiper */
    .product-images-desktop {
        display: none;
    }
    
    .product-images-mobile {
        display: block;
        margin-left: calc(var(--main-padding) * -1);
        width: calc(100% + var(--main-padding) * 2);
    }
    
    .publication-swiper {
        /* width: 100%; */
        --swiper-theme-color: var(--black);
    }
    
    /* Ensure swiper slides take full width */
    .publication-swiper swiper-slide {
        width: 100% !important;
    }
    
    /* Controls below the slideshow */
    .swiper-controls {
        padding: 1rem var(--main-padding);
    }
    
    .swiper-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    
    /* Use consistent slideshow navigation styles */
    .swiper-button-prev.slideshow.navigation,
    .swiper-button-next.slideshow.navigation {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0.75rem;
        background: light-dark(var(--tiny-grey), var(--dark-grey));
        color: light-dark(var(--black), var(--white));
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .swiper-button-prev.slideshow.navigation svg,
    .swiper-button-next.slideshow.navigation svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    /* Captions below navigation */
    .swiper-caption {
        font-size: 0.75rem;
        color: light-dark(var(--dark-grey), var(--line-grey));
        padding-top: 0.5rem;
    }
    swiper-container::part(container) {
        overflow: visible;
    }
    /* Product Images - Mobile Swiper with custom classes */
    .product-images-desktop {
        display: none;
    }
    
    .product-images-mobile {
        display: block;
        margin-left: calc(var(--main-padding) * -1);
        width: calc(100% + var(--main-padding) * 2);
        overflow: hidden;
    }
    
    /* Controls below the slideshow with custom classes */
    .publication-controls {
        padding: 1rem var(--main-padding);
    }
    
    .publication-navigation {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.75rem;
    }
    
    /* Use the existing slideshow navigation styles for buttons */
    .publication-prev-btn.slideshow.navigation,
    .publication-next-btn.slideshow.navigation {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0.75rem;
        background: light-dark(var(--tiny-grey), var(--dark-grey));
        color: light-dark(var(--black), var(--white));
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    
    .publication-prev-btn.slideshow.navigation svg,
    .publication-next-btn.slideshow.navigation svg {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    /* Custom pagination */
    .publication-pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        flex: 1;
        margin: 0 1rem;
    }
    
    .publication-bullet {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: light-dark(var(--line-grey), var(--mid-grey));
        opacity: 0.5;
        display: inline-block;
        cursor: pointer;
    }
    
    .publication-bullet-active {
        background: light-dark(var(--black), var(--white));
        opacity: 1;
    }
    
    /* Caption below navigation with custom class */
    .publication-caption {
        font-size: 0.75rem;
        color: light-dark(var(--dark-grey), var(--line-grey));
        padding-top: 0.5rem;
    }
    
    .product-description {
        margin-top: 0;
    }
    
    article.contact-content {
        grid-template-columns: [start] 1fr [end];
    }
    
    a.rent-item figcaption {
        padding: .25rem 0;
    }
    
    main.home a.logo-animation {
        top: calc(49vh);
    }
    
    section.main-banner div.background-image img {
        aspect-ratio: 2.5 / 3;
    }
    
    .block.bigbanner .logo.image {
        width: 100%;
    }
    .block.bigbanner .logo.image.medium {
        width: calc(75% + (2 * var(--main-padding)));
    }
    .block.bigbanner .logo.image.small {
        width: calc(50% + (2 * var(--main-padding)));
    }
    
    nav ul#main-menu ul.nav-group {
        gap: .1rem;
    }
    
    article section.article-info {
        flex-direction: column;
    }
    
    section.director-section {
        display: flex;
        flex-direction: column;
    }
    
    ul.artist-list li {
        max-width: 60vw;
    }
    
    article .block.image {
        display: block;
    }

    .block.bigbanner a {
        width: 100%;
        margin-left: 0;
    }


ul.events-list .event-title {
    font-size: 1.3rem;
    hyphens: auto;
}

ul.institutions-list {
    font-size: .75rem;
}

.exhibition-info h4 {
    padding-top: .25rem;
    font-size: 1rem;
}

.lg-outer .lg-inner {
    bottom: 6vh;
}

ul.artist-list, .artists .letter {
    font-size: .85rem;
}

article.documenta-content {
    gap: 4rem 0;
}

.hide-small {
    display: none;
}

.hide-large {
    display: block;
}

a.related-link.button.secondary {
    font-size: 0.75rem;
    height: 34px;
}

swiper-container.related-events swiper-slide {
    width: 66%;
}

.block.bigbanner a {
    padding: 0;
}

nav ul#main-menu ul.nav-group {
    font-size: 1.75rem;
}

.related h3.article-title {
    font-size: 1.125rem;
}


swiper-container:not(.filter, .artists) {
    margin-left: 0;
    width: 100%;
    padding: 0;
}

article .related {
    padding: 0;
}

body {
    width: 100vw;
    overflow-x: hidden;
}

footer address {
    /* font-size: .75rem; */
    width: calc(200% - var(--main-padding));
}

footer section.main-footer section.bottom-section {
    display: block;
}

ul.social-media {
    gap: .5rem;
}

footer section.contact {/* grid-column: start / end; */}

.swiper.filter swiper-slide:last-child {
    width: calc(100% + 50vw);
}

.menu-overlay {
    display: none;
}

section.newsletter {
    padding-bottom: var(--main-padding);
}

swiper-container#filter {
    width: calc(100% + var(--main-padding) * 2);
    margin-left: calc(var(--main-padding) * -1);
    padding: 0 var(--main-padding);
    overflow: hidden;
}

nav.filter {
    display: block;
    width: 100%;
}


ul#main-menu section.accessibility nav.accessibility-nav {
    display: block;
}

section.work-info {
    text-align: center;
}

nav.main-menu ul.language-switcher {
    position: absolute;
    left: 1rem;
    top: 0.85rem;
    display: none;
}

nav.main-menu button[aria-expanded="true"] + ul.language-switcher {
    display: flex;
}


section.notification-bar ul.accessibility-menu {
    font-size: .875rem;
  }

section.notification-bar ul.accessibility-menu svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: -.25rem;
  }

  
  ul.external-downloads-list figure.thumbnail img {
      aspect-ratio: unset;
      max-height: 30svh;
    }

    article.documenta-content .sticky.navigation {
        padding: 1rem 0;
    }
    article.documenta-content .sticky.navigation ul.toggle-navigation {
        padding: 0 1rem;
        border-radius: 0;
        background-color: light-dark(var(--tiny-grey, #F5F5F5), var(--dark-grey));
    }

    p.press-link {
        margin-top: 1rem;
    }
    main.home .related-title {
    font-size: 1.8rem;
    }
}