/* ============================================================
   Rooms: hero, style chapters, work contact sheet, ablauf, studio.
   Base = the plain, readable, stacked layout (mobile, reduced motion, no JS).
   `.is-stage` (set by js when the desktop pin is live) = the pinned cinematic layout.
   Only transform and opacity move. Every value is a token.
   ============================================================ */
:root {
  --pad-start: var(--space-gutter);
  --stage-h: 100vh;
  --room-top: calc(var(--nav-height-mobile) + var(--safe-t));
  --room-bottom: calc(var(--dock-h) + var(--space-inline-md));
  --hairline: var(--color-border-strong);
}
@supports (height: 100svh) { :root { --stage-h: 100svh; } }
@media (min-width: 1024px) {
  :root {
    --pad-start: calc(var(--space-gutter) + 11rem); /* clears the reel index and its active label */
    --room-top: calc(var(--nav-height) + var(--safe-t));
    --room-bottom: var(--space-gutter);
  }
}
@media (max-width: 1023px) {
  main { padding-block-end: var(--dock-h); }
  html { scroll-snap-type: y proximity; }
}
html.is-locked { overflow: hidden; }

/* ======================= HERO ======================= */
.hero { background: var(--color-surface-void); }
.hero__stage { position: relative; height: var(--stage-h); overflow: hidden; isolation: isolate; background: var(--color-surface-void); }
.hero__reveal { position: absolute; inset: 0; }
.hero__ink {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 52% at 50% 60%, color-mix(in srgb, var(--hero-edge) 30%, var(--color-surface-void)) 0%, transparent 72%),
    radial-gradient(34% 30% at 50% 50%, color-mix(in srgb, var(--hero-core) 26%, var(--color-surface-void)) 0%, transparent 70%),
    var(--color-surface-void);
}
.hero__video, .hero__push video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.hero__push { position: absolute; inset: 0; opacity: 0; }
.hero__bloom {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), var(--color-accent-hover) 0%, var(--color-accent-glow) 22%, transparent 56%);
}
.hero__svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.hero__word, .hero__glyph {
  font-family: var(--font-family-display); font-style: italic; font-weight: var(--p-font-weight-light);
  letter-spacing: var(--p-font-tracking-tight);
}
.hero__word { fill: none; stroke: var(--color-text-primary); stroke-width: 1.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hero__glyph { fill: var(--color-text-primary); }
.hero__plate { fill: var(--color-surface-void); }
.hero__veil { position: absolute; inset: 0; background: var(--color-surface-base); opacity: 0; pointer-events: none; }
.hero__copy {
  position: absolute; z-index: 2; inset-inline: var(--pad-start) var(--space-gutter); bottom: var(--room-bottom);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-inline-md);
}
.hero__line { text-shadow: 0 0 28px var(--p-color-alpha-black-80); }
@media (min-width: 1024px) {
  .hero__copy { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
/* Mobile with motion: a taller hero whose stage is CSS-sticky (no JS pin, no address-bar jump). */
.hero.is-sticky { height: calc(var(--stage-h) * 2.7); }
.hero.is-sticky .hero__stage { position: sticky; top: 0; }

/* ======================= STYLE ROOMS ======================= */
.styles { background: var(--color-surface-base); }
.styles__bg { display: none; }
.chapter {
  position: relative; min-height: var(--stage-h);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-stack-md);
  padding: var(--room-top) var(--space-gutter) var(--room-bottom);
  scroll-snap-align: start; scroll-snap-stop: normal;
}
.chapter__frame {
  position: relative; overflow: hidden; width: 100%; height: 40vh; height: 40svh;
  border-radius: var(--radius-tile); background: var(--color-surface-raised);
}
.chapter__frame { max-width: 40rem; }
@media (min-width: 1024px) { .chapter { padding-inline-start: var(--pad-start); } }
.chapter__frame::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--border-width-hairline) var(--color-border-subtle); pointer-events: none; }
.chapter__ph {
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--color-accent-default) 12%, var(--color-surface-raised)), var(--color-surface-raised) 80%);
}
.chapter__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.chapter.has-photo .chapter__photo { opacity: 1; }
.sketch { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6%; color: var(--color-text-accent); opacity: 0; }
html.js .sketch path, html.js .sketch circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.chapter__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-stack-sm); }
.chapter__name { overflow: visible; white-space: nowrap; }
.chapter__name .char { display: inline-block; will-change: transform, opacity; }
.chapter__cta { margin-top: var(--space-inline-xs); }

@media (min-width: 1024px) {
  .styles.is-stage .styles__stage { position: relative; height: var(--stage-h); overflow: hidden; }
  .styles.is-stage .styles__bg { display: block; position: absolute; inset: 0; }
  .styles.is-stage .styles__bg i { position: absolute; inset: 0; opacity: 0; }
  .styles.is-stage .styles__bg i:nth-child(1) { background: radial-gradient(80% 70% at 78% 50%, color-mix(in srgb, var(--color-accent-default) 11%, var(--color-surface-base)), var(--color-surface-base) 72%); }
  .styles.is-stage .styles__bg i:nth-child(2) { background: radial-gradient(80% 70% at 24% 50%, var(--color-surface-void), var(--color-surface-void)); }
  .styles.is-stage .styles__bg i:nth-child(3) { background: radial-gradient(80% 70% at 62% 54%, color-mix(in srgb, var(--hero-edge) 14%, var(--color-surface-void)), var(--color-surface-void) 74%); }
  .styles.is-stage .chapter {
    position: absolute; inset: 0; min-height: 0;
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; column-gap: var(--space-inline-lg);
    padding: var(--room-top) var(--space-gutter) var(--room-bottom) var(--pad-start);
    scroll-snap-align: none;
  }
  .styles.is-stage .chapter__frame { max-width: none; height: auto; max-height: calc(var(--stage-h) - var(--room-top) - var(--room-bottom)); }
  .styles.is-stage .chapter[data-idx="0"] .chapter__copy { grid-column: 1 / 6; grid-row: 1; }
  .styles.is-stage .chapter[data-idx="0"] .chapter__frame { grid-column: 7 / 13; grid-row: 1; aspect-ratio: 4 / 5; justify-self: end; height: min(100%, 44rem); }
  .styles.is-stage .chapter[data-idx="1"] .chapter__frame { grid-column: 1 / 6; grid-row: 1; aspect-ratio: 1 / 1; justify-self: start; height: min(100%, 38rem); }
  .styles.is-stage .chapter[data-idx="1"] .chapter__copy { grid-column: 7 / 13; grid-row: 1; }
  .styles.is-stage .chapter[data-idx="2"] .chapter__copy { grid-column: 1 / 6; grid-row: 1; align-self: end; padding-block-end: var(--space-stack-lg); }
  .styles.is-stage .chapter[data-idx="2"] .chapter__frame { grid-column: 6 / 13; grid-row: 1; aspect-ratio: 5 / 4; height: min(100%, 36rem); justify-self: end; }
}

/* ======================= WORK: contact sheet ======================= */
.work { background: var(--color-surface-base); padding: var(--pad-room) var(--space-gutter); padding-inline-start: var(--pad-start); scroll-snap-align: start; }
.work__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-stack-md); margin-block-end: var(--space-stack-lg); }
.work__tools { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-stack-sm); min-width: 0; max-width: 100%; }
.work__count { font-size: var(--utility-size); }
.chips { display: flex; gap: var(--space-inline-xs); overflow-x: auto; max-width: 100%; padding-block: 2px; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-inline-xs);
  min-height: var(--chip-min-height); padding-inline: var(--chip-pad-x); border-radius: var(--chip-radius);
  border: var(--border-width-hairline) solid var(--chip-border); color: var(--chip-fg);
  font-size: var(--utility-size); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); text-transform: uppercase; white-space: nowrap;
  transition-property: transform, background-color, border-color, color; transition-duration: var(--chip-duration); transition-timing-function: var(--ease-out);
  scroll-snap-align: start; -webkit-tap-highlight-color: transparent;
}
.chip small { font-size: inherit; color: var(--color-text-muted); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--p-font-tracking-wide); }
.chip[aria-pressed="true"] { color: var(--chip-fg-active); background: var(--chip-bg-active); border-color: var(--chip-border-active); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--chip-border-active); } }

.sheet {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  border-top: var(--border-width-hairline) solid var(--hairline); border-inline-start: var(--border-width-hairline) solid var(--hairline);
}
@media (min-width: 768px) { .sheet { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sheet { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.cell { position: relative; overflow: hidden; border-inline-end: var(--border-width-hairline) solid var(--hairline); border-bottom: var(--border-width-hairline) solid var(--hairline); background: var(--tile-bg); aspect-ratio: var(--tile-aspect); contain: layout paint; }
.cell[hidden] { display: none; }
.cell__btn { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-tap-highlight-color: transparent; }
.cell__btn img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform calc(var(--tile-duration) * 2) var(--tile-easing); }
.cell__btn:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .cell__btn:hover img { transform: scale(var(--tile-zoom)); } }
.cell--skel { background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface-base)); }
.work__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-stack-sm); padding-block: var(--space-stack-xl); }
.work__empty[hidden] { display: none; }

/* ======================= ABLAUF + PFLEGE ======================= */
.process { background: var(--color-surface-base); scroll-snap-align: start; }
.process__stage { position: relative; padding: var(--pad-room) var(--space-gutter) var(--space-stack-xl); padding-inline-start: var(--pad-start); }
.process__label { position: relative; z-index: 1; }
.needle { position: absolute; overflow: visible; pointer-events: none; max-width: none; }
.needle--h { display: none; }
.needle--v { display: block; inset-block: calc(var(--pad-room) + 2rem) var(--space-stack-xl); inset-inline-start: var(--space-gutter); width: 56px; height: auto; }
.needle__track { fill: none; stroke: var(--color-border-strong); stroke-width: 1; }
.needle__line { fill: none; stroke: var(--color-accent-default); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.needle__tip { position: absolute; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--color-accent-hover); box-shadow: var(--shadow-glow); opacity: 0; pointer-events: none; }
.steps { display: flex; flex-direction: column; }
.step { min-height: 62vh; min-height: 62svh; display: flex; flex-direction: column; justify-content: center; gap: var(--space-stack-sm); padding-inline-start: calc(56px + var(--space-inline-sm)); }
.step__name { overflow: visible; }

.care { padding: var(--space-stack-xl) var(--space-gutter) var(--pad-room); padding-inline-start: var(--pad-start); display: flex; flex-direction: column; gap: 0; max-width: calc(var(--size-content-narrow) + var(--pad-start)); }
.care__head { margin-block-end: var(--space-stack-sm); }
.acc { border-top: var(--border-width-hairline) solid var(--color-border-strong); }
.acc:last-child { border-bottom: var(--border-width-hairline) solid var(--color-border-strong); }
.acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-inline-md); min-height: var(--size-touch-target); padding-block: var(--space-inline-md); text-align: start; font-size: var(--type-body-size); color: var(--color-text-primary); -webkit-tap-highlight-color: transparent; }
.acc__plus { transition: transform var(--motion-ui-duration-slow) var(--ease-out); color: var(--color-text-accent); }
.acc[data-open="true"] .acc__plus { transform: rotate(45deg); }
.acc__panel { height: 0; overflow: hidden; }
.acc[data-open="true"] .acc__panel { height: auto; }
.acc__inner { padding-block-end: var(--space-inline-md); color: var(--color-text-secondary); max-width: min(48ch, var(--size-measure)); }
.acc__list { display: flex; flex-direction: column; gap: var(--space-inline-xs); }
.acc__list li { position: relative; padding-inline-start: 1.1em; }
.acc__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 0.5em; height: var(--border-width-hairline); background: var(--color-accent-default); }
.acc__inner p { text-wrap: pretty; }

@media (min-width: 1024px) {
  .process.is-stage .process__stage { height: var(--stage-h); display: grid; grid-template-rows: auto 1fr; padding-block: var(--room-top) var(--room-bottom); }
  .process.is-stage .needle--v { display: none; }
  .process.is-stage .needle--h { display: block; inset-inline-start: var(--pad-start); width: calc(100% - var(--pad-start) - var(--space-gutter)); bottom: calc(var(--room-bottom) + 2rem); height: 160px; }
  .process.is-stage .steps { display: grid; align-self: center; min-height: 0; }
  .process.is-stage .step { grid-area: 1 / 1; min-height: 0; padding-inline-start: 0; align-self: center; }
  [dir="rtl"] .process.is-stage .needle--h { transform: scaleX(-1); }
}

/* ======================= STUDIO FINALE ======================= */
.studio { background: var(--color-surface-void); scroll-snap-align: start; }
.studio__room { min-height: var(--stage-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-stack-lg); padding: var(--room-top) var(--space-gutter) var(--room-bottom); padding-inline-start: var(--pad-start); text-align: center; }
.studio__medal { position: relative; width: min(72vw, 46vh); width: min(72vw, 46svh); aspect-ratio: 1; flex: none; }
.medal__glow { position: absolute; inset: -18%; border-radius: 50%; opacity: 0; background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 62%); pointer-events: none; }
.medal__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0;
  -webkit-mask-image: radial-gradient(circle, var(--color-surface-void) 52%, transparent 72%); mask-image: radial-gradient(circle, var(--color-surface-void) 52%, transparent 72%); }
.medal__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.medal__static { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-family-display); font-style: italic; font-weight: var(--p-font-weight-light);
  font-size: clamp(var(--p-font-size-6xl), 14vw, var(--p-font-size-9xl)); line-height: 1; color: var(--color-text-accent); border: var(--border-width-hairline) solid var(--color-border-accent); border-radius: 50%; padding-block-end: 0.12em; box-shadow: var(--shadow-glow); }
html.js.has-medal .medal__static { opacity: 0; }
.studio__copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-stack-sm); }
.studio__copy .studio__line { text-align: center; }
.studio__info { display: flex; flex-direction: column; align-items: center; gap: var(--space-stack-lg); padding: var(--space-stack-xl) var(--space-gutter) var(--space-stack-lg); padding-inline-start: var(--pad-start); border-top: var(--border-width-hairline) solid var(--color-border-subtle); }
.facts { display: grid; gap: var(--space-stack-md); grid-template-columns: 1fr; text-align: center; max-width: 100%; }
@media (min-width: 768px) { .facts { grid-template-columns: repeat(3, auto); gap: var(--space-stack-xl); text-align: start; } }
.facts dt { margin-block-end: var(--space-inline-xs); }
.facts dd { font-size: var(--type-body-size); color: var(--color-text-primary); overflow-wrap: anywhere; }
.facts a { border-bottom: var(--border-width-hairline) solid var(--color-border-accent); padding-block: 2px; }
.facts__city { color: var(--color-text-muted); }
.studio__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-inline-xs); }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-inline-md); align-items: center; font-size: var(--utility-size); letter-spacing: var(--type-label-tracking); text-transform: uppercase; color: var(--color-text-muted); }
.foot a { display: inline-flex; gap: var(--space-inline-xs); align-items: center; min-height: var(--size-touch-target); }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--color-text-accent); } }

/* ======================= Reduced motion / no motion: everything readable, nothing pinned ======================= */
html.no-motion .sketch { opacity: 0; }
html.no-motion .chapter__photo { opacity: 1; }
html.js.no-motion .chapter:not(.has-photo) .sketch { opacity: 1; }
html.js.no-motion .sketch path, html.js.no-motion .sketch circle { stroke-dashoffset: 0; }
html.no-motion .needle, html.no-motion .needle__tip { display: none; }
html.no-motion .step { padding-inline-start: 0; min-height: 0; padding-block: var(--space-stack-lg); }
@media (prefers-reduced-motion: reduce) {
  .sketch { opacity: 0; }
  .chapter__photo { opacity: 1; }
  html.js .chapter:not(.has-photo) .sketch { opacity: 1; }
  html.js .sketch path, html.js .sketch circle { stroke-dashoffset: 0; }
  .cell__btn img { transition: none; }
  .needle, .needle__tip { display: none; }
  .step { padding-inline-start: 0; min-height: 0; padding-block: var(--space-stack-lg); }
}

/* ---- Ablauf plates + ghost numerals (Opus pass) ---- */
.steps { counter-reset: st; }
.step { position: relative; isolation: isolate; counter-increment: st; }
.step::before {
  content: "0" counter(st); position: absolute; z-index: -1; pointer-events: none;
  inset-inline-end: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-family-display); font-style: italic; font-weight: var(--p-font-weight-light);
  font-size: clamp(9rem, 30vw, 24rem); line-height: 0.8; color: transparent;
  -webkit-text-stroke: 1px var(--color-border-strong); opacity: 0.55;
}
.step__plate { margin: var(--space-stack-sm) 0 0; width: min(100%, 22rem); aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-md, 14px);
  border: var(--border-width-hairline) solid var(--color-border-accent); background: var(--color-surface-raised, #141210); }
.step__plate img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.08); will-change: transform; }
@media (min-width: 1024px) {
  .process.is-stage .step {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(30vw, 26rem)); grid-auto-rows: min-content;
    column-gap: clamp(2rem, 6vw, 7rem); align-content: center; width: 100%; padding-inline-end: var(--space-gutter);
  }
  .process.is-stage .step > :not(.step__plate) { grid-column: 1; }
  .process.is-stage .step__plate { grid-column: 2; grid-row: 1 / span 3; width: 100%; max-height: 52vh; max-height: 52svh; margin: 0; align-self: center; }
  .process.is-stage .step::before { inset-inline-end: auto; inset-inline-start: 34%; }
}
@media (prefers-reduced-motion: reduce) { .step__plate img { will-change: auto; } }