/* ==========================================================================
   EVA HOFKO — "Der weiße Raum"
   Studio für Kommunikations- und Ausstellungsdesign
   --------------------------------------------------------------------------
   White room · anthracite ink · one electric-blue signal · sharp corners.
   Fixed tokens (client): #FFFFFF / #17171A / #0504FF / Syne / Mulish.
   NO border-radius. NO shadows. NO gradients.
   ========================================================================== */

:root {
    --bg: #ffffff;
    --paper: #f4f4f2;
    --ink: #17171a;
    --ink-60: #6b6b70;
    --line: #e4e4e6;
    --blue: #0504ff;
    /* "inverted room" (Kontakt) + overlay menu — themed separately so the
       dark room can flip to a LIT room in dark mode */
    --invert-bg: #17171a;
    --invert-ink: #ffffff;
    --dark-line: rgba(255, 255, 255, 0.16);
    --dark-muted: rgba(255, 255, 255, 0.62);
    /* Eva 28.07.: Mobile-Menue auf weissem Grund statt dunkel. */
    --menu-bg: #ffffff;
    --menu-ink: #17171a;
    --menu-line: #e4e4e6;
    --header-bg: rgba(255, 255, 255, 0.92);
    --bigx: #ffffff;
    --grain-blend: multiply;
    --grain-opacity: 0.04;

    --font-display: 'Syne', system-ui, sans-serif;
    --font-body: 'Mulish', system-ui, sans-serif;

    /* Eva 28.07.: Syne laeuft ab ~500 zu breit — EIN Schnitt, 450 als Maximum,
       fuer jede Display-Type auf der Seite. */
    --fw-display: 450;

    /* Hero is sized so the longest line ("Kommunikations-" = 16.2em in Syne 800
       uppercase) exactly fills the container at every viewport — never clips. */
    --fs-hero: min(calc((100vw - 2 * var(--gutter)) / 16.5), 5rem);
    --fs-h1: clamp(2.4rem, 6vw, 5rem);
    --fs-h2: clamp(1.7rem, 3.6vw, 3.2rem);
    --fs-body: clamp(1rem, 1.1vw, 1.125rem);
    --fs-meta: 0.8125rem;

    --container: 1440px;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --section-pad: clamp(5rem, 12vh, 11rem);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Dark mode — the gallery at night ----------
   Anthracite rooms, warm-white ink, the signal blue lifted for contrast.
   Images are NEVER touched (no filters). The inverted Kontakt room flips
   to the one LIT room in the dark gallery. Light stays the default;
   toggle persists via localStorage (theme-init.js, pre-paint). */
html[data-theme="dark"] {
    --bg: #131316;
    --paper: #1c1c20;
    --ink: #f4f4f2;
    --ink-60: #98989f;
    --line: #2a2a2f;
    --blue: #4d4cff;
    --invert-bg: #f4f4f2;
    --invert-ink: #17171a;
    --dark-line: rgba(23, 23, 26, 0.16);
    --dark-muted: #6b6b70;
    --menu-bg: #1c1c20;
    --menu-ink: #f4f4f2;
    --menu-line: #2a2a2f;
    --header-bg: rgba(19, 19, 22, 0.92);
    --bigx: #131316;
    --grain-blend: screen;
    --grain-opacity: 0.05;
}
html[data-theme="dark"] .kontakt__mail-text { color: var(--invert-ink); }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
hr { border: 0; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- Lenis smooth scroll (self-hosted, motion-ok only) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Grain — gallery-wall texture over the white rooms ---------- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Primitives ---------- */
.container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.meta-label {
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.meta-label--muted { color: var(--ink-60); }
.x { font-style: normal; font-weight: 700; display: inline-block; line-height: 1; }
.x--blue { color: var(--blue); }
.rule {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--line);
    transform-origin: left center;
}
.rule--dark { background: var(--dark-line); }
html.js .rule { transform: scaleX(0); transition: transform 1.1s var(--ease); }
html.js .rule.is-inview { transform: scaleX(1); }

.link-x {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.25s var(--ease);
}
.link-x .x { color: var(--blue); transition: transform 0.3s var(--ease); }
.link-x:hover { color: var(--blue); }
.link-x:hover .x { transform: rotate(90deg); }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0;
    border: 0;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: 44px;
    transition: color 0.25s var(--ease);
}
.btn-outline .x { transition: transform 0.3s var(--ease); }
.btn-outline:hover { color: var(--blue); }
.btn-outline:hover .x { transform: rotate(90deg); }
.btn-outline[aria-expanded="true"] .x { transform: rotate(45deg); }

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--gutter);
    z-index: 1000;
    background: var(--ink);
    color: var(--bg);
    padding: 0.6rem 1rem;
    font-size: var(--fs-meta);
    font-weight: 600;
}
.skip-link:focus { top: 0; }

/* ---------- Reveal (scroll-triggered, JS-gated — no-JS sees everything) -- */
html.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
html.js .reveal.is-inview { opacity: 1; transform: none; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--header-bg);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease);
}
.header--scrolled { border-bottom-color: var(--line); }
.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.header__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
}
/* Evas eigenes "he"-Zeichen (28.07.) — klein und dezent neben der Wortmarke.
   HARD RULE Seitenverhaeltnis: nur EINE Dimension setzen, die andere auto. */
.header__mark,
.footer__mark {
    height: 1.15rem;
    width: auto;
    align-self: center;
    display: block;
}
html[data-theme="dark"] .header__mark,
html[data-theme="dark"] .footer__mark { filter: invert(1); }
.header__brand .x { font-size: 0.9rem; transition: transform 0.3s var(--ease); }
.header__brand:hover .x { transform: rotate(90deg); }
.header__wordmark {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.header__nav { display: flex; gap: clamp(1.5rem, 3vw, 3rem); }
.header__nav-link {
    position: relative;
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.4rem 0;
    transition: color 0.25s var(--ease);
}
.header__nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s var(--ease);
}
.header__nav-link:hover { color: var(--blue); }
.header__nav-link:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); }

/* Theme toggle — sharp 36px hit area, moon (→dark) / sun (→light) swap. */
.header__theme {
    position: relative;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    border: 0;
    transition: color 0.25s var(--ease);
}
.header__theme:hover { color: var(--blue); }
.header__theme-icon { width: 19px; height: 19px; display: block; }
.header__theme-icon--sun { display: none; }
html[data-theme="dark"] .header__theme-icon--moon { display: none; }
html[data-theme="dark"] .header__theme-icon--sun { display: block; }

.header__menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
}
.header__menu-icon { display: block; width: 26px; }
.header__menu-icon span {
    display: block;
    height: 2px;
    background: var(--ink);
    margin: 6px 0;
    transition: transform 0.35s var(--ease);
}
.header__menu-toggle[aria-expanded="true"] .header__menu-icon span:first-child { transform: translateY(4px) rotate(45deg); }
.header__menu-toggle[aria-expanded="true"] .header__menu-icon span:last-child { transform: translateY(-4px) rotate(-45deg); }

.header__mobile {
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--menu-bg);
    color: var(--menu-ink);
    padding: clamp(2rem, 6vh, 4rem) var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
}
/* display:flex above would otherwise override the [hidden] UA style */
.header__mobile[hidden] { display: none; }
.header__mobile-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.header__mobile-link {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(2rem, 8vw, 3.2rem);
    letter-spacing: -0.02em;
    line-height: 1.25;
    padding: 0.55rem 0;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid var(--menu-line);
    transition: color 0.25s var(--ease);
}
.header__mobile-link:hover { color: var(--blue); }
.header__mobile-num {
    font-family: var(--font-body);
    font-size: var(--fs-meta);
    font-weight: 600;
    color: var(--blue);
    letter-spacing: 0.08em;
}
.header__mobile-mail { margin-top: 2.5rem; }
.header__mobile-mail a {
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--blue);
}

/* ==========================================================================
   HERO — the building
   ========================================================================== */
.hero { padding-top: calc(72px + clamp(1.1rem, 2.5vh, 1.8rem)); }
.hero__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--ink-60);
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
.hero__title {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-hero);
    line-height: 0.94;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-left: -0.05em;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__line-inner { display: inline-block; }
html.js .hero__line-inner {
    transform: translateY(112%);
    transition: transform 1s var(--ease);
}
html.js .hero__line:nth-child(2) .hero__line-inner { transition-delay: 0.09s; }
html.js .hero__line:nth-child(3) .hero__line-inner { transition-delay: 0.18s; }
html.js body.is-loaded .hero__line-inner,
body.is-loaded .hero__line-inner { transform: none; }
.hero__x {
    font-size: 0.55em;
    vertical-align: 0.28em;
    margin-left: 0.18em;
}
html.js .hero__x { opacity: 0; transform: scale(0.4) rotate(-90deg); transition: opacity 0.5s var(--ease) 0.55s, transform 0.6s var(--ease) 0.55s; }
body.is-loaded .hero__x { opacity: 1; transform: none; }

.hero__lower { margin-top: clamp(3rem, 8vh, 6rem); }
/* Eva 28.07.: "um einiges kleiner, generell kleiner & feiner". */
.hero__intro {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(1rem, 1.35vw, 1.35rem);
    line-height: 1.5;
    letter-spacing: -0.005em;
    color: var(--ink-60);
    max-width: 76ch;
}

.hero__visual { grid-column: 6 / 13; }
.hero__visual img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.hero__visual a { display: block; overflow: hidden; }
.hero__visual a img { transition: transform 0.9s var(--ease); }
.hero__visual a:hover img { transform: scale(1.025); }
.hero__visual figcaption { margin-top: 0.8rem; }

/* ==========================================================================
   SECTIONS — rooms & thresholds
   ========================================================================== */
.section { padding-top: var(--section-pad); }
section[id] { scroll-margin-top: 90px; }
.section__threshold { position: relative; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.section__label { padding-top: 1rem; color: var(--ink-60); }
.section__headline {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-h1);
    letter-spacing: -0.02em;
    line-height: 1.02;
}

/* ==========================================================================
   ARBEITEN — the index
   ========================================================================== */
.arbeiten { padding-bottom: var(--section-pad); position: relative; }
.arbeiten .section__headline {
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
    /* Nils 06.08.: Sektion 2 am Desktop leiser — Headline 80px -> ~54px,
       mobil unveraendert (Minimum bleibt 2.4rem). */
    font-size: clamp(2.4rem, 4vw, 3.4rem);
}
.arbeiten__list { border-top: 1px solid var(--line); }
.arbeiten__item { border-bottom: 1px solid var(--line); }
.arbeiten__item[hidden] { display: none; }
.arbeiten__row {
    display: grid;
    grid-template-columns: 4rem 1fr auto 2.5rem;
    align-items: baseline;
    gap: clamp(1rem, 3vw, 2.5rem);
    max-width: var(--container);
    margin-inline: auto;
    padding: clamp(1.6rem, 4vh, 2.6rem) var(--gutter);
}
.arbeiten__num {
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--blue);
}
.arbeiten__title {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    /* Nils 06.08.: Desktop kleiner (Sektion 2 schrie zu laut), mobil war gut —
       Minimum bleibt 1.7rem, nur das obere Ende ist runter (51px -> ~38px). */
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    letter-spacing: -0.02em;
    line-height: 1.05;
    transition: color 0.3s var(--ease), transform 0.45s var(--ease);
}
.arbeiten__meta { text-align: right; }
.arbeiten__x {
    justify-self: end;
    font-size: 1rem;
    color: var(--line);
    transition: color 0.3s var(--ease), transform 0.45s var(--ease);
}
.arbeiten__row:hover .arbeiten__title { color: var(--blue); transform: translateX(0.4rem); }
.arbeiten__row:hover .arbeiten__x { color: var(--blue); transform: rotate(90deg); }
.arbeiten__more-row { margin-top: clamp(2rem, 5vh, 3rem); }

/* ==========================================================================
   STUDIO — the paper room
   ========================================================================== */
.studio {
    position: relative;
    background: var(--paper);
    padding-bottom: var(--section-pad);
    overflow: hidden;
}
.studio__bigx {
    position: absolute;
    right: -0.18em;
    top: 0.05em;
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(16rem, 38vw, 34rem);
    line-height: 1;
    color: var(--bigx);
    user-select: none;
    pointer-events: none;
}
.studio .container { position: relative; }
.studio__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
}
.studio__grid .section__headline { grid-column: 1 / 5; }
.studio__text { grid-column: 6 / 12; display: flex; flex-direction: column; gap: 1.4rem; }
/* Eva 28.07.: nur EIN Schriftschnitt im Studio-Text — der Lead sitzt jetzt
   auf demselben Schnitt wie die uebrigen Absaetze. */
.studio__lead { font-size: inherit; line-height: inherit; font-weight: inherit; }
.studio__text p { max-width: 62ch; }
.studio__tools { margin-top: 0.6rem; }
.studio__werdegang { margin-top: clamp(3.5rem, 8vh, 6rem); }
.studio__timeline { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.studio__timeline-item {
    display: grid;
    grid-template-columns: minmax(7.5rem, 16rem) 1fr;
    gap: var(--gutter);
    padding: 1.3rem 0;
    border-bottom: 1px solid var(--line);
}
.studio__years {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: 1rem;
    color: var(--blue);
}
.studio__edu { max-width: 62ch; }

/* ==========================================================================
   KONTAKT — the inverted room
   ========================================================================== */
.kontakt {
    /* Inverted room: dark bg + white ink in light mode; flips to a LIT room
       (light bg + dark ink) in dark mode via the --invert-* tokens. */
    background: var(--invert-bg);
    color: var(--invert-ink);
    padding-top: var(--section-pad);
    padding-bottom: var(--section-pad);
}
.kontakt .section__label { color: var(--dark-muted); }
/* Eva 28.07.: "viel kleiner werden, darf gerne dezent sein" — der Kontaktraum
   traegt jetzt ueber Ruhe statt ueber Groesse. */
.kontakt__headline {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(1.3rem, 2.2vw, 1.9rem);
    letter-spacing: -0.01em;
    line-height: 1.2;
    max-width: 22ch;
}
.kontakt__mail {
    display: inline-flex;
    align-items: baseline;
    gap: clamp(0.6rem, 1.4vw, 1rem);
    margin-top: clamp(1.6rem, 4vh, 2.6rem);
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(1.15rem, 2.4vw, 2.1rem);
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.kontakt__mail-text {
    background-image: linear-gradient(var(--blue), var(--blue));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: 0 100%;
    padding-bottom: 0.08em;
    transition: color 0.3s var(--ease);
}
.kontakt__mail:hover .kontakt__mail-text { color: var(--blue); }
.kontakt__mail-x { font-size: 0.5em; transition: transform 0.4s var(--ease); }
.kontakt__mail:hover .kontakt__mail-x { transform: rotate(90deg); }
.kontakt__note { margin-top: clamp(1.5rem, 4vh, 2.5rem); color: var(--dark-muted); max-width: 50ch; }

/* ==========================================================================
   FOOTER — whisper-quiet
   ========================================================================== */
.footer { padding: clamp(2.5rem, 6vh, 4rem) 0 2rem; }
.footer__grid {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    flex-wrap: wrap;
    padding-top: clamp(1.8rem, 4vh, 2.8rem);
}
.footer__brand { display: inline-flex; align-items: baseline; gap: 0.6rem; }
.footer__brand .x { font-size: 0.8rem; }
.footer__wordmark { font-family: var(--font-display); font-weight: var(--fw-display); }
.footer__nav, .footer__legal { display: flex; gap: 1.8rem; }
.footer__nav a, .footer__legal a {
    font-size: var(--fs-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.25s var(--ease);
}
.footer__nav a:hover, .footer__legal a:hover { color: var(--blue); }
.footer__copyright { margin-top: 2.2rem; }

/* ==========================================================================
   PROJECT DETAIL — a focused room
   ========================================================================== */
/* Eva 28.07.: Projektbild weiter raufziehen, damit man zum Weiterscrollen
   verfuehrt wird — Kopfbereich deutlich kompakter. */
.detail { padding-top: clamp(5.5rem, 11vh, 7.5rem); }
.detail__back-row { margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.detail__num {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: 1.1rem;
    color: var(--blue);
    margin-bottom: 0.8rem;
}
.detail__title {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    /* Sized so the longest unbreakable word ("Logoentwicklung") fits the container
       — one uniform size on every project. NO hyphenation: sie will keine
       Wort-Umbrueche. Eva 05.08. (Call): deutlich kleiner als die Startseite,
       damit die Projektseite nicht "anschreit" — Divisor 16.4 -> 23, Cap 3.2rem. */
    font-size: clamp(1.5rem, calc((100vw - 2 * var(--gutter)) / 23), 3.2rem);
    letter-spacing: -0.03em;
    line-height: 1.06;
    text-transform: uppercase;
    margin-left: -0.04em;
    overflow-wrap: normal;
    hyphens: manual;
}
.detail__metagrid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: clamp(1.4rem, 3vh, 2.2rem);
}
.detail__lead { margin-top: clamp(1.4rem, 3.5vh, 2.4rem); }
.detail__lead img {
    width: 100%;
    max-height: 82vh;
    object-fit: cover;
}
.detail__columns {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    margin-top: clamp(3rem, 8vh, 5.5rem);
}
.detail__body { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 1.4rem; }
.detail__body p { max-width: 66ch; }
.detail__body p:first-child { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.55; font-weight: 500; }
.detail__credits { grid-column: 9 / 13; }
.detail__credits ul { margin-top: 1rem; border-top: 1px solid var(--line); }
.detail__credits li {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink-60);
}

.detail__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    max-width: var(--container);
    margin: clamp(3rem, 8vh, 5.5rem) auto 0;
    padding-inline: var(--gutter);
}
.detail__img--full { grid-column: 1 / -1; }
.detail__img img { width: 100%; height: 100%; object-fit: cover; }

.detail__next { margin-top: var(--section-pad); padding-bottom: 1rem; }
.detail__next .meta-label { padding-top: 1rem; color: var(--ink-60); }
.detail__next-link {
    display: flex;
    align-items: baseline;
    gap: clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 4vh, 2.5rem) 0;
}
.detail__next-num { font-size: var(--fs-meta); font-weight: 600; color: var(--blue); }
.detail__next-title {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    /* Gleiche Groesse wie die Arbeiten-Zeilen (Sektion-2-Verkleinerung 06.08.) */
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    letter-spacing: -0.02em;
    transition: color 0.3s var(--ease), transform 0.45s var(--ease);
}
.detail__next-link .x { color: var(--line); transition: color 0.3s var(--ease), transform 0.45s var(--ease); }
.detail__next-link:hover .detail__next-title { color: var(--blue); transform: translateX(0.4rem); }
.detail__next-link:hover .x { color: var(--blue); transform: rotate(90deg); }

/* ==========================================================================
   LEGAL + 404
   ========================================================================== */
.legal { padding-top: clamp(7rem, 18vh, 10rem); padding-bottom: var(--section-pad); }
.legal__inner { max-width: calc(72ch + 2 * var(--gutter)); margin-inline: auto; }
.legal h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    /* "Datenschutzerklärung" is one 11.9em word — size it to always fit
       the narrow 72ch legal column (max ~691px content). */
    font-size: min(calc((100vw - 2 * var(--gutter)) / 12.1), 3.6rem);
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin-bottom: clamp(2rem, 5vh, 3rem);
}
.legal h2 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: 1.25rem;
    margin-bottom: 0.7rem;
}
.legal__section { margin-bottom: 2.2rem; overflow-wrap: break-word; }
.legal__section a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue); }
.legal__section a:hover { color: var(--blue); }
.legal__stand { color: var(--ink-60); font-size: 0.9rem; }

.notfound { padding-top: clamp(8rem, 24vh, 14rem); padding-bottom: var(--section-pad); }
.notfound__code {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: clamp(4rem, 14vw, 11rem);
    line-height: 1;
    letter-spacing: -0.03em;
}
.notfound__code .x { font-size: 0.4em; vertical-align: 0.4em; }
.notfound__title {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-h2);
    margin: 1.5rem 0 0.8rem;
}
.notfound__text { color: var(--ink-60); margin-bottom: 2.2rem; }

/* ==========================================================================
   CUSTOM CURSOR — kleines Rechteck (Eva 05.08.: ✕ entfernt, wirkte wie
   ein Schließen-Symbol; Rechteck wird auf Links/Buttons blau)
   ========================================================================== */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483001;
    pointer-events: none;
    will-change: transform;
    width: 6px;
    height: 6px;
    background: var(--ink);
}
body.cursor-hot .cursor-dot { background: var(--blue); }
.cursor-dot--icon {
    width: 18px;
    height: 18px;
    background: none;
    object-fit: contain;
}
body.cursor-hot .cursor-dot--icon { background: none; }

/* ==========================================================================
   REDUCED MOTION — everything instant, nothing hidden
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js .reveal, html.js .rule, html.js .hero__line-inner, html.js .hero__x {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .cursor-dot { display: none; }
    *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
    .hero__lower { grid-template-columns: 1fr; }
    .hero__visual { grid-column: 1 / -1; }
    .studio__grid { grid-template-columns: 1fr; gap: 2rem; }
    .studio__grid .section__headline, .studio__text { grid-column: 1 / -1; }
    .detail__columns { grid-template-columns: 1fr; gap: 2.5rem; }
    .detail__body, .detail__credits { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .header__nav { display: none; }
    .header__menu-toggle { display: inline-flex; }
    .arbeiten__row { grid-template-columns: 2.6rem 1fr 1.6rem; row-gap: 0.4rem; }
    /* Explicit placement — auto-placing the ✕ with only grid-row:1 set pushed
       it into column 1 and collapsed the title into the 1.6rem ✕ column. */
    .arbeiten__num { grid-column: 1; grid-row: 1; }
    .arbeiten__title { grid-column: 2; grid-row: 1; overflow-wrap: break-word; }
    .arbeiten__meta { grid-column: 2 / 3; grid-row: 2; text-align: left; }
    .arbeiten__x { grid-column: 3; grid-row: 1; }
    .studio__timeline-item { grid-template-columns: 1fr; gap: 0.3rem; }
    .detail__gallery { grid-template-columns: 1fr; }
    .footer__grid { flex-direction: column; gap: 1.4rem; }
    /* Eva 28.07.: Footer-Navigation ueber die ganze Breite ziehen. */
    .footer__nav, .footer__legal { width: 100%; justify-content: space-between; gap: 0.75rem; }
    .kontakt__mail { word-break: break-word; }
}

@media (max-width: 480px) {
    :root { --gutter: 1.1rem; }
    .hero { padding-top: 7.5rem; }
}


/* ==========================================================================
   V2 (Eva-Feedback 16.07.2026) — Hero-Galerie, Aufklapp-Zeilen
   ========================================================================== */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.9rem, 2vw, 1.6rem);
}
.hero__gallery-item { margin: 0; display: flex; flex-direction: column; }
.hero__gallery-item a { display: block; overflow: hidden; }
.hero__gallery-item img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__gallery-item a:hover img { transform: scale(1.03); }
.hero__gallery-item figcaption { margin-top: 0.55rem; display: flex; gap: 0.6rem; }
.hero__gallery-num { color: var(--blue); }

/* Editorial-Grid (MOOI-Referenz, Eva): 2 grosse nebeneinander, rechts 2 uebereinander */
@media (min-width: 721px) {
    .hero__gallery {
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 1fr 1fr;
        height: clamp(560px, 76vh, 820px);
    }
    .hero__gallery-item { min-height: 0; }
    .hero__gallery-item a { position: relative; flex: 1 1 auto; min-height: 0; }
    .hero__gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
    .hero__gallery-item figcaption { flex: 0 0 auto; }
    .hero__gallery-item:nth-child(1) { grid-column: 1 / span 5; grid-row: 1 / span 2; }
    .hero__gallery-item:nth-child(2) { grid-column: 6 / span 4; grid-row: 1 / span 2; }
    .hero__gallery-item:nth-child(3) { grid-column: 10 / span 3; grid-row: 1; }
    .hero__gallery-item:nth-child(4) { grid-column: 10 / span 3; grid-row: 2; }
}
/* Eva 28.07.: mobil ein Projekt ueber die ganze Breite statt zwei nebeneinander */
@media (max-width: 720px) {
    .hero__gallery { grid-template-columns: 1fr; }
}

/* Arbeiten-Hover: Bild fuellt die Zeile als Hintergrund, Zeile bleibt zu */
.arbeiten__item { position: relative; }
.arbeiten__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}
.arbeiten__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arbeiten__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(23, 23, 26, 0.45);
}
.arbeiten__row { position: relative; }
@media (hover: hover) and (pointer: fine) {
    .arbeiten__item:hover .arbeiten__bg { opacity: 1; }
    .arbeiten__item:hover .arbeiten__num,
    .arbeiten__item:hover .arbeiten__title,
    .arbeiten__item:hover .arbeiten__meta,
    .arbeiten__item:hover .arbeiten__x { color: #fff; }
}

/* Hero-Galerie: Blätter-Pfeile neben dem Studio-Label */
.hero__top { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(0.9rem, 2vw, 1.6rem); align-items: start; }
/* Eva 28.07.: Seitenschrift laeuft von UNTEN nach OBEN (180 gedreht). */
.hero__side-right {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.14em;
    color: var(--ink-60);
    white-space: nowrap;
}
.hero__side { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero__side-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    letter-spacing: 0.14em;
    color: var(--ink-60);
    white-space: nowrap;
}
.hero__nav { display: flex; flex-direction: column; gap: 0.35rem; }
.hero__nav-btn {
    width: 1.9rem; height: 1.9rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--ink);
    cursor: pointer; transition: color 0.2s ease;
}
.hero__nav-btn svg { width: 0.85rem; height: 0.85rem; display: block; }
.hero__nav-btn:hover { color: var(--blue); }

@media (max-width: 720px) {
    .hero__top { grid-template-columns: 1fr; }
    .hero__side { flex-direction: row; justify-content: space-between; width: 100%; order: -1; }
    .hero__side-label { writing-mode: horizontal-tb; transform: none; }
    .hero__nav { flex-direction: row; }
    .hero__side-right { writing-mode: horizontal-tb; transform: none; white-space: normal; }
}

/* Hero-Galerie: Slide-Ghost fuer den Bildwechsel */
.hero__gallery-item a { position: relative; }
.hero__gallery-ghost {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.38s cubic-bezier(0.25, 1, 0.4, 1);
    will-change: transform;
}