/* ==========================================================================
   A · Atelier — homepage composition
   Site-wide patterns (section head, closing CTA, footer) live in site.css.
   ========================================================================== */

/* ---------- Marke: statement that lights up while it scrolls past ---------- */
.a-brand .container { display: grid; gap: var(--space-l); }
.a-reveal { max-width: 26ch; }
.js .a-reveal .a-reveal__word {
  color: var(--color-text-subtle);
  transition: color var(--dur-base) var(--ease-hover);
}
.js .a-reveal .a-reveal__word.is-lit { color: var(--color-text); }
.a-brand__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
@media (prefers-reduced-motion: reduce) {
  .js .a-reveal .a-reveal__word { color: var(--color-text); }
}

/* ---------- Partner & Orte ---------- */
.a-proof { border-block: 1px solid var(--color-border); }
.a-proof__head {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  padding-block: var(--space-l);
  text-align: center;
}
.a-proof .logo-row { justify-content: center; }

/* ---------- Lernt Amir kennen: story player (Golden Master geometry) ---------- */
.a-video__grid { display: grid; gap: var(--space-xl); }
.a-video__content { display: grid; gap: var(--space-s); align-content: center; }
.a-video__content > .t-h1 { margin-top: var(--space-2xs); }
.a-video__quote {
  margin-top: var(--space-xs);
  padding-left: var(--space-s);
  border-left: 2px solid var(--color-accent);
  max-width: 26rem;
}
.a-video__copy { max-width: 26.5rem; }
.a-video__actions { margin-top: var(--space-m); --cluster-gap: var(--space-m); }

.a-story { justify-self: center; width: 100%; max-width: 394px; }
.a-story__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  --label-color: var(--color-text-inverse);
}
.a-story__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-story__bar {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  height: 2px;
  background: var(--color-border-inverse-strong);
}
.a-story__bar span {
  display: block;
  height: 100%;
  background: var(--color-text-inverse);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
.a-story__top {
  position: absolute;
  top: 24px; left: 12px; right: 12px;
  display: flex;
  justify-content: space-between;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.4);
}
.a-story__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--space-s);
  padding: var(--space-m);
  color: inherit;
  text-align: left;
  background: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent 50%);
}
.a-story__play .label { align-self: flex-end; padding-block: calc((56px - 1.2em) / 2); line-height: 1.2; white-space: nowrap; }
.a-story__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-border-inverse-strong);
  background: rgb(0 0 0 / 0.3);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-hover);
}
.a-story__icon svg { width: 16px; height: 16px; margin-left: 2px; }
@media (hover: hover) { .a-story__play:hover .a-story__icon { transform: scale(1.04); background: rgb(0 0 0 / 0.5); } }
.a-story__play:active .a-story__icon { transform: scale(0.97); }
.a-story__toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-inverse-strong);
  background: rgb(0 0 0 / 0.35);
  color: inherit;
}
.a-story__toggle svg { width: 14px; height: 14px; }
.a-story__resume, .a-story[data-state="paused"] .a-story__pause { display: none; }
.a-story[data-state="paused"] .a-story__resume { display: block; }
.a-story[data-state="playing"] .a-story__play,
.a-story[data-state="paused"] .a-story__play { display: none; }
.a-story[data-state="playing"] .a-story__toggle,
.a-story[data-state="paused"] .a-story__toggle { display: grid; }
html:not(.js) .a-story__play,
html:not(.js) .a-story__bar,
html:not(.js) .a-story__top { display: none; }

@media (min-width: 1024px) {
  .a-video__grid { grid-template-columns: minmax(0, 575fr) minmax(0, 555fr); gap: 0; align-items: center; }
  .a-video__content { padding-right: var(--space-xl); }
  .a-story { justify-self: end; width: auto; max-width: none; }
  .a-story__frame { width: calc(min(78svh, 700px) * 9 / 16); }
}

/* ---------- Leistungen gateway: big rows, preview follows the cursor ---------- */
.a-services { position: relative; }
.a-gate { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border-strong); }
.a-gate__row {
  display: grid;
  gap: var(--space-2xs) var(--grid-gap);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--color-border-strong);
}
.a-gate__title {
  font: var(--type-h1);
  font-size: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);
  letter-spacing: var(--type-h1-tracking);
  transition: color var(--dur-base) var(--ease-hover), transform var(--dur-slow) var(--ease-out);
}
.a-gate__copy { max-width: 38ch; color: var(--color-text-muted); }
.a-gate__arrow { display: none; width: 28px; height: 28px; transition: transform var(--dur-base) var(--ease-out); }
.a-gate__arrow svg { width: 100%; height: 100%; }
.a-gate__thumb { margin-top: var(--space-xs); }

@media (min-width: 768px) {
  .a-gate__row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .a-gate__title { grid-column: 1 / span 8; }
  .a-gate__copy { grid-column: 9 / span 3; }
  .a-gate__arrow { display: block; grid-column: 12; justify-self: end; }
  .a-gate__thumb { grid-column: 1 / -1; }
}
@media (hover: hover) and (min-width: 1024px) {
  .a-gate__thumb { display: none; }
  .a-gate:hover .a-gate__row:not(:hover) .a-gate__title { color: var(--color-text-subtle); }
  .a-gate__row:hover .a-gate__title { transform: translateX(12px); }
  .a-gate__row:hover .a-gate__arrow { transform: translate(3px, -3px); }
}

.a-gate__preview {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  width: clamp(220px, 20vw, 300px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-bg-subtle);
  opacity: 0;
  scale: 0.96;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  transition: opacity var(--dur-base) var(--ease-out), scale var(--dur-base) var(--ease-out);
}
.a-gate__preview[data-visible] { opacity: 1; scale: 1; }
.a-gate__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.a-gate__preview img.is-active { opacity: 1; }
@media (hover: hover) and (min-width: 1024px) {
  .js .a-gate__preview { display: block; }
}

/* ---------- Ablauf: sticky journey ---------- */
.a-process {
  background: var(--color-bg-subtle);
  --journey-cols: minmax(0, 6fr) minmax(0, 5fr);
}
.a-process__aside {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}
.a-steps { padding: 0; list-style: none; }
.a-step {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding-block: var(--space-m) var(--space-l);
  border-top: 1px solid var(--color-border-strong);
}
.a-step p { max-width: 40ch; }
.a-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
}

@media (min-width: 1024px) {
  .a-process .journey { column-gap: var(--space-2xl); }
  .a-process__aside {
    position: sticky;
    top: calc(var(--header-height) + var(--space-m));
  }
  .a-process .journey__media {
    position: relative;
    top: auto;
    aspect-ratio: auto;
    height: min(54svh, 560px);
    margin-top: var(--space-s);
  }
  .a-steps { padding-top: calc(var(--space-2xl) + var(--space-l)); }
  .a-step { min-height: 44svh; }
  .a-step:last-child { min-height: 52svh; }
  .js .a-step.is-active::before { transform: scaleX(1); }
}

/* ---------- Referenzen ---------- */
.a-quotes {
  display: grid;
  gap: var(--space-l);
}
.a-quotes__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-bg-subtle);
}
.a-quotes__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.a-quotes__img.is-active,
html:not(.js) .a-quotes__img:first-child { opacity: 1; transform: none; }

.a-quotes__body {
  display: grid;
  align-content: space-between;
  gap: var(--space-xl);
}
.a-quote blockquote { display: grid; gap: var(--space-m); }
.a-quote__full { font: var(--type-small); max-width: 52ch; }
.a-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-s);
  margin-top: var(--space-m);
}
.a-quote__names { --label-color: var(--color-text); }
.a-quote__credit { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--color-border-strong); }
@media (hover: hover) { .a-quote__credit:hover { --label-color: var(--color-text); } }

.a-quotes__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.a-quotes__tab .label { white-space: normal; }
@media (min-width: 768px) {
  .a-quotes__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .a-quotes {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  .a-quotes__media { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
  .a-quotes__body { grid-column: 8 / -1; }
}

/* ---------- Hero pause control ---------- */
.a-hero-toggle {
  position: absolute;
  z-index: 1;
  right: var(--gutter);
  bottom: var(--gutter);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border-inverse-strong);
  background: rgb(0 0 0 / 0.25);
  color: var(--color-text-inverse);
  transition: background-color var(--dur-fast) var(--ease-hover);
}
.a-hero-toggle svg { width: 14px; height: 14px; }
.a-hero-toggle__play,
.a-hero-toggle[aria-pressed="true"] .a-hero-toggle__pause { display: none; }
.a-hero-toggle[aria-pressed="true"] .a-hero-toggle__play { display: block; }
@media (hover: hover) { .a-hero-toggle:hover { background: rgb(0 0 0 / 0.45); } }