:root{
  /* aus dem Werkstattfoto gemessen */
  --shaving:#F4E7D3;
  --pine:#D9A263;
  --timber:#7C2D09;
  --walnut:#241407;
  /* Pegboard-Wand: ordnet die Gewerke, dekoriert nicht */
  --peg-blue:#0377A0;
  --peg-yellow:#EBB20B;
  --peg-red:#8D0307;
  --peg-green:#056C35;

  --t--1:clamp(.8rem,.78rem + .1vw,.88rem);
  --t-0:clamp(1rem,.96rem + .18vw,1.1rem);
  --t-1:clamp(1.15rem,1.05rem + .45vw,1.4rem);
  --t-2:clamp(1.5rem,1.2rem + 1.4vw,2.5rem);
  --t-3:clamp(2.1rem,1.3rem + 3.6vw,4.6rem);
  --space:clamp(1.25rem,1rem + 1.5vw,2.5rem);
  --edge:clamp(1.1rem,.6rem + 2.5vw,3.25rem);
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,p,ul,ol,li,figure,dl,dd{margin:0;padding:0;}
body{
  font-family:'Atkinson Hyperlegible',system-ui,sans-serif;
  font-size:var(--t-0);line-height:1.65;
  color:var(--walnut);background:var(--shaving);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
:focus-visible{outline:3px solid var(--peg-blue);outline-offset:3px;}

.k-display{font-family:'Archivo Black',Impact,sans-serif;font-weight:400;line-height:.98;letter-spacing:-.022em;text-transform:uppercase;}
.k-mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
.k-wrap{width:min(74rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.k-label{
  font-family:'JetBrains Mono',monospace;font-size:var(--t--1);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- Präsenzo-Leiste ---------- */
.pz{background:var(--walnut);color:var(--shaving);font-size:var(--t--1);}
.pz__in{
  width:min(74rem,100%);margin-inline:auto;padding:.7rem var(--edge);
  display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:center;text-align:center;
}
.pz__cta{color:var(--peg-yellow);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ---------- Kopf: Werkstattschild ---------- */
.top{background:var(--walnut);color:var(--shaving);}
.top__in{
  width:min(74rem,100%);margin-inline:auto;padding:1rem var(--edge);
  display:flex;align-items:center;gap:var(--space);flex-wrap:wrap;
}
.mark{font-family:'Archivo Black',sans-serif;font-size:var(--t-1);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:inherit;}
.mark b{
  color:var(--walnut);background:var(--peg-yellow);
  padding:.1em .35em;font-weight:400;
}
.topnav{margin-inline-start:auto;display:flex;gap:1.35rem;flex-wrap:wrap;font-size:var(--t--1);font-weight:700;}
.topnav a{color:inherit;text-decoration:none;padding-block:.15rem;border-bottom:2px solid transparent;}
.topnav a:hover,.topnav a[aria-current="page"]{border-bottom-color:var(--peg-yellow);}
.ask{
  background:var(--peg-yellow);color:var(--walnut);text-decoration:none;font-weight:700;
  padding:.65rem 1.1rem;font-size:var(--t--1);white-space:nowrap;
}
.ask:hover{background:var(--shaving);}

/* ---------- Hero mit Kreide-Aufmaß ---------- */
.lead{position:relative;background:var(--walnut);color:var(--shaving);}
.lead__figure{position:relative;}
.lead__figure img{width:100%;height:clamp(20rem,52vh,34rem);object-fit:cover;opacity:.86;}
.chalk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.chalk line,.chalk path{
  fill:none;stroke:#FFF8E8;stroke-width:2;stroke-linecap:round;opacity:.9;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,140);stroke-dashoffset:var(--len,140);
  animation:scribe 1.4s .5s ease-out forwards;
}
@keyframes scribe{to{stroke-dashoffset:0;}}
/* Beschriftung als HTML, damit sie nicht mit der Zeichenflaeche verzerrt wird */
.chalk-note{
  position:absolute;transform:translate(-50%,-50%);
  font-family:'JetBrains Mono',monospace;font-size:clamp(.68rem,.6rem + .35vw,.85rem);
  font-weight:700;letter-spacing:.08em;color:#FFF8E8;white-space:nowrap;
  text-shadow:0 0 6px rgba(20,10,2,.95),0 1px 3px rgba(20,10,2,.9);
  opacity:0;animation:fadein .5s 1.5s ease-out forwards;pointer-events:none;
}
.chalk-note--start{transform:translate(0,-50%);}
@keyframes fadein{to{opacity:1;}}
.lead__text{width:min(74rem,100%);margin-inline:auto;padding:var(--space) var(--edge) clamp(2.5rem,2rem + 3vw,4rem);}
.lead h1{font-size:var(--t-3);max-width:17ch;margin-top:.75rem;}
.lead h1 mark{background:var(--peg-yellow);color:var(--walnut);padding:0 .12em;}
.lead__sub{max-width:46ch;margin-top:1.15rem;font-size:var(--t-1);line-height:1.45;}
.lead__row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.7rem;}
.b-fill{background:var(--peg-yellow);color:var(--walnut);text-decoration:none;font-weight:700;padding:.9rem 1.5rem;}
.b-fill:hover{background:var(--shaving);}
.b-edge{border:2px solid var(--shaving);color:var(--shaving);text-decoration:none;font-weight:700;padding:.9rem 1.5rem;}
.b-edge:hover{background:var(--shaving);color:var(--walnut);}

/* ---------- Gewerke: Farbe kodiert die Kategorie ---------- */
.zone{padding-block:clamp(3rem,2rem + 5vw,6rem);}
.zone--pine{background:var(--pine);}
.zone__head{max-width:48ch;margin-bottom:clamp(1.75rem,1rem + 2vw,3rem);}
.zone__head h2{font-size:var(--t-2);margin-top:.6rem;}
.zone__head p{margin-top:.8rem;}

.trades{display:grid;gap:var(--space);grid-template-columns:1fr;}
@media (min-width:38rem){.trades{grid-template-columns:1fr 1fr;}}
@media (min-width:64rem){.trades{grid-template-columns:repeat(4,1fr);}}
.trade{background:var(--shaving);border:2px solid var(--walnut);display:flex;flex-direction:column;}
.trade__bar{height:.75rem;}
.trade[data-cat="baumhaus"] .trade__bar{background:var(--peg-blue);}
.trade[data-cat="hochbett"] .trade__bar{background:var(--peg-yellow);}
.trade[data-cat="spielhaus"] .trade__bar{background:var(--peg-red);}
.trade[data-cat="einbau"]   .trade__bar{background:var(--peg-green);}
.trade__body{padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1;}
.trade h3{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-1);line-height:1.05;}
.trade p{font-size:var(--t--1);}
.trade__spec{
  margin-top:auto;padding-top:.9rem;border-top:2px dotted var(--walnut);
  font-family:'JetBrains Mono',monospace;font-size:var(--t--1);font-weight:700;
}

/* ---------- Ablauf: echte Reihenfolge ---------- */
.flow{display:grid;gap:0;grid-template-columns:1fr;counter-reset:f;}
@media (min-width:52rem){.flow{grid-template-columns:repeat(3,1fr);}}
.flow__item{
  counter-increment:f;padding:1.6rem;
  border:2px solid var(--walnut);border-bottom-width:0;
}
.flow__item:last-child{border-bottom-width:2px;}
@media (min-width:52rem){
  .flow__item{border-bottom-width:2px;border-right-width:0;}
  .flow__item:last-child{border-right-width:2px;}
}
.flow__item::before{
  content:"Schritt " counter(f);
  font-family:'JetBrains Mono',monospace;font-size:var(--t--1);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--timber);display:block;margin-bottom:.5rem;
}
.flow__item h3{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-1);}
.flow__item p{margin-top:.5rem;font-size:var(--t--1);}

/* ---------- Bauanfrage ---------- */
.enquiry{display:grid;gap:var(--space);grid-template-columns:1fr;}
@media (min-width:48rem){.enquiry{grid-template-columns:1.1fr .9fr;}}
.slab{background:var(--walnut);color:var(--shaving);padding:clamp(1.5rem,1rem + 2vw,2.5rem);}
.slab h2{font-size:var(--t-2);}
.slab p{margin-top:.8rem;max-width:40ch;}
.sheet{border:2px solid var(--walnut);padding:clamp(1.35rem,1rem + 1.5vw,2rem);background:var(--shaving);}
.sheet h3{margin-bottom:.9rem;}
.rowline{display:flex;justify-content:space-between;gap:1rem;padding-block:.5rem;border-bottom:1px dotted var(--walnut);font-size:var(--t--1);}
.rowline span:last-child{font-family:'JetBrains Mono',monospace;font-weight:700;}
.sheet__note{margin-top:1rem;font-family:'JetBrains Mono',monospace;font-size:var(--t--1);color:var(--timber);}

.base{background:var(--walnut);color:var(--shaving);padding-block:2.5rem;font-size:var(--t--1);}
.base a{color:var(--peg-yellow);}
.base p + p{margin-top:.6rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .chalk line,.chalk path{stroke-dashoffset:0;}
  .chalk text{opacity:.95;}
}

/* ================= Unterseiten ================= */
.pagehead{padding-block:clamp(2.25rem,1.5rem + 3vw,4rem) clamp(1.5rem,1rem + 2vw,2.5rem);}
.pagehead h1{font-size:var(--t-2);max-width:20ch;margin-top:.6rem;}
.pagehead p{margin-top:.9rem;max-width:52ch;font-size:var(--t-1);line-height:1.45;}

/* Mannschaft: Farbe zeigt das Gewerk, gleiche Kodierung wie auf der Startseite */
.crew{display:grid;gap:var(--space);grid-template-columns:1fr;}
@media (min-width:40rem){.crew{grid-template-columns:1fr 1fr;}}
@media (min-width:64rem){.crew{grid-template-columns:repeat(4,1fr);}}
.hand{border:2px solid var(--walnut);background:var(--shaving);display:flex;flex-direction:column;}
.hand__bar{height:.6rem;}
.hand[data-cat="baumhaus"] .hand__bar{background:var(--peg-blue);}
.hand[data-cat="hochbett"] .hand__bar{background:var(--peg-yellow);}
.hand[data-cat="spielhaus"] .hand__bar{background:var(--peg-red);}
.hand[data-cat="einbau"]   .hand__bar{background:var(--peg-green);}
.hand__body{padding:1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1;}
.hand h3{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-1);line-height:1.05;}
.hand__role{font-size:var(--t--1);}
.hand__years{
  margin-top:auto;padding-top:.8rem;border-top:2px dotted var(--walnut);
  font-family:'JetBrains Mono',monospace;font-size:var(--t--1);font-weight:700;
}

/* Holzliste mit Herkunft */
.mat{border-top:2px solid var(--walnut);}
.mat__row{
  display:flex;flex-wrap:wrap;gap:.25rem 1.2rem;align-items:baseline;
  padding-block:1rem;border-bottom:1px solid var(--walnut);
}
.mat__name{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;font-size:var(--t-1);}
.mat__use{flex:1 1 16rem;font-size:var(--t--1);}
.mat__from{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:var(--t--1);margin-inline-start:auto;white-space:nowrap;}

/* Checkliste fuer die Bauanfrage */
.check{display:grid;gap:.9rem;max-width:48ch;}
.check li{display:flex;gap:.85rem;align-items:flex-start;}
.check li::before{
  content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.35rem;
  border:2px solid var(--walnut);background:var(--peg-yellow);
}

/* Herkunft buendig links, sobald sie auf eine eigene Zeile rutscht */
@media (max-width:44rem){
  .mat__row{gap:.15rem;}
  .mat__name{flex:1 1 100%;}
  .mat__use{flex:1 1 100%;order:3;}
  .mat__from{margin-inline-start:0;order:2;}
}