/* The exploded facade (home page, subcontractors): the layers of one facade pulled apart along a line,
   each with its leader line, name and quantity. Stacked until the figure scrolls into view (.in), then the
   layers separate in order, the lines draw in and the labels appear. Without JS or with reduced motion it
   shows the finished state. Colours follow the site tokens; wood and metal tones are the facade's own. */
.xp { --xp-ease: cubic-bezier(.22, .7, .1, 1); }
.xp-stage { position: relative; width: 100%; max-width: 720px; margin: 0 auto; }
.xp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-svg .f, .xp-svg .t, .xp-svg .s { stroke: rgba(10, 4, 10, .38); stroke-width: .8; stroke-linejoin: round; }
.xp-svg .folie .f { fill: #1d1b20; } .xp-svg .folie .t { fill: #46434c; } .xp-svg .folie .s { fill: #121014; }
.xp-svg .rail .f { fill: #D8B07A; } .xp-svg .rail .t { fill: #EBCB9C; } .xp-svg .rail .s { fill: #A47B49; }
.xp-svg .panel .f { fill: url(#xpWood); } .xp-svg .panel .t { fill: #DDB07B; } .xp-svg .panel .s { fill: #8E6439; }
.xp-svg .offcut .f { fill: url(#xpHatch); } .xp-svg .offcut .t { fill: #DDB07B; } .xp-svg .offcut .s { fill: #8E6439; }
.xp-svg .sill .f { fill: #8F8D89; } .xp-svg .sill .t { fill: #BDBAB4; } .xp-svg .sill .s { fill: #5E5C59; }
.xp-svg .ghost { fill: none; stroke: rgba(var(--ink-rgb), .45); stroke-width: 1; stroke-dasharray: 4 4; }
.xp-svg .shaft { stroke: #E7E1D6; stroke-width: 1.5; stroke-linecap: round; }
.xp-svg .head { fill: #F3EEE4; stroke: rgba(10, 4, 10, .4); stroke-width: .6; }
.xp-svg .cornerbox .f, .xp-svg .cornerbox .t, .xp-svg .cornerbox .s { fill: var(--warn-bg); stroke: var(--warn); stroke-width: 1.2; stroke-dasharray: 5 4; }
.xp-svg .xl { transform: translate(0, 0); transition: transform 1.25s var(--xp-ease); transition-delay: calc(var(--i) * .13s); }
.xp.in .xp-svg .xl, .no-js .xp .xp-svg .xl { transform: translate(var(--tx), var(--ty)); }
.xp-svg .xl.scr, .xp-svg .xl.off, .xp-svg .ghost { transition-property: transform, opacity; }
.xp-svg .ghost { opacity: 0; transition: opacity .6s .9s; }
.xp.in .xp-svg .ghost, .no-js .xp .xp-svg .ghost { opacity: 1; }
.xp-svg .ld { fill: none; stroke: rgba(var(--ink-rgb), .55); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s var(--xp-ease); transition-delay: calc(1.05s + var(--i) * .1s); }
.xp-svg .ld.warn { stroke: var(--warn); }
.xp-svg .dot { fill: var(--ink); opacity: 0; transition: opacity .3s; transition-delay: calc(1.05s + var(--i) * .1s); }
.xp-svg .dot.warn { fill: var(--warn); }
.xp.in .xp-svg .ld, .no-js .xp .xp-svg .ld { stroke-dashoffset: 0; }
.xp.in .xp-svg .dot, .no-js .xp .xp-svg .dot { opacity: 1; }
.xp-labels { position: absolute; inset: 0; list-style: none; pointer-events: none; }
.xp-labels li { position: absolute; left: var(--x); top: var(--y); transform: translate(8px, -50%); opacity: 0; transition: opacity .6s var(--xp-ease), transform .7s var(--xp-ease); transition-delay: calc(1.35s + var(--i) * .1s); white-space: nowrap; }
.xp.in .xp-labels li, .no-js .xp .xp-labels li { opacity: 1; transform: translate(14px, -50%); }
.xp-labels .k { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.xp-labels b { display: block; font-weight: 500; font-size: 15.5px; letter-spacing: -.01em; color: var(--ink); margin-top: 2px; }
.xp-labels li.warn .k { color: var(--warn); }
.xp-labels li.warn b { font-size: 14px; color: var(--ink-2); font-weight: 400; }
.xp-legend { display: none; list-style: none; margin: 0; padding: 4px 18px 14px; }
.xp-legend li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.xp-legend li:last-child { border-bottom: 0; }
.xp-legend i { width: 12px; height: 12px; border-radius: 2px; flex: none; background: var(--c); }
.xp-legend i.dash { background: none; border: 1.5px dashed var(--warn); }
.xp-legend b { margin-left: auto; font-weight: 500; }
.xp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.xp-foot .label { font-size: 10.5px; margin-right: 2px; }
.xp-foot .sp { margin-left: auto; font-size: 13px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .xp-svg .xl, .xp-svg .ld, .xp-svg .dot, .xp-svg .ghost, .xp-labels li { transition: none; }
}
@media (max-width: 760px) {

  .xp-labels, .xp-svg .ld, .xp-svg .dot { display: none; }
  /* no label column on a phone: the drawing fills the stage */
  .xp-stage { aspect-ratio: 1 / 1 !important; overflow: hidden; }
  .xp-svg { width: 170%; height: 170%; max-width: none; left: -13%; top: 0; }
  .xp-legend { display: block; }
}
.xp-svg .seam { stroke: rgba(var(--ink-rgb), .13); stroke-width: 1; }
.xp .open-l { border-top: 1px solid var(--line); }
.xp-m { margin-left: auto; font-size: 13px; color: var(--ink-2); }
.xp-m b { color: var(--ink); font-weight: 500; }
/* the two scope cards stack, so the exploded facade gets the full width */
.scope.stack { grid-template-columns: 1fr; gap: 96px; }
.scope.stack .scope-c .panel { flex: none; }
@media (max-width: 760px) { .scope.stack { gap: 72px; } .xp-m { margin-left: 0; width: 100%; } }
.xp-svg .shaft { opacity: 0; transition: opacity .5s .45s; }
.xp.in .xp-svg .shaft, .no-js .xp .xp-svg .shaft { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .xp-svg .shaft { transition: none; } }