/* Sculptwerk consumer page for the figures lane. Same light register as
   landing.css and studio.css: warm ground, white surfaces, ink, one ember
   accent, soft radii and shadows. Tokens duplicated from landing.css on
   purpose so each page stays a single-stylesheet load. System fonts only,
   no external assets. */

/* WOFF2, not the TrueType master: 53 KB against 165 KB on disk, and it is
   the form a browser keeps in its font cache. Every page that uses this
   face also preloads it from its head, because discovery through this
   stylesheet put the fetch at 310 ms and swapped the hero type in after
   first paint, which was the entire 0.204 mobile CLS (perf audit F06). */
@font-face {
  font-family: "Sculptwerk Manrope";
  src: url("/assets/fonts/Manrope-Variable.woff2?v=91e63810abd5") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --bg: #f6f4f1;
  --surface: #ffffff;
  --surface-2: #fbfaf8;
  --ink: #1d1a17;
  --dim: #6f6861;
  /* 5.12:1 on the paper ground. #7a7168 measured 4.36:1, under the 4.5:1
     AA floor, and it carried the trust row, the 3D caption, the size
     labels and the legal disclosure: one token, five serious contrast
     failures (perf audit F13, UX review F14). */
  --faint: #6f665d;
  --line: rgba(29, 26, 23, 0.12);
  --line-soft: rgba(29, 26, 23, 0.07);
  --hover-tint: rgba(29, 26, 23, 0.04);
  --accent: #d3603e;
  --accent-deep: #b8402c;
  --accent-deeper: #9c3020;
  --accent-tint: rgba(211, 96, 62, 0.10);
  --accent-tint-strong: rgba(211, 96, 62, 0.16);
  --on-accent: #fff8f3;
  --shadow-sm: 0 1px 2px rgba(29, 26, 23, 0.05), 0 2px 8px rgba(29, 26, 23, 0.04);
  --shadow-md: 0 2px 4px rgba(29, 26, 23, 0.04), 0 12px 32px rgba(29, 26, 23, 0.09);
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  /* one page gutter, shared by the header rows so the scrolling section
     nav can bleed to the edges and still line up with the brand */
  --pad: clamp(1rem, 4vw, 2.4rem);
  --sans: "Sculptwerk Manrope", -apple-system, BlinkMacSystemFont,
          "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

[hidden] { display: none !important; }

html { background: var(--bg); scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--ink); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

button { font-family: inherit; color: inherit; }

::selection { background: var(--accent-tint-strong); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  a, button, .gallery-card picture, .price-card {
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.22s ease,
                transform 0.22s ease, opacity 0.18s ease;
  }
}

.skip-link {
  position: fixed;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 100;
  padding: 0.65rem 0.9rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--surface);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus { transform: none; }

/* --- reveal animations --------------------------------------------------- */

/* The hidden reveal state only exists once figuren.js tags <html> with
   .anim; without JS (or with reduced motion) everything stays visible. */
html.anim [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

html.anim [data-reveal].revealed { opacity: 1; transform: none; }

html.anim [data-reveal][data-reveal-delay="1"] { transition-delay: 0.12s; }
html.anim [data-reveal][data-reveal-delay="2"] { transition-delay: 0.24s; }
html.anim [data-reveal][data-reveal-delay="3"] { transition-delay: 0.36s; }
html.anim [data-reveal][data-reveal-delay="4"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: var(--surface);
  border-radius: var(--r-sm);
  padding: 0.62rem 1.15rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

.btn:hover { background: var(--accent-deep); color: var(--on-accent); }

.btn-big { padding: 0.85rem 1.6rem; font-size: 1.05rem; }

/* On the light CTA band the invert variant reads as the standard filled
   button; the class stays for markup stability. */
.btn-invert { background: var(--ink); color: var(--surface); }
.btn-invert:hover { background: var(--accent-deep); color: var(--on-accent); }

.quiet-link {
  color: var(--dim);
  font-size: 0.95rem;
  text-underline-offset: 3px;
}

.quiet-link:hover { color: var(--ink); }

/* --- header ------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem var(--pad);
  background: rgba(246, 244, 241, 0.92);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-head.scrolled { box-shadow: var(--shadow-sm); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  font-family: "Sculptwerk Manrope", var(--sans);
  font-weight: 650;
  letter-spacing: -0.055em;
  font-size: 1.2rem;
  text-decoration: none;
}

.brand-mark { width: 2.05rem; height: 2.05rem; flex: none; }
.brand-word > span { color: var(--accent-deep); }

.site-head nav {
  display: flex;
  gap: clamp(0.7rem, 1.2vw, 1.2rem);
  flex-wrap: wrap;
}

.site-head nav a {
  font-size: 0.92rem;
  color: var(--dim);
  text-decoration: none;
}

.site-head nav a:hover { color: var(--ink); }

.site-head nav .nav-business {
  color: var(--accent-deeper);
  font-weight: 650;
}

/* The quiet sign-in beside the primary action. The homepage promises in
   its own trust row that a project stays saved, and there was no way back
   into one from any marketing page (UX review F20). */
.head-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.3rem);
}

.head-signin { white-space: nowrap; }

/* --- hero --------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(2.2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.4rem) 1.5rem;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.9rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}

.lead {
  color: var(--dim);
  max-width: 34rem;
  margin-bottom: 1.5rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}

.trust-row {
  list-style: none;
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--faint);
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.trust-row .icon { color: var(--accent-deep); }

/* The local relationship is the promise here: the service is accompanied
   from Zurich while the eventual manufacturing route stays project-specific. */
.origin {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  max-width: 26rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dim);
  line-height: 1.35;
}

.origin-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid var(--accent-deep);
  border-radius: 50%;
  color: var(--accent-deeper);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 460px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(150deg, var(--surface-2), var(--accent-tint));
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-md);
}

.hero-media picture { display: block; height: 100%; }

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the couple sits centred in the 2:3 master, so a 4:5 crop taken above
     centre keeps the figure whole and lets the shelf fall away at the
     bottom */
  object-position: 50% 38%;
  display: block;
}

/* A heading break that keeps its word boundary. `<br>` inside a heading
   joined the two halves into one run in the accessibility tree and in a
   search result ("Ein Danke.Zum Anfassen.", UX review F18); two block
   spans break the line visually and leave two words. */
h1 .line, h2 .line { display: block; }

/* --- business bridge ---------------------------------------------------- */

.business-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
  max-width: 1160px;
  margin: clamp(2.6rem, 6vw, 5rem) auto 0;
  padding: clamp(2.2rem, 6vw, 4.2rem) clamp(1.2rem, 4vw, 3.2rem);
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow-md);
}

.business-bridge .kicker { color: #ef997e; }

.business-bridge h2 {
  max-width: 15ch;
  font-size: clamp(1.85rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.business-bridge-copy > p:not(.kicker) {
  max-width: 54ch;
  color: rgba(255, 255, 255, 0.68);
}

.business-bridge-cta {
  margin-top: 1.6rem;
  background: var(--accent);
  color: var(--on-accent);
}

.business-bridge-cta:hover { background: #e27452; }

/* --- media slots --------------------------------------------------------- */

.media-slot {
  background: linear-gradient(160deg, var(--surface-2), var(--accent-tint));
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-slot img, .media-slot video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-slot .slot-note {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-align: center;
  padding: 1rem;
}

/* Every committed still is now a <picture> in the document rather than an
   <img> a script paints after /api/media answers: the bytes are in the
   release, so there was nothing for the page to wait for, and the markup
   is what carries the AVIF and WebP widths (perf audit F02). <picture> is
   the flow element and the <img> inside it is the painted box, so the
   wrapper has to be told to fill what the <img> used to fill.

   The gallery's <picture> is not in this list. It is a square of its own
   (aspect-ratio: 1 below) with the caption under it in the same figure,
   and height: 100% made it as tall as the whole figure instead, so the
   caption was pushed out of its card: measured at 390x844 on 06.10.2026,
   each caption sat under the top of the next card, and on a 1440 desktop
   all four captions hung below the section. */
.pack-media picture,
.business-bridge-image picture,
.request-object picture,
.promise-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery-card picture {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--surface-2), var(--accent-tint));
  box-shadow: var(--shadow-sm);
}

.gallery-card picture img,
.pack-media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pack-media picture {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  background: linear-gradient(160deg, var(--surface-2), var(--accent-tint));
}

/* --- marquee --------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
  padding: 0.85rem 0;
  margin-top: clamp(1.6rem, 4vw, 3rem);
}

.marquee-track {
  display: flex;
  gap: 2.2rem;
  width: max-content;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  animation: marquee 36s linear infinite;
}

/* Separated by space alone. The 4 px accent circle before every item drew
   a dotted band straight across the first scroll under the hero, and
   although the glyph was not a middot the pattern was (UX review F28). */
.marquee-track span {
  display: inline-flex;
  align-items: center;
  margin-right: 2.6rem;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- shared section grammar --------------------------------------------------------- */

h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: 1.4rem;
  max-width: 28ch;
}

h3 { font-size: 1.02rem; }

.block { max-width: 1160px; margin: 0 auto; padding: clamp(2.6rem, 5vw, 4rem) clamp(1rem, 4vw, 2.4rem) 0.8rem; }
.block-lead { max-width: 58ch; color: var(--dim); }

/* --- gallery ------------------------------------------------------------------------------ */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1.4rem;
}

.gallery-card { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .gallery-card picture img { transition: transform 0.6s ease; }
}

.gallery-card:hover picture {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

.gallery-card:hover picture img { transform: scale(1.04); }

.gallery-card figcaption {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--dim);
}

.gallery-card figcaption strong { color: var(--ink); }

/* --- promise / quality / packaging --------------------------------------------------------- */

.promise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

/* Heading over panels, one column on every screen. The macro lettering
   still that used to stand beside them was retired on 11.09.2026, and
   with it the sticky box and the container query that measured it. The
   panels are the only thing in here that changes height now, and nothing
   sits beside them for that to move. */
.quality {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "options";
  grid-template-rows: auto auto;
  row-gap: 1.2rem;
  align-items: start;
}

.quality-head { grid-area: head; }
.quality .quality-options { grid-area: options; margin-top: 0; }

.promise-copy p { max-width: 48ch; color: var(--dim); }

.promise-media, .pack-media { margin: 0; }

.promise-media .media-slot, .pack-media .media-slot {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* Sentence case in the sans, not the mono caps kicker treatment. The
   kicker works at three or four words; at eighteen it stops being
   readable and reads as machine output (UX review F16). 0.85rem also
   clears the 12 px type floor these captions were under. */
.promise-media figcaption, .pack-media figcaption {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
  margin-top: 0.55rem;
}

.check-list { list-style: none; margin: 1.4rem 0 0.4rem; }

.check-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0;
  color: var(--ink);
}

.check-list .icon { color: var(--accent-deep); }

.quality-options {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
}

.quality-options details {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.quality-options summary {
  display: grid;
  gap: 0.12rem;
  padding: 0.85rem 2.6rem 0.85rem 1rem;
  position: relative;
  cursor: pointer;
  list-style: none;
}

.quality-options summary::-webkit-details-marker { display: none; }
.quality-options summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent-deep);
  font-size: 1.25rem;
}

.quality-options details[open] summary::after { content: "−"; }
.quality-options summary span { font-weight: 700; }
.quality-options summary small { color: var(--dim); font-size: 0.76rem; }
.quality-options details > p {
  padding: 0 1rem 1rem;
  color: var(--dim);
  font-size: 0.88rem;
}

.pack-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.pack-list { list-style: none; }

.pack-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
}

.pack-list li:last-child { border-bottom: 1px solid var(--line-soft); }
.pack-list .icon { color: var(--accent-deep); width: 1.4em; height: 1.4em; }

/* --- pricing --------------------------------------------------------------------------------- */

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1.2rem;
  margin-bottom: 1.6rem;
  max-width: 880px;
}

.price-card {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 1.6rem 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--line);
}

.price-card.featured {
  border-color: var(--accent-deep);
  box-shadow: var(--shadow-md);
}

.price-flag {
  position: absolute;
  top: -0.7rem;
  left: 1.2rem;
  background: var(--accent-deep);
  color: var(--on-accent);
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
}

.price-size {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--faint);
}
.price-value { font-size: 2.1rem; font-weight: 700; margin: 0.4rem 0 0.2rem; }
.price-note { font-size: 0.82rem; color: var(--dim); }

.credit-cost-note {
  max-width: 720px;
  margin-top: 1.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--accent-deep);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--dim);
  font-size: 0.9rem;
}

.credit-cost-note strong { color: var(--ink); }

/* --- FAQ -------------------------------------------------------------------------------------- */

/* Two columns, heading left and the accordion right, matching the quality
   section two blocks earlier. The accordion sat left-aligned in a 1160
   container with roughly 500 px of nothing beside it, at the exact point
   where a hesitant buyer is reading (UX review F19). */
.faq-block {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq-head .kicker { margin-bottom: 0.6rem; }

@media (max-width: 860px) {
  .faq-block { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
}

.faq { max-width: 760px; }

.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.2rem;
  font-weight: 600;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
  .faq summary .icon { transition: transform 0.3s ease; }
}
.faq details[open] summary .icon { transform: rotate(180deg); color: var(--accent-deep); }
.faq details p { padding: 0 0.2rem 1.2rem; color: var(--dim); max-width: 60ch; }

/* --- final CTA / footer ------------------------------------------------------------------------- */

.final-cta {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
  text-align: center;
  padding: clamp(2.8rem, 6vw, 4.2rem) clamp(1rem, 4vw, 2.4rem);
}

.final-cta h2 {
  margin: 0 auto 1.5rem;
  max-width: none;
}

.site-foot {
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
  padding: 1.6rem clamp(1rem, 4vw, 2.4rem) 2rem;
  color: var(--faint);
  font-size: 0.88rem;
}

.site-foot p { max-width: 46rem; margin-bottom: 0.45rem; }
.site-foot a { color: var(--dim); }
.site-foot a:hover { color: var(--ink); }

.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-top: 0.8rem; }
.foot-mark { font-family: var(--mono); font-size: 0.78rem; margin-top: 1.2rem; }

/* --- before/after slider ------------------------------------------------------- */

/* The copy column is three lines beside a tall image, so it takes the
   media's vertical middle rather than the top of the grid row (UX review
   F15). The height cap that used to sit on the media was removed on
   11.09.2026: `.ba` is `aspect-ratio: 1` with `object-fit: cover`, so a
   460 px cap on a 560 px box cropped about 112 source pixels off the top
   and the bottom of a square master and took the figurine's head with
   it. The box now keeps its own square and nothing is cropped. */
.verwandlung {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(1.8rem, 4vw, 3.2rem);
  align-items: center;
  justify-items: center;
}

.verwandlung-copy { justify-self: stretch; align-self: center; }

.verwandlung-copy h2 { margin-bottom: 0.9rem; }

@media (max-width: 860px) {
  .verwandlung { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
}

.ba {
  position: relative;
  max-width: 560px;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  touch-action: pan-y;
}

@media (prefers-reduced-motion: no-preference) {
  .ba .ba-knob, .ba .ba-tag { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .ba:hover .ba-knob { transform: translate(-50%, -50%) scale(1.12); }
  /* gentle nudge until the visitor grabs the slider */
  .ba:not(.ba-touched) .ba-knob { animation: ba-nudge 2.4s ease-in-out infinite; }
}

@keyframes ba-nudge {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

.ba .media-slot {
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 0;
  aspect-ratio: auto;
}

.ba .media-slot img { width: 100%; height: 100%; object-fit: cover; }

.ba .ba-before { clip-path: inset(0 50% 0 0); }

.ba .ba-before .slot-note { transform: translateX(-25%); }

.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(29, 26, 23, 0.2);
  pointer-events: none;
}

.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}

.ba-tag {
  position: absolute;
  top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(246, 244, 241, 0.9);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  pointer-events: none;
}

.ba-tag-l { left: 0.9rem; }
.ba-tag-r { right: 0.9rem; }

.ba input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.ba input[type="range"]:focus-visible ~ .ba-line .ba-knob {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.viz-note {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* --- turntable scrub ------------------------------------------------------------- */

/* pan-y keeps vertical page scroll native while horizontal drags stay
   with the scrub handler (touch pointermove would otherwise be taken
   over by the browser's scroll gesture and never reach us) */
.media-slot.scrubbable {
  cursor: ew-resize;
  position: relative;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.media-slot.scrubbable video { pointer-events: none; }

.media-slot.scrubbed .scrub-hint { opacity: 0; }

.scrub-hint {
  position: absolute;
  left: 50%;
  bottom: 0.7rem;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(246, 244, 241, 0.9);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* Finish chips under the 3D preview (08.10.2026). Native radios, so the
   arrow keys move through them; the whole label is the 44 px target. */
.finish-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.finish-chips[hidden] { display: none; }

.finish-chips legend {
  float: left;
  margin-right: 0.35rem;
  padding: 0;
  font-size: 0.85rem;
  color: var(--faint);
}

.finish-chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.95rem 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.finish-chips input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.finish-chips label:has(input:checked) {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.finish-chips label:has(input:focus-visible) {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.finish-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(29, 26, 23, 0.18);
}

.finish-dot-bronze { background: radial-gradient(circle at 35% 30%, #b08a5c, #6b5035 70%); }
.finish-dot-gold { background: radial-gradient(circle at 35% 30%, #e2cd8e, #a8915e 70%); }
.finish-dot-silber { background: radial-gradient(circle at 35% 30%, #eeeeec, #a3a3a0 70%); }
.finish-dot-marmorweiss { background: radial-gradient(circle at 35% 30%, #ffffff, #ddd6ca 70%); }

/* --- size comparison ---------------------------------------------------------------- */

/* The whole component lives in size-demo.css now, which both this page
   and the Studio load last: chooser, scale, ground shadows, surface,
   labels and silhouette fills. Nothing about it is written twice any
   more, so the Studio cannot render a different version of it. Only the
   landing page's own entrance animation stays here. */

/* staggered entrance once the reveal observer tags the demo */
html.anim .size-demo .size-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

html.anim .size-demo.revealed .size-item { opacity: 1; transform: none; }

html.anim .size-demo.revealed .size-item:nth-child(2) { transition-delay: 0.1s; }
html.anim .size-demo.revealed .size-item:nth-child(3) { transition-delay: 0.2s; }
html.anim .size-demo.revealed .size-item:nth-child(4) { transition-delay: 0.3s; }

/* --- sticky CTA bar --------------------------------------------------------------- */

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  padding: 0.7rem 1.2rem;
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  box-shadow: 0 -8px 24px -16px rgba(29, 26, 23, 0.25);
  transform: translateY(110%);
  transition: transform 0.35s ease, visibility 0s 0.35s;
}

/* `inert` and `aria-hidden` take the bar out of the tab order and out of
   the accessibility tree, but a translated element is still painted and
   still hit-tested: at the bottom of a phone viewport the offscreen bar
   sat over the page's own content. `visibility: hidden` removes it from
   both, delayed by the length of the slide so the slide out is still
   seen, and switched back the instant the bar becomes visible. */
.cta-bar:not(.visible) { visibility: hidden; }

.cta-bar.visible {
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

/* The first state, and any state the browser's own scroll restoration
   produces, are painted without a transition. figuren.js removes this
   class on the first real input. */
.cta-bar.no-anim { transition: none; }

.cta-bar p { font-size: 0.9rem; color: var(--dim); }
.cta-bar p strong { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  /* No slide, so nothing has to wait for one: visibility flips with the
     state rather than 0.35s after it. */
  .cta-bar { transition: none; }
  .cta-bar:not(.visible) { visibility: hidden; }
}

/* --- responsive ---------------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .promise, .pack-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }
  /* One column, heading then the panels. */
  .quality {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "options";
    grid-template-rows: auto auto;
    row-gap: 1.5rem;
  }
  .business-bridge { grid-template-columns: minmax(0, 1fr); }
}

/* Phones and small tablets. The seven section anchors are gone here: they
   took a full second header row, showed five of seven and cut a word at
   the right edge, which reads as broken rather than as a scroll cue, and
   pill chips everywhere is a named model tell (UX review F09, design map
   section 4.3). A phone visitor reaches every one of those sections by
   scrolling, and the sticky bar and the footer carry the two actions that
   matter. On desktop the text nav is unchanged.

   The hero also turns over: the object first, then the words. At 390 px
   the entire first fold was a kicker, a headline, a paragraph, a button,
   three trust lines and a badge, with no product visible at all
   (UX review F01). */
@media (max-width: 860px) {
  .site-head {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: center;
    column-gap: 0.75rem;
  }

  .site-head nav { display: none; }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "copy";
    padding-top: clamp(1.2rem, 4vw, 2rem);
  }
  .hero-copy { grid-area: copy; }
  .hero-media {
    grid-area: media;
    aspect-ratio: 4 / 5;
    max-height: 46vh;
  }

  /* 44 by 44 is the floor, and eighteen controls sat under it: every
     header link at 34 px, the header button at 39, the three primary
     buttons at 43, the quiet link at 24, the footer links at 22 and the
     enquiry summary at 28 (UX review F13). */
  /* One more since the four-eyes measured it: the header wordmark at 33.
     The size chips measured 40 and are lifted in size-demo.css, which is
     the only stylesheet allowed to style that shared control. */
  .btn,
  .quiet-link,
  .foot-links a,
  .faq summary,
  .request-detail summary,
  .quality-options summary,
  .site-head .brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .faq summary,
  .quality-options summary { display: flex; }
  .btn { padding-block: 0.62rem; }
  .btn-big { padding-block: 0.9rem; }

  /* The sticky bar is fixed over the document, so the last section needs
     room to clear it (UX review F23). */
  main { padding-bottom: 4.5rem; }
}

/* Below this the wordmark and the full button label cannot share a row,
   so the button keeps only its verb. */
@media (max-width: 460px) {
  .head-cta .head-cta-long { display: none; }
  .site-head .head-cta { font-size: 0.88rem; padding: 0.55rem 0.9rem; }
  /* Below this the wordmark, a sign-in link and the primary button cannot
     share a row, and wrapping puts the button under the wordmark at the
     left gutter. The button wins; the footer still carries the sign-in
     and so does every page it leads to. */
  .head-signin { display: none; }
}

@media (max-width: 380px) {
  .site-head .head-cta { font-size: 0.83rem; padding: 0.5rem 0.8rem; }
  .brand { font-size: 1.08rem; }
  .brand-mark { width: 1.8rem; height: 1.8rem; }
  .head-actions { gap: 0.55rem; }
}

@media (max-width: 720px) {
  .cta-bar { gap: 0.8rem; padding: 0.6rem 0.9rem; }
  .cta-bar p { font-size: 0.78rem; }
  .business-bridge {
    margin-inline: 0.75rem;
    border-radius: var(--r-md);
  }
}

/* --- production request ------------------------------------------------------------------- */

.request-block { background: var(--surface-2); }

.request-panel {
  max-width: 820px;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.request-panel .block-lead { margin-bottom: 1.35rem; }

.request-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.request-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border-left: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 0.84rem;
}

.request-steps li:first-child { border-left: 0; padding-left: 0; }

.request-steps strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deeper);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.request-note {
  margin-top: 0.75rem;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.final-quiet { margin-top: 14px; }

@media (max-width: 700px) {
  .request-steps { grid-template-columns: 1fr; }
  .request-steps li,
  .request-steps li:first-child {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    padding: 0.85rem 0;
  }
  .request-steps li:first-child { border-top: 0; }
}


/* The paper ground ended at roughly 600 px on a 1440 by 900 viewport and
   left a band of a different grey under the footer (UX review F26). A flex
   column with the footer pushed down fills the viewport whatever the page
   is worth in content. */
.legal-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.legal-page main { flex: 1 0 auto; }
.legal-page .site-foot { margin-top: auto; }

.legal-block { text-align: left; }

.notfound-links {
  list-style: none;
  display: grid;
  gap: 0.2rem;
  margin-top: 1rem;
}

.notfound-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.legal-block h2 { margin-bottom: 10px; }

.legal-body {
  max-width: 680px;
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

/* The section headings inside a legal page are h2 now, under the page's
   own h1. They were h3 under an h2 with no h1 anywhere, which axe reads
   as both a missing top level and a skipped level. The size is unchanged;
   only the outline moved. */
.legal-body h2 {
  margin-top: 14px;
  font-size: 1.02rem;
}

.legal-body p { color: var(--dim); font-size: 0.95rem; }

/* Which version of the provider register this page reflects. Quieter than
   the disclosure itself, but on the page so a reader can date it. */
.legal-body p.provider-register-stand {
  font-size: 0.85rem;
  color: var(--faint);
}

/* deliberately loud: the address placeholder must be impossible to miss
   so an unfilled Impressum can never slip live unnoticed */
.legal-placeholder {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #7a4d00;
  background: #ffe9a8;
  border: 2px dashed #c98a00;
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  margin: 0.15rem 0;
}


/* --- public share page ------------------------------------------------- */

.share-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 48px;
  text-align: center;
  display: grid;
  gap: 16px;
}

.share-title { font-size: clamp(1.6rem, 4vw, 2.4rem); }

.share-figure {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.share-figure img,
.share-video {
  max-width: 100%;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

.share-figure figcaption {
  font-size: 0.8rem;
  color: var(--faint);
}

/* Same provider-neutral notice as the studio viewer, same quiet register. */
.ai-preview-notice {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--faint);
}

.share-viewer {
  position: relative;
  width: 100%;
  height: min(68vh, 560px);
  overflow: hidden;
  touch-action: none;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 20%, var(--surface) 0%,
    var(--paper-deep) 72%);
  box-shadow: var(--shadow-md);
}
.share-viewer canvas { display: block; width: 100% !important;
  height: 100% !important; cursor: grab; }
.share-viewer canvas:active { cursor: grabbing; }
.share-viewer .viewer3d-finish, .share-viewer .viewer3d-hint {
  position: absolute; z-index: 2; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(255,255,255,.9); color: var(--dim);
  font-size: .68rem; font-weight: 650; padding: .35rem .7rem;
  backdrop-filter: blur(8px);
}
.share-viewer .viewer3d-finish { top: .75rem; left: .75rem; }
.share-viewer .viewer3d-hint { left: 50%; bottom: .75rem;
  transform: translateX(-50%); white-space: nowrap; }

.share-lead { color: var(--dim); }

.share-actions {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-top: 8px;
}

.share-note { font-size: 0.8rem; color: var(--faint); }

.share-ready { display: inline-flex; flex: 1 1 260px; }
/* Public storytelling pass: real objects lead, controls explain the process. */
.origin-mark { width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; border-radius: 50%; border: 1px solid var(--accent-deep); display: grid; place-items: center; }
.origin-mark svg { width: 1.6rem; height: 1.6rem; fill: var(--accent-deep); }
.origin strong { color: var(--ink); font-weight: 700; }
.business-bridge { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; max-width: 1360px; margin: clamp(2.5rem,6vw,6rem) auto; padding: 0 var(--pad); color: var(--ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.business-bridge-image { position: relative; margin: 0; min-width: 0; }
.business-bridge-image img { display:block; width:100%; aspect-ratio: 1.1; object-fit:cover; object-position: 52% center; border-radius: 4px; }
.business-bridge-image figcaption { position:absolute; left: -1rem; bottom: 1.5rem; display:grid; gap:.15rem; padding:1rem 1.6rem; background:var(--surface); box-shadow:0 8px 24px #1d1a1712; transform:rotate(-3deg); }
.business-bridge-image figcaption span { font-size:.78rem; color:var(--dim); }
.business-bridge-image figcaption strong { font-size:clamp(1.2rem,2vw,1.75rem); letter-spacing:-.04em; }
.business-bridge-copy { min-width: 0; padding: 0; }
.business-bridge .kicker { color:var(--accent-deep); }
.business-bridge h2 { font-size:clamp(2.7rem,5.5vw,5.5rem); line-height:1; letter-spacing:-.065em; color:var(--ink); }
.business-bridge-copy > p:not(.kicker) { color:var(--dim); max-width:35ch; margin-top:1.5rem; font-size:1.06rem; line-height:1.6; }
/* A list, spaced by gap. It was three spans joined by a middot drawn from
   a pseudo-element, which is the glyph the house rule forbids however it
   is produced, and the wrapper carried an aria-label that ARIA in HTML
   drops on a generic element (UX review F06, perf audit F18). */
.business-occasions { list-style:none; display:flex; flex-wrap:wrap; gap:.65rem 2rem; margin:1.5rem 0 2rem; font-size:.8rem; color:var(--dim); }
.business-bridge .btn { background:var(--ink); color:white; }
.business-bridge .btn:hover { background:var(--accent-deep); }
.process-story { text-align:left; }
/* One column, one optical baseline. The lead used to sit in a second grid
   track at the far right on a different baseline from the heading it
   belongs to, which orphaned it across the gutter (UX review F15). */
.process-story-heading { margin-bottom:2.5rem; }
.process-story-heading h2 { font-size:clamp(2.5rem,4.5vw,4.6rem); max-width:19ch; line-height:1.05; letter-spacing:-.055em; }
.process-story-heading .block-lead { max-width:34rem; margin:1rem 0 0; }
.process-story-body { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.process-preview { position:relative; aspect-ratio:1.08; overflow:hidden; background:#e9e4dd; border-radius:4px; }
.process-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.05); transition:opacity .45s ease,transform .7s ease; }
.process-image.is-active { opacity:1; transform:scale(1); }
.process-preview-label { position:absolute; bottom:1.2rem; left:1.2rem; padding:.55rem .8rem; background:var(--surface); color:var(--ink); font-size:.8rem; box-shadow:0 4px 18px #1d1a1715; }
.process-choices { list-style:none; border-top:1px solid var(--line); margin-bottom:2rem; }
.process-choice { width:100%; display:grid; grid-template-columns:2rem 1fr 1rem; align-items:start; gap:.9rem; padding:1.65rem 0; text-align:left; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; }
.process-choice strong { display:block; font-size:clamp(1.05rem,1.8vw,1.5rem); line-height:1.3; letter-spacing:-.025em; font-weight:650; }
.process-choice small { display:block; margin-top:.5rem; color:var(--dim); font-size:.85rem; line-height:1.5; }
.process-index { font-family:var(--mono); color:var(--dim); font-size:.78rem; padding-top:.3rem; }
/* The SVG arrow from the page sprite, so the site draws one arrow at one
   weight instead of a decorative glyph here and a sprite arrow elsewhere
   (UX review F22). */
.process-choice-arrow { color:var(--accent-deep); opacity:0; width:1.1rem; height:1.1rem; margin-top:.35rem; }
.process-choice.is-active .process-index,.process-choice.is-active strong { color:var(--accent-deep); }
.process-choice.is-active .process-choice-arrow { opacity:1; }
.process-choice:hover strong { color:var(--accent-deep); }
.process-cost-note { margin-top:1rem; font-size:.75rem; color:var(--dim); }
.request-block { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,7rem); align-items:center; text-align:left; }
.request-copy h2 { font-size:clamp(2.5rem,4.4vw,4.5rem); line-height:1.07; letter-spacing:-.055em; }
.request-copy .block-lead { max-width:33ch; margin:1.5rem 0 2rem; }
.request-copy .request-note { text-transform:none; font: .8rem/1.5 var(--sans); letter-spacing:0; }
.request-block .request-panel { padding:1.3rem 1.5rem; background:var(--surface); border:1px solid var(--line); border-radius:5px; box-shadow:0 16px 48px #1d1a1708; transform:rotate(1.5deg); }
.request-object { height:240px; position:relative; margin-bottom:1.2rem; overflow:hidden; background:var(--bg); }
.request-object img { width:100%; height:100%; object-fit:cover; object-position:center 45%; }
.request-object > span { position:absolute; left:.8rem; bottom:.8rem; padding:.35rem .6rem; background:var(--surface); font-size:.75rem; }
.request-block .request-steps { display:grid; grid-template-columns:1fr; gap:0; margin:0; }
.request-block .request-steps li { display:grid; grid-template-columns:1.8rem 1fr; gap:.8rem; padding:1rem 0; border:0; border-top:1px solid var(--line-soft); text-align:left; }
.request-block .request-steps li > strong { width:1.65rem;height:1.65rem; }
.request-steps b { display:block; margin-bottom:.25rem; color:var(--ink); font-size:.9rem; font-weight:650; }
.request-steps li > span { color:var(--dim); font-size:.8rem; }
.request-detail { padding-top:.7rem; border-top:1px solid var(--line); font-size:.75rem; color:var(--dim); }
.request-detail summary { cursor:pointer; padding:.3rem 0; }
.request-detail p { margin-top:.5rem; line-height:1.6; }

@media (max-width:760px) {
  .business-bridge { grid-template-columns:1fr; gap:2rem; margin:3rem auto; }
  .business-bridge-image img { aspect-ratio:1.45; }
  .business-bridge-image figcaption { left:.7rem; bottom:.7rem; padding:.75rem 1rem; }
  .business-bridge h2 { font-size:3rem; }
  .business-bridge h2 br { display:none; }
  .business-bridge-copy > p:not(.kicker) { margin-top:1rem; }
  .business-occasions { margin:1rem 0 1.5rem; }
  .process-story-heading { display:block; }
  .process-story-heading .block-lead { margin-top:1rem; }
  .process-story-body { grid-template-columns:1fr; gap:1rem; }
  .process-preview { aspect-ratio:1.3; }
  .process-choice { padding:1.2rem 0; }
  .process-choice strong { font-size:1.1rem; }
  .request-block { grid-template-columns:1fr; }
  .request-block .request-panel { transform:none; padding:1rem; }
  .request-copy h2 br:last-child { display:none; }
  .request-object { height:220px; }
}
@media (prefers-reduced-motion:reduce) {
  .process-image { transition:none; transform:none; }
}
.business-bridge-image img { height:auto; }
.origin-mark { background:var(--accent-deep); }
.origin-mark svg { fill:#fff; }

/* --- phone pass, 08.10.2026 ------------------------------------------------------------- */

/* SD reviewed the site on a phone on 08.10.2026: "completely not
   optimized". A phone audit at 320, 375, 390, 430 and 844x390 measured
   each defect below and then measured each rule here injected into the
   page before it was written down. The rules sit last so they win over
   the layered rules above without rewriting them. */

@media (max-width: 860px) {
  /* The 44 px rule above turned these summaries into flex, which threw
     away their two-column grid and squeezed the titles into an 81 px
     column ("Feine / Details"). */
  .quality-options summary { display: grid; align-content: center; }
  /* Under the 46vh cap the hero box was narrower than its column and sat
     flush left. svh, so the phone's collapsing toolbar does not jump it. */
  .hero-media { justify-self: center; max-height: 46svh; }
  /* The bar it cleared is already hidden at the end of the page; the
     padding left a dead grey band above the footer. */
  main { padding-bottom: 0; }
}

/* The sticky bar wrapped into two rows (96 px at 375, 116 at 320) and
   took a fifth of the screen. One row, the note dropped where it cannot
   fit. */
@media (max-width: 720px) {
  .cta-bar {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem var(--pad) calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
  .cta-bar p { min-width: 0; font-size: 0.875rem; line-height: 1.3; }
  .cta-bar p strong { display: block; }
  .cta-bar .btn { flex: none; padding-inline: 1rem; }
}

@media (max-width: 380px) {
  #cta-bar-note { display: none; }
}

@media (max-width: 760px) {
  /* The rotated caption card covered 59 % of its own image at 320. */
  .business-bridge-image figcaption {
    position: relative;
    left: auto;
    bottom: auto;
    margin: -1.4rem 0.75rem 0;
    padding: 0.75rem 1rem;
    transform: rotate(-1.5deg);
  }
  .business-bridge-image figcaption strong { font-size: 1.05rem; }

  /* One heading scale: the H1 was 30 px under three H2s of 40 to 48 px,
     and -0.06em tracking ran words together at that size. */
  .hero h1 { font-size: clamp(2.1rem, 8.6vw, 2.5rem); }
  .business-bridge h2,
  .process-story-heading h2,
  .request-copy h2 {
    font-size: clamp(2rem, 8.2vw, 2.4rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
  }
  h1, h2, h1 .line, h2 .line { text-wrap: balance; }

  /* Tapping step 03 changed a picture that was off screen (0 px visible
     at 320). The preview now stays pinned while the steps scroll. */
  .process-story-body { align-items: start; }
  .process-preview {
    position: sticky;
    top: 0.75rem;
    z-index: 1;
    aspect-ratio: 1.6;
    box-shadow: 0 12px 24px -16px rgba(29, 26, 23, 0.45);
  }

  /* The couple was small in a 3:2 frame on a phone. */
  .promise-media .media-slot { aspect-ratio: 5 / 4; }
}

/* Four square cards one under the other were 1,573 px at 375: two
   screens of scrolling for four pictures. Two columns: 436 px. */
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.75rem; }
  .gallery-card figcaption { font-size: 0.85rem; line-height: 1.35; margin-top: 0.5rem; }
}

/* Landscape phones: the stacked hero made the couple a 144 px thumbnail
   and pushed the headline below the fold. Side by side instead. */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-areas: "copy media";
  }
  .hero-media { max-height: calc(100svh - 6rem); }
  .ba { width: min(100%, 560px, 82svh); }
}

/* A touch screen in landscape is wider than 860 px on large phones and
   got the desktop's 34 px links. */
@media (pointer: coarse) {
  /* Not .head-signin: its display:none below 460 px must hold, or the
     header grows a second row on a touch phone. */
  .btn,
  .quiet-link:not(.head-signin),
  .foot-links a,
  .request-detail summary,
  .site-head .brand,
  .site-head nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .faq summary { min-height: 44px; display: flex; align-items: center; }
  .quality-options summary { min-height: 44px; }
}

/* Labels under the 12 px floor and sentences under 14 px. */
.scrub-hint { font-size: 0.75rem; letter-spacing: 0.08em; white-space: nowrap; }
.ba-tag { font-size: 0.75rem; }
.process-cost-note,
.request-steps li > span,
.request-detail { font-size: 0.875rem; }
.quality-options summary small { font-size: 0.82rem; }

/* Footer rows were 63 px apart: a 1.2 rem row gap on top of 44 px
   targets. */
.foot-links { gap: 0 1.2rem; }

/* "3D- / Figur?" split at the hyphen. */
.nobr { white-space: nowrap; }
.final-cta h2 { text-wrap: balance; }

/* Check marks centred on two-line items read as floating. */
.check-list li { align-items: flex-start; }
.check-list .icon { margin-top: 0.2em; }

/* A tap is not a hover: on a touch screen these stuck after the finger
   left (the button stayed ember, the card stayed lifted). */
@media (hover: none) {
  .btn:hover,
  .btn-invert:hover { background: var(--ink); color: var(--surface); }
  .gallery-card:hover picture { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line-soft); }
  .gallery-card:hover picture img { transform: none; }
  .price-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line-soft); }
  .process-choice:hover strong { color: inherit; }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Legal pages: the H1 inherited a 1.55 line height (53 px between lines
   at 34 px) and the section headings were barely larger than the text. */
.legal-block h1 {
  font-size: clamp(1.9rem, 7.5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.legal-body h2 { font-size: 1.15rem; margin-top: 1.4rem; }

/* The occasion ticker cut words hard at both edges. */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* On touch the picture itself is the slider handle (figuren.js
   initCompare); the invisible range input stays for the keyboard. */
@media (pointer: coarse) {
  .ba input[type="range"] { pointer-events: none; }
}

/* --- phone section menu, 08.10.2026 --------------------------------------- */

.menu-toggle { display: none; }

@media (max-width: 860px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  .site-head.menu-open .menu-toggle { background: rgba(29, 26, 23, 0.06); }
  .site-head.menu-open nav#site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 70;
    margin: 0;
    padding: 0.4rem var(--menu-pad, 1rem) 0.8rem;
    background: var(--menu-bg, #f6f4f1);
    border-bottom: 1px solid rgba(29, 26, 23, 0.12);
    box-shadow: 0 18px 32px -24px rgba(29, 26, 23, 0.45);
    overflow: visible;
    white-space: normal;
  }
  .site-head.menu-open nav#site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 0.25rem;
    border-bottom: 1px solid rgba(29, 26, 23, 0.07);
    font-size: 1rem;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
  }
  .site-head.menu-open nav#site-nav a:last-child { border-bottom: 0; }
}

@media (max-width: 860px) {
  /* Static on a phone (UX review F09); the open list hangs from it. */
  .site-head {
    position: relative;
    flex-wrap: nowrap;
    gap: 0.5rem;
    --menu-pad: var(--pad);
    --menu-bg: var(--bg);
  }
  /* The wordmark on the left, the button and the menu on the right. The
     button keeps its one line instead of shrinking into two. */
  .site-head .head-actions { margin-left: auto; flex: none; }
  .site-head .head-cta { white-space: nowrap; }
}
/* At 320 px the wordmark, the button and the menu do not fit one row: the
   button wrapped to two lines. The mark alone carries the brand there; the
   link keeps its name «Sculptwerk Startseite». */
@media (max-width: 359px) {
  .site-head .brand-word { display: none; }
}

/* Where the sign-in link is shown on a touch screen, it gets the 44 px
   target the other header controls have. */
@media (pointer: coarse) and (min-width: 561px) {
  .site-head .head-signin { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 860px) {
  /* The toggle precedes the list in the DOM for Tab and screen readers;
     on screen it stays at the right end of the row. */
  .site-head .menu-toggle { order: 2; }
  .site-head .head-actions { order: 1; }
}

/* 08.10.2026, four-eyes on PR 89: between 461 and about 540 px the full
   button label, «Anmelden» and the menu did not fit one row and the page
   scrolled sideways. The short label and the hidden sign-in hold to 560 px;
   the sign-in sits in the footer and in the Studio. */
@media (max-width: 560px) {
  .head-cta .head-cta-long { display: none; }
  .head-signin { display: none; }
}