/* Kapitel «Vom Strich zum Haus» (strich3d.js), seit 29.9.2026.
   Planblatt-Rahmen, Plankopf, Nordpfeil und Massstab als Haarlinien, Farbe nur im Schlussfoto. */
.strich { position: relative; height: 560vh; background: var(--bg); }
.strich-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--bg); }
.strich canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.strich-sheet { position: absolute; inset: calc(var(--nav-h) + 14px) clamp(20px, 4vw, 64px) clamp(18px, 3vh, 30px); pointer-events: none; }
.strich-frame { position: absolute; inset: 0; border: 1px solid var(--line); }
.strich-frame b { position: absolute; background: var(--ink); }
.strich-frame .t1 { left: -1px; top: -1px; width: 14px; height: 1px; } .strich-frame .t2 { left: -1px; top: -1px; width: 1px; height: 14px; }
.strich-frame .t3 { right: -1px; bottom: -1px; width: 14px; height: 1px; } .strich-frame .t4 { right: -1px; bottom: -1px; width: 1px; height: 14px; }
.strich-north { position: absolute; top: 22px; right: 22px; width: 34px; height: 34px; }
.strich-scale { position: absolute; left: 22px; bottom: 22px; display: flex; align-items: flex-end; gap: 10px; }
.strich-scale .bar { display: flex; height: 5px; border: 1px solid var(--ink); }
.strich-scale .bar span { width: 22px; } .strich-scale .bar span:nth-child(odd) { background: var(--ink); }
.strich-scale b { font-weight: 480; font-size: 10px; letter-spacing: 0.22em; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.strich-pk {
  position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: auto auto;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: rgba(255,255,255,0.9);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim); font-weight: 480;
}
.strich-pk > div { padding: 9px 14px; border-right: 1px solid var(--line); }
.strich-pk > div:last-child { border-right: 0; }
.strich-pk .pk-top { grid-column: 1 / -1; border-bottom: 1px solid var(--line); border-right: 0; color: var(--ink); display: flex; gap: 14px; justify-content: space-between; }
.strich-pk .pk-phase { color: var(--ink); min-width: 12ch; font-weight: 560; }
.strich-pk .num { font-variant-numeric: tabular-nums; }
.strich-beats { position: absolute; left: clamp(20px, 4vw, 64px); top: 50%; transform: translateY(-50%); width: min(430px, 40vw); pointer-events: none; }
.strich-beat { position: absolute; left: 0; top: 0; transform: translateY(-50%); padding-left: 22px; }
.strich-beat .eyebrow { display: block; margin-bottom: 18px; opacity: 0; transition: opacity 0.6s var(--ease); }
.strich-beat h2 { overflow: hidden; }
.strich-beat h2 span { display: block; transform: translateY(108%); transition: transform 1.05s var(--ease); }
.strich-beat p { margin-top: 18px; opacity: 0; transform: translateY(14px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.strich-beat.is-on h2 span { transform: none; }
.strich-beat.is-on p { opacity: 1; transform: none; transition-delay: 0.12s; }
.strich-beat.is-on .eyebrow { opacity: 1; }
.strich-rail { position: absolute; right: calc(clamp(20px, 4vw, 64px) + 22px); top: 50%; transform: translateY(-50%); height: 34vh; width: 1px; background: var(--line); }
.strich-rail i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--ink); transform-origin: top; transform: scaleY(0); }
.strich-rail b { position: absolute; left: -3px; width: 7px; height: 1px; background: var(--ink); }
.strich-photo { position: absolute; inset: 0; clip-path: inset(100% 0 0 0); will-change: clip-path; }
.strich-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.strich-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,17,15,0.92) 0%, rgba(20,17,15,0.55) 30%, rgba(20,17,15,0.16) 58%, rgba(20,17,15,0.32) 100%); }
.strich-cap { position: absolute; left: clamp(20px, 4vw, 64px); right: clamp(20px, 4vw, 64px); bottom: clamp(36px, 8vh, 80px); z-index: 2; color: var(--ink-on-dark); }
.strich-cap .eyebrow { color: var(--ink-on-dark-dim); }
.strich-cap h2 { font-size: clamp(2.4rem, 7.4vw, 7rem); font-weight: 520; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 14px; }
.strich-loader { position: absolute; left: 50%; top: 50%; width: 160px; height: 1px; background: var(--line); transform: translate(-50%, -50%); transition: opacity 0.6s var(--ease); }
.strich-loader i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0.02); transition: transform 0.3s linear; }
.strich.is-ready .strich-loader { opacity: 0; }
.strich-fallback { display: none; position: absolute; inset: calc(var(--nav-h) + 14px) clamp(20px, 4vw, 64px) 30px; }
.strich-fallback img { width: 100%; height: 100%; object-fit: contain; }
.strich.is-failed .strich-fallback { display: block; }
.strich.is-failed canvas, .strich.is-failed .strich-loader { display: none; }

@media (max-width: 860px) {
  .strich { height: 460vh; }
  .strich-beats { width: auto; right: clamp(20px, 4vw, 64px); top: auto; bottom: 150px; transform: none; }
  .strich-beat { top: auto; bottom: 0; transform: none; padding: 14px 0; background: rgba(255,255,255,0.9); }
  .strich-beat p { display: none; }
  .strich-rail { display: none; }
  .strich-pk .pk-hide { display: none; }
  .strich-north { width: 26px; height: 26px; top: 14px; right: 14px; }
  .strich-scale { left: 14px; bottom: auto; top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .strich-beat h2 span, .strich-beat p, .strich-beat .eyebrow { transition: none; }
}