/* svekesi – clean, schwarz auf weiß, alles im Quadrat.
   Die Handschrift-Headline kommt später als eigene Webfont (→ Design › Fonts). */

:root {
  --bg: #fff;
  --ink: #111;
  --mute: #777;
  --line: #e6e6e6;
  --accent: #ff2d9b;             /* pink: Hover, Punkt, Cursor */
  --sq: min(100vw, 100svh);      /* Kantenlänge eines Quadrats */
  --pad: clamp(16px, 4vw, 48px);
  --font-ui: Futura, "Futura PT", Jost, "Helvetica Neue", Helvetica, Arial, sans-serif; /* Futura lokal, Jost (selbst gehostet, OFL) als Webfont-Ersatz */
  --font-hand: "Sigle", "Bradley Hand", "Segoe Print", var(--font-ui); /* Svens Handschrift */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --hand: calc(var(--sq) * 0.036);  /* Handschrift-Grundgröße: Index, Header, Menü */
}
@font-face { font-family: "Sigle"; src: url("/assets/fonts/Sigle-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/Jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0e0e0e; --ink: #f2f2f2; --mute: #8a8a8a; --line: #222; }
}
:root[data-theme="dark"] { --bg: #0e0e0e; --ink: #f2f2f2; --mute: #8a8a8a; --line: #222; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Snap nur sanft (proximity), und gar nicht auf Seiten mit langen Sections (Projekte, Index) */
html { scroll-snap-type: y proximity; scroll-behavior: smooth; }
html:has(.sq-project), html:has(.sq-home), html:has(.sq-article) { scroll-snap-type: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 500; letter-spacing: .01em; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf- und Fußzeile */
.bar { position: fixed; left: 0; right: 0; z-index: 10; display: flex; gap: 1em; align-items: center; padding: 12px var(--pad); mix-blend-mode: difference; color: #fff; font-family: var(--font-hand); font-size: var(--hand); text-transform: uppercase; line-height: 1; }
.bar { top: 0; }
.brand { margin-right: auto; }
/* Wortmarke als Maske: nimmt currentColor an, wird im Header per difference automatisch invertiert */
.logo { display: block; height: calc(var(--hand) * .72); aspect-ratio: 1685 / 268; background: currentColor; -webkit-mask: url("/assets/brand/logo-black.png") center / contain no-repeat; mask: url("/assets/brand/logo-black.png") center / contain no-repeat; }
.logo-cover { height: clamp(28px, 6vw, 64px); margin-bottom: 1em; }
.role { text-align: right; font-family: var(--font-ui); font-size: .6em; letter-spacing: .02em; font-weight: 500; text-transform: none; }
.menu-btn, .menu-close { background: none; border: 0; color: inherit; font: inherit; text-transform: inherit; cursor: pointer; padding: 0; text-align: right; }

/* Overlay-Index: halbtransparent schwarz, weiße quadratische Karte in der Mitte, Kopfzeile oben in Weiß */
.menu { position: fixed; inset: 0; z-index: 20; perspective: 1400px; background: rgba(0, 0, 0, .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.menu-bar { position: absolute; mix-blend-mode: normal; color: #fff; }
/* Die Karte fliegt wie ein Blatt Papier von unten rechts herein: leicht gedreht und gekippt, legt sich flach, Schatten wächst mit */
.menu-card { --card: min(84vw, 78svh); width: var(--card); height: var(--card); background: none; color: #fff; padding: calc(var(--card) * .04); overflow: auto; transform-origin: 50% 60%; opacity: 0; transform: translate(45vw, 70vh) rotate(-14deg) rotateX(28deg) rotateY(-10deg); transition: transform .5s var(--ease), opacity .3s; }
.menu.is-open .menu-card { animation: paper 1s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes paper {
  0%   { opacity: 0; transform: translate(45vw, 70vh) rotate(-14deg) rotateX(28deg) rotateY(-10deg); }
  25%  { opacity: 1; }
  70%  { transform: translate(-1.5vw, -1vh) rotate(1.5deg) rotateX(-3deg) rotateY(1deg); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .menu.is-open .menu-card { animation: none; opacity: 1; transform: none; } }
.menu-card .toc { font-size: calc(var(--card) * 0.032); }
.menu-card .toc h3 { color: #fff; }
.menu-card .toc a:hover, .menu-card .toc a[aria-current] { color: var(--accent); }
.menu-card .yr { color: rgba(255,255,255,.55); }
.menu-card .toc-group { opacity: 0; transform: translateY(8px); }
.menu.is-open .menu-card .toc-group { animation: rise .45s var(--ease) both; animation-delay: calc(150ms + var(--g, 0) * 50ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
body.menu-open { overflow: hidden; }
@media (max-width: 600px) { .menu-card { --card: 92vw; height: auto; max-height: 80svh; } }

/* Handschrift schreibt sich hin: jedes Zeichen ein span mit --i */
.ink { display: inline-block; opacity: 0; transform: translateY(.15em) rotate(-4deg); filter: blur(2px); animation: ink .45s var(--ease) forwards; animation-delay: calc(var(--i) * var(--step, 28ms) + var(--d, 0ms)); }
.ink.space { width: .3em; }
@keyframes ink { 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
.toc a { transition: color .2s; }
.toc a:hover, .toc a[aria-current] { color: var(--accent); }
.caret { display: inline-block; width: .08em; height: .9em; background: var(--accent); vertical-align: -.1em; margin-left: .06em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ink { animation: none; opacity: 1; transform: none; filter: none; } .menu { transition: none; } .caret { display: none; } }

/* Das Quadrat */
.stack { display: flex; flex-direction: column; align-items: center; }
.sq { position: relative; width: var(--sq); height: var(--sq); flex: none; scroll-snap-align: start; padding: var(--pad); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.sq + .sq { border-top: 1px solid var(--line); }
.sq figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
.sq figure img { object-fit: contain; min-height: 0; }

/* Layouts */
.sq-full { padding: 0; }
.sq-full figure, .layout-full figure { position: absolute; inset: 0; }
.layout-full { padding: 0; }
.layout-full img { width: 100%; height: 100%; object-fit: cover; }
.layout-full .cap { position: absolute; left: var(--pad); bottom: var(--pad); background: var(--bg); padding: 8px 12px; }

.sq-framed img { flex: 1; width: 100%; object-fit: contain; }
.sq-framed .cap { padding-top: 12px; }

.sq-pair { display: grid !important; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 12px; }
.sq-pair img { width: 100%; height: 100%; object-fit: contain; }
.sq-pair .cap { grid-column: 1 / -1; }

/* Raster: Bilder untereinander in voller Breite, das Quadrat wächst mit */
.layout-grid { height: auto; min-height: var(--sq); scroll-snap-align: none; }
.sq-grid { display: flex !important; flex-direction: column; gap: 14px; height: auto; }
.sq-grid img { width: 100%; height: auto; max-height: calc(var(--sq) - 2 * var(--pad)); object-fit: contain; object-position: left center; }

.cap { font-size: 12px; color: var(--mute); display: flex; gap: 1.5em; flex-wrap: wrap; }
.cap-main { color: var(--ink); }
.cap-note { flex-basis: 100%; color: var(--mute); max-width: 70ch; }
.sq-note { position: absolute; right: var(--pad); top: var(--pad); max-width: 32ch; font-size: 13px; background: var(--bg); padding: 10px 12px; }
.sq-note p { margin: 0; }

/* Text-Quadrate */
.sq-text { max-width: 60ch; }
.sq-text h1 { font-family: var(--font-hand); font-size: clamp(32px, 6vw, 64px); margin-bottom: .4em; }
.sq-text h2 { font-size: 22px; margin-bottom: .5em; }
.sq-text p { margin: 0 0 1em; }
.small { font-size: 12px; color: var(--mute); }

/* Projekt-/Publikationsseite: Bild oben, Text, Bild unten */
/* Projektseiten dürfen höher als quadratisch werden: Bilder bekommen volle Breite und werden nie beschnitten */
.sq-project { display: grid; grid-template-rows: auto auto auto; gap: 28px; height: auto; min-height: var(--sq); scroll-snap-align: none; padding-top: calc(var(--pad) + var(--hand) + 8px); }
.sq-project.no-top { grid-template-rows: auto 1fr; }
.sq-project.no-bottom { grid-template-rows: 1fr auto; }
.sq-project.no-top.no-bottom { grid-template-rows: auto; align-content: center; }
/* Bilder in voller Breite, Höhe ergibt sich aus dem Bild (mindestens 3:2) */
.proj-img { min-height: 0; width: 100%; aspect-ratio: 3 / 2; }
.proj-img.proj-video { height: calc((var(--sq) - 2 * var(--pad)) * 9 / 16); }
.proj-embed { height: calc(var(--sq) - 2 * var(--pad)); aspect-ratio: auto; }
.proj-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.proj-video { width: 100%; height: 100%; min-width: 0; background: #000; }
.proj-video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Schriftmuster Sigle: Raster, alle Zeichen gleich groß */
.specimen { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-flow: dense; gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); font-family: var(--font-hand); line-height: 1; margin: 8px 0; }
.specimen .cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: clamp(28px, 6.2vw, 92px); overflow: hidden; }
.specimen .cell-word { grid-column: span 5; aspect-ratio: auto; justify-content: space-evenly; letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; }
@media (max-width: 600px) { .specimen { grid-template-columns: repeat(5, 1fr); } .specimen .cell { font-size: 10vw; } }

.download { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; margin-top: 32px; padding: clamp(32px, 8vw, 90px) var(--pad); background: var(--ink); color: var(--bg); text-align: center; transition: background .2s; }
.download span { font-family: var(--font-hand); font-size: clamp(40px, 9vw, 120px); text-transform: uppercase; line-height: .9; }
.download small { font-family: var(--font-ui); font-size: 13px; letter-spacing: .04em; opacity: .7; }
.download:hover { background: var(--accent); color: #fff; }

.proj-text h1 { font-family: var(--font-hand); font-size: clamp(36px, 6vw, 64px); text-transform: uppercase; }
.proj-text .tagline { color: var(--mute); margin: .2em 0 .5em; font-size: 1.15em; }
.proj-text p { margin: 0 0 .5em; }
.proj-text a { color: var(--accent); }
.proj-links { font-size: inherit; color: var(--ink); margin-top: 1em; }
.proj-links a { margin-right: .2em; }
.article .proj-links, .article .byline { font-size: inherit; }

/* Titel-Band: nicht quadratisch, eng gesetzt, unten links */
.sq-title { height: auto; min-height: calc(var(--sq) * .5); justify-content: flex-end; padding-top: calc(var(--pad) + var(--hand) + 16px); }
.sq-title h1 { font-family: var(--font-hand); font-size: clamp(56px, 14vw, 180px); line-height: .85; margin: 0 0 .08em -.03em; }
.sq-title .hint { max-width: 44ch; color: var(--mute); margin: 0; line-height: 1.35; }
.sq-title .meta { margin: .5em 0 0; font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .12em; }

.sq-cover h1 { font-family: var(--font-hand); font-size: clamp(48px, 10vw, 120px); }

/* Startseite: Index darf höher als das Quadrat werden, Platz für die feste Kopfzeile */
.sq-home { height: auto; min-height: var(--sq); overflow: visible; justify-content: flex-start; padding-top: calc(var(--pad) + var(--hand) + 28px); padding-bottom: calc(var(--pad) + 32px); }
.sq-home .toc { height: auto; }
.sq-home .toc-group { opacity: 0; animation: rise .5s var(--ease) both; animation-delay: calc(var(--g, 0) * 60ms); }

/* Inhaltsverzeichnis (Startseite, Overlay, Katalog-TOC) – drei Spalten wie im Entwurf.
   Schriftgröße skaliert mit dem Quadrat, damit alles auf eine Seite passt. */
/* Sigle hat eine kleine Laufweite/x-Höhe → größer setzen, Zeilenabstand eng halten */
.toc { display: grid; grid-template-columns: 1.1fr 1.1fr 1.4fr; gap: 0 4%; height: 100%; font-family: var(--font-hand); font-size: var(--hand); text-transform: uppercase; line-height: 1; }
.toc-col { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }
.toc-col-right { text-align: right; }
.toc-group + .toc-group { margin-top: 1.2em; }
.toc h3 { display: block; font-family: var(--font-ui); font-weight: 500; font-size: .8em; letter-spacing: .02em; text-transform: none; color: var(--ink); margin: 1.1em 0 .25em; }
.toc li { padding: .05em 0; }
.toc-col:first-child h3:first-child { margin-top: 0; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-col-right li { white-space: normal; }
.toc a[aria-current] { color: var(--accent); }
.toc .yr { margin-left: .18em; }
.toc-buttons { display: flex; gap: 8px; margin-top: 1.6em; }
.catalog-btn { display: inline-block; align-self: flex-start; padding: .55em 1.1em .5em; border: 1.5px solid currentColor; font-family: var(--font-ui); font-weight: 500; font-size: .5em; letter-spacing: .14em; text-transform: uppercase; line-height: 1; transition: color .2s, border-color .2s; }
.catalog-btn:hover { color: var(--accent); }
.exhibitions a:hover { color: var(--accent); }
.menu .toc-col { justify-content: flex-start; }
@media (max-width: 600px) { .toc { grid-template-columns: 1fr 1fr; font-size: calc(var(--sq) * 0.046); } .toc-col-right { grid-column: 1 / -1; text-align: left; } .sq-home { height: auto; min-height: var(--sq); } }

.exhibitions { list-style: none; padding: 0; margin: 0; }
.exhibitions li { display: flex; gap: .4em; padding: .35em 0; border-bottom: 1px solid var(--line); }
.yr { color: var(--mute); font-variant-numeric: tabular-nums; }

/* Entwurfsmarkierung */
.is-draft::before { content: "draft"; position: absolute; bottom: 12px; right: 12px; z-index: 2; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }

/* Cursor: ein Punkt, der der Maus hinterherfliegt und den Hintergrund invertiert; pulsiert beim Klick.
   Über Links mit data-cursor und über den Bildern einer Seite nimmt er eine Form an (Formen und Bewegung: site.js).
   Fragments = fünf Kugeln, die zu Scherben werden, Imbiboleo = Splash, Alla prima = zähes Eigelb, Architecture = Achsen x/y/z, Freshman = Zickzack,
   Publications = Schleifenlinie, Work = Retro-Mauspfeil (HTML67 = wippende 67, Wilhelm = Pfeil mit Knick, Elevator = grün leuchtendes ^), Exhibitions = Stern, Legal = Sanduhr,
   Angels = Auge mit Speedlines, Punkten und Fühler, Sigle font = Sigle-Emoji. */
@media (pointer: fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  .cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 0; height: 0; translate: -100px -100px; mix-blend-mode: difference; pointer-events: none; transition: opacity .3s; will-change: translate; }
  .cursor.is-hidden { opacity: 0; }
  .cursor.is-down { animation: pulse .6s var(--ease); }
  .c-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), transform .3s var(--ease), opacity .2s; }
  .cursor.is-link .c-dot { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .cursor[data-shape] .c-dot { transform: scale(0); opacity: 0; }
  .c-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; }
  .cursor.is-down .c-dot::after { animation: ring .7s ease-out; }
  @keyframes pulse { 30% { transform: scale(.6); } 100% { transform: scale(1); } }
  @keyframes ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(4); opacity: 0; } }
  .c-svg { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; overflow: visible; fill: #fff; stroke: #fff; }
  /* Drehpunkt = Nutzerkoordinate 0,0 = Mausspitze (die view-box beginnt bei -40,-40, Prozentwerte zählen aber ab 0,0) */
  .c-svg * { transform-box: view-box; transform-origin: 0 0; }
  .c-shape { opacity: 0; transform: scale(0); transition: opacity .2s var(--ease), transform .35s var(--ease); }
  .cursor[data-shape="fragments"] .fragments, .cursor[data-shape="splash"] .splash, .cursor[data-shape="yolk"] .yolk, .cursor[data-shape="axes"] .axes, .cursor[data-shape="doodle"] .doodle,
  .cursor[data-shape="loops"] .loops, .cursor[data-shape="arrow"] .arrow, .cursor[data-shape="hourglass"] .hourglass, .cursor[data-shape="star"] .star, .cursor[data-shape="eye"] .eye,
  .cursor[data-shape="six7"] .six7, .cursor[data-shape="sigle"] .sigle, .cursor[data-shape="dart"] .dart { opacity: 1; transform: scale(1); }
  /* Aufzugspfeil: eigene Ebene (kein Difference), grün mit Glow und Glanzstreifen */
  .cursor-lit { position: fixed; left: 0; top: 0; z-index: 101; width: 0; height: 0; translate: -100px -100px; pointer-events: none; opacity: 0; transition: opacity .25s var(--ease); will-change: translate; }
  .cursor-lit.is-on { opacity: 1; }
  .cursor-lit svg { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; overflow: visible; filter: drop-shadow(0 0 4px rgba(60, 255, 130, .9)) drop-shadow(0 0 12px rgba(60, 255, 130, .5)); }

  /* Zickzack und Schleifenlinie zeichnen sich beim Einblenden */
  .doodle path, .loops path { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .cursor[data-shape="doodle"] .doodle path { animation: draw .6s var(--ease) forwards; }
  .cursor[data-shape="loops"] .loops path { animation: draw 1s var(--ease) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

/* Bilder: Scroll-Choreografie
   1) Wipe: jedes Bild wird per clip-path aufgedeckt, Richtung je nach Layout (unten/links/rechts/diagonal)
   2) Zoom: das Bild startet größer und setzt sich beim Aufdecken
   3) Parallax: --p (−1…1, Position im Viewport) verschiebt das Bild leicht gegen die Scrollrichtung
   4) Hover: sachter Zoom */
@property --s { syntax: "<number>"; inherits: false; initial-value: 1.18; }
.sq figure, .proj-img { overflow: hidden; }
.sq figure img, .proj-img img {
  --s: 1.18; --p: 0;
  clip-path: inset(var(--wipe, 100% 0 0 0));
  transform: translateY(calc(var(--p) * var(--px, -5%))) scale(var(--s));
  transition: clip-path 1.2s var(--ease), --s 1.6s var(--ease);
  transition-delay: calc(var(--n, 0) * 120ms);
  will-change: transform, clip-path;
}
.sq figure.in img, .proj-img.in img { clip-path: inset(0); --s: 1; }
.sq figure.in img:hover, .proj-img.in img:hover { --s: 1.04; transition-duration: .8s; transition-delay: 0s; }
/* Richtungen */
.layout-full img          { --wipe: 100% 0 0 0; --px: -8%; }     /* von unten */
/* Bilder mit Parallax bleiben leicht vergrößert, damit beim Verschieben keine Ränder entstehen */
.layout-full figure.in img { --s: 1.1; }
.layout-full figure.in img:hover { --s: 1.13; }
.sq-framed img            { --wipe: 0 100% 0 0; --px: 0; }       /* von links, kein Parallax */
.sq-pair img { --px: 0; } .sq-grid img { --px: 0; }
.sq-pair img:nth-child(1) { --wipe: 0 100% 0 0; }                /* links → */
.sq-pair img:nth-child(2) { --wipe: 0 0 0 100%; }                /* ← rechts */
.sq-grid img:nth-child(odd)  { --wipe: 0 100% 0 0; }             /* abwechselnd von links und rechts */
.sq-grid img:nth-child(even) { --wipe: 0 0 0 100%; }
.proj-top img    { --wipe: 0 0 100% 0; --px: -3%; }             /* von oben */
.proj-bottom .proj-img img { --wipe: 100% 0 0 0; --px: -3%; }
.proj-bottom { display: grid; gap: 12px; }
.proj-row { display: grid; gap: 12px; grid-template-columns: repeat(var(--cols, 1), 1fr); }
.proj-row.cols-2 { --cols: 2; } .proj-row.cols-3 { --cols: 3; } .proj-row.cols-4 { --cols: 4; }
.proj-row.cols-2 .proj-img, .proj-row.cols-3 .proj-img, .proj-row.cols-4 .proj-img { aspect-ratio: 3 / 4; }
.proj-bottom .cap { margin: 0; }             /* von unten */
/* Caption kommt nach dem Bild */
.sq figure .cap { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .9s, transform .6s var(--ease) .9s; }
.sq figure.in .cap { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sq figure img, .proj-img img { clip-path: none !important; transform: none !important; transition: none; } .sq figure .cap { opacity: 1; transform: none; } }

/* Artikel (Publications): lange Seite, Text mit eingebetteten Bildern */
.sq-article { height: auto; min-height: var(--sq); overflow: visible; scroll-snap-align: none; justify-content: flex-start; padding-top: calc(var(--pad) + var(--hand) + 24px); }
.article { max-width: 66ch; font-size: 17px; line-height: 1.55; }
.article .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--accent); margin: 0 0 1em; }
.article h1 { font-family: var(--font-hand); font-size: clamp(40px, 7vw, 84px); line-height: .9; text-transform: uppercase; margin: 0 0 .5em; }
.article h2 { font-family: var(--font-ui); font-weight: 500; font-size: 1.15em; margin: 2em 0 .5em; }
.article p { margin: 0 0 1em; }
.article .md-img { margin: 1.8em 0; }
.article .md-img img { width: 100%; height: auto; }
.article .md-img .cap { display: block; margin-top: .5em; }
.article .md-img.small { max-width: 48%; display: inline-block; vertical-align: top; margin: 1.2em 2% 1.2em 0; }
.article .md-img.small + .md-img.small { margin-right: 0; }
.article .md-img.small img { max-height: 70vh; width: auto; max-width: 100%; }
.article .md-img.quarter { max-width: 24%; display: inline-block; vertical-align: top; margin: 1.2em 0 1.2em 0; }
.article .md-img.small + .md-img.quarter { margin-left: 2%; }
/* Strichzeichnungen ohne Hintergrund (#invert): im Dark Mode weiße Linien */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .md-img.invert img { filter: invert(1); } }
:root[data-theme="dark"] .md-img.invert img { filter: invert(1); }
.article .byline { margin-top: 3em; }
.article .md-video .proj-video { aspect-ratio: 16 / 9; height: auto; }

/* Querverweis-Karten (Kategorie ↔ Artikel) */
.sq-link { height: auto; min-height: 0; scroll-snap-align: none; padding-top: 0; padding-bottom: 0; }
.link-card { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; width: 100%; padding: 28px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: inherit; }
.link-card .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--accent); margin: 0 0 .3em; }
.link-card h2 { font-family: var(--font-hand); font-size: clamp(36px, 7vw, 84px); line-height: .9; text-transform: uppercase; transition: color .2s; }
.link-card:hover h2 { color: var(--accent); }
.link-card .hint { color: var(--mute); margin: .4em 0 0; max-width: 40ch; }
.link-card img { width: clamp(120px, 22vw, 260px); aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.article .related { margin-top: 3em; }
.article .related .link-card + .link-card { border-top: 0; }
@media (max-width: 600px) { .link-card { grid-template-columns: 1fr; } .link-card img { width: 100%; } }

/* Touch-Geräte: kein Scroll-Snap, kein Parallax, leichtere Animationen, größere Schrift */
@media (pointer: coarse) {
  html { scroll-snap-type: none !important; scroll-behavior: auto; }
  .sq figure img, .proj-img img { will-change: auto; transition: clip-path .7s var(--ease), --s .9s var(--ease); }
  .layout-full figure.in img { --s: 1; }
  .sq figure.in img:hover, .proj-img.in img:hover { --s: 1; }
}
@media (max-width: 600px) {
  :root { --hand: 22px; --pad: 16px; }
  .bar { padding: 12px 16px; gap: .6em; }
  .logo { height: 24px; }
  .role { font-size: 13px; letter-spacing: .04em; }
  .toc { font-size: 22px; }
  .toc h3 { font-size: 15px; }
  .menu { align-items: start; overflow: auto; }
  .menu-card { --card: 100vw; width: 100vw; height: auto; max-height: none; padding: 70px 16px 40px; }
  .menu-card .toc { font-size: 22px; grid-template-columns: 1fr 1fr; }
  .menu-card .toc h3 { font-size: 15px; }
  .sq-title h1 { font-size: 18vw; }
  .article { font-size: 16px; }
}

/* Handy: alles untereinander, Bilder in voller Breite, Text nie über Bildern */
@media (max-width: 600px) {
  .sq-work { height: auto; min-height: 0; scroll-snap-align: none; padding: 20px var(--pad) 28px; }
  .sq-work figure { height: auto; }
  .layout-full { padding: 20px var(--pad) 28px; }
  .layout-full figure { position: static; }
  .layout-full img { width: 100%; height: auto; max-height: 90svh; object-fit: contain; object-position: left top; }
  .layout-full .cap { position: static; padding: 10px 0 0; background: none; }
  .layout-full figure.in img, .layout-full figure.in img:hover { --s: 1; }
  .sq-framed img { width: 100%; height: auto; max-height: 90svh; object-fit: contain; object-position: left top; flex: none; }
  .sq-pair { display: flex !important; flex-direction: column; gap: 12px; }
  .sq-pair img { width: 100%; height: auto; max-height: 85svh; object-fit: contain; object-position: left top; }
  .sq-note { position: static; max-width: none; padding: 8px 0 0; font-size: 14px; }
  .cap { font-size: 13px; padding-top: 10px; }
  .sq-pair .cap, .sq-grid .cap, .sq-framed .cap { padding-top: 10px; }
  .sq + .sq { border-top: 1px solid var(--line); }
  .sq-title { min-height: 0; padding-top: calc(var(--pad) + var(--hand) + 24px); padding-bottom: 8px; }
  .stack > .sq-work:first-child { padding-top: calc(var(--hand) + 44px); }
}

/* Handy: Header scrollt mit, Tagline weg (Menü über "Menu"), Startseite größer */
@media (max-width: 600px) {
  .bar { position: absolute; }
  .menu .menu-bar { position: absolute; }
  .menu-btn, .menu-close { font-size: 0; }
  .menu-btn::after, .menu-close::after { font-family: var(--font-ui); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
  .menu-btn::after { content: "Menu"; }
  .menu-close::after { content: "Close"; }
  .logo { height: 28px; }
  .toc { font-size: 27px; }
  .toc h3 { font-size: 16px; }
  .menu-card .toc { font-size: 25px; }
  .menu-card .toc h3 { font-size: 16px; }
  .sq-home { padding-top: 90px; }
  .article .md-img.small { max-width: 100%; display: block; margin: 1.4em 0; }
  .article .md-img.small + .md-img.small { margin-top: 1.4em; }
  .article .md-img.quarter { max-width: 50%; display: block; margin: 1.4em 0; }
}

/* Startseite: Reel als schmales Band ganz oben, die Kopfzeile liegt darüber (Desktop 6:1, Handy 5:2) */
.hero { position: relative; width: 100vw; aspect-ratio: 6 / 1; background: #000; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero + .sq-home { border-top: 0; padding-top: calc(var(--pad) + 8px); min-height: 0; }
@media (min-width: 601px) { .home .bar .logo { height: calc(var(--hand) * 1.44); } }
@media (max-width: 600px) { .hero { aspect-ratio: 5 / 2; } }