* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

@font-face {
    font-family: "NeueDIN SemiWide";
    src: url("./NeueDINSemiWide-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Für Fließtext: „Helvetica Neue wenn vorhanden“, sonst System-Fallback */
:root {
    --font-head: "NeueDIN SemiWide", Helvetica, Arial, sans-serif;
    --font-body: "NeueDIN SemiWide", Helvetica, Arial, sans-serif;
}

:root {
    --font-size: 0.9rem;
    --font-size2: 0.9rem;
    --font-height: 1.1rem;
}

body {
    font-family: var(--font-body);
}

/* Menü/Headlines in Neue DIN */
.menu div,
.menu a {
    font-family: var(--font-head);
}

.project-info h2 {
    font-family: var(--font-body);
}

.project-info .meta {
    font-family: var(--font-body);
}

body {
    font-family: var(--font-body);
    background: #fff;
    overflow: hidden;
}

/* Fixed menu always on top */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    background: #fff;
}

.menu div,
.menu a {
    font-size: var(--font-size);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #111;
    text-decoration: none;
}

#worksBtn {
    cursor: pointer;
}

/* --- MODE: WORKS (horizontal only) --- */
body.mode-works {
    overflow: hidden;
    /* verhindert vertikales Scrollen */
}

#worksScroller {
    position: fixed;
    inset: 70px 0 0 0;
    /* unter dem Menü */
    overflow-x: auto;
    /* horizontal scroll */
    overflow-y: hidden;
    /* vertikal gesperrt */
    -webkit-overflow-scrolling: touch;
    background: #fff;
    z-index: 1;
}

#worksCanvas {
    position: relative;
    height: calc(100vh - 70px);
    /* vertikal fix */
    width: 2200px;
    /* wichtig: breit genug für horizontales Scrollen */
}

/* Thumbnails: frei platziert wie im Screenshot */
.work-thumb {
    position: absolute;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    width: 280px;
}

.work-thumb img {
    width: 100%;
    display: block;
    border-radius: 0px;
    border: 0px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Project view default hidden */
#projectView {
    display: none;
}

/* --- MODE: PROJECT (vertical only) --- */
body.mode-project {
    overflow-y: auto;
    /* vertikal scrollen */
    overflow-x: hidden;
    /* horizontal gesperrt */
}

body.mode-project #worksScroller {
    display: none;
    /* Works-Scroller weg */
}

body.mode-project #projectView {
    display: block;
    position: relative;
    padding-top: 70px;
    /* Menü-Höhe */
    min-height: 2200px;
    /* reicht für Scroll, wird von JS ggf. erhöht */
}

/* Project stage: absolut platzierte Bilder */
.project-stage {
    position: relative;
    min-height: 2200px;
    top: -92px;
}

/* Das geklickte Hauptbild bleibt exakt an seiner Bildschirmposition */
.project-hero {
    position: absolute;
    border-radius: 0px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* weitere Projektbilder */
.project-img {
    position: absolute;
    border-radius: 0px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    display: block;
}

/* --- Project Info Panel (fixiert unter WORKS) --- */
.project-info {
    position: fixed;
    top: 70px;
    /* direkt unter Menü */
    left: 40px;
    width: min(360px, 38vw);
    z-index: 9998;
    background: transparent;
    /* soll wie Text "auf" der Seite wirken */
    pointer-events: none;
    /* scrollt nicht, klickt nichts weg */
}


.project-info .meta {
    font-size: var(--font-size);
    line-height: var(--font-height);
    color: #111;
    white-space: pre-wrap;
}

/* Medien sollen darunter durchlaufen (also keine extra Abstände erzwingen) */
body.mode-project #projectView {
    padding-top: 70px;
}

/* Videos genau wie Bilder stylen */
.project-media {
    position: absolute;
    border-radius: 0px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    display: block;
    background: #fff;
    max-width: 92vw;
    /* Sicherheitsnetz, damit nichts aus dem Viewport rennt */
}

.project-media {
    max-width: 92vw;
}

.project-media video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0px;
}

.project-media img,
.project-media video {
    border-radius: 0 !important;
}


#worksCanvas {
    width: 2200px;
}

/* ===== Remove borders + shadows everywhere ===== */
.work-thumb img,
.project-hero,
.project-media,
.project-media img,
.project-media video {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}

/* Optional: damit Thumbnails keine Button-Default-Styles haben */
.work-thumb {
    border: none;
    background: transparent;
    padding: 0;
}

/* ===== Project info table ===== */
.project-info {
    position: fixed;
    top: 70px;
    /* unter Menü */
    left: 40px;
    width: min(900px, 50vw);
    z-index: 9998;
    pointer-events: auto;
    /* bleibt "durchlässig" */
}

.project-info h2 {
    margin: 18px 0 10px 0;
    font-size: var(--font-size);
    font-weight: 400;
}

.project-info table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size);
    line-height: var(--font-height);
}

.project-info td {
    vertical-align: top;
    padding: 2px 0;
}

.project-info td.label {
    width: 140px;
    /* gleiche vertikale Achse für Labels */
    padding-right: 14px;
    white-space: nowrap;
    opacity: 0.95;
}

.project-info td.value {
    width: auto;
}

/* =========================
   MOBILE FIXES
========================= */
@media (max-width: 820px) {

    /* Menu kleiner, damit es nicht alles überdeckt */
    .menu {
        height: 56px;
        padding: 0 16px;
    }

    .menu div,
    .menu a {
        font-size: var(--font-size);
        /* vorher 44 o.ä. */
        line-height: var(--font-height);
    }

    /* Project view padding an neue Menu-Höhe anpassen */
    body.mode-project #projectView {
        padding-top: 56px;
    }

    /* Info-Box soll NICHT fixed sein, sondern wie ein normales Element scrollen */
    .project-info {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        margin: 18px 16px 22px 16px;
        pointer-events: auto;
        z-index: 1;
    }

    .project-info table {
        font-size: var(--font-size2);
        line-height: var(--font-height);
        /* etwas größer lesbar am Handy */
    }

    .project-info td.label {
        width: 130px;
    }

    .project-stage {
        top: -150px;
    }
}


/******   game   *****/


.game-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(0, 0, 0, 0.15);
    /* Website bleibt sichtbar */
    z-index: 9999;
}

.game-modal.is-open {
    display: grid;
}

.game-window {
    position: relative;
    width: min(1000px, 92vw);
    height: min(650px, 80vh);
    background: #111;
    /* Canvas-Hintergrund, wird eh vom WebGL überdeckt */
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

#gameCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.close-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    z-index: 100000;
}

.hud {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    color: white;
    font: 14px/1.2 system-ui, sans-serif;
    background: rgba(0, 0, 0, 0.35);
    padding: 10px 12px;
    border-radius: 12px;
    backdrop-filter: blur(6px);
}





.project-info td.value {
    white-space: pre-wrap;
    /* zeigt \n als Umbruch + erlaubt Umbruch */
}


/* =====================================
   Mobile scroll hints (WORKS)
===================================== */

.works-hint {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
}

.works-hint-left {
    left: 10px;
}

.works-hint-right {
    right: 10px;
}

@media (max-width: 820px) {
    body.mode-works .works-hint {
        opacity: 0.6;
    }
}

.project-info a {
    text-decoration: underline;
    color: inherit;
}

.project-info a:hover {
    opacity: 0.6;
}