/* Entwicklung page v2. Shared tokens and blocks come from ../css/site.css; the Umweg, Kontor and Arsenal scenes follow below the new parts. */

/* ---------- Hero: Kontor and Arsenal take turns in the window ---------- */
.dv-hero { --hero-fit: 13.2; --hero-fit-m: 6.6; --window-bg: var(--creme); }
.slide { position: absolute; inset: 0; display: grid; place-items: center; }
.slide--creme { background: var(--creme); }
.slide--gelb { background: var(--gelb); }
.slide--rosa { background: var(--rosa); }
.js .slide:not(.is-top) { clip-path: circle(0 at 50% 50%); }
.slide .browser { position: relative; }
.slide__browser { height: 80cqh; aspect-ratio: 1920 / 1222; }
.slide--rosa .slide__browser { transform: translateX(-9cqh); }
.slide__phone { position: absolute !important; right: calc(50% - 64cqh); bottom: 7cqh; height: 70cqh; aspect-ratio: 780 / 1760; }
.slide__phone .browser__bar { font-size: 9px; }
/* Wide screens: the screen is large and runs out of the bottom of the band, like a product seen through a window. */
@media (min-width: 641px) {
  .slide { place-items: start center; }
  .slide__browser { width: min(62cqw, 260cqh); height: auto; margin-top: 13cqh; }
  .slide--rosa .slide__browser { transform: translateX(-7cqw); }
  .slide__phone { right: calc(50% - 38cqw); bottom: auto; top: 22cqh; height: 118cqh; }
}

/* ---------- 01 Nach Maß ---------- */
/* The occasions on a roller (a nod to the Zählwerk): one sentence in the window at a time, its neighbours thin and fading
   above and below. Static (no JS, reduced motion, tablet) the four stand one under the other; the phone stacks them as cards. */
.roll { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: var(--space-7); }
.roll__side { grid-column: 1 / 4; display: grid; align-content: start; gap: var(--space-2); }
.roll__kicker { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.roll__count { display: none; font-size: clamp(2.5rem, 1.4rem + 2.4vw, 4rem); line-height: 1; font-weight: 250; letter-spacing: -0.04em; }
.roll__of { color: var(--muted); }
.roll__bar { display: none; position: relative; width: min(100%, 220px); height: 2px; background: var(--line); }
.roll__fill { position: absolute; inset: 0; background: var(--fg); transform: scaleX(var(--roll, 0)); transform-origin: 0 50%; }
.roll__items { grid-column: 4 / 13; display: grid; gap: var(--space-6); }
.roll__item { --size: clamp(2.5rem, 0.9rem + 4.4vw, 6.25rem); }
.roll__tab { display: none; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; }
.roll__title { font-size: var(--size); line-height: 0.98; font-weight: 250; letter-spacing: -0.04em; text-wrap: balance; }
.roll__title em { font-weight: 750; }
.roll__text { max-width: 40ch; margin-top: var(--space-2); color: var(--muted); text-wrap: pretty; }
/* Live (desktop with motion): the block is pinned, items sit on a drum; --d is each item's distance from the window centre. */
.roll.is-live { height: calc(100svh - var(--nav-h)); align-items: center; margin-top: var(--space-5); }
.roll.is-live .roll__count, .roll.is-live .roll__bar { display: block; }
.roll.is-live .roll__items { position: relative; display: block; height: 100%; overflow: hidden; mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
.roll.is-live .roll__item { position: absolute; left: 0; right: 0; top: 50%; font-size: var(--size); transform: translateY(calc(var(--d, 0) * 2.1em - 0.5em)); will-change: transform; }
.roll.is-live .roll__title { font-size: 1em; white-space: nowrap; font-weight: var(--w, 250); opacity: var(--o, 1); }
.roll.is-live .roll__title em { font-weight: calc(var(--w, 250) + 300); }
.roll.is-live .roll__text { position: absolute; top: calc(100% + 0.18em); font-size: var(--t-body); opacity: var(--to, 0); transform: translateY(calc((1 - var(--to, 0)) * 12px)); }
.dv-honest { margin-top: var(--space-7); max-width: 34ch; font-size: clamp(1.75rem, 1rem + 2.1vw, 3rem); line-height: 1.16; font-weight: 300; letter-spacing: -0.02em; text-wrap: pretty; }

/* ---------- 02 Kontor ---------- */
.dv-features { max-width: 38ch; margin-top: var(--space-5); }
/* A product door: the product name in poster size, the way to its own page. */
.product-door { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: var(--space-4); margin-top: var(--space-7); padding: var(--space-4) 0; border-top: 1px solid var(--fg); border-bottom: 1px solid var(--fg); container-type: inline-size; }
.product-door__label { grid-column: 1 / -1; font-size: var(--t-label); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--muted); }
.product-door__word { display: inline-flex; align-items: center; gap: 0.18em; font-size: calc(100cqw / 6.2); line-height: 0.9; font-weight: 200; letter-spacing: -0.045em; transition: font-weight var(--dur-slow-out) var(--ease-exit); }
.product-door__word .icon { width: 0.5em; height: 0.5em; transition: transform var(--dur-fast-out) var(--ease-exit); }
.product-door:hover .product-door__word, .product-door:focus-visible .product-door__word { font-weight: 750; transition: font-weight var(--dur-slow) var(--ease-enter); }
.product-door:hover .product-door__word .icon { transform: translateX(0.08em); transition: transform var(--dur-fast) var(--ease-enter); }
.product-door__text { align-self: end; justify-self: end; max-width: 26ch; text-align: right; color: var(--muted); }

/* ---------- 03 Arsenal: the six commands as word cards ---------- */
.spells { margin-top: var(--space-8); }
.spells__title { margin-bottom: var(--space-5); font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.04; font-weight: 300; letter-spacing: -0.025em; }
.spells__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.spell { display: grid; align-content: space-between; gap: var(--space-4); min-height: 240px; padding: var(--space-4); border-radius: var(--card); background: var(--nacht); color: var(--creme); container-type: inline-size; transition: transform var(--dur-moderate-out) var(--ease-exit); }
.spell:hover { transform: translateY(-4px); transition: transform var(--dur-moderate) var(--ease-enter); }
.spell__name { font-size: calc(100cqw / 4.6); line-height: 0.9; font-weight: 250; letter-spacing: -0.04em; color: var(--creme); transition: font-weight var(--dur-slow-out) var(--ease-exit); }
.spell__name::before { content: "/"; color: var(--gelb); font-weight: 300; margin-right: 0.04em; }
.spell:hover .spell__name { font-weight: 750; transition: font-weight var(--dur-slow) var(--ease-enter); }
.spell__text { font-size: var(--t-small); color: color-mix(in oklab, var(--creme) 78%, var(--nacht)); max-width: 34ch; }

/* ---------- 04 Bauweise ---------- */
.dv-scope { max-width: 38ch; font-size: clamp(1.625rem, 0.95rem + 1.85vw, 2.75rem); line-height: 1.2; }
/* Four colour plates in the palette; each opens as a circle out of its label dot when it enters (JS, once). */
.tenets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--space-8); }
.tenet { display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); min-height: 400px; padding: clamp(32px, 3.4vw, 56px); border-radius: var(--card); background: var(--bg); color: var(--fg); }
.tenet__mark { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tenet__mark::before { content: ""; width: 8px; height: 8px; border-radius: var(--round); background: currentColor; }
.tenet__title { align-self: end; font-size: clamp(2.25rem, 1.1rem + 2.6vw, 4.25rem); line-height: 0.98; font-weight: 250; letter-spacing: -0.035em; text-wrap: balance; }
.tenet__title em { font-weight: 750; }
.tenet__text { max-width: 44ch; color: var(--muted); text-wrap: pretty; }
.dv-ki { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-4); margin-top: var(--space-8); }
.dv-ki__lead { grid-column: 1 / 9; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.375rem); line-height: 1.22; font-weight: 300; letter-spacing: -0.015em; text-wrap: pretty; }
.dv-ki__side { grid-column: 9 / 13; align-self: end; color: var(--muted); }
.dv-ki__side strong { display: block; margin-bottom: 4px; color: var(--fg); font-weight: 600; }

/* ---------- 05 Betreuung: two price cards in their own colours ---------- */
.care-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.care-card { display: grid; grid-template-rows: auto 1fr auto auto; gap: var(--space-2); min-height: 440px; padding: clamp(32px, 3.4vw, 56px); border-radius: var(--card); background: var(--bg); color: var(--fg); }
.care-card__count { font-size: var(--t-small); font-weight: 600; }
.care-card__name { align-self: end; font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: 1; font-weight: 300; letter-spacing: -0.03em; }
.care-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3em; font-size: clamp(3.5rem, 7.2vw, 7rem); line-height: 0.9; font-weight: 750; letter-spacing: -0.05em; }
.care-card__unit { font-size: var(--t-l); font-weight: 300; letter-spacing: 0; color: var(--muted); }
.care-card__text { max-width: 46ch; color: var(--muted); }


.dv-close { --close-fit: 11.6; --close-fit-m: 7.2; }
.dv-close-actions { align-items: end; }
.dv-close-website { display: grid; gap: var(--space-1); justify-items: start; }

@media (max-width: 1080px) {
  .dv-ki__lead, .dv-ki__side { grid-column: 1 / -1; }
  .spells__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roll__side, .roll__items { grid-column: 1 / -1; }
  .roll__items { margin-top: var(--space-4); }
}
@media (max-width: 640px) {
  .slide__browser { height: 74cqh; }
  .slide--rosa .slide__browser { transform: translateX(-12cqh); }
  .slide__phone { right: 4cqh; height: 78cqh; }
  .dv-honest { font-size: 1.625rem; }
  .product-door { grid-template-columns: 1fr; margin-top: var(--space-6); }
  .product-door__word { font-size: calc(100cqw / 4.4); }
  .product-door__text { justify-self: start; text-align: left; margin-top: var(--space-2); }
  .spells__cards { grid-template-columns: 1fr; gap: var(--space-2); }
  .spell { position: sticky; top: calc(var(--nav-h) + 8px + var(--i, 0) * 56px); min-height: 200px; padding: var(--space-3); box-shadow: 0 -1px 0 color-mix(in oklab, var(--rosa) 40%, transparent); }
  .spell:nth-child(2) { --i: 1; } .spell:nth-child(3) { --i: 2; } .spell:nth-child(4) { --i: 3; } .spell:nth-child(5) { --i: 4; } .spell:nth-child(6) { --i: 5; }
  .spell__name { font-size: 2.5rem; }
  .dv-scope { font-size: 1.5rem; }
  /* Phone: occasions and plates pile up as index cards whose number stays readable as a tab. */
  .roll__items { gap: var(--space-2); }
  .roll__item { --size: 2.375rem; position: sticky; top: calc(var(--nav-h) + 8px + var(--i, 0) * 52px); padding: var(--space-3); border-radius: var(--card); background: var(--creme); box-shadow: 0 -1px 0 color-mix(in oklab, var(--nacht) 16%, transparent); }
  .roll__tab { display: block; margin-bottom: var(--space-2); }
  .tenets { grid-template-columns: 1fr; gap: var(--space-2); }
  .tenet { position: sticky; top: calc(var(--nav-h) + 8px + var(--i, 0) * 52px); min-height: 0; gap: var(--space-3); padding: var(--space-4) var(--space-3); box-shadow: 0 -1px 0 color-mix(in oklab, var(--nacht) 30%, transparent); }
  .tenet:nth-child(2) { --i: 1; } .tenet:nth-child(3) { --i: 2; } .tenet:nth-child(4) { --i: 3; }
  .tenet__title { font-size: 2.25rem; }
  .care-cards { grid-template-columns: 1fr; gap: var(--space-2); }
  .care-card { min-height: 0; padding: var(--space-4) var(--space-3); }
  .care-card__price { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .spell, .spell__name, .product-door__word { transition: none; }
}


/* Small marker for example data and concepts ("Beispiel", "Beispieldaten"). */
.dv-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 12px; border: 1px solid currentColor; border-radius: var(--round); font-size: var(--t-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }

/* ---------- 01 Der Umweg ---------- */
.umweg { margin: 0 0 var(--space-8); }
.umweg__wrap { position: relative; display: grid; grid-template-rows: auto 1fr auto; min-height: calc(100svh - var(--nav-h)); padding-top: var(--space-5); padding-bottom: var(--space-5); border-top: 1px solid var(--line); }
.umweg__head { display: flex; align-items: baseline; gap: var(--space-3); }
.umweg__title { font-size: var(--t-l); font-weight: 400; letter-spacing: -0.01em; line-height: 1.25; }
.umweg__stage { position: relative; align-self: center; padding: clamp(120px, 18svh, 200px) 0 var(--space-5); }
html:not(.js) .umweg__lines, html:not(.js) .umweg__toolname { display: none; }
.umweg__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.umweg__detour { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 8; }
.umweg__tool { fill: none; stroke: var(--blau); stroke-width: 3.2; stroke-linecap: round; }
.umweg__dot { fill: var(--blau); }
.umweg__stations { display: grid; grid-template-columns: minmax(0, 5.4fr) minmax(0, 5.6fr) minmax(0, 6.6fr) minmax(0, 7.6fr); column-gap: var(--gap); position: relative; }
.umweg__station { display: grid; grid-template-rows: auto auto auto; row-gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.umweg__num { font-size: var(--t-label); font-weight: 500; color: var(--muted); letter-spacing: 0.08em; }
.umweg__word { font-size: clamp(2.5rem, 5.5cqw, 6.25rem); line-height: 0.95; letter-spacing: -0.04em; font-weight: 300; white-space: nowrap; }
.umweg__note { font-size: var(--t-small); color: var(--muted); }
/* End state (no JS, reduced motion, after the scene): the two hand steps thin out, the ends carry weight. */
.umweg__word { position: relative; justify-self: start; }
.umweg__station--drop .umweg__word { font-weight: 100; opacity: 0.5; }
/* The strike: a line through the hand steps, drawn from the left (custom property --strike from 0 to 1). */
.umweg__station--drop .umweg__word::after { content: ""; position: absolute; left: -0.04em; right: -0.04em; top: 54%; height: 0.045em; min-height: 2px; background: currentColor; transform: scaleX(var(--strike, 1)); transform-origin: 0 50%; }
.umweg__station--keep .umweg__word { font-weight: 700; }
.umweg__toolname { position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); font-size: var(--t-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blau); white-space: nowrap; }
.umweg__toolname span { display: inline-block; padding: 6px 14px; border-radius: var(--round); background: var(--creme); }
.umweg__captions { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.umweg__caption { max-width: 48ch; font-size: var(--t-body); color: var(--muted); text-wrap: pretty; }
.umweg__caption strong { color: var(--fg); font-weight: 600; }
.umweg__caption--before { grid-column: 1 / 6; }
.umweg__caption--after { grid-column: 7 / 12; }


/* ---------- 02 Kontor: sneak peek ---------- */
.peek { margin-bottom: var(--space-7); }
.peek__wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; min-height: calc(100svh - var(--nav-h)); padding-block: var(--space-4); }
.peek__steps { grid-column: 1 / 5; display: grid; border-top: 1px solid var(--line); }
.peek__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: var(--space-1);
  row-gap: var(--space-1);
  padding: var(--space-3) 0 var(--space-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--muted);
  transition: color var(--dur-fast-out) linear;
}
.peek__step:hover { color: var(--fg); }
.peek__step.is-active { color: var(--fg); }
.peek__dot { position: absolute; left: -22px; top: calc(var(--space-3) + 0.55em); width: 10px; height: 10px; border-radius: var(--round); background: var(--accent); transform: scale(0); transition: transform var(--dur-fast-out) var(--ease-exit); }
.peek__step.is-active .peek__dot { transform: scale(1); transition: transform var(--dur-moderate) var(--ease-enter); }
.peek__num { grid-column: 1; font-size: var(--t-label); font-weight: 500; padding-top: 0.45em; }
.peek__name { grid-column: 2; font-size: var(--t-xl); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; }
.peek__step.is-active .peek__name { font-weight: 600; }
.peek__text { grid-column: 2; font-size: var(--t-small); line-height: 1.5; max-width: 40ch; text-wrap: pretty; }
.peek__figure { grid-column: 5 / 13; }
.peek__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #f3f1ec; box-shadow: 0 0 0 1px color-mix(in oklab, var(--creme) 40%, var(--blau)); }
.peek__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.peek__img.is-active, .peek__img.is-entering { visibility: visible; }
.peek__img.is-entering { z-index: 2; }
html:not(.js) .peek__img:first-of-type { visibility: visible; }
.peek__ring { position: absolute; z-index: 3; left: 0; top: 0; width: 100px; height: 100px; border: 3px solid var(--koralle); border-radius: var(--round); pointer-events: none; opacity: 0; }
.peek__mobile-text { display: none; }
.peek__caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--t-small); color: var(--muted); }


/* ---------- 03 Arsenal: gallery peek ---------- */
.gallery-peek { margin-bottom: var(--space-7); }
.gallery-peek__bar { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: var(--round); font-size: var(--t-small); font-weight: 500; transition: border-color var(--dur-fast-out) var(--ease-exit); }
.chip .tnum { font-size: var(--t-label); color: var(--muted); }
.chip:hover { border-color: var(--fg); transition: border-color var(--dur-fast) var(--ease-enter); }
.chip.is-active { background: var(--nacht); border-color: var(--nacht); color: var(--rosa); }
.chip.is-active .tnum { color: color-mix(in oklab, var(--rosa) 70%, var(--nacht)); }
.gallery-peek__figure { position: relative; }
.gallery-peek__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0b0d12; }
.gallery-peek__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.gallery-peek__img.is-active { visibility: visible; }
html:not(.js) .gallery-peek__img:first-of-type { visibility: visible; }
/* The gallery's own "spotlight over the grid": a soft light that follows the pointer over the dark screen. */
.gallery-peek__light { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle 260px at var(--lx, 50%) var(--ly, 50%), color-mix(in oklab, var(--gelb) 22%, transparent), transparent 70%); mix-blend-mode: screen; transition: opacity var(--dur-slow-out) var(--ease-exit); }
.gallery-peek__screen.is-lit .gallery-peek__light { opacity: 1; transition: opacity var(--dur-slow) var(--ease-enter); }
.gallery-peek__phone { display: none; }
.gallery-peek__caption { margin-top: var(--space-3); font-size: var(--t-small); color: var(--muted); }


.stack { display: flex; flex-wrap: wrap; gap: 8px; }
.stack li { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--round); font-size: var(--t-small); color: var(--fg); }




@media (min-width: 1200px) {
  .peek__steps { grid-column: 1 / 4; }
  .peek__figure { grid-column: 4 / 13; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .umweg__caption--before { grid-column: 1 / 7; }
  .umweg__caption--after { grid-column: 7 / 13; }
  .peek__steps { grid-column: 1 / 6; }
  .peek__figure { grid-column: 6 / 13; }
}
@media (max-width: 900px) {
  .peek__wrap { min-height: 0; }
  .peek__steps { grid-column: 1 / -1; margin-bottom: var(--space-4); }
  .peek__figure { grid-column: 1 / -1; }
  .peek__dot { display: none; }
}

/* ---------- Phone: own composition ---------- */
@media (max-width: 640px) {
  .dv-close .close__line { text-wrap: balance; }
}
@media (max-width: 640px) {

  .umweg { margin-bottom: var(--space-7); }
  .umweg__wrap { min-height: 0; padding-top: var(--space-4); }
  .umweg__head { flex-direction: column; gap: var(--space-2); }
  .umweg__title { font-size: 1.25rem; }
  .umweg__stage { padding: var(--space-4) 0 var(--space-4) 44px; }
  .umweg__stations { grid-template-columns: 1fr; row-gap: 0; }
  .umweg__station { grid-template-columns: 2rem 1fr; grid-template-rows: auto auto; padding: var(--space-2) 0 var(--space-3); }
  .umweg__num { grid-row: 1 / 3; padding-top: 0.7em; }
  .umweg__word { font-size: clamp(2.5rem, 13cqw, 3.25rem); }
  .umweg__toolname { left: 0; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; }
  .umweg__toolname span { padding: 4px 10px; }
  .umweg__captions { grid-template-columns: 1fr; }
  .umweg__caption--before, .umweg__caption--after { grid-column: 1; }


  .peek__steps { display: flex; gap: var(--space-1); border-top: 0; overflow-x: auto; margin: 0 calc(var(--margin) * -1) var(--space-3); padding: 0 var(--margin); scrollbar-width: none; }
  .peek__step { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--round); }
  .peek__step.is-active { background: var(--creme); color: var(--nacht); border-color: var(--creme); }
  .peek__step .peek__text, .peek__step .peek__num { display: none; }
  .peek__name { font-size: var(--t-small); font-weight: 500; }
  .peek__step.is-active .peek__name { font-weight: 600; }
  .peek__screen { aspect-ratio: 4 / 5; }
  .peek__img { width: 260%; height: auto; inset: auto; left: calc(var(--cx, 10) * -1%); top: calc(var(--cy, 10) * -1%); object-fit: fill; max-width: none; }
  .peek__ring { display: none; }
  .peek__mobile-text { display: block; margin-top: var(--space-3); font-size: 1rem; color: var(--fg); text-wrap: pretty; }

  .gallery-peek__bar { display: none; }
  .gallery-peek__screen { display: none; }
  .gallery-peek__phone { display: block; width: 72%; margin: 0 auto; }
  .gallery-peek__phone img { width: 100%; height: auto; box-shadow: 0 0 0 1px color-mix(in oklab, var(--nacht) 30%, var(--rosa)); }
  .gallery-peek__caption { text-align: center; }



}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
}