/* HOBEL · Tischlerei · art direction: workshop grey-green, Zollstock yellow, raw wood */
:root{
  --canvas:#DDE0D9; --panel:#ECEEE8; --paper:#F6F7F3;
  --ink:#1C211E; --muted:#525A54; --line:rgba(28,33,30,.15); --line-strong:rgba(28,33,30,.32);
  --accent:#F2B705; --accent-ink:#1C211E; --accent-muted:#F5DC88; --accent-deep:#9C7400;
  --wood:#C99A5E; --wood-l:#E2C08C; --bench:#B9895A;
  --f-display:'Big Shoulders Display',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --display-weight:900;
  --focus:var(--ink);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --pad:clamp(96px,13vw,190px);
  --grain:.05;
  color-scheme:light;
}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--accent)}
body{background:var(--canvas)}
.muted{color:var(--muted)}
.chapter{padding-block:var(--pad)}
.hero{padding-block:0}
h1,h2{text-transform:uppercase;letter-spacing:-.005em;line-height:.88}
h2{font-size:clamp(3rem,1.8rem + 5.4vw,7.4rem)}
h3{font-family:var(--f-body);font-weight:600;font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);letter-spacing:-.015em;line-height:1.1}
.btn--solid{color:var(--ink)}
.btn--line{border-color:currentColor}

.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit}
.logo svg{width:40px;height:40px}
.logo span{font-family:var(--f-display);font-weight:900;font-size:1.6rem;letter-spacing:.04em;line-height:.9;display:grid}
.logo small{font-family:var(--f-mono);font-weight:500;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.site-head{color:var(--ink);transition:transform .5s var(--ease-out),background-color .4s,box-shadow .4s,color .4s}
.site-head.is-dark:not(.is-solid){color:#F3E7D3}
.site-head.is-dark:not(.is-solid) .btn--solid{color:var(--ink)}

/* ============ Zollstock (folding ruler) ============ */
.zs{position:relative;height:var(--zh,34px)}
.zs__seg{position:absolute;left:0;top:0;width:var(--L,120px);height:var(--zh,34px);transform-origin:0 50%;border-radius:3px;background:
  repeating-linear-gradient(90deg,var(--ink) 0 1.4px,transparent 1.4px calc(var(--L,120px)/2)) 0 0/100% 62% no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1.2px,transparent 1.2px calc(var(--L,120px)/4)) 0 0/100% 44% no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(var(--L,120px)/20)) 0 0/100% 26% no-repeat,
  linear-gradient(#F7C624,#F2B705 55%,#D99F00);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -1px 0 rgba(0,0,0,.15) inset,0 6px 12px -6px rgba(28,33,30,.45);will-change:transform}
.zs__seg::after{content:"";position:absolute;right:3px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#b5b9bf 55%,#6c7177)}
.zs__seg b{position:absolute;bottom:3px;font-family:var(--f-mono);font-weight:500;font-size:calc(var(--zh,34px) * .32);line-height:1;color:var(--ink);transform:translateX(-50%)}
.zs__seg b:nth-of-type(1){left:50%}
.zs__seg b:nth-of-type(2){left:calc(100% - 14px)}
.zs__seg b.red{color:#C2261C}

/* ============ HERO A · Zollstock ============ */
.hA__in{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.6vw,32px);padding:110px 0 40px}
.hA__k{color:var(--muted)}
.hA__t{font-size:clamp(4.6rem,1.6rem + 13vw,16rem);line-height:.82;letter-spacing:-.01em}
.hA__t span{display:block}
.hA__line{width:max-content;max-width:100%}
.hA__rule{position:relative;min-height:calc(var(--zh,34px) + 30px)}
.hA__read{margin-top:12px;color:var(--muted)}
.hA__mm{font-size:1rem;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.hA__foot{display:grid;gap:20px;align-items:end;margin-top:8px}
.hA__lead{max-width:40ch;font-size:clamp(1.05rem,1rem + .35vw,1.3rem)}
.hA__cta{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:960px){.hA__foot{grid-template-columns:1fr auto}}
@media (max-width:600px){.hA__readl{display:none}}

/* ============ HERO B · Brett ============ */
.hB{position:relative;min-height:100svh;overflow:hidden;color:#F3E7D3;background:#4a2e1c}
.hB__wood{position:absolute;inset:0;width:100%;height:100%}
.hB__lamp{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--lx,70%) var(--ly,30%),rgba(255,226,170,.32),rgba(255,226,170,0) 42%),linear-gradient(180deg,rgba(20,12,6,.35),rgba(20,12,6,0) 30%,rgba(20,12,6,.55));mix-blend-mode:normal}
.hB__in{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;gap:clamp(18px,3vw,36px);padding:120px 0 clamp(32px,5vw,64px)}
.hB__k{opacity:.85}
.hB__t{font-size:clamp(4.4rem,1.4rem + 12vw,15rem);line-height:.82;color:#F6E6CB;text-shadow:0 2px 0 rgba(0,0,0,.35),0 -1px 0 rgba(255,240,215,.25),0 18px 40px rgba(0,0,0,.35)}
.hB__t span{display:block}
.hB__card{display:grid;gap:18px;max-width:560px;padding:clamp(18px,3vw,28px);border-radius:22px;background:rgba(24,16,10,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,235,205,.14)}
.hB__card p{font-size:clamp(1.02rem,1rem + .3vw,1.22rem);color:#F3E7D3}
.hB__cta{display:flex;flex-wrap:wrap;gap:10px}
.hB__tag{position:absolute;right:16px;bottom:16px;opacity:.7;color:#F3E7D3}
@media (min-width:960px){.hB__in{display:grid;grid-template-columns:1fr auto;align-items:end;align-content:end}.hB__k{grid-column:1/-1}.hB__tag{right:32px;top:96px;bottom:auto}}

/* ============ HERO C · Bauplan ============ */
.hC{background:
  linear-gradient(rgba(28,33,30,.07) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(28,33,30,.07) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(rgba(28,33,30,.12) 1px,transparent 1px) 0 0/120px 120px,
  linear-gradient(90deg,rgba(28,33,30,.12) 1px,transparent 1px) 0 0/120px 120px,
  var(--paper)}
.hC__grid{min-height:100svh;display:grid;gap:clamp(24px,4vw,56px);align-items:center;padding:110px 0 48px}
.hC__copy{display:grid;gap:20px}
.hC__k{color:var(--muted)}
.hC__t{font-size:clamp(3.6rem,1.6rem + 7.2vw,9.6rem);line-height:.84}
.hC__lead{max-width:40ch;font-size:clamp(1.05rem,1rem + .35vw,1.28rem)}
.hC__cta{display:flex;flex-wrap:wrap;gap:10px}
.hC__plan{margin:0}
.hC__plan svg{width:100%;height:auto;overflow:visible}
.pl-body rect,.pl-body path,.pl-body line{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.pl-body rect:nth-child(2){fill:rgba(201,154,94,.14)}
.pl-dim line,.pl-block line{stroke:var(--muted);stroke-width:1.2}
.pl-dim path{fill:var(--muted)}
.pl-n{font-family:var(--f-mono);font-size:17px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:6px}
.pl-n--s{font-size:13px}
.pl-block rect{fill:var(--accent);stroke:var(--ink);stroke-width:1.5}
.pl-block text{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;fill:var(--ink)}
@media (min-width:960px){.hC__grid{grid-template-columns:1fr 1.15fr}}

/* ============ HALTUNG A ============ */
.gA__in{display:grid;gap:clamp(24px,4vw,48px)}
.gA__k{color:var(--muted)}
.gA__t{font-size:clamp(3rem,1.6rem + 6vw,8.4rem);max-width:15ch;line-height:.86}
.gA__p{max-width:44ch;font-size:clamp(1.05rem,1rem + .35vw,1.3rem);justify-self:end}

/* ============ HALTUNG B · Werkzeugwand ============ */
.haltung:has(.gB:not([hidden])){padding-block:0}
.gB__wall{padding-block:var(--pad);background:radial-gradient(circle,rgba(28,33,30,.26) 2.2px,transparent 2.8px) 0 0/30px 30px,#CFC3AE}
.gB__in{display:grid;gap:clamp(36px,5vw,64px);justify-items:center;text-align:center}
.gB__tools{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);width:100%;max-width:980px}
.tool{display:grid;justify-items:center;gap:8px;width:100%;border:0;background:none;padding:0;transform-origin:50% 5%}
.tool svg{width:min(100%,104px);height:auto}
.tool svg *{stroke:var(--ink);stroke-width:3;fill:#E7DCC8;stroke-linejoin:round}
.tool svg .peg{fill:var(--ink)}
.tool svg .h{fill:var(--wood)}
.tool svg .acc{fill:var(--accent)}
.tool svg .string{fill:none}
.tool svg .ticks line{stroke-width:2}
.tool span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.gB__t{font-size:clamp(2.2rem,1.4rem + 3.4vw,5rem);max-width:20ch;line-height:.9}
@media (min-width:768px){.gB__tools{grid-template-columns:repeat(6,1fr)}}

/* ============ HALTUNG C · Jahresringe ============ */
.gC__in{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
.gC__rings{width:min(100%,600px);justify-self:center}
.gC__rings path{fill:none;stroke:#8A5C33;stroke-linecap:round}
.gC__rings .core{fill:#B98552;stroke:none}
.gC__copy{display:grid;gap:18px}
.gC__copy .mono{color:var(--muted)}
.gC__t{font-size:clamp(2.8rem,1.6rem + 4.6vw,6.6rem)}
.gC__p{max-width:42ch;font-size:clamp(1.05rem,1rem + .35vw,1.25rem)}
@media (min-width:960px){.gC__in{grid-template-columns:1fr 1fr}}

/* ============ ABLAUF A · Explosion ============ */
.ablauf:has(.pA:not([hidden])){padding-block:0}
.pA__pin{min-height:100svh;display:flex;align-items:center;padding:84px 0 24px}
.pA__grid{display:grid;gap:clamp(12px,3vw,64px);align-items:center;grid-template-columns:1fr}
.pA__copy h2{font-size:clamp(2.4rem,1.6rem + 3.6vw,5.6rem);margin-bottom:clamp(12px,3vw,32px)}
.pA__steps{list-style:none;margin:0;padding:0}
.pA__steps li{display:grid;grid-template-columns:42px 1fr;column-gap:12px;padding:12px 0;border-top:1px solid var(--line);opacity:.32;transition:opacity .4s var(--ease-out)}
.pA__steps li.is-on{opacity:1}
.pA__steps .mono{grid-row:span 2;padding-top:4px}
.pA__steps li.is-on .mono{background:var(--accent);border-radius:4px;justify-self:start;padding:3px 6px;height:max-content}
.pA__steps p{color:var(--muted);max-width:42ch}
.pA__draw{position:relative}
.pA__draw svg{width:min(100%,48svh,520px);height:auto;margin-inline:auto;display:block;overflow:visible}
.xp rect,.xp line{fill:var(--paper);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.xp .back{fill:color-mix(in srgb,var(--wood) 26%,var(--paper))}
.xp--door rect{fill:var(--wood-l)}
.pA__dim line{stroke:var(--muted);stroke-width:1.2}
.pA__dim text{font-family:var(--f-mono);font-size:14px;fill:var(--muted)}
.pA__lbl{position:absolute;left:0;top:0;color:var(--muted)}
.pA__lbl b{color:var(--ink);font-size:1.1rem}
@media (min-width:960px){.pA__grid{grid-template-columns:1fr 1fr}.pA__draw svg{width:min(100%,74svh,560px)}}
@media (max-width:959px){.pA__lbl{position:static;text-align:center;margin-top:8px}.pA__copy h2{display:none}.pA__steps li{display:none}.pA__steps li.is-on{display:grid;border-top:0}}
html.reduced .pA__steps li{display:grid;opacity:1}
html.reduced .pA__copy h2{display:block}

/* ============ ABLAUF B · Maßkette ============ */
.pB__grid{display:grid;gap:clamp(28px,5vw,80px)}
.pB__head{display:grid;gap:18px;align-content:start}
.pB__head p{max-width:38ch;color:var(--muted)}
.pB__chain{list-style:none;margin:0;padding:0 0 0 clamp(84px,12vw,140px);position:relative;display:grid;gap:clamp(40px,7vw,90px)}
.pB__chain::before{content:"";position:absolute;left:clamp(62px,9vw,110px);top:6px;bottom:6px;width:2px;background:var(--line-strong)}
.pB__chain::after{content:"";position:absolute;left:clamp(62px,9vw,110px);top:6px;bottom:6px;width:4px;margin-left:-1px;background:var(--accent);transform-origin:top;transform:scaleY(var(--prog,1));border-radius:2px}
.pB__chain li{position:relative}
.pB__chain li::before{content:"";position:absolute;left:calc(-1 * clamp(84px,12vw,140px) + clamp(62px,9vw,110px) - 12px);top:8px;width:26px;height:2px;background:var(--ink)}
.pB__mm{position:absolute;right:calc(100% + clamp(30px,4vw,44px));top:0;white-space:nowrap;color:var(--muted);font-size:.72rem;text-align:right}
.pB__chain h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,1.6rem + 2.6vw,4.4rem);line-height:.9;letter-spacing:0;margin-bottom:8px}
.pB__chain p{max-width:44ch;color:var(--muted)}
@media (min-width:960px){.pB__grid{grid-template-columns:1fr 1.3fr}.pB__head{position:sticky;top:120px;align-self:start}}

/* ============ ABLAUF C · Bretterstapel ============ */
.pC__h{margin-bottom:clamp(28px,5vw,64px);max-width:12ch}
.pC__stack{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.plank{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:clamp(14px,3vw,40px);row-gap:4px;min-height:clamp(110px,14vw,150px);padding:18px clamp(18px,3vw,40px);border-radius:6px;overflow:hidden;color:#1C211E;box-shadow:0 10px 18px -12px rgba(28,33,30,.6),inset 0 -3px 0 rgba(0,0,0,.12)}
.plank:nth-child(odd){margin-right:clamp(0px,4vw,60px)}
.plank:nth-child(even){margin-left:clamp(0px,4vw,60px)}
.plank canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.plank > *:not(canvas){position:relative;z-index:1}
.plank .mono{grid-row:span 2;font-size:clamp(1.8rem,1.2rem + 2.2vw,3.4rem);font-family:var(--f-display);font-weight:900;letter-spacing:0;text-transform:none}
.plank h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,1.3rem + 2vw,3.2rem);line-height:.9;letter-spacing:0}
.plank p{font-weight:500}
.plank[data-sp="nuss"]{color:#F6E9D3}
@media (min-width:960px){.plank{grid-template-columns:auto auto 1fr}.plank .mono{grid-row:auto}.plank p{justify-self:end;text-align:right;max-width:34ch}}

/* ============ HOBELBANK shared ============ */
.plane-canvas{width:100%;display:block;touch-action:pan-y;-webkit-tap-highlight-color:transparent;cursor:grab}
.bench-top{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.1)),repeating-linear-gradient(90deg,#C49463 0 90px,#B98858 90px 180px,#C99B6B 180px 270px);border-radius:28px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),0 30px 60px -36px rgba(60,40,20,.7)}
.read{display:flex;flex-wrap:wrap;gap:0 28px;margin:0}
.read div{display:grid;gap:2px;padding:10px 0}
.read dt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.read dd{margin:0;font-family:var(--f-display);font-weight:900;font-size:clamp(1.8rem,1.4rem + 1.4vw,2.8rem);line-height:1;font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 10px;border-radius:99px;border:1.5px solid var(--line-strong);background:transparent;font-weight:600}
.chips button i{width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.chips button[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}

/* ============ BANK A · Werkbank ============ */
.bA__head{display:grid;gap:18px;margin-bottom:clamp(24px,4vw,48px)}
.bA__head .mono{color:var(--accent-deep);margin-bottom:12px}
.bA__p{max-width:40ch;font-size:clamp(1.05rem,1rem + .3vw,1.25rem)}
.bA__bench{position:relative;padding:clamp(10px,2vw,24px)}
.bA__bench{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.1)),repeating-linear-gradient(90deg,#C49463 0 90px,#B98858 90px 180px,#C99B6B 180px 270px);border-radius:28px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.12),0 30px 60px -36px rgba(60,40,20,.7)}
.bA__bench canvas{aspect-ratio:16/8}
.bA__hint{position:absolute;left:50%;bottom:clamp(14px,2vw,24px);transform:translateX(-50%);background:rgba(246,247,243,.85);padding:.35em .8em;border-radius:99px;pointer-events:none;white-space:nowrap}
.bA__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:18px}
.bA__btns{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:960px){.bA__head{grid-template-columns:1fr auto;align-items:end}}
@media (max-width:767px){.bA__bench canvas{aspect-ratio:4/3.4}}

/* ============ BANK B · Holzarten ============ */
.bB__grid{display:grid;gap:clamp(24px,4vw,56px);align-items:center}
.bB__copy{display:grid;gap:18px}
.bB__copy > .mono{color:var(--accent-deep)}
.bB__facts{margin:0;display:grid}
.bB__facts div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.bB__facts dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bB__facts dd{margin:0;font-weight:600;text-align:right}
.bB__hint{color:var(--muted)}
.bB__stage{padding:clamp(10px,2vw,22px);background:var(--ink);border-radius:28px}
.bB__stage canvas{aspect-ratio:5/4}
.bB__btns{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 6px 4px;color:var(--canvas)}
.bB__btns .btn--ink{background:var(--accent);border-color:var(--accent);color:var(--ink)}
@media (min-width:960px){.bB__grid{grid-template-columns:5fr 7fr}}

/* ============ BANK C · Vorher/Nachher ============ */
.bC__head{display:grid;gap:16px;margin-bottom:clamp(24px,4vw,48px)}
.bC__head p{max-width:52ch}
.bC__cmp{--p:50%;position:relative;aspect-ratio:16/7;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(28,33,30,.7);touch-action:pan-y;user-select:none}
.bC__cmp canvas{position:absolute;inset:0;width:100%;height:100%}
.bC__before{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.bC__lab{position:absolute;top:14px;padding:.35em .75em;border-radius:99px;background:rgba(246,247,243,.88);font-size:.7rem}
.bC__lab--l{left:14px}.bC__lab--r{right:14px}
.bC__handle{position:absolute;top:0;bottom:0;left:var(--p);width:64px;margin-left:-32px;display:grid;place-items:center;cursor:ew-resize;touch-action:none}
.bC__handle::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--accent);box-shadow:0 0 0 1px rgba(28,33,30,.4)}
.bC__handle i{position:relative;width:52px;height:52px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--ink),0 10px 20px -6px rgba(0,0,0,.5)}
.bC__handle i::before,.bC__handle i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-6px;border:6px solid transparent}
.bC__handle i::before{left:8px;border-right-color:var(--ink)}
.bC__handle i::after{right:8px;border-left-color:var(--ink)}
.bC__species{margin-top:18px}
@media (min-width:960px){.bC__head{grid-template-columns:1fr 1fr;align-items:end}}
@media (max-width:767px){.bC__cmp{aspect-ratio:4/3.6}}

/* ============ LEIST A · Musterfächer ============ */
.leist:has(.lA:not([hidden])){padding-block:0}
.lA__pin{min-height:100svh;display:flex;align-items:center;padding:96px 0 40px}
.lA__grid{display:grid;gap:clamp(28px,4vw,48px);width:100%}
.lA__copy{display:grid;gap:16px;align-content:start}
.lA__copy p{max-width:38ch;color:var(--muted)}
.lA__fan{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.swatch{position:relative;border-radius:18px;overflow:hidden;min-height:180px;display:flex;align-items:flex-start;box-shadow:0 18px 34px -18px rgba(28,33,30,.6)}
.swatch canvas{position:absolute;inset:0;width:100%;height:100%}
.swatch > div{position:relative;margin:14px;padding:14px 16px;border-radius:12px;background:rgba(246,247,243,.93);max-width:330px;display:grid;gap:4px}
.swatch .mono{color:var(--muted)}
.swatch h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,1.3rem + 1.6vw,2.8rem);line-height:.9;letter-spacing:0}
.swatch p{color:var(--muted);font-size:.95rem}
.swatch::after{content:"";position:absolute;left:22px;bottom:22px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#aeb3b9 55%,#5f646a);box-shadow:0 1px 2px rgba(0,0,0,.5)}
@media (min-width:960px){
  .lA__grid{grid-template-columns:1fr 1.5fr;align-items:center}
  .lA__fan{position:relative;height:min(70svh,600px);display:block}
  .swatch{position:absolute;left:4%;bottom:6%;width:min(560px,46vw);height:min(300px,32svh);transform-origin:30px calc(100% - 30px);justify-content:flex-end}
  .swatch > div{max-width:250px}
}

/* ============ LEIST B · Liste ============ */
.lB__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,48px)}
.lB__head p{color:var(--muted);max-width:36ch}
.lB__list{list-style:none;margin:0;padding:0;border-bottom:2px solid var(--ink)}
.lB__list li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:16px;padding:clamp(16px,2.6vw,28px) 0;border-top:2px solid var(--ink);position:relative;cursor:default}
.lB__list li::before{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease-out);z-index:-1}
.lB__list li:hover::before{transform:scaleY(1)}
.lB__list{position:relative;z-index:0}
.lB__list h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.8rem,1.6rem + 5vw,7rem);line-height:.86;letter-spacing:0;transition:transform .5s var(--ease-out)}
.lB__list li:hover h3{transform:translateX(14px)}
.lB__list p{grid-column:2;color:var(--muted)}
.lB__ico{grid-column:2;width:120px;height:auto;margin-top:12px}
.lB__ico *,.lB__float svg *{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.lB__float{position:fixed;left:0;top:0;width:260px;height:190px;border-radius:16px;overflow:hidden;pointer-events:none;z-index:60;opacity:0;box-shadow:0 30px 50px -20px rgba(28,33,30,.6)}
.lB__float canvas{position:absolute;inset:0;width:100%;height:100%}
.lB__float svg{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px)}
.lB__float svg *{stroke:var(--ink);stroke-width:3}
@media (min-width:960px){.lB__list li{grid-template-columns:80px 1fr auto}.lB__list p{grid-column:3;text-align:right;max-width:30ch}.lB__ico{display:none}}
@media (pointer:coarse){.lB__float{display:none}}

/* ============ LEIST C · Galerie ============ */
.lC__head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,48px)}
.lC__head p{color:var(--muted)}
.lC__grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:1fr;perspective:1400px}
.proj{display:grid;gap:12px}
.proj__img{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--panel);transform-style:preserve-3d;will-change:transform}
.proj__img canvas{position:absolute;inset:0;width:100%;height:100%}
.proj__img .fb{position:absolute;inset:14% 18%;width:64%;height:72%}
.proj__img .fb *{fill:rgba(246,247,243,.25);stroke:rgba(28,33,30,.85);stroke-width:2.6;stroke-linejoin:round}
.proj__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj__img img:not(.is-ok){display:none}
.proj__txt h3{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,1.4rem + 1.2vw,2.6rem);line-height:.9;letter-spacing:0}
.proj__txt p{color:var(--muted);font-family:var(--f-mono);font-size:.78rem;letter-spacing:.03em;margin-top:4px}
@media (min-width:768px){.lC__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.lC__grid{grid-template-columns:repeat(3,1fr)}.proj--wide{grid-column:span 2}.proj--wide .proj__img{aspect-ratio:auto;height:calc((100vw - 64px - 32px) / 3 * .75);max-height:calc((1320px - 32px) / 3 * .75)}}

/* ============ ANFRAGE A · Maßzettel ============ */
.aA__grid{display:grid;gap:clamp(28px,5vw,80px);align-items:start}
.aA__copy{display:grid;gap:18px}
.aA__copy > .mono{color:var(--accent-deep)}
.aA__copy > p:not(.mono){max-width:40ch}
.aA__prev{margin:12px 0 0;max-width:420px}
.aA__prev svg{width:100%;height:auto;overflow:visible}
.aA__box{fill:rgba(201,154,94,.25);stroke:var(--ink);stroke-width:2.4}
.aA__dw,.aA__dh{stroke:var(--muted);stroke-width:1.2}
.aA__prev text{font-family:var(--f-mono);font-size:13px;fill:var(--ink)}
.aA__sheet{display:grid;gap:14px;padding:clamp(20px,4vw,40px);border-radius:8px;background:linear-gradient(rgba(28,33,30,.06) 1px,transparent 1px) 0 0/100% 28px,var(--paper);box-shadow:0 30px 60px -36px rgba(28,33,30,.6),0 0 0 1px var(--line)}
.aA__top{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.aA__dims{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.aA__dims legend{color:var(--muted);margin-bottom:6px;padding:0}
.aA__dims input{font-family:var(--f-mono)}
.aA__two{display:grid;grid-template-columns:1fr;gap:12px}
.aA__sheet .btn{justify-self:start}
.aA__sheet .field input,.aA__sheet .field select{--field-bg:#fff}
@media (min-width:600px){.aA__two{grid-template-columns:1.4fr 1fr}}
@media (min-width:960px){.aA__grid{grid-template-columns:1fr 1.1fr}}

/* ============ ANFRAGE B · Split ============ */
.aB__grid{display:grid;gap:clamp(28px,5vw,80px);align-items:center}
.aB__h{font-size:clamp(3.6rem,1.6rem + 8vw,11rem);line-height:.82}
.aB__h em{font-style:normal;background:var(--accent);padding:0 .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.aB__form{display:grid;gap:14px;background:var(--panel);border-radius:24px;padding:clamp(20px,4vw,44px);box-shadow:0 0 0 1px var(--line)}
.aB__two{display:grid;gap:12px}
.aB__form .btn{justify-self:start}
@media (min-width:600px){.aB__two{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.aB__grid{grid-template-columns:1.1fr 1fr}}

/* ============ ANFRAGE C · Auftragszettel ============ */
.aC__grid{display:grid;gap:clamp(28px,5vw,80px);align-items:center}
.aC__copy{display:grid;gap:18px}
.aC__copy > .mono{color:var(--accent-deep)}
.aC__slip{position:relative;justify-self:center;width:min(440px,100%);display:grid;gap:14px;padding:44px clamp(20px,4vw,34px) 30px;background:#FBF6E4;transform:rotate(-1.5deg);box-shadow:0 2px 0 rgba(0,0,0,.05),0 30px 50px -26px rgba(28,33,30,.6)}
.aC__pin{position:absolute;top:14px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9da2a8 55%,#50555a);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.aC__no{color:var(--muted)}
.aC__slip .btn{justify-self:start}
.aC__slip .field input,.aC__slip .field select{--field-bg:#fff}
.aC__stamp{position:absolute;right:18px;top:40px;padding:.15em .5em;border:4px solid #B3261E;border-radius:8px;color:#B3261E;font-family:var(--f-display);font-weight:900;font-size:2.4rem;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-14deg);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.aC__slip.is-sent .aC__stamp{opacity:.85}
@media (min-width:960px){.aC__grid{grid-template-columns:1fr 1fr}}

/* ============ FOOTER ============ */
.site-foot{background:var(--ink);color:var(--canvas);padding:clamp(64px,8vw,120px) 0 32px}
.foot__grid{display:grid;gap:28px}
.foot__word{font-family:var(--f-display);font-weight:900;font-size:clamp(5rem,2rem + 14vw,15rem);line-height:.8;display:block;margin-bottom:12px;color:var(--accent)}
.site-foot .mono{opacity:.6;margin-bottom:6px}
.site-foot .muted{color:rgba(221,224,217,.65)}
.foot__legal{grid-column:1/-1;padding-top:24px;border-top:1px solid rgba(221,224,217,.15);font-size:.85rem;color:rgba(221,224,217,.65)}
@media (min-width:960px){.foot__grid{grid-template-columns:2fr 1fr 1fr}}

.chapter .vchip{top:16px}
.hero .vchip{top:84px}


/* ================= v2 · modern layer ================= */
.site-head{--head-dark-ink:#EDEFE8}
/* dark workshop tone for the process chapter: drawings turn into a lit blueprint */
.chapter[data-tone="werkstatt"]{--canvas:#171C19;--panel:#202723;--paper:#252D29;--ink:#E9ECE4;--muted:#9EA79F;--line:rgba(233,236,228,.13);--line-strong:rgba(233,236,228,.3);--accent-deep:#F2B705}
.chapter[data-tone="werkstatt"] .pA__steps li.is-on .mono{color:#1C211E}
.chapter[data-tone="werkstatt"] .xp rect,.chapter[data-tone="werkstatt"] .xp line{stroke-width:2}
.chapter[data-tone="werkstatt"] .pA__draw svg{filter:drop-shadow(0 0 24px rgba(242,183,5,.08))}

/* hero A: CAD crosshair, faint drafting grid, sample Aufmaß card */
.hA{position:relative;overflow:hidden}
.hA::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(28,33,30,.06) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(28,33,30,.06) 1px,transparent 1px) 0 0/24px 24px;-webkit-mask:radial-gradient(70% 70% at 70% 40%,#000 20%,transparent 75%);mask:radial-gradient(70% 70% at 70% 40%,#000 20%,transparent 75%);pointer-events:none}
.cad{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s}
.cad.is-on{opacity:1}
.cad__x,.cad__y{position:absolute;left:0;top:0;background:rgba(28,33,30,.38)}
.cad__x{width:100%;height:1px}
.cad__y{width:1px;height:100%}
.cad__tag{position:absolute;left:0;top:0;padding:.35em .6em;border-radius:6px;background:var(--ink);color:var(--accent);font-size:.66rem;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (pointer:coarse){.cad{display:none}}
.hA__in{position:relative}
.hA__spec{display:none}
@media (min-width:1100px){
  .hA__spec{display:grid;gap:10px;position:absolute;right:0;top:128px;width:290px;padding:18px 18px 14px;border-radius:14px;background:linear-gradient(rgba(28,33,30,.05) 1px,transparent 1px) 0 0/100% 22px,var(--paper);box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(28,33,30,.55);transform:rotate(1.5deg)}
  .hA__spec::before{content:"";position:absolute;left:18px;top:-8px;width:64px;height:16px;border-radius:3px;background:var(--accent);box-shadow:0 2px 0 rgba(0,0,0,.1)}
  .hA__spec .mono{color:var(--muted)}
  .hA__spec dl{margin:0;display:grid}
  .hA__spec dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
  .hA__spec dt{font-size:.85rem;color:var(--muted)}
  .hA__spec dd{margin:0;font-family:var(--f-mono);font-size:.85rem;font-weight:500}
}

/* Zollstock band */
.band{position:relative;z-index:2;margin:-6px -24px 0;padding:clamp(18px,1.8vw,26px) 0;transform:rotate(1.2deg);color:var(--ink);box-shadow:0 24px 50px -30px rgba(28,33,30,.7);background:
  repeating-linear-gradient(90deg,var(--ink) 0 1.4px,transparent 1.4px 40px) 0 0/100% 34% no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 8px) 0 0/100% 18% no-repeat,
  repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 8px) 0 100%/100% 18% no-repeat,
  linear-gradient(#F7C624,#F2B705 55%,#DCA300)}
.band__item{font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,1.2rem + 3.6vw,4.6rem);line-height:1;padding:.12em .4em 0}
.band__sep{font-size:.78rem;font-weight:500;padding:0 .6em;align-self:flex-start;margin-top:.9em}

/* footer: closing call and a wordmark that fills the width */
.foot__cta{display:grid;gap:14px;padding-bottom:clamp(40px,6vw,88px);margin-bottom:clamp(36px,5vw,64px);border-bottom:1px solid rgba(221,224,217,.15)}
.foot__big{display:flex;justify-content:space-between;align-items:center;gap:20px;text-decoration:none;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,1.4rem + 7.4vw,10rem);line-height:.88;color:var(--canvas)}
.foot__bigt{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0% 6px no-repeat;padding-bottom:.04em;transition:background-size .7s var(--ease-out)}
.foot__big:hover .foot__bigt,.foot__big:focus-visible .foot__bigt{background-size:100% 6px}
.foot__arr{display:grid;place-items:center;flex:none;width:clamp(64px,8vw,120px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--ink);font-size:.42em;font-family:var(--f-body);transition:transform .6s var(--ease-out)}
.foot__big:hover .foot__arr{transform:rotate(-45deg) scale(1.06)}
.foot__wordwrap{margin-top:clamp(36px,5vw,64px);overflow:hidden;line-height:.8}
.foot__word{margin:0 0 -.1em;user-select:none}
@media (min-width:960px){.lA__fan .swatch h3{font-size:clamp(1.6rem,1rem + 1vw,2.1rem);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}.lA__fan .swatch > div{max-width:270px}}