/* =====================================================

   RESET & DESIGN SYSTEM

===================================================== */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

@font-face {

  font-family: "DM Sans";

  src: url("fonts/DMSans-VariableFont_opsz,wght.ttf") format("truetype");

  font-style: normal;

  font-weight: 100 1000;

  font-display: swap;

}

body {

  font-optical-sizing: none;

}

:root {

    --bg: #f5f4f2;

    --ink: #111;

    --muted: #777;

    --pink: #e96b9a;

    --content: 1220px;

    --page-pad: 40px;

    --project-info: 320px;

    --project-gap: 120px;

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--bg);

    color: var(--ink);

    font-family: "DM Sans", sans-serif;

    overflow-x: clip;

}

img,

video {

    max-width: 100%;

}

a {

    color: inherit;

    text-decoration: none;

}

button {

    font: inherit;

}

::selection {

    background: var(--pink);

    color: white;

}

/* =====================================================

   TYPOGRAFIE & GEMEINSAME ELEMENTE

===================================================== */

.section-number,

.project-category,

.project-label,

.role span,

.film-counter span,

.ham-eyebrow {

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .13em;

    text-transform: uppercase;

}

.project-number {

    font-size: 12px;

    font-weight: 700;

}

.project-category {

    color: var(--muted);

}

.project-heading > div,

.events-heading > div {

    display: flex;

    align-items: center;

    gap: 20px;

}

.project-heading h3,

.events-heading h3 {

    margin-top: 25px;

    font-size: clamp(58px, 7.2vw, 112px);

    line-height: .88;

    letter-spacing: -.065em;

}

.role {

    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-top: 42px;

}

.role strong {

    font-size: 15px;

    font-weight: 500;

    line-height: 1.6;

}

.project p strong {

    font-weight: 600;

    color: inherit;

}

.project-link,

.film-accounts a {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    width: fit-content;

    padding-bottom: 4px;

    border-bottom: 1px solid currentColor;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;

    transition: color .2s, border-color .2s, gap .2s;

}

.project-link:hover,

.film-accounts a:hover {

    color: var(--pink);

    border-color: var(--pink);

}

.project-link:hover {

    gap: 11px;

}

/* =====================================================

   NAVIGATION

===================================================== */

.scroll-progress {

    position: fixed;

    top: 0;

    left: 0;

    width: 0;

    height: 4px;

    background: var(--pink);

    z-index: 3000;

}

.nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 28px 40px;

    display: flex;

    justify-content: space-between;

    z-index: 100;

    mix-blend-mode: difference;

    color: white;

}

.nav-logo {

    font-size: 18px;

    font-weight: 700;

}

.nav-links {

    display: flex;

    gap: 30px;

}

.nav-links a {

    position: relative;

    font-size: 14px;

}

.nav-links a::after {

    content: "";

    position: absolute;

    bottom: -5px;

    left: 0;

    width: 0;

    height: 1px;

    background: currentColor;

    transition: width .3s ease;

}

.nav-links a:hover::after {

    width: 100%;

}

/* =====================================================

   HERO

===================================================== */

.hero {

    position: relative;
    isolation: isolate;
    min-height: 100svh;

    padding: 130px max(40px, calc((100vw - var(--content)) / 2)) 65px;

    display: flex;

    flex-direction: column;

}

.hero-top {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .12em;

    text-transform: uppercase;

}

.hero-content {

    flex: 1;

    display: grid;

    grid-template-columns: 1.35fr 1fr;

    align-items: center;

    gap: 30px;

    min-height: 0;

}

.hero-title {

    position: relative;

    z-index: 2;

    font-size: clamp(70px, 9vw, 150px);

    line-height: .82;

    letter-spacing: -.07em;

    font-weight: 600;

}

.hero-title > span {

    display: block;

    animation: titleReveal 1.1s cubic-bezier(.16,1,.3,1) both;

}

.hero-title > span:nth-child(2) {

    animation-delay: .12s;

}

/* HERO – WECHSELNDE FORMEN */

.hero-portrait {

    position: absolute;

    left: 62%;

    top: 50%;

    width: clamp(170px, 22vw, 340px);

    aspect-ratio: 3 / 4;

    transform: translate(-50%, -50%);

    z-index: 1;

    pointer-events: none;

}

.hero-portrait-frame {

    position: relative;

    width: 100%;

    height: 100%;

}

.hero-shape {

    position: absolute;

    inset: 0;

    opacity: 0;

    background: #e96b9a;

    transform-origin: center bottom;

    animation: heroFrames 2.5s steps(1, end) infinite;

}

/* Fünf leicht unterschiedliche Silhouetten */

.shape-1 {

    clip-path: polygon(

        30% 100%, 16% 75%, 25% 51%,

        35% 42%, 32% 20%, 44% 7%,

        62% 9%, 71% 25%, 66% 45%,

        79% 55%, 87% 100%

    );

    animation-delay: 0s;

}

.shape-2 {

    clip-path: polygon(

        19% 100%, 22% 68%, 35% 51%,

        32% 32%, 39% 12%, 57% 7%,

        70% 22%, 69% 43%, 81% 60%,

        78% 100%

    );

    animation-delay: -.5s;

}

.shape-3 {

    clip-path: polygon(

        13% 100%, 22% 62%, 36% 48%,

        29% 29%, 39% 11%, 56% 13%,

        66% 31%, 65% 48%, 82% 67%,

        91% 100%

    );

    animation-delay: -1s;

}

.shape-4 {

    clip-path: polygon(

        24% 100%, 14% 72%, 30% 54%,

        38% 45%, 35% 24%, 47% 8%,

        63% 13%, 72% 30%, 65% 47%,

        86% 67%, 81% 100%

    );

    animation-delay: -1.5s;

}

.shape-5 {

    clip-path: polygon(

        17% 100%, 20% 73%, 32% 55%,

        31% 30%, 43% 9%, 59% 10%,

        70% 27%, 67% 47%, 83% 59%,

        89% 100%

    );

    animation-delay: -2s;

}

@keyframes heroFrames {

    0%, 19.999% {

        opacity: 1;

    }

    20%, 100% {

        opacity: 0;

    }

}

@media (prefers-reduced-motion: reduce) {

    .hero-shape {

        animation: none;

    }

    .shape-1 {

        opacity: 1;

    }

}

.pink-dot {

    display: inline !important;

    color: var(--pink);

}

@keyframes titleReveal {

    from {

        opacity: 0;

        transform: translateY(100%);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

.scroll-hint {

    animation: scrollHint 2s ease-in-out infinite;

}

@keyframes scrollHint {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(5px); }

}

/* =====================================================

   WORK INTRO

===================================================== */

.work-intro {

    width: 100%;

    margin-inline: auto;

    padding: 115px max(40px, calc((100vw - var(--content)) / 2)) 120px;

    background: #ececec;

}

.work-intro h2 {

    margin: 45px 0;

    font-size: clamp(52px, 7vw, 105px);

    line-height: .92;

    letter-spacing: -.06em;

}

.work-intro h2 span {

    color: #e96b9a;

}

.work-intro p {

    max-width: 440px;

    font-size: 17px;

    line-height: 1.5;

        color: var(--ink);

}

/* =====================================================

   PROJEKT-RASTER

===================================================== */

.project {

    position: relative;

    padding: 120px var(--page-pad);

    overflow: clip;

}

.project-inner {

    width: min(100%, var(--content));

    margin-inline: auto;

    min-width: 0;

}

.geco-layout,

.ham-layout,

.film-layout,

.events-layout,

.oog-layout {

    display: grid;

    grid-template-columns: var(--project-info) minmax(0, 1fr);

    column-gap: var(--project-gap);

    align-items: start;

    margin-top: 95px;

    min-width: 0;

}

.geco-info,

.ham-info,

.film-info,

.events-text,

.oog-info {

    grid-column: 1;

    min-width: 0;

    max-width: var(--project-info);

    font-size: 17px;

    line-height: 1.7;

}

.geco-info p,

.ham-info p,

.film-info p,

.events-text p,

.oog-info p {

    font-size: 17px;

    line-height: 1.7;

}

.geco-wall,

.ham-collage,

.film-grid,

.event-banners,

.oog-media {

    grid-column: 2;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    justify-self: stretch;

}

/* =====================================================

   01 — GECO TRIER

===================================================== */

.project-geco {

    background: #111;

    color: white;

    overflow: visible;

}

.project-geco .project-category {

    color: #aaa;

}

.geco-info {

    position: relative;

    top: 18px;

    color: #aaa;

}

.geco-info p + p {

    margin-top: 18px;

}

.geco-info .project-label {

    color: var(--pink);

    margin-bottom: 25px;

}

.geco-info .role strong {

    color: white;

}

.geco-wall {

    display: grid;

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

    gap: 22px;

    align-items: start;

    padding: 20px 20px 45px;

    transform: rotate(-2deg);

    transform-origin: center;

    overflow: visible;

}

.geco-card {

    position: relative;

    aspect-ratio: 4 / 5;

    min-width: 0;

    overflow: visible;

    background: #252525;

    cursor: zoom-in;

    z-index: auto;

    transform: translateY(0);

    transition: transform .4s cubic-bezier(.16,1,.3,1);

}

.geco-card:nth-child(3n + 2) {

    transform: translateY(24px);

}

.geco-card img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

@media (hover: hover) and (pointer: fine) {

    .geco-card:hover {

        transform: scale(1.08);

        z-index: 10;

    }

    .geco-card:nth-child(3n + 2):hover {

        transform: translateY(24px) scale(1.08);

    }

}

/* Gemeinsame Bild-Lightbox */

.geco-dialog {

    position: fixed;

    inset: 0;

    width: 100vw;

    height: 100vh;

    max-width: none;

    max-height: none;

    margin: 0;

    padding: 40px;

    border: none;

    background: rgba(0, 0, 0, .92);

    cursor: zoom-out;

}

.geco-dialog[open] {

    display: flex;

    align-items: center;

    justify-content: center;

}

.geco-dialog::backdrop {

    background: rgba(0, 0, 0, .92);

}

.geco-dialog img {

    display: block;

    width: auto;

    height: auto;

    max-width: 90vw;

    max-height: 85vh;

    object-fit: contain;

    cursor: default;

}

/* =====================================================

   02 — H.A.M.

===================================================== */

.project-ham {

    background: #ececec;

}

.ham-collage {

    position: relative;

    width: 100%;

    aspect-ratio: 1 / 0.88;

    overflow: visible;

}

.ham-logo {

    position: absolute;

    top: -7.5%;

    left: 7.5%;

    width: 45%;

    z-index: 2;

}

.ham-logo img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

}

.ham-trailer {

    position: absolute;

    top: 43%;

    left: 0;

    width: 65%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    z-index: 4;

    cursor: zoom-in;

}

.ham-trailer video {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.ham-poster {

    position: absolute;

    top: 5%;

    right: 0;

    width: 37%;

    z-index: 3;

    cursor: zoom-in;

    transform: rotate(3deg);

    transform-origin: center;

    transition: transform .4s cubic-bezier(.16,1,.3,1);

}

.ham-poster img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

}

@media (hover: hover) and (pointer: fine) {

    .ham-poster:hover {

        transform: rotate(3deg) scale(1.03);

    }

}

/* Trailer-Lightbox */

.ham-trailer-dialog {

    position: fixed;

    inset: 0;

    margin: auto;

    width: min(92vw, 1200px);

    max-width: none;

    max-height: 92vh;

    height: fit-content;

    padding: 0;

    border: none;

    background: transparent;

    overflow: visible;

}

.ham-trailer-dialog::backdrop {

    background: rgba(0, 0, 0, .92);

}

.ham-trailer-dialog video {

    display: block;

    width: 100%;

    max-height: 85vh;

    aspect-ratio: 16 / 9;

    object-fit: contain;

    background: #000;

}

/* =====================================================

   03 — FILMGUFA

===================================================== */

.project-filmgufa {

    background: var(--bg);

}

.film-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 30px;

}

.film-intro {

    max-width: 280px;

    margin-bottom: 8px;

    font-size: 14px;

    line-height: 1.5;

    color: #77736f;

}

.film-info {

    position: sticky;

    top: 120px;

}

.film-accounts {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;

    margin-top: 35px;

}

.film-counter {

    display: flex;

    flex-direction: column;

    gap: 7px;

    margin-top: 55px;

}

.film-counter strong {

    font-size: 58px;

    line-height: 1;

    letter-spacing: -.06em;

    font-weight: 600;

}

.film-counter span {

    color: #777;

}

.film-grid {

    display: grid;

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

    gap: 18px;

    align-items: start;

}

.film-card {

    position: relative;

    aspect-ratio: 9 / 16;

    min-width: 0;

    overflow: hidden;

    background: #222;

    cursor: pointer;

}

.film-thumbnail,

.film-video {

    position: absolute;

    inset: 0;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.film-thumbnail {

    z-index: 1;

    opacity: 1;

    transition: opacity .25s ease;

}

.film-video {

    z-index: 2;

    opacity: 0;

    transition: opacity .25s ease;

}

.film-card:hover .film-video,

.film-card.is-playing .film-video {

    opacity: 1;

}

.film-card:hover .film-thumbnail,

.film-card.is-playing .film-thumbnail {

    opacity: 0;

}

.film-number {

    position: absolute;

    top: 12px;

    right: 12px;

    z-index: 5;

    color: white;

    font-size: 10px;

    font-weight: 700;

    text-shadow: 0 1px 5px rgba(0,0,0,.5);

}

.film-controls {

    position: absolute;

    left: 12px;

    right: 12px;

    bottom: 12px;

    z-index: 8;

    display: flex;

    justify-content: space-between;

    align-items: center;

    pointer-events: none;

}

.film-social,

.film-sound {

    display: grid;

    place-items: center;

    width: 36px;

    height: 36px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(0,0,0,.56);

    cursor: pointer;

    pointer-events: auto;

    backdrop-filter: blur(6px);

    transition: background .2s, transform .2s;

}

.film-social:hover,

.film-sound:hover {

    background: rgba(0,0,0,.74);

    transform: scale(1.07);

}

.film-social img,

.film-sound img {

    display: block;

    width: 19px;

    height: 19px;

    object-fit: contain;

    pointer-events: none;

}

/* =====================================================

   04 — DIE AUSLESE

===================================================== */

.project-events {

    background: #ececec;

    overflow: visible;

}

.events-text {

    position: sticky;

    top: 120px;

}

.event-banners {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 35px;

    overflow: visible;

}

.event-banner {

    position: relative;

    width: 100%;

    aspect-ratio: 2 / 1;

    overflow: visible;

    background: #ccc;

    cursor: zoom-in;

    z-index: 1;

    transition: transform .4s cubic-bezier(.16,1,.3,1);

}

.event-banner:nth-child(2) {

    width: 90%;

    align-self: flex-end;

}

.event-banner img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

@media (hover: hover) and (pointer: fine) {

    .event-banner:hover {

        transform: scale(1.03);

        z-index: 10;

    }

}

/* =====================================================

   05 — CAPTAIN OOG'S ESCAPE

===================================================== */

.project-oog {

    background: #111;

    color: white;

    overflow: visible;

}

.project-oog .project-category {

    color: #aaa;

}

.project-oog .project-number {

    color: var(--pink);

}

.oog-info {

    position: sticky;

    top: 120px;

}

.oog-info p {

    color: #aaa;

}

.oog-info .role {

    margin-top: 40px;

}

.oog-info .role span {

    color: #888;

}

.oog-info .role strong {

    color: white;

}

.oog-media {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 0.95;

    overflow: visible;

}

/* Game Boy */

.oog-gameboy-scene {

    position: absolute;

    top: 7%;

    left: 0;

    width: 56%;

    min-width: 0;

    z-index: 3;

}

.oog-gameboy {

    position: relative;

    width: 100%;

    z-index: 2;

}

.oog-gameboy-container {

    position: relative;

    width: 100%;

    aspect-ratio: 933 / 1494;

}

.oog-gameboy-image {

    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

}

.oog-gameplay {
    position: absolute;
    z-index: 3;
    left: 24%;
    top: 12.8%;
    width: 51.7%;
    height: 29.4%;
    object-fit: cover;
    cursor: zoom-in;
}

/* Charaktere */

.oog-characters {

    position: absolute;

    z-index: 1;

    top: -9.5%;

    left: -2%;

    width: 98%;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    pointer-events: none;

}

.oog-character {

    display: block;

    width: 26%;

    height: auto;

    flex-shrink: 0;

    object-fit: contain;

    image-rendering: pixelated;

    transform: translate3d(0,0,0);

    will-change: transform;

}

/* Screenshots */

.oog-screenshots {

    position: absolute;

    top: 7%;

    left: 53%;

    width: 47%;

    height: 85%;

    z-index: 1;

    overflow: visible;

}

.oog-screenshot {

    position: absolute;

    width: 100%;

    aspect-ratio: 1051 / 937;

    overflow: visible;

    cursor: zoom-in;

    transition: transform .4s cubic-bezier(.16,1,.3,1);

}

.oog-screenshot img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.oog-screenshot:nth-child(1) {

    top: 2%;

    left: 0;

    z-index: 1;

    transform: rotate(-4deg);

}

.oog-screenshot:nth-child(2) {

    top: 47%;

    left: 0;

    z-index: 2;

    transform: rotate(5deg);

}

@media (hover: hover) and (pointer: fine) {

    .oog-screenshot:nth-child(1):hover {

        z-index: 5;

        transform: rotate(-4deg) scale(1.03);

    }

    .oog-screenshot:nth-child(2):hover {

        z-index: 5;

        transform: rotate(5deg) scale(1.03);

    }

}
/* =====================================================
   CAPTAIN OOG — GAMEPLAY LIGHTBOX
===================================================== */


.oog-gameplay-dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(92vw, 1200px);
    max-width: none;
    max-height: 92vh;
    height: fit-content;
    padding: 0;
    border: none;
    background: transparent;
    overflow: visible;
}

.oog-gameplay-dialog::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.oog-gameplay-dialog video {
    display: block;
    width: 100%;
    max-height: 85vh;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

/* =====================================================

   EINHEITLICHE FARBEN – HELLE PROJEKTE

===================================================== */

.project-ham .project-number,

.project-filmgufa .project-number,

.project-events .project-number {

    color: var(--pink);

}

.project-ham .project-category,

.project-filmgufa .project-category,

.project-events .project-category {

    color: #77736f;

}

.project-ham .project-heading h3,

.project-filmgufa .project-heading h3,

.project-events .events-heading h3 {

    color: #111;

}

.project-ham .ham-info > p,

.project-filmgufa .film-info > p,

.project-events .events-text > p {

    color: #555450;

}

.project-ham .role > span,

.project-filmgufa .role > span,

.project-events .role > span {

    color: #918e89;

}

.project-ham .role > strong,

.project-filmgufa .role > strong,

.project-events .role > strong {

    color: #242321;

    font-weight: 600;

}

/* =====================================================

   ABOUT

===================================================== */

.about {

    width: min(calc(100% - 80px), var(--content));

    margin-inline: auto;

    padding: 160px 0;

}

.about-content {

    display: grid;

    grid-template-columns: 1.3fr 1fr;

    gap: 80px;

    margin-top: 65px;

}

.about h2 {

    font-size: clamp(48px, 6vw, 90px);

    line-height: .95;

    letter-spacing: -.06em;

}

.about h2 span {

    color: #e96b9a;

}

.about-text {

    max-width: 460px;

    font-size: 16px;

    line-height: 1.7;

}

.about-text p + p {

    margin-top: 20px;

}

.skills {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 35px;

}

.skills span {

    padding: 9px 12px;

    border: 1px solid #ccc;

    font-size: 10px;

    font-weight: 600;

    letter-spacing: .08em;

}

/* =====================================================

   CONTACT

===================================================== */

.contact {

    background: #111;

    color: white;

    padding: 150px max(40px, calc((100vw - var(--content)) / 2));

}

.contact h2 {

    margin: 65px 0 50px;

    font-size: clamp(65px, 9vw, 140px);

    line-height: .9;

    letter-spacing: -.07em;

}

.contact h2 span {

    color: var(--pink);

}

.contact-link {

    display: inline-block;

    padding-bottom: 8px;

    border-bottom: 1px solid white;

    font-size: clamp(18px, 2.5vw, 30px);

    transition: color .2s, border-color .2s;

}

.contact-link:hover {

    color: var(--pink);

    border-color: var(--pink);

}

/* =====================================================

   RESPONSIVE – TABLET

===================================================== */

@media (max-width: 1050px) {

    :root {

        --project-info: 210px;

        --project-gap: 45px;

        --page-pad: 32px;

    }

    .geco-wall {

        gap: 14px;

    }

    .film-grid {

        gap: 12px;

    }

    .work-intro,

    .about {
    width: min(calc(100% - 64px), var(--content));
}

.work-intro {
    width: 100%;
}

}

/* =====================================================

   RESPONSIVE – MOBILE

===================================================== */

@media (max-width: 760px) {

    :root {

        --page-pad: 22px;

        --project-info: 100%;

        --project-gap: 0px;

    }

    .nav {

        padding: 22px;

    }

    .nav-links {

        gap: 16px;

    }

    .nav-links a {

        font-size: 12px;

    }

    .hero {

    min-height: auto;

    padding: 105px 22px 40px;

}

    .hero-title {

        font-size: clamp(60px, 12vw, 110px);

    }

    .hero-content {

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 45px;

    padding-top: 75px;

}

.hero-portrait {

    position: relative;

    top: auto;

    left: auto;

    width: min(65%, 240px);

    height: auto;

    aspect-ratio: 3 / 4;

    transform: none;

    align-self: center;

    margin-top: -20px;

}

.portrait-placeholder {

    height: 100%;

}

    .hero-top,

    .hero-bottom {

        font-size: 9px;

    }

    .hero-top span:last-child {

        max-width: 155px;

        text-align: right;

    }

    .work-intro {

    width: 100%;

    padding: 65px 22px 65px;

}

    .work-intro h2 {

        font-size: clamp(44px, 9vw, 72px);

    }

    .project {

        padding: 60px var(--page-pad);

    }

    .project-heading h3,

    .events-heading h3 {

        font-size: clamp(48px, 10vw, 78px);

    }

    .geco-layout,

    .ham-layout,

    .film-layout,

    .events-layout,

    .oog-layout {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 35px;

        margin-top: 60px;

    }

    .geco-info,

    .ham-info,

    .film-info,

    .events-text,

    .oog-info {

        position: static;

        max-width: 100%;

        width: 100%;

    }

    .geco-wall,

    .ham-collage,

    .film-grid,

    .event-banners,

    .oog-media {

        width: 100%;

        max-width: 100%;

    }

    /* Medien bleiben innerhalb des Smartphone-Viewports */

    .geco-wall,

    .ham-collage,

    .film-grid,

    .event-banners,

    .oog-media {

        width: 100%;

        max-width: 480px;

        margin-inline: auto;

    }

    /* GECO */

    .geco-wall {

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

        gap: 12px;

        padding: 15px 15px 35px;

        transform: rotate(-1deg);

    }

    .geco-card:nth-child(3n + 2) {

        transform: none;

    }

    .geco-card:nth-child(even) {

        transform: translateY(20px);

    }

    /* H.A.M. */

.ham-collage {

    aspect-ratio: 1 / 0.85;

}

   .ham-logo {

    top: -5%;

    left: 7.5%;

    width: 45%;

}

    .ham-trailer {

        top: 43%;

        width: 67%;

    }

    .ham-poster {

        top: 5%;

        right: 0;

        width: 38%;

    }

    /* FILMGUFA */

    .film-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 25px;

    }

    .film-intro {

        max-width: 420px;

    }

    .film-grid {

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

        gap: 12px;

    }

    .film-counter {

        margin-top: 30px;

    }

    /* DIE AUSLESE */

    .event-banners {

        gap: 25px;

    }

    /* CAPTAIN OOG — Mobile: gleiche Collage-Anordnung wie Desktop */

    .oog-media {

        aspect-ratio: 1 / 0.95;

        overflow: visible;

    }

    .oog-gameboy-scene {

        top: 7%;

        left: 0;

        width: 56%;

    }

    .oog-screenshots {

        top: 7%;

        left: 53%;

        width: 47%;

        height: 85%;

    }

    .oog-screenshot {

        overflow: visible;

    }

    .oog-screenshot img {

        width: 100%;

        height: 100%;

        object-fit: contain;

    }

    /* ABOUT */

    .about {

        width: calc(100% - 44px);

        padding: 100px 0;

    }

    .about-content {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    /* CONTACT */

    .contact {

        padding: 100px 22px;

    }

}

/* =====================================================

   RESPONSIVE – SMALL MOBILE

===================================================== */

@media (max-width: 420px) {

    .project-heading > div,

    .events-heading > div {

        gap: 12px;

    }

    .project-heading h3,

    .events-heading h3 {

        font-size: 47px;

    }

    .geco-wall,

    .film-grid {

        gap: 8px;

    }

}

/* =====================================================

   ACCESSIBILITY

===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

    *,

    *::before,

    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }

}

.project,

.about,

.contact {

    opacity: 1;

    transform: none;

}

.site-footer {

  width: 100%;

  max-width: none;

  margin: 0;

  padding: 28px max(40px, calc((100vw - 1220px) / 2)) 36px;

  background: #111;

  border-top: 1px solid #444;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 24px;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: #999;

}

.footer-links {

  display: flex;

  flex-wrap: wrap;

  gap: 28px;

}

.footer-links a {

  color: inherit;

  text-decoration: none;

  transition: color .2s;

}

.footer-links a:hover {

  color: var(--pink);

}

@media (max-width: 760px) {

  .site-footer {

    padding: 28px 22px 36px;

    flex-direction: column;

    align-items: flex-start;

    gap: 18px;

  }

  .footer-links {

    gap: 18px;

  }

}

.legal-page {

  max-width: 1220px;

  margin: 0 auto;

  padding: 180px 0 120px;

}

.legal-label {

  color: var(--pink);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .12em;

}

.legal-page h1 {

  margin: 25px 0 75px;

  font-size: clamp(55px, 9vw, 130px);

  font-weight: 600;

  line-height: 1;

  letter-spacing: -.07em;

}

.legal-page h2 {

  margin: 36px 0 12px;

  font-size: 19px;

  font-weight: 600;

}

.legal-page p {

  max-width: 700px;

  color: #555450;

  font-size: 16px;

  line-height: 1.8;

}

.legal-page a {

  color: inherit;

  text-decoration-color: var(--pink);

}

@media (max-width: 1300px) {

  .legal-page {

    margin: 0 40px;

  }

}

@media (max-width: 760px) {

  .legal-page {

    margin: 0 22px;

    padding: 140px 0 80px;

  }

  .legal-page h1 {

    margin-bottom: 50px;

  }

}

/* Footer auf rechtlichen Seiten unten halten */

body:has(.legal-page) {

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  flex-direction: column;

}

body:has(.legal-page) .legal-page {

  flex: 1;

}

body:has(.legal-page) .site-footer {

  flex-shrink: 0;

}

/* ========================================

   ABOUT

======================================== */

.about {

    width: 100%;

    padding: 150px 40px 170px;

    background: var(--bg);

    color: var(--ink);

}

.about-inner {

    width: 100%;

    max-width: var(--content);

    margin: 0 auto;

}

.about-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

}

.about-index {

    color: #999;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .1em;

}

/* HEADLINE */

.about-heading {

    margin: 65px 0 95px;

    max-width: 1100px;

    font-size: clamp(54px, 7vw, 108px);

    line-height: .95;

    letter-spacing: -.065em;

    font-weight: 600;

}

.about-heading span {

    color: var(--pink);

}

/* CONTENT ROWS */

.about-rows {

    width: 100%;

    border-top: 1px solid #d3cfcc;

}

.about-row {

    display: grid;

    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);

    gap: 55px;

    padding: 38px 0 48px;

    border-bottom: 1px solid #d3cfcc;

}

.about-label {

    padding-top: 5px;

    color: #888;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .1em;

}

.about-row-content {

    max-width: 670px;

    min-width: 0;

}

.about-row-content p {

    margin: 0;

    font-size: clamp(17px, 1.55vw, 21px);

    line-height: 1.7;

    letter-spacing: -.015em;

}

.about-row-content p + p {

    margin-top: 25px;

}

/* SKILLS */

.about-skills {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.about-skills span {

    padding: 11px 15px;

    border: 1px solid #c9c6c3;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: .08em;

    transition:

        background .2s ease,

        border-color .2s ease,

        color .2s ease;

}

.about-skills span:hover {

    background: var(--pink);

    border-color: var(--pink);

    color: var(--ink);

}

/* ========================================

   ABOUT – TABLET

======================================== */

@media (max-width: 900px) {

    .about {

        padding: 110px 30px 130px;

    }

    .about-heading {

        margin: 55px 0 70px;

        font-size: clamp(50px, 7vw, 80px);

    }

    .about-row {

        grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr);

        gap: 35px;

    }

}

/* ========================================

   ABOUT – MOBILE

======================================== */

@media (max-width: 600px) {

    .about {

        padding: 90px 22px 110px;

    }

    .about-heading {

        margin: 45px 0 65px;

        font-size: clamp(42px, 9vw, 62px);

    }

    .about-row {

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

        gap: 18px;

        padding: 30px 0 38px;

    }

    .about-row-content p {

        font-size: 16px;

        line-height: 1.75;

    }

    .about-row-content p + p {

        margin-top: 20px;

    }

    .about-skills {

        gap: 8px;

    }

    .about-skills span {

        padding: 9px 12px;

        font-size: 10px;

    }

}