/* Photo-derived W113 profile, calibrated to the three main dimensions.
   Geometry and interaction from the approved Seitenriss prototype. */
.main.werkriss {
  width: min(680px, 100%);
  margin-block-start: clamp(28px, 5svh, 48px);
  --ink: #514e47;
  --quiet: oklch(52% .013 84);
  --pale: oklch(70% .012 84);
  font-family: var(--mono);
}
@media (max-width: 760px) {
  .main.werkriss { width: calc(100vw - 32px); margin-inline-start: calc(16px - var(--g)); }
}
.werkriss .drawing{display:block;padding:0;inline-size:100%;border:0;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.werkriss .drawing:focus-visible{outline:1px solid var(--quiet);outline-offset:12px}.werkriss .drawing:active{opacity:.82}.werkriss svg{display:block;inline-size:100%;block-size:auto;overflow:visible}.werkriss figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-block-start:22px;padding-inline:calc(94 / 1040 * 100%);color:var(--quiet);font-size:11px;line-height:1.6}.werkriss .hint{margin:0;inline-size:32ch;max-inline-size:100%;text-align:end}.werkriss .car{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.werkriss .detail{stroke:var(--quiet);stroke-width:.7}.werkriss .fine{stroke:var(--pale);stroke-width:.55}.werkriss .contour{stroke-width:1.5}.werkriss .tire{stroke-width:1.5}.werkriss .dim{fill:none;stroke:var(--quiet);stroke-width:.65}.werkriss .dim text{fill:var(--quiet);stroke:none;font-size:18px;text-anchor:middle;font-variant-numeric:tabular-nums}.werkriss .extension{stroke:var(--pale);stroke-width:.55}.werkriss .dimensions{opacity:0;pointer-events:none}.werkriss .drawing[aria-pressed=true] .dimensions{opacity:1}.werkriss .drawing[aria-pressed=true] .datum{opacity:1}.werkriss .datum{opacity:.3}.werkriss .trace{fill:none;stroke:oklch(26% .014 84);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;opacity:0;pointer-events:none}.werkriss .ink-focus{opacity:0;pointer-events:none}.werkriss .ink-focus .car{stroke:oklch(28% .014 84)}.werkriss .cursor-tip{fill:var(--paper);stroke:var(--quiet);stroke-width:.6;opacity:0;pointer-events:none}.werkriss .drawing.keyboard .dimensions{transition:none}.werkriss .drawing.keyboard .datum{transition:none}
@media(prefers-reduced-motion:no-preference){.werkriss .dimensions{transition:opacity 200ms cubic-bezier(.23,1,.32,1)}.werkriss .datum{transition:opacity 180ms cubic-bezier(.23,1,.32,1)}.werkriss .drawing{transition:opacity 120ms cubic-bezier(.23,1,.32,1)}}
@media(max-width:600px){.werkriss .hint{text-align:center}.werkriss figcaption{padding-inline:12px;font-size:10px;justify-content:center;gap:4px 14px}.werkriss .dim text{font-size:32px}.werkriss .dim .label-background{stroke-width:37px}.werkriss .car{stroke-width:1.85}.werkriss .car .contour,.werkriss .car .tire{stroke-width:2.25}.werkriss .car .detail{stroke-width:1.2}.werkriss .car .fine{stroke-width:.9}}

@media (prefers-reduced-motion: reduce) { .werkriss .drawing { cursor: default; } .werkriss .drawing:active { opacity: 1; } }

/* Opening: the elevation is plotted once (draw-in.js). */
.wr-intro .werkriss svg > :not(defs) { visibility: hidden; }
.werkriss .drawing.wr-dims .dimensions { opacity: 1; }
.werkriss .drawing.wr-dims .datum { opacity: 1; }
.werkriss .drawing.wr-instant .dimensions, .werkriss .drawing.wr-instant .datum { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .werkriss .drawing:not(.wr-dims) .dimensions { transition-duration: 420ms; }
}