:root {
    --theim-black: #1A1A18;
    --theim-red: #FF6978;
    --theim-grey: #494949;
    --card-radius: 16px;
    --card-h: clamp(380px, 70vh, 820px);
    --card-ratio: 4 / 5;
    --card-gap: clamp(16px, 2.2vw, 32px);
    --header-h: 88px;
}

/* Page basics ------------------------------------------------------ */
html, body {
    min-height: 100%;
}

body {
    overflow-x: hidden;
}

    body#work-page:not(.vertical-ready) {
        overflow-y: auto;
    }

    body.scroll-locked {
        overflow: hidden;
    }

.work-root {
    position: relative;
    overflow: visible;
}

/* Intro ---------------------------------------------------------------- */
.work-section.intro {
    height: 0;
}

.intro-sticky {
    position: relative;
    height: 0;
    z-index: 10;
}

.intro-fixed {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
}

.intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
}

/* Panel ist Bezugspunkt für absolute Positionierung */
#work-start {
    position: relative;
}

#work-start.center-panel {
    transform: none;
}

/* Panel als Bezug für absolute Position */
#work-start {
    position: relative;
}

/* Repeat unten links, scrollt mit, eigene Größe + Hover */
#workIntroReplayBtn {
    position: absolute;
    left: 55px;
    bottom: 42px;
    width: 80px;
    height: 80px;
    place-items: center;
    transform: none; /* falls vorher gesetzt */
    transition: transform .2s ease;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    appearance: none;
    display: inline-block;
    line-height: 0; /* keine Extra-Höhe */
    cursor: pointer;
}

    #workIntroReplayBtn:hover {
        transform: scale(1.1);
    }

    #workIntroReplayBtn img {
        width: 100%;
        height: auto;
        display: block;
    }

/* Horizontal ---------------------------------------------------------- */
#work-horizontal {
    position: relative;
    z-index: 1;
}

.hpin {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.htrack {
    display: flex;
    align-items: center; /* vertical centering of cards */
    gap: var(--card-gap);
    padding: 0;
    will-change: transform;
}

/* cards on the track */
.htrack > .wk-card {
    flex: 0 0 auto;

    aspect-ratio: var(--card-ratio);
    max-width: 92vw;
    display: block;
}

/* start/outro panels take full viewport width */
.htrack > .center-panel {
    flex: 0 0 100vw;
    min-width: 100vw;
}

.center-panel {
    min-height: calc(100svh - var(--header-h, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: clamp(16px, 4vw, 64px);
    transform: translateY(-2%); /* globaler Nudge */
    padding-block: 4rem;
}

.center-panel .flow {
    max-width: clamp(320px, 90vw, 720px);
    padding: 0 1rem;
}
/* Default: alles frei (nach dem Unlock darf vertikal wieder durch) */
#work-horizontal .htrack {
    touch-action: auto;
}

/* Gallery Cards ------------------------------------------------------ */
.wk-card.wk-covercard {
    --pad-x: clamp(22px, 2.3vw, 38px);
    --pad-b: clamp(22px, 2.3vw, 38px);
    --pad-t: clamp(90px, 14vh, 140px);
    --rad: 16px;
    --media-h: 60%;
    position: relative;
    display: block;
    text-decoration: none;
    color: var(--theim-black);
    background: #fff;
    border-radius: var(--rad);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.wk-card {
    height: var(--card-h);
    aspect-ratio: var(--card-ratio);
    display: block;
    max-width: 92vw;
}

.wk-card.wk-covercard:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--theim-red, #ff6978);
}

.wk-card__content {
    position: relative;
    z-index: 2;
    padding-inline: var(--pad-x);
    padding-top: 1.8rem;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: normal;
    word-break: normal;
}

.wk-card__media-wrap {
    position: absolute;
    z-index: 1;
    left: var(--pad-x);
    right: var(--pad-x);
    bottom: var(--pad-b);
    height: var(--media-h);
    border-radius: 8px; /* inner preview radius */
    overflow: hidden;
    transition: left .35s ease, right .35s ease, bottom .35s ease, height .35s ease, border-radius .35s ease, z-index 0s linear .35s;
}

.wk-card__media {
    width: 100%;
    height: 100%;
    background: #111;
    margin: 0;
}

.wk-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform-origin: bottom center;
    transition: transform .35s ease;
}

/* Nur Geräte mit echter Hover- und feiner Zeigegenauigkeit bekommen den Effekt */
@media (any-hover: hover) and (pointer: fine) {
    .wk-card.wk-covercard:is(:hover, :focus-visible) .wk-card__media-wrap {
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        border-radius: inherit;
        z-index: 3;
        transition: left .35s ease, right .35s ease, bottom .35s ease, height .35s ease, border-radius .35s ease, z-index 0s linear 0s;
    }

    .wk-card.wk-covercard:is(:hover, :focus-visible) .wk-card__media img {
        transform: scale(1.02);
    }
}

/* Lokaler Guard nur während der Gallery-Phase auf Mobile */
.hpin.is-guard {
    position: sticky;
    top: 0;
    height: 100dvh; /* oder 100svh, d* ist iOS-robuster */
    overflow: hidden;
    overscroll-behavior: contain;
}

/* Während Guard: Track darf nativ horizontal scrollen */
    .hpin.is-guard .htrack {
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }


/* Buttons (outro) --------------------------------------------------------------------------------------- */
.btns {
    display: flex;
    justify-content: left;
    gap: 1rem;
    margin-top: 3rem;
}

.btn-link {
    padding: 0.55rem 1.3rem 0.6rem 1.3rem;
    background: transparent;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    transition: background .2s ease;
    text-decoration: none;
}

.btn-link:hover {
    background: #fff;
    color: #000;
}

#work-outro .swipe-hint--below-btns {
    position: static; /* nicht absolute */
    left: auto;
    bottom: auto;
    top: auto;
    display: block;
    inline-size: fit-content; /* Breite = Inhalt */
    margin: clamp(12px,2vh,28px) auto 0; /* auto zentriert horizontal */
    transform: translateY(var(--hint-nudge-y, 2rem));
    padding: .4rem .8rem; /* kompakt, kein riesiges Padding */
    text-align: center;
    white-space: nowrap;
    opacity: 0; /* default unsichtbar */
    visibility: hidden;
    pointer-events: none;
    animation: fade-in-out 1.2s ease-in-out infinite; /* kannst du übernehmen */
}

/* Nur auf Touch-Geräten zeigen */
@media (hover: none) and (pointer: coarse) {
    #work-outro .swipe-hint--below-btns {
        opacity: 1;
        visibility: visible;
    }
}

/* Optional: minimal näher an die Buttons „nudgen“, ohne Layout zu verschieben */
#work-outro .swipe-hint--below-btns.is-tight {
    transform: translateY(clamp(-10px, -1.6svh, -4px));
}

/* Parallax -------------------------------------------------------------------------- */
.work-section.parallax {
    position: relative;
    min-height: 140vh;
    overflow: clip;
    --para-offset: min(30vw, 500px);
}

.para-copy {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 12vh 0;
    text-align: center;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .intro-video, .wk-card__media-wrap, .wk-card__media img {
        transition: none !important;
    }
}

.work-section.parallax .para-cards {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    visibility: hidden;
}

.work-section.parallax .para-cards .para-card {
    pointer-events: auto;
}

.is-parallax-ready .work-section.parallax .para-cards {
    visibility: visible;
}

.work-section.parallax .para-card {
    position: absolute;
    aspect-ratio: var(--card-ratio);
    border-radius: 12px;
    background: #fff;
    color: var(--theim-black, #1A1A18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translate3d(0,0,0);
}

.work-section.parallax .para-card.left {
    left: var(--para-offset);
}

.work-section.parallax .para-card.right {
    right: var(--para-offset);
}

.work-section.parallax .pc-head {
    padding: clamp(18px, 2vw, 24px);
    z-index: 1;
}

.work-section.parallax .pc-head h2 {
    font-size: clamp(1.3rem, 2.2vw, 2rem);
    line-height: 1.2;
    margin: 0;
}

.work-section.parallax .pc-media {
    margin: clamp(12px, 1.4vw, 18px);
    margin-top: auto;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
    aspect-ratio: 16 / 12;
}

.work-section.parallax .pc-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-section.parallax .para-layer,
.work-section.parallax .para-layer img {
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.work-section.parallax .para-layer img {
    transform: translateZ(0) scale(1.002);
}

#work-parallax {
    background: var(--theim-black);
}

#work-parallax .para-layer.back {
    z-index: 1;
}

#work-parallax .para-layer.mid {
    z-index: 2;
}

#work-parallax .para-layer.front {
    z-index: 3;
}

#work-parallax .para-layer {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    inset: -12% -12% -12% -12%;
}

#work-parallax .para-layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.003);
}

body#work-page footer {
    background: var(--theim-black);
}

html.load-lock,
body.load-lock {
    overflow: hidden !important;
}

/* Breakpoint 0: riesen Desktops */
@media (max-width: 2000px) {
    .work-section.parallax {
        --para-offset: min(20vw, 250px);
    }
}
/* Breakpoint 0: riesen Desktops */
@media (max-width: 1600px) {
    :root {
        --card-h: clamp(320px, 60vh, 740px);
    }
    .work-section.parallax {
        --para-offset: min(18vw, 200px);
    }
}

/* Breakpoint 1: grosse Desktops */
@media (max-width: 1400px) {
    :root {
        --card-h: clamp(260px, 58vh, 680px);
    }
    .work-section.parallax {
        --para-offset: min(14vw, 160px);
    }
}

/* Breakpoint 2: kleinere Desktops / große Tablets (≤1200px) */
@media (max-width: 1200px) {
    :root {
        --card-h: clamp(240px, 55vh, 660px);
    }

    .work-section.parallax {
        --para-offset: min(10vw, 120px);
    }

    #workIntroReplayBtn {
        width: 70px;
        height: 70px;
        bottom: 36px;
        left: 45px;
    }
}

/* Breakpoint 3: Tablets quer (≤992px) */
@media (max-width: 992px) {
    :root {
        --card-h: clamp(240px, 50svh, 640px);
    }
    .wk-card__content {
        padding-top: 2rem;
    }
    #workIntroReplayBtn {
        width: 60px;
        height: 60px;
        bottom: 32px;
    }
}

/* Breakpoint 4: Tablets hoch / große Smartphones (≤768px) */
@media (max-width: 768px) {
    .center-panel .flow {
        max-width: 620px;
        padding: 0 2rem;
    }

    :root {
        --card-h: clamp(200px, 45svh, 600px);
    }
    #workIntroReplayBtn {
        width: 50px;
        height: 50px;
        bottom: 68px;
        left: 40px;
    }
    .hpin {
        height: auto;
    }

    .htrack {
        overflow-x: auto;
        display: flex;
        align-items: center;
        gap: var(--card-gap);
        padding-block: 2rem;
        /* Snap: eine Kachel immer mittig im Viewport */
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--snap-pad, 0px); /* wird per JS gesetzt */
        -webkit-overflow-scrolling: touch;
    }

    /* Alle „Slides“ im Track mittig einrasten */
    .htrack > .wk-card,
    .htrack > .center-panel {
        scroll-snap-align: center;
        scroll-snap-stop: always; /* nicht überspringen */
    }

    .wk-card__content {
        padding-top: 1rem;
    }

    #work-parallax {
        min-height: auto;
        overflow: visible;
        padding-block: clamp(24px, 6vh, 48px);
    }

    /* Text normal blockig, kein Vollbild */
    #work-parallax .para-copy {
        min-height: 0;
        padding: clamp(46px, 10vh, 82px) 0 clamp(16px, 4vh, 32px);
    }

    /* Parallax-Layer ausblenden */
    #work-parallax .para-layer {
        display: none !important;
    }

    /* Karten-Wrapper von absolute → normaler Flow */
    #work-parallax .para-cards {
        position: relative;
        inset: auto;
        visibility: visible; /* override der Hidden-Variante */
        pointer-events: auto;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: clamp(16px, 3vh, 28px);
    }

    /* Karten selbst: relative platzieren, Rotation per CSS */
    #work-parallax .para-card {
        position: relative;
        transform-origin: 50% 50%;
    }

    /* Winkel + leichtes horizontales Auspendeln */
    #work-parallax .para-card.left {
        transform: rotate(-8deg) translateX(6%);
    }

    #work-parallax .para-card.right {
        transform: rotate(10deg) translateX(-6%);
        margin-top: clamp(10px, 2.2vh, 24px); /* vertikaler Versatz zur linken */
    }

    /* Option: Hover-Transitions auf Mobile entschärfen */
    .wk-card__media-wrap,
    .wk-card__media img {
        transition: none !important;
    }
    .work-section.parallax {
        overflow: visible;
    }
    .work-section.parallax,
    .work-section.horiz,
    .work-section.intro {
        overscroll-behavior-y: auto !important;
    }
}

/* Breakpoint 5: Smartphones (≤576px) */
@media (max-width: 576px) {
    .center-panel .flow {
        max-width: 500px;
    }
    #workIntroReplayBtn {
        bottom: 53px;
        left: 25px;
        width: 44px;
        height: 44px;
    }
    .btns {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
    }
    .btns .btn-link {
        width: 100%;
        text-align: center; /* hübscher Look */
    }
    #work-parallax .para-card.left,
    #work-parallax .para-card.right {
        left: auto;
        right: auto;
    }

    /* weniger seitlicher Versatz */
    #work-parallax .para-card.left {
        transform: rotate(-8deg) translateX(8%);
    }

    #work-parallax .para-card.right {
        transform: rotate(10deg) translateX(-8%);
    }
}

/* Breakpoint 6: sehr schmale Smartphones */
@media (max-width: 420px) {
    .center-panel .flow {
        max-width: 320px;
        padding: 0;
    }

    :root {
        --card-h: clamp(180px, 48svh, 500px);
    }
}