.site-header {
    position: fixed;

    top: var(--ui-offset);
    left: var(--ui-offset);
    right: var(--ui-offset);
}

.mobile-title-break {
    display: none;
}

/* ---------- HOME HERO ---------- */

.hero {
    position: relative;
    height: 100vh;
}

.nav-current{
    font-weight:400;
    cursor:default;
}

#network {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    opacity: 1;
    transition: opacity .5s;
}

#network text {
    font-family: Inter;
    letter-spacing: var(--ui-spacing);

    fill: #111;
    stroke: none;
}

#network text:hover {
    text-decoration: none;
}

#network .network-label.is-project:hover text {
    text-decoration: underline;
}

#network .network-label.level-0 text {
    font-size: 32px;
    font-weight: 500;
}

#network .network-label.level-1 text {
    font-size: 18px;
    font-weight: 500;
}

#network .network-label.level-2 text {
    font-size: 18px;
    font-weight: 300;
}

#network .network-pill {
    fill:none;
}

#network .network-label.is-project:hover .network-pill {
    fill: none;
}



.view-toggle {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    width: max-content;
    height: auto;

    z-index: 100;

    user-select: none;
    gap: 4px;

    font-family: var(--ui-font);
    font-size: var(--ui-size);
    font-weight: 200;
    letter-spacing: var(--ui-spacing);
}


.view {
    color: #111;
    text-decoration: none;
    font-weight: 200;
}

.indicator {
    position: absolute;

    left: -16px;
    top: 0;

    transition: transform .35s ease;
}

.view-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;

    width: max-content;
    height: auto;

    z-index: 100;

    user-select: none;

    font-family: var(--ui-font);
    font-size: var(--ui-size);
    font-weight: 200;
    letter-spacing: var(--ui-spacing);

    transition: opacity .25s ease;
}

.view-toggle.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.view{
    color:#111;
    text-decoration:none;
    font-weight:200;
}

.view.active{
    font-weight:400;
    text-decoration:none;
    pointer-events:none;
    cursor:default;
}

.view:hover{
    text-decoration:underline;
}

.view.active:hover{
    text-decoration:none;
}

.indicator{

    position:absolute;

    left:-16px;
    top:0;

    transition:transform .35s ease;

}

.dot{

    display:block;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#111;

    animation:pulse 2s infinite;

}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.25);
    }
}

/* ---------- GRID VIEW ---------- */

#grid {
    --grid-start: clamp(200px, 25vh, 320px);
    --grid-pad-x: clamp(100px, 8vw, 160px);
    --grid-pad-bottom: clamp(40px, 8vh, 90px);

    --row-gap: clamp(110px, 16vh, 220px);
    --media-max-height: clamp(190px, 22vw, 440px);

    position: absolute;
    inset: 0;

    padding:
        0
        var(--grid-pad-x)
        var(--grid-pad-bottom)
        var(--grid-pad-x);

    opacity: 0;
    pointer-events: none;

    overflow: visible;
    overscroll-behavior-y: auto;

    transition: opacity .5s;
}

.hero.is-network {
    height: 100vh;
    overflow: hidden;
}

.hero.is-grid {
    height: auto;
    min-height: 100vh;
    overflow: visible;
}


/* ---------- Active Home View States ---------- */

.hero.is-network #network {
    opacity: 1;
    pointer-events: auto;
}

.hero.is-network #grid {
    opacity: 0;
    pointer-events: none;

    position: absolute;
    inset: 0;
}

.hero.is-grid #network {
    opacity: 0;
    pointer-events: none;
}

.hero.is-grid #grid {
    opacity: 1;
    pointer-events: auto;

    position: relative;
    inset: auto;

    min-height: 100vh;
}

/* verhindert Grid-Flash, wenn zuletzt Network aktiv war */
html.home-initial-network .hero {
    height: 100vh;
    overflow: hidden;
}

html.home-initial-network .hero #network {
    opacity: 1;
    pointer-events: auto;
}

html.home-initial-network .hero #grid {
    opacity: 0;
    pointer-events: none;

    position: absolute;
    inset: 0;
}

html.home-initial-network .hero + .additional-work {
    margin-top: 0;
}

/* Toggle kurz verstecken, bis JS den Punkt auf Network gesetzt hat */
html.home-initial-network .view-toggle {
    opacity: 0;
}

.work-grid {
    width: 100%;
    max-width: none;

    margin-inline: auto;

    padding-top: var(--grid-start);
    padding-bottom: clamp(320px, 42vh, 520px);

    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        minmax(260px, .8fr)
        minmax(180px, 1fr)
        minmax(180px, 1fr);

    column-gap: clamp(40px, 5vw, 90px);
    row-gap: var(--row-gap);

    align-items: start;
}

.media-item {
    display: flex;

    align-items: flex-start;
    justify-content: center;

    width: 100%;

    color: inherit;
    text-decoration: none;
}

.media-item img,
.media-item video {
    max-width: 100%;
    max-height: var(--media-max-height);

    width: auto;
    height: auto;

    object-fit: contain;

    display: block;
}

.project-list {
    position: sticky;

    top: var(--grid-start);

    container-type: inline-size;

    display: flex;
    flex-direction: column;
    gap: 4px;

    align-self: start;
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 300;
}

.project-list-item {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    column-gap: 32px;

    color: #aaa;
    text-decoration: none;

    transition: color .2s;
}

.project-list-item.active {
    color: #111;
    font-weight: 300;
}

.project-indicator {
    position: absolute;

    left: -16px;
    top: -2px;

    transition: transform .35s ease;

    pointer-events: none;
}

.project-list-title {
    line-height: 1.25;
}

.project-list-year {
    white-space: nowrap;
}

.project-list-item:hover .project-list-title {
    text-decoration: underline;
}

/* ---------- NETWORK HOVER PREVIEW ---------- */


#network svg {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.network-hover-preview {
    position: absolute;
    overflow: hidden;

    left: 50%;
    top: 50%;

    width: min(62vw, 1040px);
    height: min(68vh, 720px);

    transform: translate(-50%, -50%) scale(.98);

    pointer-events: none;

    opacity: 0;

    z-index: 1;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.network-hover-preview.is-visible {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.25);
}

.network-hover-preview img,
.network-hover-preview video {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;

    transform: scale(1.006);
    transform-origin: center;
}

/* ---------- ADDITIONAL WORK ---------- */

.additional-work {
    padding:
        clamp(40px, 7vh, 90px)
        /*clamp(28px, 4vw, 48px)*/
        clamp(100px, 8vw, 160px)
        clamp(80px, 12vh, 140px);

    position: relative;
    z-index: 3;

    font-family: "Inter", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 0;
}

:root {
    --work-heading-size: clamp(36px, 2.3vw, 52px);
}

.additional-work h2,
.project-list::before {
    font-family: "Inter", Arial, sans-serif;
    font-size: var(--work-heading-size);
    line-height: .95;
    font-weight: 300;
    letter-spacing: 0;
    color: #111;
}

.project-list::before {
    content: "Selected Work";

    display: block;
    width: max-content;
    max-width: calc(100% + 18px);

    margin-left: -18px;
    margin-bottom: 24px;

    white-space: nowrap;
}

.additional-work h2 {
   /* font-size: clamp(36px, 3vw, 52px);*/
    margin: 0 0 24px 20px;
}

.project-list::before {
    content: "Selected Work";

    display: block;
    width: max-content;
    max-width: calc(100% + 18px);

    margin-left: -18px;
    margin-bottom: 24px;

    white-space: nowrap;
    text-align: left;

  /*  font-size: min(
        clamp(36px, 3vw, 52px),
        15.5cqi
    );*/
}

.additional-work h2 {
    margin: 0 0 24px 20px;
}

.accordion {
    border-top: 1px solid #111;
}

.accordion-item {
    border-bottom: 1px solid #111;
    scroll-margin-top: 76px;
}

.accordion-trigger {
    width: 100%;

    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
    column-gap: 40px;

    padding: 24px 20px;

    border: 0;
    background: transparent;

    font-family: "Inter", Arial, sans-serif;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 300;

    text-align: left;
    color: #111;

    cursor: pointer;
}

.accordion-trigger span:first-child {
    justify-self: start;
}

.accordion-trigger span:nth-child(2) {
    justify-self: center;
    text-align: center;
}

.accordion-trigger span:last-child {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .accordion-trigger:hover span {
        text-decoration: underline;
    }
}

.accordion-panel {
    display: none;

    padding:
        12px
        20px
        clamp(20px, 4vh, 58px)
        20px;
}

.accordion-item.is-open .accordion-panel {
    display: grid;
    grid-template-columns: minmax(340px, .85fr) minmax(0, 2.3fr);
    column-gap: clamp(120px, 12vw, 220px);
    align-items: stretch;
}

.accordion-copy {
    max-width: none;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: visible;
}

.accordion-text,
.accordion-link {
    max-width: 560px;
}

.accordion-text {
    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.35;

    margin-bottom: 0.5em;
}

.accordion-text p {
    margin-bottom: 0.5em;
}

.accordion-text p:last-child {
    margin-bottom: 0;
}

.accordion-credits {
    width: clamp(520px, 34vw, 720px);
    margin-top: 0;
    margin-bottom: 0;

    font-family: var(--ui-font);
    font-size: 11px;
    font-weight: 200;
    letter-spacing: var(--ui-spacing);
    line-height: 1.35;
}

.accordion-link {
    display: block;

    font-family: "Inter", Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.35;
    font-weight: 300;
    letter-spacing: 0;

    text-decoration: none;

}

.accordion-full-discipline {
    font-family: var(--ui-font);
    font-size: 11px;
    font-weight: 200;
    letter-spacing: var(--ui-spacing);
    line-height: 1.35;
    width: clamp(520px, 34vw, 720px);
    margin-top: 2.5em;
    margin-bottom: 1em;
}

.accordion-link:hover {
    text-decoration: underline;
}

.accordion-media {
    --thumb-height: clamp(90px, 7vw, 140px);

    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    column-gap: clamp(16px, 2vw, 32px);
    row-gap: 0;

    align-items: start;
}

.accordion-media-item {
    height: var(--thumb-height);

    padding: 0;
    border: 0;
    background: transparent;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    cursor: pointer;
}

.accordion-media img,
.accordion-media video {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
    object-position: top center;

    display: block;
}

.hero.is-grid + .additional-work {
    margin-top: clamp(-260px, -24vh, -160px);
}

.hero.is-network + .additional-work {
    margin-top: 0;
}

/* ---------- LIGHTBOX ---------- */

.lightbox {
    position: fixed;
    inset: 0;

    display: none;

    padding:
        clamp(56px, 8vh, 90px)
        clamp(28px, 4vw, 64px)
        clamp(32px, 5vh, 56px);

    background: rgba(252, 252, 252, .94);

    z-index: 1000;
}


.lightbox.is-visible {
    display: flex;

    align-items: center;
    justify-content: center;
}


.lightbox-content {
     width: min(72vw, 1120px);
    max-width: calc(100vw - 240px);
    max-height: calc(100vh - 150px);

    display: flex;
    justify-content: center;

    position: relative;
    z-index: 1001;
}

.lightbox-figure {
    margin: 0;

    max-width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-figure img,
.lightbox-figure video {
    max-width: 100%;
    max-height: calc(100vh - 230px);

    width: auto;
    height: auto;

    display: block;
    object-fit: contain;
}

.lightbox-caption {
    margin-top: 14px;

    font-family: var(--ui-font);
    font-size: 12px;
    font-weight: 200;
    letter-spacing: var(--ui-spacing);
    line-height: 1.35;

    text-align: left;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    border: 0;
    background: transparent;
    position: fixed;

    font-family: var(--ui-font);
    font-size: var(--ui-size);
    font-weight: 200;
    letter-spacing: var(--ui-spacing);

    color: #111;
    text-decoration: none;

    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    cursor: pointer;
    z-index: 1005;
}

.lightbox-close {
    top: 20px;
    right: 20px;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-close-area {
    position: fixed;
    inset: 0;

    padding: 0;
    border: 0;
    background: transparent;

    cursor: default;

    z-index: 999;
}

.lightbox-click-area {
    position: fixed;

    top: clamp(120px, 14vh, 180px);
    bottom: clamp(90px, 12vh, 160px);

    width: 38vw;

    padding: 0;
    border: 0;
    background: transparent;

    z-index: 1003;
}

.lightbox-click-prev {
    left: 0;
    cursor: url("../assets/cursors/arrow-left.svg") 10 24, w-resize;
}

.lightbox-click-next {
    right: 0;
    cursor: url("../assets/cursors/arrow-right.svg") 62 24, e-resize;
}

/* ____ LIGHTBOX MOBIL _____*/

@media (max-width: 900px) {

    .lightbox {
        padding:
            64px
            16px
            64px;

        overflow: hidden;

        background: rgba(252, 252, 252, .94);
    }

    .lightbox.is-visible {
        display: flex;

        align-items: center;
        justify-content: center;
    }

    .lightbox-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100svh - 128px);

        display: flex;
        align-items: center;
        justify-content: center;

        z-index: 1001;
    }

    .lightbox-figure {
        width: 100%;
        max-width: 100%;
        max-height: 100%;

        margin: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .lightbox-figure img,
    .lightbox-figure video {
        width: auto;
        max-width: 100%;

        height: auto;
        max-height: calc(100svh - 168px);

        display: block;

        object-fit: contain;

        box-shadow: none;
    }

    .lightbox-caption {
        width: 100% !important;
        max-width: 100%;

        margin-top: 12px;

        font-family: var(--ui-font);
        font-size: 13px;
        line-height: 1.35;
        font-weight: 200;
        letter-spacing: var(--ui-spacing);

        text-align: left;
    }

    .lightbox-close {
        position: fixed;

        top: 16px;
        right: 16px;

        z-index: 1005;
    }

    .lightbox-prev {
        position: fixed;

        left: 16px;
        bottom: 16px;

        z-index: 1005;
    }

    .lightbox-next {
        position: fixed;

        right: 16px;
        bottom: 16px;

        z-index: 1005;
    }

    .lightbox-click-area {
        display: none;
    }
}

/* ---------- MOBILE HOME ---------- */

.mobile-work {
    display: none;
}

@media (max-width: 800px) {

    .site-header {
        position: absolute;

        top: 16px;
        left: 16px;
        right: 16px;
    }

    .hero,
    .view-toggle {
        display: none;
    }


    /* ---------- Mobile Project List ---------- */

    .mobile-work {
        display: block;

        padding:
            120px
            20px
            120px;

        font-family: "Inter", Arial, sans-serif;
    }

    .mobile-work-card {
        display: block;

        color: #111;
        text-decoration: none;
    }

    .mobile-work-card + .mobile-work-card {
        margin-top: 72px;
    }

    .mobile-work-media {
        width: 100%;

        margin: 10px 0 10px;

        overflow: hidden;
        background: transparent;
    }

    .mobile-work-media img,
    .mobile-work-media video {
        width: 114%;
        max-width: none;
        height: auto;

        margin-left: -7%;

        display: block;

        object-fit: contain;
        object-position: center;
    }

    .mobile-work-meta {
        display: flex;
        justify-content: space-between;

        margin-top: 18px;
        margin-bottom: 12px;

        font-family: var(--ui-font);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 200;
        letter-spacing: var(--ui-spacing);
    }

    .mobile-work-info h2 {
        margin: 0 0 8px;

        font-family: "Inter", Arial, sans-serif;
        font-size: clamp(28px, 7.5vw, 40px);
        line-height: 1.05;
        font-weight: 500;
        letter-spacing: -0.025em;
    }

    .mobile-work-info p {
        margin: 0;

        font-family: var(--ui-font);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 200;
        letter-spacing: var(--ui-spacing);

        color: #111;
    }


    /* ---------- Additional Work Mobile ---------- */

    .additional-work {

        margin-top: 0;

        padding:
            96px
            20px
            0px;

        font-family: "Inter", Arial, sans-serif;
    }


    .hero.is-grid + .additional-work,
    .hero.is-network + .additional-work {
    margin-top: 0;
}

    /* exakt wie .mobile-work-info h2 */
    .additional-work h2,
    .mobile-work::before {
    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(28px, 7.5vw, 40px);
    line-height: 1.05;
    font-weight: 300;
    letter-spacing: -0.025em;
    color: #111;
}

.mobile-work::before {
    content: "Selected Work";

    display: block;

    margin: 0 0 15px;
}

.additional-work h2 {
    margin: 0 0 32px;
}

    .accordion-trigger {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 18px;
    align-items: start;

    width: 100%;

    padding: 22px 0;

    border: 0;
    background: transparent;

    font-family: "Inter", Arial, sans-serif;
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.2;
    font-weight: 300;
    letter-spacing: -0.015em;

    text-align: left;
    color: #111;

    cursor: pointer;
}

.accordion-trigger::after {
    content: "";

    width: 13px;
    height: 13px;

    justify-self: end;
    align-self: start;

    /* vertikale Mitte der ersten Textzeile */
    margin-top: calc((1em - 13px) / 2);
    margin-right: 5px;

    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;

    transform: rotate(45deg);
    transform-origin: center;

    transition: transform 0.2s ease;
}

.accordion-item.is-open .accordion-trigger::after {
    transform: rotate(135deg);
}


    .mobile-title-break {
    display: block;
}

    .accordion-trigger span:nth-child(2) {
        display: none;
    }

    .accordion-trigger span:first-child {
        justify-self: start;
    }

    .accordion-trigger span:last-child {
        justify-self: end;
        text-align: right;
        white-space: nowrap;
    }

    .accordion-panel {
        padding:
            24px
            0px
            24px
            0px;
    }

    .accordion-text,
    .accordion-link {
        max-width: none;

        font-family: "Inter", Arial, sans-serif;
        font-size: 16.5px;
        line-height: 1.35;
        font-weight: 300;
        letter-spacing: 0;
    }

    .accordion-link {
        margin-top: 18px;
    }

    .accordion-full-discipline,
    .accordion-credits {
        width: auto;

        font-family: var(--ui-font);
        font-size: 12px;
        line-height: 1.35;
        font-weight: 200;
        letter-spacing: var(--ui-spacing);
    }

    /* ---------- Accordion Content Mobile Order ---------- */

.accordion-item.is-open .accordion-panel {
    display: flex;
    flex-direction: column;
}

/* löst den Wrapper optisch auf, damit Text, Link, Discipline, Media und Credits sortierbar sind */
.accordion-copy {
    display: contents;
}

.accordion-text {
    order: 1;
}

.accordion-link {
    order: 2;
}

.accordion-full-discipline {
    order: 4;
    margin-bottom: 10px;
    margin-top: 10px;
}

.accordion-media {
    order: 3;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 14px;

    margin:
        38px
        0
        38px;
}

.accordion-credits {
    order: 5;

    margin-top: 0;
}

/* größere mobile Bildvorschauen */
.accordion-media-item {
    width: 100%;
    height: auto;

    display: block;

    padding: 0;
}

.accordion-media img,
.accordion-media video {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;

    display: block;

    object-fit: contain;
    object-position: top center;
}

/* letzte Accordion-Linie mobil entfernen */
.accordion-item:last-child {
    border-bottom: 0;
}


}

/* ---------- ADDITIONAL WORK LARGE SCREENS ---------- */

@media (min-width: 1600px) {

    .accordion-text,
    .accordion-link {
        font-size: 15.5px;
        line-height: 1.35;
    }

}

@media (min-width: 2200px) {

    .accordion-text,
    .accordion-link {
        font-size: 16px;
    }

}

/* ---------- Project List LARGE SCREENS ---------- */

@media (min-width: 1600px) {

    .project-list {
        font-size: 15.5px;
    }

}

@media (min-width: 2200px) {

    .project-list {
        font-size: 16px;
    }

}

/* ---------- network type LARGE SCREENS ---------- */

@media (min-width: 1600px) {

    #network svg {
        transform: scale(1.08);
        transform-origin: center center;
    }

    #network .network-label.level-0 text {
        font-size: 44px;
    }

    #network .network-label.level-1 text,
    #network .network-label.level-2 text {
        font-size: 20px;
    }

    .accordion-trigger {
        font-size: 20px;
    }

}

@media (min-width: 2200px) {

    #network svg {
        transform: scale(1.12);
        transform-origin: center center;
    }

    #network .network-label.level-0 text {
        font-size: 52px;
    }

    #network .network-label.level-1 text,
    #network .network-label.level-2 text {
        font-size: 21px;
    }

    .accordion-trigger {
        font-size: 21px;
    }

}