/* =========================================================
   Schreinerei Haag – Demo (GreenLabz Studio)
   Bauplan-Ästhetik: Papier, Tinte, Zimmermannsbleistift-Orange, echte Holzmaserung
   ========================================================= */
:root {
  --paper: #efe8dc;
  --paper-2: #e6ddcd;
  --ink: #1d1914;
  --ink-dim: rgba(29, 25, 20, 0.62);
  --walnut: #2b1d13;
  --oak: #b9854c;
  --pencil: #e8572a;
  --f-big: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-body: "Inter", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.45; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.big { margin: 0; font-family: var(--f-big); font-weight: 900; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.005em; }
.big span { display: block; }

/* Kopfzeile */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 28px; padding: 22px clamp(20px, 4vw, 56px); }
.hd-logo { display: flex; align-items: baseline; gap: 10px; }
.hd-logo b { font-family: var(--f-big); font-weight: 900; font-size: 30px; letter-spacing: 0.04em; }
.hd-logo span { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.hd-nav { display: flex; gap: 26px; margin-left: auto; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.hd-nav a { position: relative; padding: 12px 0; }
.hd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px; background: var(--pencil); transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hd-nav a:hover::after { transform: scaleX(1); }
.hd-cta { padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; gap: 10px; transition: background 0.3s ease; }
.hd-cta:hover { background: var(--pencil); }

/* 1) Bühne: gepinnt */
.stage { position: relative; height: 380vh; }
.stage-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: 1fr; align-items: center; }
.copy { position: relative; z-index: 2; padding: 0 clamp(20px, 5vw, 72px); width: min(58vw, 780px); }
.copy-kicker { margin: 0 0 22px; color: var(--pencil); }
.copy-swap { position: relative; height: calc(2 * 0.9 * clamp(72px, 12.4vw, 200px) + 10px); overflow: hidden; }
.copy-swap .big { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; font-size: clamp(72px, 12.4vw, 200px); white-space: nowrap; will-change: transform; }
/* „Vom Plan / zum Stück.“ und „34 Teile. / Ein Stuhl.“ sind länger – etwas kleiner, gleiche Grundlinie */
.copy-swap .copy-b, .copy-swap .copy-c { font-size: clamp(52px, 8.6vw, 140px); }
.copy-b, .copy-c { transform: translateY(110%); }
.copy-c i { font-style: normal; color: var(--pencil); }
.copy-sub { max-width: 34ch; margin: 26px 0 0; font-size: 17px; color: var(--ink-dim); }
.chair { position: absolute; right: clamp(-70px, -4.6vw, 0px); top: 50%; height: min(92vh, 900px); width: auto; transform: translateY(-46%); overflow: visible; }
.chair .part .ol { fill: transparent; stroke: var(--ink); stroke-opacity: var(--outline, 1); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chair .part .wood, .chair .part .shade { stroke: none; }
.chair .dim { fill: none; stroke: var(--pencil); stroke-width: 1.6; }
.chair .dim.ext { stroke-width: 1; stroke-opacity: 0.7; }
.chair .dim-t { font-family: var(--f-mono); font-size: 18px; font-weight: 500; fill: var(--pencil); letter-spacing: 0.06em; }
.chair .lbl { font-family: var(--f-mono); font-size: 15px; font-weight: 500; fill: var(--pencil); letter-spacing: 0.08em; }
.chair .lbl-line { stroke: var(--pencil); stroke-width: 1; stroke-opacity: 0.6; }
.stage-foot { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 26px; margin: 0; color: var(--ink-dim); }
@media (max-width: 860px) {
  .stage-pin { align-items: start; padding-top: 110px; }
  .chair { height: 56vh; right: 50%; top: auto; bottom: 6vh; transform: translateX(50%); }
  .hd-nav { display: none; }
}

/* 2) Hölzer */
.woods { position: relative; background: var(--walnut); color: var(--paper); padding: 16vh clamp(20px, 5vw, 72px) 18vh; overflow: hidden; }
.woods-title { font-size: clamp(56px, 8.6vw, 140px); }
.woods-title span:last-child { color: var(--oak); }
.panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 28px); margin-top: 8vh; }
.panel { will-change: transform; }
.panel-wood { height: 46vh; border-radius: 6px; background-color: var(--wood); position: relative; overflow: hidden; box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.8); }
.panel-wood::before {
  content: ""; position: absolute; inset: -20%;
  background: repeating-radial-gradient(ellipse 140% 30% at 30% 120%, transparent 0 7px, color-mix(in srgb, var(--grain) 40%, transparent) 8px 9px, transparent 10px 17px);
  opacity: 0.9;
}
.panel-wood::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 40%, rgba(0, 0, 0, 0.22)); }
.panel h3 { margin-top: 18px; font-size: clamp(40px, 5vw, 80px); }
.panel p { margin: 8px 0 0; color: rgba(239, 232, 220, 0.62); }
@media (max-width: 860px) { .panels { grid-template-columns: 1fr; } .panel-wood { height: 26vh; } }

/* 3) Termin */
.cta { position: relative; min-height: 100vh; padding: 16vh clamp(20px, 5vw, 72px) 10vh; display: flex; flex-direction: column; justify-content: center; background: var(--paper); }
.cta > .mono { margin: 0 0 20px; color: var(--pencil); }
.cta-title { font-size: clamp(110px, 21vw, 340px); line-height: 1; }
.cta-title span:last-child { color: var(--pencil); }
.cta-btn { align-self: flex-start; margin-top: 44px; display: inline-flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 30px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.3s ease, transform 0.3s ease; }
.cta-btn:hover { background: var(--pencil); transform: translateY(-2px); }
.cta-foot { position: absolute; left: clamp(20px, 5vw, 72px); bottom: 26px; margin: 0; color: var(--ink-dim); }

/* Übergang (nur für die Endlosschleife der Aufnahme) */
.wipe { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: var(--oak); transform: translateY(101%); pointer-events: none; overflow: hidden; }
.wipe::before { content: ""; position: absolute; inset: -30%; background: repeating-radial-gradient(ellipse 160% 26% at 40% 130%, transparent 0 9px, rgba(122, 82, 48, 0.45) 10px 11px, transparent 12px 20px); }
.wipe b { position: relative; font-family: var(--f-big); font-weight: 900; font-size: clamp(90px, 16vw, 260px); letter-spacing: 0.04em; color: var(--walnut); }

@media (prefers-reduced-motion: reduce) {
  .stage { height: auto; }
  .stage-pin { position: relative; height: auto; min-height: 100vh; }
}