:root{
  /* aus dem Baustellenfoto in der Dämmerung: Gewitterhimmel, Stahlstützen, Brettschichtholz, Arbeitslicht, Kran */
  --night:#161D25;
  --dusk:#26313D;
  --steel:#1F2429;
  --clt:#C9A063;
  --worklight:#F0B860;
  --crane:#E8B71F;
  --concrete:#8E959B;
  --linen:#E9E6E0;

  --s--1:.8rem;
  --s-0:clamp(1rem,.97rem + .14vw,1.07rem);
  --s-1:clamp(1.1rem,1.02rem + .35vw,1.3rem);
  --s-2:clamp(1.45rem,1.15rem + 1.35vw,2.35rem);
  --s-3:clamp(2rem,1.35rem + 2.8vw,3.9rem);
  --space:clamp(1.35rem,1.1rem + 1.5vw,2.5rem);
  --edge:clamp(1.15rem,.65rem + 2.5vw,3rem);
  --rail:6.5rem;
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,p,ul,ol,li,figure,dl,dt,dd{margin:0;padding:0;}
body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:var(--s-0);line-height:1.68;
  color:var(--linen);background:var(--night);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--crane);outline-offset:3px;}
[id]{scroll-margin-top:4.5rem;}

.t-display{font-family:'Familjen Grotesk',system-ui,sans-serif;font-weight:600;line-height:1.06;letter-spacing:-.02em;}
.t-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;}
.t-wrap{width:min(72rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.t-tag{
  font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);
  letter-spacing:.14em;text-transform:uppercase;color:var(--crane);
}

/* ---------- Präsenzo-Leiste ---------- */
.pz{background:var(--steel);font-size:var(--s--1);}
.pz__in{
  width:min(72rem,100%);margin-inline:auto;padding:.65rem var(--edge);
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:center;text-align:center;
  color:var(--concrete);
}
.pz__cta{color:var(--crane);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ---------- Kopf ---------- */
.head{border-bottom:1px solid rgba(233,230,224,.16);}
.head__in{
  width:min(72rem,100%);margin-inline:auto;padding:1.1rem var(--edge);
  display:flex;align-items:baseline;gap:var(--space);flex-wrap:wrap;
}
.firm{
  font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:var(--s-1);
  letter-spacing:.02em;text-decoration:none;
}
.firm span{color:var(--clt);}
.nav{margin-inline-start:auto;display:flex;gap:1.4rem;flex-wrap:wrap;font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);letter-spacing:.06em;text-transform:uppercase;}
.nav a{text-decoration:none;color:var(--concrete);padding-bottom:.2rem;border-bottom:1px solid transparent;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--linen);border-bottom-color:var(--crane);}

/* ---------- Hero ---------- */
.site{position:relative;background:var(--dusk);}
.site__figure img{width:100%;height:clamp(15rem,42vh,26rem);object-fit:cover;}
.site__body{width:min(72rem,100%);margin-inline:auto;padding:var(--space) var(--edge) clamp(2.25rem,1.75rem + 2.5vw,3.5rem);}
.site h1{font-size:var(--s-3);max-width:20ch;margin-top:.8rem;}
.site h1 span{color:var(--clt);}
.site__lede{max-width:46ch;margin-top:1.2rem;font-size:var(--s-1);line-height:1.5;color:var(--linen);}
.site__row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;}
.site__cap{
  font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);color:var(--concrete);
  padding:.6rem var(--edge);width:min(72rem,100%);margin-inline:auto;
}

.b-crane{
  background:var(--crane);color:var(--steel);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:var(--s--1);
  letter-spacing:.06em;text-transform:uppercase;padding:.85rem 1.5rem;
}
.b-crane:hover{background:var(--linen);}
.b-line{
  border:1px solid var(--linen);color:var(--linen);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:var(--s--1);
  letter-spacing:.06em;text-transform:uppercase;padding:.85rem 1.5rem;
}
.b-line:hover{background:var(--linen);color:var(--steel);}

/* ---------- Signatur: Geschosse mit Höhenkoten ---------- */
.storey{position:relative;padding-block:clamp(2.5rem,2rem + 3.5vw,4.75rem);}
.storey::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(233,230,224,.28);
}
.storey--warm{background:var(--dusk);}
.storey--deck{background:var(--steel);}
.storey__grid{display:grid;gap:var(--space);grid-template-columns:1fr;}
@media (min-width:54rem){
  .storey__grid{grid-template-columns:var(--rail) 1fr;column-gap:clamp(1.75rem,3.5vw,3.25rem);align-items:start;}
}
/* Höhenkote mit Anschlussstrich, wie im Bauaufriss */
.kote{
  font-family:'IBM Plex Mono',monospace;font-size:var(--s-1);font-weight:600;
  color:var(--crane);position:relative;padding-top:.1rem;white-space:nowrap;
}
.kote::after{
  content:"";display:block;margin-top:.45rem;
  width:2.5rem;height:1px;background:var(--crane);
}
@media (min-width:54rem){
  .kote{position:sticky;top:1.75rem;}
  /* senkrechte Höhenachse, die die Geschosse verbindet */
  .kote::before{
    content:"";position:absolute;left:-.9rem;top:.4rem;bottom:-8rem;width:1px;
    background:repeating-linear-gradient(to bottom,rgba(232,183,31,.5) 0 4px,transparent 4px 9px);
  }
}
.storey__head h2{font-size:var(--s-2);margin-top:.5rem;max-width:24ch;}
.storey__head p{margin-top:.85rem;max-width:52ch;color:var(--concrete);}

/* ---------- Kennwerte ---------- */
.figures{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);}
@media (min-width:38rem){.figures{grid-template-columns:1fr 1fr;}}
@media (min-width:62rem){.figures{grid-template-columns:repeat(4,1fr);}}
.figure-box{border-top:2px solid var(--clt);padding-top:1rem;}
.figure-box__val{
  font-family:'Familjen Grotesk',sans-serif;font-weight:600;
  font-size:var(--s-2);line-height:1;letter-spacing:-.02em;
}
.figure-box__unit{font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);color:var(--crane);margin-left:.3rem;}
.figure-box h3{margin-top:.6rem;font-size:var(--s--1);letter-spacing:.1em;text-transform:uppercase;color:var(--linen);font-weight:600;}
.figure-box p{margin-top:.4rem;font-size:var(--s--1);color:var(--concrete);}

/* ---------- Bauteilliste ---------- */
.parts{margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);border-top:1px solid rgba(233,230,224,.28);}
.part{
  display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;align-items:baseline;
  padding-block:1.15rem;border-bottom:1px solid rgba(233,230,224,.14);
}
.part__name{font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:var(--s-1);}
.part__note{flex:1 1 18rem;font-size:var(--s--1);color:var(--concrete);}
.part__spec{margin-inline-start:auto;font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);color:var(--clt);white-space:nowrap;}
@media (max-width:40rem){
  .part__name{flex:1 1 100%;}
  .part__note{flex:1 1 100%;order:3;}
  .part__spec{margin-inline-start:0;order:2;}
}

/* ---------- Projekte ---------- */
.refs{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);}
@media (min-width:46rem){.refs{grid-template-columns:1fr 1fr;}}
.ref{border:1px solid rgba(233,230,224,.2);padding:1.4rem;}
.ref__no{font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);color:var(--crane);letter-spacing:.1em;}
.ref h3{font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:var(--s-1);margin-top:.4rem;}
.ref p{margin-top:.55rem;font-size:var(--s--1);color:var(--concrete);}
.ref__row{
  margin-top:1.1rem;padding-top:.85rem;border-top:1px dashed rgba(233,230,224,.24);
  font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);color:var(--clt);
}

/* ---------- Kontakt ---------- */
.desk{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(1.75rem,1.25rem + 2vw,2.75rem);}
@media (min-width:44rem){.desk{grid-template-columns:1fr 1fr;}}
.desk__col h3{font-family:'IBM Plex Mono',monospace;font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;color:var(--crane);margin-bottom:.9rem;}
.desk__line{display:flex;justify-content:space-between;gap:1rem;padding-block:.45rem;border-bottom:1px solid rgba(233,230,224,.14);font-size:var(--s--1);}
.desk__line span:last-child{font-family:'IBM Plex Mono',monospace;}

/* ---------- Unterseiten ---------- */
.pgtop{padding-block:clamp(2.25rem,1.75rem + 3vw,4rem) 0;}
.pgtop h1{font-size:var(--s-2);max-width:22ch;margin-top:.7rem;}
.pgtop p{margin-top:.9rem;max-width:52ch;color:var(--concrete);font-size:var(--s-1);line-height:1.5;}

.foot{border-top:1px solid rgba(233,230,224,.16);padding-block:2.5rem;font-size:var(--s--1);color:var(--concrete);}
.foot a{color:var(--crane);}
.foot p + p{margin-top:.6rem;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}