/* ==========================================================
   Marzena Skubatz — Dummy v2
   Home (Kategorien) · Work (Feed / Lightroom) · Projekt · About · Shop
   ========================================================== */

@font-face { font-family: "Coconat"; src: url(fonts/Coconat-Regular.woff2?v=2) format("woff2"), url(fonts/Coconat-Regular.woff) format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Coconat"; src: url(fonts/Coconat-Demi.woff2?v=2) format("woff2"), url(fonts/Coconat-Demi.woff) format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url(fonts/Ronzino-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url(fonts/Ronzino-Oblique.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Ronzino"; src: url(fonts/Ronzino-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(fonts/Inter-latin.woff2) format("woff2"); font-weight: 300 500; font-display: swap;
  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: "Inter"; src: url(fonts/Inter-latin-ext.woff2) format("woff2"); font-weight: 300 500; font-display: swap;
  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; }
@font-face { font-family: "Newsreader"; src: url(fonts/Newsreader-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Text"; src: url(fonts/CrimsonText-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Text"; src: url(fonts/CrimsonText-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --gutter: clamp(16px, 2.4vw, 36px);
  --bar-h: 58px;
  --ease: cubic-bezier(.2, .7, .1, 1);

  --display: "Coconat", "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Crimson Text", Georgia, "Times New Roman", serif;
  --news: "Newsreader", Georgia, "Times New Roman", serif;

  --feed-bg: #ffffff;
  --feed-ink: #151515;
  --feed-muted: #8a8a8a;
  --feed-line: #e4e4e4;
  --feed-soft: #f3f3f2;

  --lr-bg: #111111;
  --lr-cell: #1a1a1a;
  --lr-cell-hover: #232323;
  --lr-ink: #e9e9e7;
  --lr-muted: #7e7e7b;
  --lr-line: #2a2a2a;

  --bg: var(--feed-bg);
  --ink: var(--feed-ink);
  --muted: var(--feed-muted);
  --line: var(--feed-line);
  --soft: var(--feed-soft);
}
body.dark {
  --bg: var(--lr-bg);
  --ink: var(--lr-ink);
  --muted: var(--lr-muted);
  --line: var(--lr-line);
  --soft: var(--lr-cell);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 14px/1.45 var(--sans); letter-spacing: .005em;
  transition: background-color .6s var(--ease), color .6s var(--ease);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.muted { color: var(--muted); }

/* ---------- Topbar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background-color .6s var(--ease);
}
.brand { justify-self: start; font: 400 19px/1 var(--display); letter-spacing: -.005em; white-space: nowrap; }
.nav { justify-self: end; display: flex; gap: 24px; font-size: 14px; }
.nav a { position: relative; transition: opacity .2s; }
.nav a:hover { opacity: .55; }
.nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; }

.modes {
  position: relative; display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  transition: border-color .6s var(--ease), opacity .3s;
}
.modes.is-hidden { opacity: 0; pointer-events: none; }
.modes a { position: relative; z-index: 1; padding: 6px 16px; border-radius: 999px; font-size: 13px; color: var(--muted); transition: color .35s var(--ease); }
.modes a.is-active { color: var(--bg); }
.modes-ink { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 999px; background: var(--ink); transition: transform .45s var(--ease), width .45s var(--ease), background-color .6s var(--ease); }

#app { padding-top: var(--bar-h); min-height: 100vh; }
.view-enter { animation: view-in .55s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

img.fade { opacity: 0; transition: opacity .8s var(--ease); }
img.fade.is-loaded { opacity: 1; }

/* ---------- Gemeinsame Typo ---------- */
.kicker { font: 500 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.display-xl { font: 400 round(clamp(44px, 7.4vw, 120px), 1px)/.95 var(--display); letter-spacing: -.02em; margin: 0; }
.display-l { font: 400 round(clamp(30px, 3.6vw, 56px), 1px)/1.02 var(--display); letter-spacing: -.015em; margin: 0; }
.txt p { margin: 0 0 .9em; font: 400 round(clamp(19px, 1.5vw, 23px), 1px)/1.4 var(--serif); }
.txt p:last-child { margin-bottom: 0; }
.txt .lead { font-size: round(clamp(23px, 2vw, 31px), 1px); line-height: 1.25; }
.txt h3 { font: 500 11px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.2em; }

/* ==========================================================
   HOME — Kategorien mit Teaser-Loops
   ========================================================== */
.home-intro { padding: 14vh var(--gutter) 10vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); }
.home-intro p { grid-column: 2 / span 8; margin: 0; font: 400 round(clamp(28px, 3.3vw, 52px), 1px)/1.08 var(--display); letter-spacing: -.015em; }
.home-intro p em { font-style: normal; color: var(--muted); }

.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); padding: 0 var(--gutter) 14vh; }
.cat { display: block; position: relative; }
.cat:nth-child(3n+2) { margin-top: 9vh; }
.cat:nth-child(3n+3) { margin-top: 4vh; }
.cat .media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--soft); }
.cat video, .cat .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; }
.cat:hover video, .cat:hover .media img { transform: scale(1.03); }
.cat .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.cat .name { font: 400 round(clamp(24px, 2.2vw, 34px), 1px)/1 var(--display); letter-spacing: -.01em; }
.cat .count { font-size: 12px; color: var(--muted); }
.cat .sub { font-size: 13px; color: var(--muted); margin-top: 6px; }
.cat .arrow { display: inline-block; transition: transform .35s var(--ease); }
.cat:hover .arrow { transform: translateX(5px); }

.home-links { display: flex; justify-content: center; gap: 12px; padding: 0 var(--gutter) 16vh; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; transition: background-color .25s, color .25s, border-color .25s; }
.pill:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ==========================================================
   Filterleiste (Work Feed & Lightroom)
   ========================================================== */
.filterbar {
  position: sticky; top: var(--bar-h); z-index: 40;
  display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap;
  padding: 10px var(--gutter) 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--muted); transition: color .2s, border-color .2s, background-color .2s; white-space: nowrap; }
.chip sup { font-size: 9px; margin-left: 3px; opacity: .7; }
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chips-sub .chip { font-size: 12px; padding: 4px 10px; text-transform: lowercase; }
.tools { display: flex; align-items: center; gap: 14px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { padding: 5px 11px; font-size: 13px; color: var(--muted); }
.seg button.is-on { background: var(--ink); color: var(--bg); }
.search { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 4px 2px; }
.search svg { width: 14px; height: 14px; fill: none; stroke: var(--muted); stroke-width: 1.6; flex: none; }
.search input { background: none; border: 0; outline: 0; color: var(--ink); font: inherit; font-size: 13px; width: 230px; }
.search input::placeholder { color: var(--muted); }
.search:focus-within { border-color: var(--ink); }
.size { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.size input { width: 100px; accent-color: var(--ink); }
.fit { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; }
.fit[aria-pressed="true"] { color: var(--ink); }
.count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.suggest { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.suggest:empty { display: none; }
.suggest button { color: var(--ink); border-bottom: 1px dotted var(--muted); }

/* ==========================================================
   WORK · Feed — Cover-Komposition (Rhythmus-Tabelle)
   ========================================================== */
.feed-index { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 13vh; padding: 10vh var(--gutter) 20vh; }
.cover { display: block; align-self: start; grid-column: var(--c) / span var(--s); margin-top: calc(var(--y) * 1vh); }
.cover .frame { overflow: hidden; background: var(--soft); }
.cover img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: transform 1.2s var(--ease), opacity .8s var(--ease); }
.cover:hover img { transform: scale(1.025); }
.cover .label { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cover .t { font: 400 round(clamp(17px, 1.3vw, 21px), 1px)/1.15 var(--display); }
.cover .c { display: block; font: 500 11px/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.cover .n { font-size: 11px; color: var(--muted); white-space: nowrap; }
.empty { color: var(--muted); padding: 14vh var(--gutter); text-align: center; grid-column: 1 / -1; }

/* ==========================================================
   PROJEKT — 4 Module (automatisch)
   ========================================================== */
.project { padding-bottom: 14vh; }
.module { margin: 0 0 clamp(80px, 14vh, 180px); }
.module img { cursor: zoom-in; }
.p-head { padding: 15vh var(--gutter) 12vh; text-align: center; }
.p-head .kicker { margin-bottom: 20px; }
.p-head .facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 28px; color: var(--muted); font-size: 13px; }
.p-head .facts a { border-bottom: 1px solid var(--line); }
.p-head .facts a:hover { color: var(--ink); }

.m-land { padding: 0 var(--gutter); display: flex; }
.m-land figure { margin: 0; }
.m-land.full { padding: 0; }
.m-land.full figure { width: 100%; }
.m-land.medium-left figure, .m-land.medium-right figure { width: 62%; }
.m-land.medium-right { justify-content: flex-end; }
.m-land img { width: 100%; height: auto; }

.m-portrait { display: flex; justify-content: center; padding: 0 var(--gutter); }
.m-portrait figure { margin: 0; }
.m-portrait.left { justify-content: flex-start; padding-left: 12vw; }
.m-portrait.right { justify-content: flex-end; padding-right: 12vw; }
.m-portrait img { height: calc(100vh - var(--bar-h) - 2 * var(--gutter)); width: auto; max-width: 100%; object-fit: contain; }

.m-text { padding: 0 var(--gutter); display: flex; justify-content: center; }
.m-text .txt { max-width: 33em; }

.m-combo { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; padding: 0 var(--gutter); }
.m-combo figure { margin: 0; }
.m-combo img { width: 100%; height: auto; max-height: calc(100vh - var(--bar-h) - 2 * var(--gutter)); object-fit: contain; }
.m-combo.img-right .txt { grid-column: 2 / span 4; grid-row: 1; }
.m-combo.img-right figure { grid-column: 7 / span 6; grid-row: 1; }
.m-combo.img-left figure { grid-column: 1 / span 6; grid-row: 1; }
.m-combo.img-left .txt { grid-column: 8 / span 4; grid-row: 1; }
.m-combo.is-portrait.img-right figure { grid-column: 7 / span 5; }
.m-combo.is-portrait.img-left figure { grid-column: 2 / span 5; }
.module figcaption { margin-top: 8px; font-size: 12px; color: var(--muted); }

.p-foot { margin: 0 var(--gutter); padding-top: 9vh; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.p-foot .next { text-align: right; }
.p-foot .next .display-l { display: block; margin-top: 10px; transition: opacity .2s; }
.p-foot .next:hover .display-l { opacity: .55; }
.p-foot .tags { display: flex; gap: 6px; flex-wrap: wrap; max-width: 540px; }
.back-link { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 40; font-size: 13px; padding: 8px 15px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.back-link:hover { background: var(--ink); color: var(--bg); }

/* ==========================================================
   LIGHTROOM
   ========================================================== */
.lightroom { padding: 16px var(--gutter) 10vh; }
.lr-grid { display: grid; gap: var(--gap, 10px); grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
.lr-cell { position: relative; aspect-ratio: 1 / 1; background: var(--lr-cell); overflow: hidden; cursor: zoom-in; border-radius: 2px; transition: background-color .2s; text-align: left; }
.lr-cell:hover { background: var(--lr-cell-hover); }
.lr-cell img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; transition: opacity .6s var(--ease), inset .35s var(--ease), width .35s var(--ease), height .35s var(--ease); }
.lightroom.is-fill .lr-cell img { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lr-cell .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; font-size: 12px; line-height: 1.3; color: var(--lr-ink); background: linear-gradient(transparent, rgba(0,0,0,.75)); opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.lr-cell .cap b { font-weight: 500; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-cell .cap i { font-style: normal; color: #a5a5a1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-cell:hover .cap, .lr-cell:focus-visible .cap { opacity: 1; transform: none; }
.lr-cell.is-project .cap { opacity: 1; transform: none; }
.lr-cell:focus-visible { outline: 1px solid var(--lr-ink); outline-offset: 2px; }
.lr-more { display: flex; justify-content: center; padding: 6vh 0 0; }

/* ==========================================================
   ABOUT / SHOP
   ========================================================== */
.page { padding: 14vh var(--gutter) 14vh; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 12vh; }
.page > * { grid-column: 3 / span 8; }
.page .wide { grid-column: 1 / -1; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); font-size: 14px; }
.cols h3 { margin: 0 0 14px; }
.cols ul { list-style: none; margin: 0; padding: 0; }
.cols li { padding: 3px 0; }
.news { display: grid; gap: 28px; }
.news-item { display: grid; grid-template-columns: 150px 1fr 200px; gap: var(--gutter); align-items: start; padding-top: 22px; border-top: 1px solid var(--line); }
.news-item .date { font-size: 12px; color: var(--muted); }
.news-item h4 { margin: 0 0 8px; font: 400 22px/1.15 var(--display); }
.news-item p { margin: 0; font: 400 17px/1.4 var(--serif); color: color-mix(in srgb, var(--ink) 80%, var(--bg)); }
.news-item img { width: 100%; cursor: zoom-in; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.sheet-grid button { aspect-ratio: 3 / 4; background: var(--soft); overflow: hidden; }
.sheet-grid img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.books { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.book img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--soft); cursor: zoom-in; }
.book h4 { margin: 14px 0 6px; font: 400 26px/1.1 var(--display); }
.book p { margin: 0; color: var(--muted); font-size: 14px; }

/* ==========================================================
   LIGHTBOX
   ========================================================== */
.lightbox { position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--ink); display: grid; grid-template-rows: 1fr auto; animation: lb-in .35s var(--ease); }
.lightbox[hidden] { display: none; }
@keyframes lb-in { from { opacity: 0; } }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: calc(var(--gutter) + 30px) var(--gutter) 0; min-height: 0; }
.lb-figure { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-figure img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .25s var(--ease); user-select: none; -webkit-user-drag: none; }
.lb-figure img.is-swapping { opacity: 0; }
.lb-prev, .lb-next { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; }
.lb-prev { left: 0; cursor: w-resize; }
.lb-next { right: 0; cursor: e-resize; }
.lb-close { position: absolute; top: 16px; right: var(--gutter); z-index: 3; font-size: 13px; }
.lb-close:hover, .lb-project:hover { opacity: .55; }
.lb-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; padding: 14px var(--gutter) 16px; font-size: 13px; align-items: center; }
.lb-caption { color: var(--muted); min-width: 0; }
.lb-caption b { color: var(--ink); font-weight: 500; }
.lb-caption .lb-tags { display: block; margin-top: 3px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-count { font-variant-numeric: tabular-nums; }
.lb-project { justify-self: end; }
.lb-project[hidden] { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .cat:nth-child(n) { margin-top: 0; }
  .cat:nth-child(2n) { margin-top: 7vh; }
  .home-intro p, .page > * { grid-column: 1 / -1; }
  .m-combo { grid-template-columns: 1fr; row-gap: 32px; }
  .m-combo > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .m-combo .txt { order: -1; }
  .cols { grid-template-columns: 1fr 1fr; }
  .news-item { grid-template-columns: 1fr; }
  .search input { width: 160px; }
}
@media (max-width: 640px) {
  :root { --bar-h: 52px; }
  .topbar { grid-template-columns: auto 1fr; }
  .brand { font-size: 16px; }
  .modes { display: none; }
  .nav { gap: 16px; font-size: 13px; }
  .cats { grid-template-columns: 1fr; }
  .cat:nth-child(n) { margin-top: 0; }
  .cat:nth-child(even) { width: 82%; margin-left: auto; }
  .cat:nth-child(odd) { width: 88%; }
  .feed-index { grid-template-columns: repeat(6, 1fr); row-gap: 8vh; }
  .feed-index .cover { margin-top: 0 !important; }
  .feed-index .cover:nth-child(odd)  { grid-column: 1 / span 5 !important; }
  .feed-index .cover:nth-child(even) { grid-column: 2 / span 5 !important; }
  .m-land.medium-left figure, .m-land.medium-right figure { width: 84%; }
  .m-portrait img { height: auto; width: 100%; max-height: 80vh; }
  .m-portrait.left, .m-portrait.right { padding: 0 var(--gutter); }
  .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .tools { width: 100%; justify-content: space-between; flex-wrap: wrap; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .size > span, .count { display: none; }
  .size input { width: 70px; }
  .cols, .books { grid-template-columns: 1fr; }
  .lb-bar { grid-template-columns: 1fr auto; }
  .lb-caption { display: none; }
  .mobile-modes { display: flex !important; }
}
.mobile-modes { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Home: Slideshow mit einfachem Fade (kein Zoom) */
.cat .slides img { opacity: 0; transition: opacity 1s ease; transform: none !important; }
.cat .slides img.is-on { opacity: 1; }


/* ==========================================================
   v3 — Seitentitel, 4er-Grid, Footer, gleich hohe Home-Kacheln
   ========================================================== */
/* Home: alle Kacheln auf einer Höhe */
.cats .cat, .cats .cat:nth-child(n) { margin-top: 0; width: auto; margin-left: 0; }

/* Seitentitelzeile – auf allen Seiten an derselben Position */
.pagebar {
  position: sticky; top: var(--bar-h); z-index: 41;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px 24px; flex-wrap: wrap;
  padding: 16px var(--gutter) 14px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background-color .6s var(--ease), border-color .6s var(--ease);
}
.pb-main { display: flex; align-items: baseline; gap: 8px 26px; flex-wrap: wrap; min-width: 0; }
.ptitle { margin: 0; font: 400 19px/1.2 var(--news); color: var(--ink); letter-spacing: 0; }
.pcats { display: flex; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; }
.pcat { font: 400 19px/1.2 var(--news); color: var(--muted); transition: color .2s; white-space: nowrap; }
.pcat:hover, .pcat.is-on { color: var(--ink); }
.pcat sup, .pagebar .count { font: 400 11px/1 var(--sans); letter-spacing: .02em; color: var(--muted); }
.pcat sup { margin-left: 3px; }
.pagebar + .filterbar { position: static; }
.pagebar + .page { padding-top: 8vh; }

/* Work / Archiv: gleichmäßiges 4er-Grid */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7vh var(--gutter); padding: 5vh var(--gutter) 14vh; }
.grid4 .cover { grid-column: auto; margin-top: 0; }
.grid4 .frame { aspect-ratio: 4 / 5; }
.grid4 .cover img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

/* Rechtliches */
.legal { grid-column: 3 / span 7; font: 400 16px/1.5 var(--serif); }
.legal .kicker { margin: 3em 0 1em; }
.legal .kicker:first-child { margin-top: 0; }
.legal p { margin: 0 0 .8em; }

/* Footer */
.site-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap;
  padding: 28px var(--gutter) 34px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
  transition: border-color .6s var(--ease), color .6s var(--ease);
}
.site-foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-foot a { color: var(--ink); transition: opacity .2s; }
.site-foot a:hover { opacity: .55; }
.site-foot a.is-active { text-decoration: underline; text-underline-offset: 4px; }
/* Footer: About-Kurztext statt Copyright – Coconat, 175 % der Footer-Schrift (13 px → 23 px) */
.site-foot { align-items: flex-end; align-items: last baseline; }   /* Links bündig mit der letzten Textzeile */
.site-foot .foot-about { margin: 0; font: 400 23px/1.15 var(--display); letter-spacing: -.01em; color: var(--ink); max-width: 46em; white-space: pre-line; }
@media (max-width: 640px) { .site-foot .foot-about { font-size: 20px; white-space: normal; } }   /* Handy: Zeilen frei umbrechen */
body.ms-editing .site-foot .foot-about { white-space: pre-line; }

@media (max-width: 1100px) { .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .legal { grid-column: 1 / -1; } }
@media (max-width: 640px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5vh 12px; }
  .pb-main { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .pb-main::-webkit-scrollbar { display: none; }
  .pcats { flex-wrap: nowrap; }
  .ptitle, .pcat { font-size: 17px; }
}
.pagebar { align-items: flex-start; }
.pagebar > .tools { min-height: 23px; align-items: center; }

/* ==========================================================
   v4 — Titel/Kategorien 125 %, einheitliches Scroll-Overlay, keine Linien
   ========================================================== */
:root { --title-size: 24px; --overlay: color-mix(in srgb, var(--bg) 80%, transparent); }
.brand { font-size: var(--title-size); }
.ptitle, .pcat { font-size: var(--title-size); }
/* Navigation und Seitentitelzeile = eine durchscheinende Fläche */
.topbar, .pagebar {
  background: var(--overlay);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 0;
}
.pagebar { top: calc(var(--bar-h) - 1px); padding-top: 17px; }
.filterbar, .pagebar + .filterbar { border-bottom: 0; }
@media (max-width: 640px) { :root { --title-size: 21px; } .brand { font-size: 19px; } }
/* Overlay-Farbe am Element berechnen, damit sie im Lightroom (body.dark) dunkel wird */
.topbar, .pagebar { background: color-mix(in srgb, var(--bg) 80%, transparent); }
/* Subnavigation (Seitentitel + Kategorien) in Ronzino */
.ptitle, .pcat { font-family: var(--sans); letter-spacing: -.005em; }

/* Dachzeile in normaler Schreibweise */
.cover .c { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; }

/* Umschalter ohne aktiven Modus (Home, About …): beide Optionen in Textfarbe */
.modes:not(:has(a.is-active)) a { color: var(--ink); }
.modes:not(:has(a.is-active)) a:hover { opacity: .55; }
.modes-ink { transition: transform .45s var(--ease), width .45s var(--ease), background-color .6s var(--ease), opacity .3s; }

/* Sans = Inter, Strichstärke nach Größe:
   groß (ab ca. 18 px) 300 · Fließ-/UI-Text (13–17 px) 400 · klein (unter 13 px) 500 */
.ptitle, .pcat { font-weight: 300; }
body, .nav, .modes a, .site-foot, .sub, .cover .c, .chip, .seg button, .fit, .count,
.lb-bar, .module figcaption, .lr-cell .cap, .search input, .news-item .date, .cols { font-weight: 400; }
.pcat sup, .pagebar .count, .chip sup, .kicker, .lr-cell .cap b, .lb-caption b { font-weight: 500; }
/* Logo 110 % (24 px -> 26.4 px; mobil 19 -> 21 px) */
.brand { font-size: 26px; }
@media (max-width: 640px) { .brand { font-size: 21px; } }
/* Subnavi (Seitentitel + Kategorien) auf 90 %: 24 px -> 21.6 px, mobil 21 -> 19 px */
:root { --title-size: 22px; }
@media (max-width: 640px) { :root { --title-size: 19px; } }
/* Ausgewählte Kategorie in der Subnavi unterstreichen (Zahl nicht) */
.pcat.is-on { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pcat sup { display: inline-block; }

/* Projektseite: Dachzeile über dem Titel in normaler Schreibweise */
.p-head .kicker { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; }


/* ==========================================================
   v5 — Suche als Overlay (ehem. Lightroom) + minimierter Header
   ========================================================== */
.topbar { grid-template-columns: auto 1fr; }
.nav { align-items: center; }
.nav-search { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: -4px; border-radius: 50%; transition: background-color .2s; }
.nav-search svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.nav-search:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* Overlay – immer dunkel */
.search-overlay, .lightbox.is-dark {
  --bg: var(--lr-bg); --ink: var(--lr-ink); --muted: var(--lr-muted); --line: var(--lr-line); --soft: var(--lr-cell);
}
.search-overlay {
  position: fixed; inset: 0; z-index: 90; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--ink);
  animation: so-in .35s var(--ease);
}
.search-overlay[hidden] { display: none; }
@keyframes so-in { from { opacity: 0; } }
.so-top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 20px;
  padding: 18px var(--gutter) 14px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.so-input { flex: 1; display: flex; align-items: center; gap: 14px; }
.so-input svg, .so-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; flex: none; }
.so-input svg { color: var(--muted); }
.so-input input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink);
  font: 300 var(--title-size)/1.2 var(--sans); }
.so-input input::placeholder { color: var(--muted); }
.so-input input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }
.so-close { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color .2s; }
.so-close:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.so-filters { padding: 4px var(--gutter) 10px; display: grid; gap: 12px; }
.so-row { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; }
.so-row .tools { margin-left: auto; }
.so-cats .pcat { font-size: 15px; font-weight: 400; background: none; border: 0; padding: 0; cursor: pointer; }
.so-cats .pcat.is-on { text-underline-offset: 4px; }
.search-overlay .lightroom { padding-top: 10px; }
.search-overlay .seg button { font-weight: 400; }

/* Header: minimierter Modus beim Scrollen */
.topbar { transition: top .35s var(--ease), left .35s var(--ease), right .35s var(--ease), height .35s var(--ease), border-radius .35s var(--ease), padding .35s var(--ease), background-color .6s var(--ease); }
.brand { transition: font-size .35s var(--ease); }
.pagebar { transition: margin .35s var(--ease), border-radius .35s var(--ease), padding .35s var(--ease), top .35s var(--ease), background-color .6s var(--ease); }
body.mini { --mini-gap: 20px; --mini-h: 50px; }
body.mini .topbar { top: var(--mini-gap); left: var(--mini-gap); right: var(--mini-gap); height: var(--mini-h); border-radius: 14px; padding: 0 20px; }
body.mini .brand { font-size: 20px; }
body.mini.has-pagebar .topbar { border-radius: 14px 14px 0 0; }
body.mini .pagebar { top: calc(var(--mini-gap) + var(--mini-h)); margin: 0 var(--mini-gap); border-radius: 0 0 14px 14px; padding: 2px 20px 14px; }
@media (max-width: 640px) {
  body.mini { --mini-gap: 10px; --mini-h: 46px; }
  body.mini .brand { font-size: 17px; }
  .so-row .tools { margin-left: 0; }
  .so-top { padding-top: 12px; }
}
/* schwebende Karte: leichter Schatten an der Unterkante */
body.mini .topbar, body.mini .pagebar { background: color-mix(in srgb, var(--bg) 86%, transparent); }
body.mini:not(.has-pagebar) .topbar, body.mini .pagebar { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .28); }
@media (max-width: 640px) {
  .topbar { column-gap: 12px; }
  .brand { font-size: 18px; }
  .nav { gap: 13px; font-size: 13px; }
  body.mini .brand { font-size: 16px; }
  body.mini .topbar { padding: 0 14px; }
}

/* Keine blaue Fokus-Markierung; Tastatur-Fokus stattdessen dezent unterstrichen */
a:focus, button:focus, input:focus, [tabindex]:focus { outline: none; box-shadow: none; }
a:focus-visible, button:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* Fließtext-Modul breiter: halbe Viewportbreite (≈ 940 px bei 1880 px), mindestens 640 px */
.m-text .txt { max-width: max(50vw, 640px); width: 100%; }

/* Credits in eigener Zeile unter den Projektangaben */
.p-head .credits { margin-top: 12px; color: var(--muted); font-size: 13px; }

/* Projekt-Ende: Tags mittig, verwandte Projekte als Kacheln; keine Linien im Footer */
.p-foot { border-top: 0; justify-content: center; padding-top: 4vh; margin: 0 var(--gutter); }
.p-foot .tags { justify-content: center; max-width: 760px; margin: 0 auto; }
.related { padding: 12vh 0 0; }
.related .ptitle { padding: 0 var(--gutter); }
.related .grid4 { padding-top: 3vh; padding-bottom: 6vh; }
.site-foot { border-top: 0; }


/* ==========================================================
   v6 — Header & Subnavi nicht mehr fixiert, "nach oben"-Button
   ========================================================== */
.topbar { position: absolute; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.pagebar { position: static; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
body.mini .topbar, body.mini .pagebar { top: auto; left: auto; right: auto; margin: 0; border-radius: 0; box-shadow: none; }

/* schwebende Buttons unten: so viel Abstand, dass der Footer am Seitenende lesbar bleibt */
.back-link, .to-top { bottom: calc(var(--foot-h, 90px) + 12px); }
.to-top {
  position: fixed; right: var(--gutter); z-index: 40;
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .2s, color .2s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--ink); color: var(--bg); }
.to-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Seitenwechsel nur mit Opacity – ein transform würde die fixierten Buttons kurz verschieben */
@keyframes view-in { from { opacity: 0; } }
/* Nach-oben-Button: ohne Outline; Pfeilspitze bündig mit der rechten Bildkante
   (Button 40 px, Pfeil 16 px mittig, Pfeil-Zeichnung endet 3,6 px vor dem Icon-Rand -> 15,6 px Versatz) */
.to-top { border: 0; right: calc(var(--gutter) - 15.6px); }
/* Nach-oben-Button: Mitte des Pfeils (= Mitte des 40-px-Buttons) liegt genau auf der rechten Bildkante */
.to-top { right: calc(var(--gutter) - 20px); }

/* Suche: keine Schlagwort-Wolke */
.search-overlay .tagchips { display: none; }

/* Raster-Regler: 1-px-Linie mit weißem Kreis als Knopf */
.size input[type=range] { -webkit-appearance: none; appearance: none; background: none; height: 16px; cursor: pointer; accent-color: auto; }
.size input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--muted); border: 0; }
.size input[type=range]::-moz-range-track { height: 1px; background: var(--muted); border: 0; }
.size input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5.5px; border-radius: 50%; background: #fff; border: 0; }
.size input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.size input[type=range]::-moz-range-progress { background: none; }
/* Suche: Hintergrund #1b2a21; Rasterzellen und Lightbox aus der Suche im selben Ton */
.search-overlay, .lightbox.is-dark {
  --search-bg: #1b2a21;
  --bg: var(--search-bg);
  --lr-cell: color-mix(in srgb, var(--search-bg) 92%, #fff);
  --lr-cell-hover: color-mix(in srgb, var(--search-bg) 86%, #fff);
  --line: color-mix(in srgb, var(--search-bg) 78%, #fff);
}

/* Suche: Zellen ohne eigenen Hintergrund; Titel unter dem Bild */
.search-overlay .lr-cell { aspect-ratio: auto; display: flex; flex-direction: column; background: none; border-radius: 0; overflow: visible; }
.search-overlay .lr-cell:hover { background: none; }
/* Quadrat per padding statt aspect-ratio: Safari gibt dem Bildfeld im <button> (Flex) sonst keine Höhe → keine Bilder */
.search-overlay .lr-cell { width: 100%; }
.search-overlay .lr-img { position: relative; display: block; width: 100%; height: 0; padding-bottom: 100%; flex: none; }
.search-overlay .lr-cell img, .search-overlay .lightroom.is-fill .lr-cell img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left bottom;
}
.search-overlay .lightroom.is-fill .lr-cell img { object-fit: cover; object-position: center; }
.search-overlay .lr-cell .cap {
  position: static; opacity: 1; transform: none; background: none; padding: 9px 0 0; color: var(--ink);
}
.search-overlay .lr-cell .cap i { color: var(--muted); }
.search-overlay .lr-cell:hover img { opacity: .85; }
.search-overlay .lr-grid { row-gap: calc(var(--gap, 10px) + 18px); }
/* Header: Abstand nach oben = Abstand zur Seite (Seitenrand) */
:root { --bar-h: calc(var(--gutter) + 40px); }
.topbar { height: auto; padding: var(--gutter) var(--gutter) 0; align-items: baseline; }
.brand { line-height: .8; }
.nav { line-height: 1; }

/* Suche: Hintergrund dunkelgrau */
.search-overlay, .lightbox.is-dark { --search-bg: #262626; }
/* Suche: browsereigenes Lösch-x im Suchfeld ausblenden */
.so-input input::-webkit-search-cancel-button, .so-input input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.so-input input { -webkit-appearance: none; appearance: none; }

/* ---------- Suche: Auswahl & Download ---------- */
.sel-toggle { font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 5px 11px; }
.sel-toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sel-mark { position: absolute; left: 8px; top: 8px; z-index: 2; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9); background: rgba(0,0,0,.25); opacity: 0; transition: opacity .2s, background-color .2s; }
.search-overlay.is-selecting .sel-mark { opacity: 1; }
.search-overlay.is-selecting .lr-cell { cursor: pointer; }
.lr-cell.is-selected .sel-mark { opacity: 1; background: #fff; border-color: #fff; }
.lr-cell.is-selected .sel-mark::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
  border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lr-cell.is-selected img { opacity: .55 !important; }
/* Auswahl-Markierung auf das Bild setzen (Fit: Bild sitzt unten links) */
.search-overlay .lr-img .sel-mark { left: 8px; top: auto; bottom: calc(100% - 30px); }

.sel-bar {
  position: sticky; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
}
.sel-bar[hidden] { display: none; }
.sel-count { font-weight: 500; }
.sel-bar button { color: var(--muted); }
.sel-bar button:hover { color: var(--ink); }
.sel-status { color: var(--muted); margin-left: auto; }
.sel-bar .sel-download { color: var(--bg); background: var(--ink); border-radius: 999px; padding: 9px 18px; font-weight: 500; }
.sel-bar .sel-download:hover { color: var(--bg); opacity: .85; }
.sel-bar .sel-download:disabled { opacity: .35; cursor: default; }
.search-overlay .lr-img .sel-mark { top: auto; bottom: 8px; left: 8px; }
.search-overlay .lightroom.is-fill .lr-img .sel-mark { top: 8px; bottom: auto; }
/* Home-Kacheln: etwas mehr Abstand zwischen Bild und Titel (12 -> 20 px) */
.cat .row { margin-top: 20px; }
/* Home: mehr Abstand zwischen den Teaser-Reihen (+60 px) */
.cats { row-gap: calc(var(--gutter) + 60px); }
/* Home-Intro: linksbündig mit den Kacheln, über zwei der drei Spalten */
.home-intro { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
.home-intro p { grid-column: 1 / span 2; }
@media (max-width: 900px) { .home-intro { grid-template-columns: repeat(2, 1fr); } .home-intro p { grid-column: 1 / -1; } }
/* Home: Abstand Intro -> erste Kachelreihe = Abstand zwischen den Reihen */
.home-intro { padding-bottom: calc(var(--gutter) + 60px); }
/* Home-Intro in derselben Größe wie die Kacheltitel */
.home-intro p { font-size: round(clamp(24px, 2.2vw, 34px), 1px); line-height: 1.15; }

/* Home: Intro -> erste Kachelreihe 60 px */
.home-intro { padding-bottom: 60px; }

/* ==========================================================
   Home beginnt mit dem Intro-Text; auf Unterseiten steht "Marzena Skubatz" exakt an derselben Stelle.
   Bezug ist die Oberkante der Großbuchstaben (text-box), beide mit Seitenrand-Abstand oben und links.
   ========================================================== */
.brand, .home-intro p { text-box: trim-both cap alphabetic; }
.brand { line-height: 1; }
body.is-home .brand { visibility: hidden; }
body.is-home .topbar { background: transparent; pointer-events: none; }
body.is-home .topbar .nav { pointer-events: auto; }
body.is-home #app { padding-top: 0; }
body.is-home .home-intro { padding-top: var(--gutter); }
.topbar { align-items: start; }
.nav { align-self: start; align-items: start; }
.nav a { text-box: trim-both cap alphabetic; line-height: 1; }
.nav-search { margin-top: -8px; }

/* Home: "Marzena Skubatz" exakt wie das Logo auf den Unterseiten (Schrift, Größe, Position) */
.home-intro .intro-name { grid-column: 1 / span 2; margin: 0; font: 400 26px/1 var(--display); letter-spacing: -.005em;
  text-box: trim-both cap alphabetic; }
.home-intro p { text-box: none; margin-top: 18px; }
@media (max-width: 900px) { .home-intro .intro-name { grid-column: 1 / -1; } }
@media (max-width: 640px) { .home-intro .intro-name { font-size: 18px; } }

/* Home: Text unten über dem Footer (statt Buttons) – linksbündig mit den Kacheln, über zwei von drei Spalten */
.home-outro { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); padding: 4vh var(--gutter) 14vh; }
.home-outro p { grid-column: 1 / span 2; margin: 0; font: 400 round(clamp(24px, 2.2vw, 34px), 1px)/1.15 var(--display); letter-spacing: -.015em; }
.home-outro p em { font-style: normal; color: var(--muted); }
@media (max-width: 900px) { .home-outro p { grid-column: 1 / -1; } }

/* Home: erste Kachelreihe so weit unten wie möglich – Titel der Kacheln bleibt im ersten Bildschirm lesbar.
   Höhe Intro = Bildschirmhöhe − Kachelbild (4:5) − Titelzeile − Rand unten */
:root { --cat-cols: 3; --cat-title: 58px; }
.home-intro {
  --tile-w: calc((100vw - 2 * var(--gutter) - (var(--cat-cols) - 1) * var(--gutter)) / var(--cat-cols) - 6px);
  box-sizing: border-box; padding-bottom: 0;
  height: max(calc(var(--gutter) + 80px), calc(100svh - var(--tile-w) * 1.25 - var(--cat-title) - var(--gutter)));
}
@media (max-width: 900px) { :root { --cat-cols: 2; } }
@media (max-width: 640px) { .home-intro { height: auto; padding-bottom: 60px; } }

/* About: Text linksbündig über 2 von 3 Spalten (wie Home), Clients in Newsreader */
.about-page { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
.about-page > .txt { grid-column: 1 / span 2; }
.about-page > .cols { grid-column: 1 / -1; }
.about-page .clients li { font: 400 19px/1.35 var(--news); padding: 1px 0; }
@media (max-width: 900px) { .about-page > .txt { grid-column: 1 / -1; } }
/* About: Spaltenüberschriften (Kontakt, Clients, Fellowships & Awards) normal geschrieben und schwarz */
.about-page .cols h3.kicker { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 14px; font-weight: 500; }

/* About: Ausstellungen, Fellowships und Awards wie Clients in Newsreader, gleiche Größe */
.about-page .awards li { font: 400 19px/1.35 var(--news); padding: 1px 0 8px; }

/* Shop: Teaser wie Work-Kacheln, Bilder vollständig (nicht beschnitten) */
.shop-grid .shop-frame { background: none; display: flex; align-items: flex-end; }
.shop-grid .shop-frame img, .grid4.shop-grid .cover img { object-fit: contain; object-position: left bottom; }
.shop-grid .cover:hover img { transform: none; opacity: .85; }
.shop-item .price { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.shop-item:hover .price { color: var(--ink); }
/* Subnavi: Oberkante "Work"/Seitentitel liegt genau einen Seitenrand-Abstand unter der Oberkante von "Marzena Skubatz"
   (Name: Großbuchstaben-Oberkante bei 1 × Rand  →  Subnavi bei 2 × Rand) */
.ptitle, .pcat { text-box: trim-both cap alphabetic; }
.pagebar { padding-top: 0; }
body.has-pagebar #app { padding-top: calc(2 * var(--gutter)); }

/* Home-Slideshow: Überblendung kürzer als der Takt (900 ms), damit sich nie zwei Fades überschneiden */
.cat .slides img { transition: opacity .8s ease; }
/* Home: pro Reihe nur zwei Teaser im 3er-Raster – leere Spalte wechselt: Reihe 1 links, Reihe 2 rechts, Reihe 3 links … */
@media (min-width: 901px) {
  .cats .cat:nth-child(4n + 1) { grid-column: 2; }
  .cats .cat:nth-child(4n + 2) { grid-column: 3; }
  .cats .cat:nth-child(4n + 3) { grid-column: 1; }
  .cats .cat:nth-child(4n + 4) { grid-column: 2; }
}
/* Shop: drei Teaser pro Reihe (wie das 3er-Raster der Home) */
.grid4.shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .grid4.shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Bild-Platzhalter beim Laden transparent statt hell (Kacheln, Home, Tearsheets, Bücher, Suche) */
.cover .frame, .cat .media, .sheet-grid button, .book img, .module figure, .lr-cell, .search-overlay .lr-cell { background: transparent; }

/* ==========================================================
   Weiches Verhalten: Seitenwechsel, Bilder blenden sanft ein
   ========================================================== */
#app { transition: opacity .18s ease; }
#app.view-leave { opacity: 0; }
.view-enter { animation: view-in .6s cubic-bezier(.25, .1, .25, 1); }
@keyframes view-in { from { opacity: 0; } }
/* Alle Bilder: leichter Fade-in, sobald sie geladen sind */
img.fade { opacity: 0; transition: opacity 1s cubic-bezier(.25, .1, .25, 1), transform 1.2s var(--ease); }
img.fade.is-loaded { opacity: 1; }
.cat .slides img.is-on:not(.is-loaded) { opacity: 0; }
.lb-figure img { transition: opacity .45s cubic-bezier(.25, .1, .25, 1); }
@media (prefers-reduced-motion: reduce) { #app, img.fade, .cat .slides img { transition: none !important; } }
/* Abstände Header → Subnavi → Bilder (nach Vorlage)
   - zwischen Grundlinie "Marzena Skubatz" und Oberkante Subnavi bleibt genau eine Großbuchstabenhöhe frei
   - erste Bildreihe beginnt drei Seitenrand-Abstände unter der Oberkante der Subnavi */
:root { --brand-cap: 18.4px; }                 /* Großbuchstabenhöhe von Coconat 26,4 px */
@media (max-width: 640px) { :root { --brand-cap: 12.6px; } }
body.has-pagebar #app { padding-top: calc(var(--gutter) + 2 * var(--brand-cap)); }
.pagebar { padding-bottom: 0; }
.pagebar + .grid4, .pagebar + .page { padding-top: calc(3 * var(--gutter) - 16px); }

/* News: Bilder unverzerrt, keine Linien, Datum zweizeilig und schwarz */
.news-item { border-top: 0; }
.news-item img { height: auto; object-fit: contain; }
.news-item .date { color: var(--ink); line-height: 1.5; }

/* ==========================================================
   Mobil: größeres Logo, Burger-Menü als Overlay, Subnavi bricht um
   ========================================================== */
.nav-burger, .mobile-menu { display: none; }
@media (max-width: 640px) {
  :root { --brand-cap: 16.7px; }                         /* Coconat 24 px */
  .brand, body.mini .brand, .home-intro .intro-name { font-size: 24px; }
  .nav a { display: none; }
  .nav { gap: 6px; align-items: center; }
  .nav-search { margin-top: -7px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 34px; height: 30px; margin-top: -7px; padding: 0 4px;
  }
  .nav-burger span { display: block; height: 1.5px; background: var(--ink); border-radius: 1px; }
  .mobile-menu:not([hidden]) {
    display: flex; flex-direction: column; justify-content: space-between;
    position: fixed; inset: 0; z-index: 95; overflow-y: auto;
    padding: calc(var(--gutter) + 56px) var(--gutter) calc(var(--gutter) + 8px);
    background: var(--bg); color: var(--ink);
    animation: so-in .3s cubic-bezier(.25, .1, .25, 1);
  }
  .mm-close { position: absolute; top: var(--gutter); right: var(--gutter); font-size: 14px; }
  .mm-main { display: flex; flex-direction: column; gap: 6px; }
  .mm-main a, .mm-main button { font: 400 40px/1.15 var(--display); letter-spacing: -.015em; text-align: left; color: var(--ink); }
  .mm-sub { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; }
  /* Subnavi auf Work/Archiv: umbrechen statt seitlich scrollen */
  .pb-main { flex-wrap: wrap; overflow: visible; width: auto; }
  .pcats { flex-wrap: wrap; row-gap: 10px; }
}

/* Mobil: "Menu" statt Burger-Icon – Inter in Logo-Größe, an der Oberkante des Logos ausgerichtet; "Close" im Menü genauso */
@media (max-width: 640px) {
  .nav-burger, .mm-close {
    display: inline-block; width: auto; height: auto; padding: 0; margin: 0; gap: 0;
    font: 300 24px/1 var(--sans); letter-spacing: -.01em; color: var(--ink);
    text-box: trim-both cap alphabetic;
  }
  .nav { gap: 16px; align-items: start; }
  .nav-search { margin-top: -6px; }
  .mm-close { top: var(--gutter); }
}
/* Mobil: keine Lupe in der Kopfzeile – die Suche steht im Menü */
@media (max-width: 640px) { .nav-search { display: none; } }
/* Home: wieder drei Kacheln pro Reihe (versetzte 2er-Anordnung aufgehoben) */
@media (min-width: 901px) { .cats .cat:nth-child(n) { grid-column: auto; } }
/* Mobil: Subnavi so groß wie "Menu" (24 px) und als Fließtext direkt nach dem Seitentitel – wie am Desktop */
@media (max-width: 640px) {
  :root { --title-size: 24px; }
  .pb-main { display: block; text-box: trim-both cap alphabetic; line-height: 1.3; }
  .pb-main .ptitle, .pb-main .pcats { display: inline; text-box: none; line-height: inherit; }
  .pb-main .ptitle { margin-right: 14px; }
  .pb-main .pcat { display: inline-block; text-box: none; line-height: inherit; margin-right: 14px; }
}
/* Mobil: erste Zeile der Subnavi exakt platzieren (ohne text-box, das bei Fließtext-Zeilen verrutscht):
   Oberkante "Work" = Seitenrand + 2 × Großbuchstabenhöhe des Logos */
@media (max-width: 640px) {
  .pb-main { text-box: none; font-size: var(--title-size); line-height: 1.3; margin-top: -0.29em; }
}

/* Projektseite: Dachzeile = Kategorie (klickbar) */
.p-head a.kicker { display: inline-block; transition: color .2s; }
.p-head a.kicker:hover { color: var(--ink); }
/* Mobil (nach Mockup "work – 390w"): Header → Subnavi und Zeilenabstand der Subnavi gleich = 36 px (1,5 × 24 px),
   Bilder beginnen ca. 34 px unter der letzten Subnavi-Zeile */
@media (max-width: 640px) {
  body.has-pagebar #app { padding-top: calc(var(--gutter) + 36px); }
  .pb-main { line-height: 36px; margin-top: -9.3px; }          /* Oberkante Großbuchstaben der 1. Zeile = Polsterkante */
  .pb-main .ptitle, .pb-main .pcats, .pb-main .pcat { line-height: 36px; }
  .pagebar + .grid4, .pagebar + .page { padding-top: 25px; }
}

/* ==========================================================
   Projektseite – Kopf nach Mockup (project – 1363w desktop / 390w default)
   Abstände gemessen an Großbuchstaben-Oberkante und Grundlinie:
   Desktop: Dachzeile 250 · Titel ~312 · Angaben 426 · Bild 574
   Mobil:   Dachzeile 173 · Titel 218 · Angaben 327 · Bild 436
   ========================================================== */
.p-head { padding: clamp(100px, 13vw, 190px) var(--gutter) 138px; text-align: center; }
.p-head .kicker, .p-head a.kicker {
  display: block; width: fit-content; margin: 0 auto;
  font: 400 22px/1 var(--display); letter-spacing: -.005em; text-transform: none; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-box: trim-both cap alphabetic;
}
.p-head a.kicker:hover { opacity: .55; color: var(--ink); }
.p-head h1 { margin: 47px 0 0; text-box: trim-both cap alphabetic; }
.p-head .facts {
  display: block; margin-top: 43px; color: var(--ink); font-size: 13px; line-height: 1;
  text-box: trim-both cap alphabetic;
}
.p-head .facts > * { display: inline; }
.p-head .facts > * + *::before { content: "·"; margin: 0 8px; }
.p-head .credits { margin-top: 14px; }
@media (max-width: 640px) {
  .p-head { padding: 117px var(--gutter) 99px; }
  .p-head h1 { margin-top: 30px; line-height: 42px; }
  .p-head .facts { margin-top: 36px; }
  .p-head { padding-bottom: 101px; }
}

/* Alle Texte auf hellem Grund schwarz (#151515). Ausnahme: nicht gewählte Kategorien der Subnavi bleiben grau. */
:root { --feed-muted: #151515; --muted: #151515; }
body:not(.dark) { --muted: #151515; }
.pcat { color: #8a8a8a; }
.pcat:hover, .pcat.is-on { color: var(--ink); }

/* Schlagwörter am Projektende: schwarz, 1-px-Kontur, Pill mit runden Enden */
.p-foot .chip, .chips-sub .chip {
  color: #151515; border: 1px solid #151515; border-radius: 999px; background: transparent;
  text-transform: none; padding: 5px 13px;
}
.p-foot .chip:hover { background: #151515; color: var(--bg); }
/* Schlagwort-Pills: 16 px Abstand (horizontal und beim Umbruch vertikal) */
.p-foot .tags { gap: 16px; }

/* Schlagwort-Pills: volle Breite (bis zum Seitenrand-Abstand wie der übrige Inhalt), erst dann umbrechen */
.p-foot .tags { max-width: none; width: 100%; }

/* Navi Desktop (laut Entwurf): Inter 300 in Titelgröße, "Search" als Wort statt Lupe,
   Oberkante der Großbuchstaben bündig mit dem Logo */
.nav { gap: 28px; align-items: start; }
.nav a, .nav-search {
  font: 300 var(--title-size)/1 var(--sans); letter-spacing: -.005em; color: var(--ink);
  text-box: trim-both cap alphabetic;
}
.nav-search { display: block; width: auto; height: auto; margin: 0; padding: 0; border-radius: 0; background: none; transition: opacity .2s; }
.nav-search:hover { background: none; opacity: .55; }
.nav a.is-active::after { bottom: -5px; }

/* Search mobil: Kopfzeile exakt wie der Header (Seitenrand, Großbuchstabenhöhe des Logos),
   Kategorien genau wie die Subnavi auf Work (Inter 300 / 24 px, Zeilenabstand 36 px, inaktiv grau) */
@media (max-width: 640px) {
  .so-top { align-items: flex-start; gap: 16px; padding: var(--gutter) var(--gutter) 19px; }
  .so-input { gap: 12px; align-items: flex-start; height: 17px; }
  /* Icons auf Großbuchstabenhöhe (17 px) zuschneiden */
  .so-input svg { width: 24.3px; height: 24.3px; margin: -3.6px -3.6px 0; color: var(--ink); }
  .so-close { width: 17px; height: 17px; overflow: visible; border-radius: 0; }
  .so-close:hover { background: none; opacity: .55; }
  .so-close svg { width: 28.3px; height: 28.3px; margin: -5.65px; flex: none; }
  .so-input input { height: 24px; font: 300 24px/24px var(--sans); margin-top: -3.4px; padding: 0; }
  .so-filters { padding-top: 0; gap: 0; }
  .so-row { gap: 0 12px; }
  .so-cats { display: block; width: 100%; margin-top: 9.7px; line-height: 36px; }
  .so-cats .pcat { display: inline-block; font: 300 24px/36px var(--sans); letter-spacing: -.005em;
    color: #8a8a8a; margin-right: 14px; text-box: none; text-underline-offset: 5px; }
  .so-cats .pcat:hover, .so-cats .pcat.is-on { color: var(--ink); }
  .so-cats .pcat sup { font: 500 11px/1 var(--sans); color: var(--ink); margin-left: 3px; }
  .so-row .tools { width: 100%; margin-top: 10px; }
}
@media (max-width: 640px) { .nav-search { display: none; } }
@media (max-width: 640px) {
  .so-cats { font: 300 24px/36px var(--sans); }
  .so-cats .pcat sup { line-height: 0; vertical-align: super; }
}

/* Search: Regler nutzt die freie Breite, "Select" rechts neben "Fit" */
.so-row .tools { flex: 1 1 260px; min-width: 0; }
.so-row .tools .size { flex: 1; min-width: 0; order: 1; }
.so-row .tools .size input { flex: 1; width: auto; min-width: 60px; }
.so-row .tools .fit { order: 2; }
.so-row .tools .sel-toggle { order: 3; }
.so-row .tools .count { order: 4; }
@media (max-width: 640px) { .so-row .tools { flex-wrap: nowrap; justify-content: flex-start; gap: 12px; } }
/* Search Desktop: mindestens 80 px zwischen Kategorien und Grid-Regler (22 px Zeilenabstand + 58 px) */
@media (min-width: 641px) { .so-row .tools { margin-left: 58px; } }
/* Search Desktop: Regler wieder schmal (wie bisher) und rechtsbündig, min. 80 px Abstand zu den Kategorien;
   volle Breite nur mobil */
@media (min-width: 641px) {
  .so-row .tools { flex: 0 0 auto; margin-left: auto; }
  .so-row .tools .size { flex: none; }
  .so-row .tools .size input { flex: none; width: 100px; }
  .so-row .so-cats { margin-right: 58px; }
}
/* Subnavi-Kategorien auf hellem Hintergrund immer schwarz; aktiv = unterstrichen, Hover wie die Navi.
   (Search bleibt dunkel mit grauen Kategorien) */
.pagebar .pcat, .pagebar .pcat sup { color: var(--ink); }
.pagebar .pcat { transition: opacity .2s; }
.pagebar .pcat:hover { opacity: .55; }
.pagebar .pcat.is-on:hover { opacity: 1; }

/* ==========================================================
   Eigenes Layout (Layout-Modus): 12-Spalten-Raster, 3er-Modul für Hochformate
   ========================================================== */
.lay-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--gutter); align-items: start; }
.lay-row figure { margin: 0; min-width: 0; }
.lay-row img { display: block; width: 100%; height: auto; }
.lay-img.is-portrait img { width: auto; max-width: 100%; max-height: calc(100vh - var(--bar-h) - 2 * var(--gutter)); margin: 0 auto; }
.lay-row.is-bleed { padding: 0; column-gap: 0; }
.lay-text .txt { min-width: 0; }
.lay-trio .txt { align-self: start; }
.lay-missing, .lay-slot { display: none; }
@media (max-width: 640px) {
  .lay-row { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .lay-row > * { grid-column: 1 / -1 !important; }
  .lay-img.is-portrait img { max-height: 80vh; }
}

/* 3er-Modul: Fill = alle Bilder gleiches Format (beschnitten), Ausrichtung oben / Mitte / unten */
.lay-trio.is-fill figure img { aspect-ratio: var(--ar, 3/4); object-fit: cover; height: auto; }
.lay-trio.al-center { align-items: center; }
.lay-trio.al-end { align-items: end; }

/* Querformat "Medium left / right": genau 2 von 3 Spalten (8 von 12, bündig mit dem Raster der 3er-Module) */
.m-land.medium-left, .m-land.medium-right { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.m-land.medium-left figure, .m-land.medium-right figure { width: auto; min-width: 0; }
.m-land.medium-left figure { grid-column: 1 / span 8; }
.m-land.medium-right figure { grid-column: 5 / span 8; }
@media (max-width: 640px) {
  .m-land.medium-left figure { grid-column: 1 / span 10; }
  .m-land.medium-right figure { grid-column: 3 / span 10; }
}

/* Kontakt: große, gut lesbare Angaben, links auf zwei Dritteln wie der About-Text */
.contact-page { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); }
.contact-list { grid-column: 1 / span 2; margin: 0; padding: 0; list-style: none; font: 400 round(clamp(22px, 2.2vw, 34px), 1px)/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.contact-list .c-main { font-size: round(clamp(30px, 3.6vw, 56px), 1px); line-height: 1.12; letter-spacing: -.02em; }
.contact-list .c-main + li:not(.c-main) { margin-top: 1.2em; }
.contact-list a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; transition: opacity .2s; }
.contact-list a:hover { opacity: .55; }
@media (max-width: 900px) { .contact-list { grid-column: 1 / -1; } }

/* Desktop: 20 px zwischen Unterkante Logo und Oberkante Subnavi (Work / Kategorien) */
@media (min-width: 641px) {
  body.has-pagebar #app { padding-top: calc(var(--gutter) + var(--logo-size, 26.4px) * .697 + 20px); }   /* .697 = Großbuchstabenhöhe Coconat */
}

/* Free grid: Bilder frei im 12er-Raster (waagerecht in Spalten, senkrecht frei); Handy: untereinander */
.lay-row.lay-free { display: block; container-type: inline-size; }
.free-canvas { position: relative; }
.free-canvas .free-item { position: absolute; margin: 0; }
.free-canvas .free-item img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) {
  .free-canvas { height: auto !important; display: grid; row-gap: 32px; }
  .free-canvas .free-item { position: static; width: 100% !important; }
}

/* Einblenden nach dem Laden (siehe index.html / app.js) */
body { transition: background-color .6s var(--ease), color .6s var(--ease), opacity .8s var(--ease); }

/* Desktop: "Work" bleibt unter dem Logo, die Kategorien sitzen direkt über den Projekten (wie im Entwurf):
   Titel → Kategorien ca. 165 px (bei 1440 px), Kategorien ca. 22 px, Kategorien → Raster 38 px */
@media (min-width: 641px) {
  .pagebar .pb-main { display: block; }
  .pagebar .pb-main .ptitle { display: block; }
  .pagebar .pb-main .pcats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; margin-top: 165px; }
  .pagebar .pb-main .pcat { font-size: 22px; }
  .pagebar:has(.pcats) + .grid4 { padding-top: 38px; }
}

/* About (neu): zwei Spalten – links Contact + Exhibitions, rechts Bio + Selected Clients */
.about2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(var(--gutter) * 2.4); row-gap: clamp(60px, 7vw, 100px); padding-top: clamp(50px, 6vw, 85px) !important; }
.about2 .ab-label { margin: 0 0 28px; font: 500 12px/1 var(--sans); letter-spacing: 0; color: var(--ink); text-transform: none; text-box: trim-both cap alphabetic; }
.about2 .ab-list { margin: 0; padding: 0; list-style: none; }
.about2, .about2 p, .about2 li { font: 400 22px/1.6 var(--serif); color: var(--ink); }
.about2 .ab-bio p { margin: 0 0 1.1em; max-width: 34em; }
.about2 .ab-bio p.ab-small { font-size: 16px; line-height: 1.5; margin-top: 1.4em; }
.about2 .ab-contact-list li:nth-child(2) { margin-bottom: .55em; }
.about2 .ab-contact-list a { text-decoration: none; transition: opacity .2s; }
.about2 .ab-contact-list a:hover { opacity: .55; }
.about2 .ab-years li { padding-left: 85px; text-indent: -85px; margin-bottom: 16px; line-height: 1.5; }
.about2 .ab-years .y { display: inline-block; width: 85px; text-indent: 0; font-variant-numeric: tabular-nums; }
.about2 .ab-clients li { line-height: 2; }
@media (max-width: 900px) {
  .about2 { grid-template-columns: 1fr; }
  .about2 .ab-bio { order: -1; }
  .about2, .about2 p, .about2 li { font-size: 19px; }
  .about2 .ab-years li { padding-left: 64px; text-indent: -64px; }
  .about2 .ab-years .y { width: 64px; }
}
.page.about2 > * { grid-column: auto; min-width: 0; }
@media (max-width: 900px) { .page.about2 > * { grid-column: 1 / -1; } }
/* About: Größen wie im Entwurf (bei 1440 px) – Fließtext 29 px, Überschriften 14 px */
.about2, .about2 p, .about2 li { font-size: round(clamp(21px, 2vw, 29px), 1px); line-height: 1.25; }
.about2 .ab-label { font-size: 14px; margin-bottom: 29px; }
.about2 .ab-bio p { max-width: none; margin-bottom: 1.2em; }
.about2 .ab-bio p.ab-small { font-size: round(clamp(17px, 1.55vw, 22px), 1px); line-height: 1.3; }
.about2 .ab-clients li { line-height: 1.52; }
.about2 .ab-years li { line-height: 1.25; margin-bottom: 16px; }
@media (max-width: 900px) { .about2, .about2 p, .about2 li { font-size: 21px; } }

/* Textmodule: drei Größen – small = Standard (Crimson), medium (Crimson), large (Coconat) */
.txt p.lead { font-size: inherit; line-height: inherit; }
.txt.ts-m p { font: 400 round(clamp(23px, 2vw, 31px), 1px)/1.3 var(--serif); }
.txt.ts-l p { font: 400 round(clamp(34px, 3.36vw, 50px), 1px)/1.15 var(--display); letter-spacing: 0; }
/* About: Inhalt beginnt auf derselben Höhe wie die Kategorien auf Work (gleicher Abstand unter dem Seitentitel) */
@media (min-width: 641px) { .page.about2 { padding-top: 165px !important; } }
/* Suche (und ihre Lightbox): Farbton #000099 */
.search-overlay, .lightbox.is-dark { --search-bg: #000099; --muted: color-mix(in srgb, #fff 62%, #000099); }
/* Suche: alle Schriften weiß auf Blau – kein Grau */
.search-overlay, .lightbox.is-dark { --ink: #fff; --muted: #fff; --lr-ink: #fff; --lr-muted: #fff; color: #fff; }
.search-overlay *, .lightbox.is-dark .lb-bar, .lightbox.is-dark .lb-bar * { color: #fff; }
.search-overlay .pcat, .search-overlay .so-cats .pcat, .search-overlay .lr-cell .cap i, .search-overlay .count, .search-overlay .size,
.search-overlay .fit, .search-overlay .sel-toggle, .search-overlay .seg button, .search-overlay .so-input svg { color: #fff !important; opacity: 1; }
.search-overlay .so-input input::placeholder { color: #fff; opacity: 1; }
/* Ausgewähltes ist unterstrichen bzw. als weiße Fläche mit blauer Schrift erkennbar */
.search-overlay .pcat.is-on { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.search-overlay .seg button.is-on { background: #fff; color: #000099 !important; }
.search-overlay .sel-toggle[aria-pressed="true"] { background: #fff; color: #000099 !important; }
.search-overlay .seg, .search-overlay .fit, .search-overlay .sel-toggle { border-color: #fff; }
.search-overlay .size input[type=range]::-webkit-slider-runnable-track { background: #fff; }
.search-overlay .size input[type=range]::-moz-range-track { background: #fff; }
/* Auswahl in der Suche ohne blaue Schrift: helle Fläche, Schrift bleibt weiß */
.search-overlay .seg button.is-on, .search-overlay .sel-toggle[aria-pressed="true"] { background: rgba(255, 255, 255, .24); color: #fff !important; }
.search-overlay .sel-bar, .search-overlay .sel-bar * { color: #fff !important; }
.search-overlay .sel-bar .sel-download { background: rgba(255, 255, 255, .24); border-color: #fff; }

/* Nacheinander einblenden (app.js: reveal) */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 1s cubic-bezier(.25, .1, .25, 1), transform 1s cubic-bezier(.25, .1, .25, 1); }
.rv.rv-in { opacity: 1; transform: none; }
body.ms-layout .rv { opacity: 1; transform: none; transition: none; }
/* Home: Kacheln im Free grid */
.cats-free { padding: 0 var(--gutter) 14vh; container-type: inline-size; display: block; }
.cats-free .free-canvas { position: relative; }
.cats-free .cat.free-item { position: absolute; }
@media (max-width: 640px) {
  .cats-free .free-canvas { height: auto !important; display: grid; row-gap: 48px; }
  .cats-free .cat.free-item { position: static; width: auto !important; }
}

/* Startseite in Reihen (Layout-Modus Home) */
.home-rows { padding-bottom: 14vh; }
.cats-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 0 var(--gutter); margin-bottom: calc(var(--gutter) + 60px); }
.home-rows .cats-free { padding-bottom: 0; margin-bottom: calc(var(--gutter) + 60px); }
.cats-row .home-empty { aspect-ratio: 4 / 5; }
@media (max-width: 640px) {
  .cats-row { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .cats-row > * { grid-column: 1 / -1 !important; }
  .cats-row .home-empty { display: none; }
}
/* Archiv: kleinere Teaser, sechs pro Reihe (Tablet 4, Handy 3) */
body[data-page="archiv"] .pagebar + .grid4 { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 5vh; }
body[data-page="archiv"] .pagebar + .grid4 .label { font-size: round(.85em, 1px); }
body[data-page="archiv"] .pagebar + .grid4 .cover .t { font-size: round(clamp(14px, 1.05vw, 17px), 1px); }
@media (max-width: 1100px) { body[data-page="archiv"] .pagebar + .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { body[data-page="archiv"] .pagebar + .grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vh 10px; } }
/* Home: Bilder füllen die Kacheln immer (4:5, beschnitten) – auch in Reihen und im Free grid */
.cats-free .cat .media img, .cats-row .cat .media img, .cats .cat .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Unterstreichung nur am Wort, nicht an der hochgestellten Zahl (Kategorien in Work, Archiv und Suche) */
.pcat sup { display: inline-block; text-decoration: none; }

/* Work + About: Seitentitel unter dem Logo ausgeblendet. Desktop: Platz bleibt, damit die Kategorien an derselben Stelle stehen */
@media (min-width: 641px) { body:is([data-page="work"], [data-page="about"]) .pagebar .pb-main .ptitle { visibility: hidden; } }
@media (max-width: 640px) { body:is([data-page="work"], [data-page="about"]) .pagebar .pb-main .ptitle { display: none; } }

/* About mit Video: links Inhalt (scrollt), rechts Video über die halbe Bildschirmbreite (bleibt stehen);
   Navigation weiß auf dem Video. Mobil: zuerst das Video (volle Breite, hinter dem Kopf), darunter der Inhalt. */
.ab-video { background: var(--bg); overflow: hidden; }
.ab-video video { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }   /* Video auf das Grau multipliziert */
body[data-page="about"] .topbar { background: transparent; }
@media (min-width: 641px) {
  .ab-video { position: fixed; top: 0; right: 0; width: 50vw; height: 100vh; height: 100svh; z-index: 0; }
  body[data-page="about"] #app, body[data-page="about"] .site-foot { width: 50vw; }
  body[data-page="about"] .topbar { z-index: 5; }
  body[data-page="about"] .nav a, body[data-page="about"] .nav-search { color: #fff; }
  body[data-page="about"] .page.about2 { grid-template-columns: 1fr; }
  body[data-page="about"] .page.about2 > * { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body[data-page="about"] #app { padding-top: 0; }
  .ab-video { width: 100%; height: min(177.78vw, 100svh); }
  body[data-page="about"] .brand { color: #fff; }
  body[data-page="about"] .nav-burger { color: #fff; }
  body[data-page="about"] .nav-burger span { background: #fff; }
  body[data-page="about"] .pagebar { display: none; }
  body[data-page="about"] .page.about2 { padding-top: calc(2 * var(--gutter)) !important; }
}

/* Imprint: Schrift wie About (Text wie .about2, Überschriften wie .ab-label) */
.legal, .legal p { font: 400 round(clamp(21px, 2vw, 29px), 1px)/1.25 var(--serif); color: var(--ink); }
.legal .kicker { font: 500 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); margin: 2.2em 0 29px; text-box: trim-both cap alphabetic; }
.legal .kicker:first-child { margin-top: 0; }
.legal p { margin: 0 0 .5em; }
@media (min-width: 641px) { body[data-page="impressum"] .page { padding-top: 165px !important; } }
@media (max-width: 900px) { .legal, .legal p { font-size: 21px; } }

/* News: Bild links, daneben Datum + Text (halb so breit wie vorher) */
@media (min-width: 641px) {
  .news-item { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); grid-template-areas: "img date ." "img body ."; grid-template-rows: auto 1fr; align-items: start; column-gap: calc(var(--gutter) * 1.5); row-gap: 12px; }
  .news-item > .date { grid-area: date; }
  .news-item > div { grid-area: body; }
  .news-item > :nth-child(3) { grid-area: img; }
  .news-item > .date br { display: none; }
}

/* Tearsheets: Filter als Dropdown, in Schrift und Größe wie die Kategorien auf Work */
.ts-select { position: relative; display: inline-block; }
.ts-select select { appearance: none; -webkit-appearance: none; background: none; border: 0; border-radius: 0; padding: 0 22px 0 0; margin: 0;
  font: 300 22px/1.2 var(--sans); letter-spacing: -.005em; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ts-select select:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.ts-select::after { content: ""; position: absolute; right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--ink); border-width: 0 1px 1px 0; transform: rotate(45deg); pointer-events: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .ts-select select { font-size: var(--title-size); } }
/* Tearsheets: Geschichten mit mehreren Seiten – Seitenzahl in der Ecke */
.sheet-grid button { position: relative; }
.sheet-grid .ts-n { position: absolute; right: 8px; bottom: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: rgba(21, 21, 21, .78); color: #fff; font: 500 11px/22px var(--sans); text-align: center; pointer-events: none; }

/* News: Bildrahmen (leer = kein Bild; im Bearbeiten-Modus "Add picture") */
.news-pic { margin: 0; position: relative; }
.news-pic img { display: block; width: 100%; height: auto; cursor: zoom-in; }

/* Tearsheets: Dropdown auf Höhe der Work-Kategorien (Großbuchstaben-Oberkante), Bilder beginnen auf derselben Höhe wie bei Work */
@media (min-width: 641px) {
  .ts-select { vertical-align: top; margin-top: -5px; }               /* 5 px = Abstand Zeilenoberkante → Großbuchstaben bei Inter 22 px */
  body[data-page="tearsheets"] .pagebar + .page { padding-top: 48px !important; }
}

/* Imprint: linksbündig wie About (linke Bildschirmhälfte) */
@media (min-width: 901px) { .legal { grid-column: 1 / span 6; } }

/* Projekttexte: Schrift auch am Textfeld selbst (nach dem Bearbeiten steht Text manchmal ohne <p> im Feld) */
.txt { font: 400 round(clamp(19px, 1.5vw, 23px), 1px)/1.4 var(--serif); }
.txt.ts-m { font: 400 round(clamp(23px, 2vw, 31px), 1px)/1.3 var(--serif); }
.txt.ts-l { font: 400 round(clamp(34px, 3.36vw, 50px), 1px)/1.15 var(--display); letter-spacing: 0; }
/* leeres Textfeld (neuer Block, noch nichts geschrieben): auf der Website ausblenden */
body:not(.ms-editing) .module:has(> .txt:only-child:empty) { display: none; }

/* Deaktivierte Projekte und Bilder (nur im Bearbeiten-Modus sichtbar): ausgegraut */
.cover.is-off .frame img, figure[data-off] img { opacity: .28; filter: grayscale(1); }
.cover.is-off .label { opacity: .45; }
.cover.is-off .label .t::after { content: " · inactive"; }
figure[data-off] { position: relative; }
figure[data-off]::after { content: "Hidden"; position: absolute; left: 10px; bottom: 10px; font: 500 11px/1 var(--sans); padding: 5px 8px; border-radius: 6px; background: #151515; color: #fff; pointer-events: none; }
.p-head .off-note { margin: 28px auto 0; width: fit-content; font: 500 13px/1 var(--sans); padding: 8px 12px; border-radius: 6px; background: #151515; color: #fff; }

/* Home: Kacheln beginnen immer auf derselben Höhe wie die Bilder bei Work – unabhängig von Fensterhöhe und -breite.
   Work: Seitenrand + Logo (Großbuchstabenhöhe) + 20 px + Seitentitel (Großbuchstaben) + 165 px + Kategorien (22 px, Großbuchstaben) + 38 px */
@media (min-width: 641px) {
  :root { --work-top: calc(var(--gutter) + var(--logo-size, 26.4px) * .697 + 20px + var(--title-size) * .7275 + 165px + 22px * .7275 + 38px); }
  .home-intro { height: var(--work-top); padding-bottom: 0; }
}
/* Home Desktop: Kachel-Raster beginnt standardmäßig direkt unter dem Logo (20 px wie Logo → Subnavi auf Work) –
   so steht es auf der bisherigen Website. Einstellbar im Design-Fenster ("Home: space logo → tiles"):
   der Regler setzt die Höhe des Kopfbereichs, das Raster darunter verschiebt sich als Ganzes. */
.home-intro { box-sizing: border-box; }
@media (min-width: 641px) { .home-intro { height: auto; padding-bottom: 20px; } }

/* About: Contact + Bio offen, alles Weitere als Akkordeon (Clients, Awards, Exhibitions, Books, Catalogues, Lectures) */
.about2 .ab-accs { display: block; }
.about2 .ab-acc { border-top: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.about2 .ab-acc:last-child { border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
.about2 .ab-acc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; cursor: pointer; }
.about2 .ab-acc > summary::-webkit-details-marker { display: none; }
.about2 .ab-acc > summary .ab-label { margin: 0; }
.about2 .ab-acc > summary i { position: relative; width: 13px; height: 13px; flex: none; }
.about2 .ab-acc > summary i::before, .about2 .ab-acc > summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--ink); transition: transform .25s var(--ease); }
.about2 .ab-acc > summary i::after { transform: rotate(90deg); }
.about2 .ab-acc[open] > summary i::after { transform: rotate(0deg); }
.about2 .ab-acc > summary:hover .ab-label { opacity: .55; }
.about2 .ab-acc-body { padding: 4px 0 34px; }
.about2 .ab-sub { margin: 0 0 18px; font: 500 14px/1 var(--sans); color: var(--ink); text-box: trim-both cap alphabetic; }
.about2 .ab-sub ~ .ab-sub { margin-top: 36px; }

/* Mobil WORK (wie Desktop): Kategorien sitzen mit Abstand unter dem Logo direkt über den Kacheln;
   Schrift so klein, dass die Filterleiste in zwei Zeilen passt */
@media (max-width: 640px) {
  body[data-page="work"] .pagebar .pb-main .pcats { display: block; margin-top: 72px; line-height: 22px; }
  body[data-page="work"] .pagebar .pb-main .pcat { font-size: 14px; line-height: 22px; margin-right: 10px; }
  body[data-page="work"] .pagebar:has(.pcats) + .grid4 { padding-top: 21px; }
  body[data-page="work"] .pagebar .pb-main .pcat { font-weight: 400; }
  body[data-page="work"] .pagebar .pb-main .pcat sup { font-size: 8px; margin-left: 2px; }
}

/* Design-Fenster: einzelnen Wert auf Standard zurücksetzen */
.ms-panel .ms-rs { margin-left: 6px; padding: 0 4px; border: 0; background: none; font: inherit; color: inherit; opacity: .55; cursor: pointer; }
.ms-panel .ms-rs:hover { opacity: 1; }

/* Search mobil: Kategorien wie die Filterleiste auf WORK (Inter 400, 14 px, Zahlen 8 px); Close-Icon mit Abstand zum Rand */
@media (max-width: 640px) {
  .so-cats { margin-top: 18px; line-height: 22px; font-size: 14px; }
  .so-cats .pcat { font: 400 14px/22px var(--sans); letter-spacing: 0; margin-right: 10px; text-underline-offset: 4px; }
  .so-cats .pcat sup { font-size: 8px; margin-left: 2px; }
  .so-row .tools { margin-top: 14px; }
  .so-close { margin-right: 8px; }
}

/* Mobil: "Menu"/"Close" nie größer als das Logo – Großbuchstabenhöhe Inter (.7275) = Coconat (.70) */
@media (max-width: 640px) {
  :root { --logo-size: 24px; }
  .nav-burger, .mm-close { font-size: calc(var(--logo-size) * .962); }
}

/* Mobil: keine Zahlen (Index) hinter den Kategorien – Work, Archive, Suche */
@media (max-width: 640px) {
  .pagebar .pcat sup, .pagebar .pcat .count, .so-cats .pcat sup { display: none; }
}

/* Home mobil: erste Kachel beginnt auf Höhe der Großbuchstaben von "All" auf Work (bei 16 px Rand: 125,6 px) */
@media (max-width: 640px) {
  .home-intro { height: calc(var(--gutter) + 109.6px); padding-bottom: 0; box-sizing: border-box; }
}

/* Projektseite mobil: Dachzeile (Kategorie) 18 px statt 22 px */
@media (max-width: 640px) { .p-head .kicker, .p-head a.kicker { font-size: 18px; } }

/* Menü mobil: Oberkante "Work" auf Höhe der Großbuchstaben von "All" auf Work (bei 16 px Rand: 125,6 px) */
@media (max-width: 640px) { .mobile-menu:not([hidden]) { padding-top: calc(var(--gutter) + 100.6px); } }

/* Imprint: Credit mit Link (unterstrichen wie die übrigen Links) */
.legal .credit { margin-top: 1em; }
.legal .credit a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal .credit a:hover { opacity: .55; }

/* Imprint: keine Abschnittstitel, alles Crimson in einer Größe; Gruppen durch Leerzeile getrennt, deutsche Fassung darunter */
.legal.lg-flat .lg-group { margin: 0 0 1.25em; }
.legal.lg-flat .lg-group p { margin: 0; }
.legal.lg-flat .lg-prose p + p { margin-top: .6em; }
.legal.lg-flat .lg-sep { height: 2.5em; }
.legal.lg-flat a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal.lg-flat a:hover { opacity: .55; }

/* About-Akkordeon: Titel in Schrift und Größe des Fließtexts (Crimson), keine Linien */
.about2 .ab-acc, .about2 .ab-acc:last-child { border: 0; }
.about2 .ab-acc > summary { padding: 6px 0; }
.about2 .ab-acc > summary .ab-label { font: 400 round(clamp(21px, 2vw, 29px), 1px)/1.25 var(--serif); text-box: none; }
.about2 .ab-acc-body { padding: 14px 0 30px; }
@media (max-width: 900px) { .about2 .ab-acc > summary .ab-label { font-size: 21px; } }

/* Home-Teaser: Einblenden 1 s, nacheinander im Abstand von 1 s, von links nach rechts (app.js) */
.rv.rv-slow { transition-duration: 1s, 1s; }

/* Home mobil: zwischen allen Teasern derselbe Abstand (48 px) – innerhalb einer Reihe wie zwischen den Reihen,
   eigene Reihenabstände aus dem Layout-Modus gelten nur am Desktop */
@media (max-width: 640px) {
  .cats { row-gap: 48px; }
  .home-rows .cats-row, .home-rows .cats-free { margin-bottom: 48px !important; }
  .home-rows > :last-child { margin-bottom: 0 !important; }
}

/* Audio Visual Presentation: Button unter dem Titel, Vollbild-Diashow */
.avp-btn { display: inline-flex; align-items: center; gap: 10px; margin: 40px auto 0; padding: 12px 20px 12px 16px; border: 1px solid currentColor; border-radius: 999px;
  background: none; color: var(--ink); font: 400 14px/1 var(--sans); letter-spacing: .01em; cursor: pointer; transition: background-color .2s, color .2s; }
.avp-btn svg { width: 12px; height: 12px; fill: currentColor; }
.avp-btn:hover { background: #000; color: var(--bg); }
.avp { position: fixed; inset: 0; z-index: 400; background: var(--bg); color: #000; animation: so-in .5s ease; }
.avp-img { position: absolute; inset: 56px 24px 72px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 1.2s ease; }
.avp-img.is-on { opacity: 1; }
.avp-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.avp-x { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: #000; cursor: pointer; opacity: .75; }
.avp-x:hover { opacity: 1; }
.avp-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.avp-ui { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 16px; font: 400 12px/1 var(--sans); color: rgba(0,0,0,.7); }
.avp-pp { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; color: #000; cursor: pointer; padding: 0; }
.avp-ic { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.avp.is-paused .avp-ic { width: 0; height: 0; border: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.avp-n { min-width: 48px; font-variant-numeric: tabular-nums; }
.avp-bar { flex: 1; height: 1px; background: rgba(0,0,0,.2); }
.avp-bar i { display: block; height: 100%; width: 0; background: #000; transition: width .6s ease; }
.avp-end { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); display: none; gap: 12px; }
.avp.is-end .avp-end { display: flex; }
.avp.is-end .avp-ui { opacity: 0; }
.avp-end button { padding: 12px 20px; border: 1px solid rgba(0,0,0,.6); border-radius: 999px; background: none; color: #000; font: 400 14px/1 var(--sans); cursor: pointer; }
.avp-end button:hover { background: #000; color: var(--bg); }
@media (max-width: 640px) { .avp-img { inset: 56px 0 64px; } .avp-btn { margin-top: 32px; } }

/* Audio Visual Presentation: Ton-Regler (Stumm + Lautstärke) */
.avp-mute { width: 28px; height: 28px; display: grid; place-items: center; background: none; border: 0; color: #000; cursor: pointer; padding: 0; }
.avp-mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.avp-mute .spk { fill: currentColor; stroke: none; }
.avp-mute .off, .avp.is-muted .avp-mute .wav { display: none; }
.avp.is-muted .avp-mute .off { display: inline; }
.avp-vol { -webkit-appearance: none; appearance: none; width: 96px; height: 16px; background: none; cursor: pointer; --v: 100%; }
.avp-vol::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(to right, #000 var(--v), rgba(0,0,0,.25) var(--v)); }
.avp-vol::-moz-range-track { height: 1px; background: rgba(0,0,0,.25); }
.avp-vol::-moz-range-progress { height: 1px; background: #000; }
.avp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; margin-top: -5px; border-radius: 50%; background: #000; border: 0; }
.avp-vol::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #000; border: 0; }
.avp.is-muted .avp-vol { opacity: .4; }
@media (max-width: 640px) { .avp-vol { display: none; } }   /* Handy: Lautstärke über die Gerätetasten, hier nur Stumm */

/* Audio Visual Presentation: heller Hintergrund wie die Seite, Bedienelemente blenden sich aus */
.avp { background: var(--bg); color: #000; }
.avp-x, .avp-pp, .avp-mute { color: #000; }
.avp-ui { color: color-mix(in srgb, #000 65%, transparent); }
.avp-bar { background: color-mix(in srgb, #000 18%, transparent); }
.avp-bar i { background: #000; }
.avp-vol::-webkit-slider-runnable-track { background: linear-gradient(to right, #000 var(--v), color-mix(in srgb, #000 20%, transparent) var(--v)); }
.avp-vol::-moz-range-track { background: color-mix(in srgb, #000 20%, transparent); }
.avp-vol::-moz-range-progress { background: #000; }
.avp-vol::-webkit-slider-thumb { background: #000; }
.avp-vol::-moz-range-thumb { background: #000; }
.avp-end button { border-color: #000; background: color-mix(in srgb, var(--bg) 70%, transparent); color: #000; }
.avp-end button:hover { background: #000; color: var(--bg); }
.avp-ui, .avp-x { transition: opacity .6s ease; }
.avp.is-idle { cursor: none; }
.avp.is-idle .avp-ui, .avp.is-idle .avp-x { opacity: 0; pointer-events: none; }
/* Präsentation: alle Bedienelemente voll schwarz (keine halbtransparenten Grautöne) */
.avp-x { opacity: 1; }
.avp-ui, .avp-n { color: #000; }

/* Logos (Dateiname mit "logo", "sponsor" …): auf dem Grau multipliziert statt weißer Kasten */
img[data-logo], .avp-logos img { mix-blend-mode: multiply; filter: brightness(1.06) contrast(1.08); }   /* fast weißer Grund → weiß, damit kein Kasten bleibt */
/* Präsentation: Abspann */
.avp-credits { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; }
.avp.is-end .avp-credits { opacity: 1; }
.avp.is-end .avp-img { opacity: 0; }
.avp-brand { position: absolute; top: var(--gutter); left: var(--gutter); font: 400 var(--logo-size, 26.4px)/1 var(--display); letter-spacing: -.005em; color: #000; }
.avp-ct { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; color: #000; width: min(90vw, 1100px); }
.avp-kick { font: 400 22px/1 var(--display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.avp-title { font: 400 clamp(44px, 7vw, 110px)/1 var(--display); letter-spacing: -.01em; }
.avp-facts { font: 400 13px/1 var(--sans); letter-spacing: .02em; }
.avp-facts i { font-style: normal; margin: 0 .7em; }
.avp-cred { font: 300 14px/1.4 var(--sans); max-width: 40em; }
.avp-logos { position: absolute; right: var(--gutter); bottom: var(--gutter); display: flex; align-items: center; gap: 14px; }
.avp-logos img { height: calc(var(--logo-size, 26.4px) * .6); width: auto; display: block; }
.avp-end { bottom: auto; top: calc(50% + 150px); }
@media (max-width: 640px) { .avp-kick { font-size: 18px; } .avp-ct { gap: 20px; } .avp-end { top: calc(50% + 110px); } }

/* Präsentation: Zeitleiste anklickbar (größere Trefferfläche, Linie bleibt 1 px) */
.avp-bar { position: relative; height: 1px; cursor: pointer; touch-action: none; }
.avp-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.avp-bar:hover { height: 3px; }
.avp-bar i { transition: width .25s ease; }

/* Home: Kategorie ohne Projekte (z. B. neu angelegt) – im Standard-Raster nicht zeigen, im Bearbeiten-Modus als leere Kachel */
body:not(.ms-editing) .cats > .cat.is-empty { display: none; }
.cat.is-empty .media { background: color-mix(in srgb, var(--ink) 6%, transparent); aspect-ratio: 4 / 5; }

/* ===== Showreels (Seite social-media, Bearbeiten-Modus) ===== */
.sr-page .sr-wait { padding: 20vh var(--gutter); font: 400 16px/1.4 var(--sans); }
.sr-root { padding: calc(var(--gutter) + 70px) var(--gutter) 140px; font: 400 14px/1.4 var(--sans); color: var(--ink); }
.sr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 28px; }
.sr-head h1 { font: 400 34px/1 var(--display); margin: 0 18px 0 0; }
.sr-root button, .sr-root select, .sr-root input { font: inherit; color: inherit; }
.sr-root button { padding: 8px 12px; border: 1px solid var(--ink); border-radius: 6px; background: transparent; cursor: pointer; }
.sr-root button:hover:not(:disabled) { background: var(--ink); color: var(--bg); }
.sr-root button:disabled { opacity: .35; cursor: default; }
.sr-root select, .sr-root input[type=text], .sr-root input[type=number], .sr-root input[type=search] { padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 6px; background: color-mix(in srgb, #fff 55%, transparent); min-width: 0; }
.sr-save.is-dirty { background: var(--ink) !important; color: var(--bg) !important; }
.sr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 40px; align-items: start; }
.sr-set { display: grid; gap: 14px; }
.sr-set label { display: grid; gap: 5px; } .sr-set label > span { font-size: 12px; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.sr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sr-add { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.sr-blocks { display: grid; gap: 14px; }
.sr-empty { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.sr-block { border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 10px; padding: 12px; display: grid; gap: 10px; background: color-mix(in srgb, #fff 30%, transparent); }
.sr-bh { display: flex; align-items: baseline; gap: 10px; } .sr-bh small { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.sr-bt { margin-left: auto; display: flex; gap: 6px; } .sr-bt button { padding: 4px 9px; }
.sr-pics { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-pics figure { margin: 0; position: relative; width: 78px; cursor: pointer; }
.sr-pics img { width: 78px; height: 78px; object-fit: cover; display: block; border-radius: 4px; }
.sr-pics figure.is-off img { opacity: .25; filter: grayscale(1); }
.sr-pics figure span { display: flex; justify-content: space-between; margin-top: 3px; }
.sr-pics figure span button { padding: 0 7px; font-size: 12px; line-height: 18px; }
.sr-txt { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; gap: 8px; }
.sr-prev { position: sticky; top: 90px; display: grid; gap: 12px; }
.sr-stage { display: flex; justify-content: center; background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 10px; padding: 16px; }
.sr-cv { max-width: 100%; height: auto; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.sr-ctl { display: flex; align-items: center; gap: 12px; } .sr-ctl input { flex: 1; } .sr-ctl span { font-size: 12px; white-space: nowrap; }
.sr-main { width: 100%; padding: 14px !important; background: var(--ink) !important; color: var(--bg) !important; font-size: 15px !important; }
.sr-status { min-height: 1.4em; font-size: 13px; margin: 8px 0 0; }
.sr-modal { position: fixed; inset: 0; z-index: 320; background: rgba(0,0,0,.35); display: grid; place-items: center; padding: 24px; }
.sr-mbox { width: min(1100px, 100%); max-height: 86vh; background: #f4f4f2; color: #151515; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; font: 400 14px/1.3 Inter, sans-serif; }
.sr-mbox header { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid #ddd; }
.sr-mbox h3 { margin: 0; font-weight: 500; font-size: 15px; } .sr-mbox input { flex: 1; padding: 9px 12px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
.sr-mbox header button { padding: 8px 14px; border: 0; border-radius: 6px; background: #151515; color: #fff; cursor: pointer; font: inherit; }
.sr-mgrid { overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.sr-mi { display: grid; gap: 4px; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.sr-mi img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; background: #ddd; }
.sr-mi small { color: #777; font-size: 12px; } .sr-mi:hover img { opacity: .8; }
.sr-mi.is-added img { outline: 3px solid #151515; outline-offset: -3px; opacity: .6; }
@media (max-width: 900px) { .sr-cols { grid-template-columns: 1fr; } .sr-prev { position: static; } .sr-txt { grid-template-columns: 1fr; } }

.sr-root [hidden] { display: none !important; }

/* Showreels: dunkle Arbeitsfläche (Seite social-media) – Bilder und Vorschau wirken wie später auf dem Handy */
body[data-page="social-media"] { --bg: #141414 !important; --ink: #ededeb; --muted: #9a9a97; --line: #333; background: var(--bg); color: var(--ink); }
body[data-page="social-media"] .brand, body[data-page="social-media"] .nav a, body[data-page="social-media"] .nav-burger { color: var(--ink); }
body[data-page="social-media"] .site-foot { display: none; }
.sr-root select, .sr-root input[type=text], .sr-root input[type=number], .sr-root input[type=search] { background: #1f1f1f; border-color: #3a3a3a; color: var(--ink); }
.sr-root select option { background: #1f1f1f; color: var(--ink); }
.sr-block { background: #1b1b1b; border-color: #2e2e2e; }
.sr-stage { background: #1b1b1b; }
.sr-cv { box-shadow: 0 10px 40px rgba(0,0,0,.6); }
.sr-main { background: var(--ink) !important; color: #141414 !important; }
.sr-save.is-dirty { background: var(--ink) !important; color: #141414 !important; }
.sr-root button:hover:not(:disabled) { background: var(--ink); color: #141414; }
.sr-root .sr-scrub { accent-color: var(--ink); }
.sr-mbox { background: #1b1b1b; color: #ededeb; }
.sr-mbox header { border-bottom-color: #2e2e2e; }
.sr-mbox input { background: #262626; border-color: #3a3a3a; color: #ededeb; }
.sr-mbox header button { background: #ededeb; color: #141414; }
.sr-mi img { background: #262626; } .sr-mi small { color: #9a9a97; }
.sr-mi.is-added img { outline-color: #ededeb; }

.sr-zones { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sr-zones input { accent-color: #ff4040; width: 16px; height: 16px; }

/* Kategorien (Work, Archive, Suche): keine Zahlen (Zähler) – auch am Desktop */
.pagebar .pcat sup, .pagebar .pcat .count, .so-cats .pcat sup { display: none; }

/* Nach-oben-Button (2026-11-13): unten rechts in der Ecke, direkt über der Link-Zeile des Footers; beim Darüberfahren blau (Corporate Design) */
.to-top { bottom: calc(var(--foot-nav-h, 58px) + 10px); }
.to-top:hover, .to-top:focus-visible { background: #1f3fd6; color: #fff; }

/* Contact-Seite (2026-11-13): Kontaktangaben aus About, darunter Instagram (Abstand wie zwischen Telefon und Ort) */
.contact-page { row-gap: 0; }
.contact-insta { grid-column: 1 / -1; margin: 1.2em 0 0; font: 400 round(clamp(22px, 2.2vw, 34px), 1px)/1.3 var(--display); letter-spacing: -.01em; }
.contact-insta a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; transition: opacity .2s; }
.contact-insta a:hover { opacity: .55; }

/* Footer-Text über Marzena: etwas mehr Zeilenabstand (2026-11-13, vorher 1.15) */
.site-foot .foot-about { line-height: 1.3; }