:root{
  /* aus dem Flachdachaufbau gemessen: Bitumen, EPDM, PIR-Dämmung, Alu-Dampfsperre, Kies */
  --bitumen:#15181B;
  --epdm:#262C31;
  --pir:#D9A22B;
  --pir-tief:#8E6712;
  --alu:#AFB7BD;
  --kies:#8C8880;
  --kalk:#F2F1ED;
  --weiss:#FBFBF9;

  --s--2:clamp(.72rem,.7rem + .1vw,.79rem);
  --s--1:clamp(.83rem,.8rem + .13vw,.92rem);
  --s-0:clamp(1rem,.97rem + .15vw,1.09rem);
  --s-1:clamp(1.14rem,1.05rem + .38vw,1.38rem);
  --s-2:clamp(1.45rem,1.1rem + 1.6vw,2.5rem);
  --s-3:clamp(2.1rem,1.35rem + 3.4vw,4.4rem);
  --space:clamp(1.4rem,1.1rem + 1.5vw,2.5rem);
  --edge:clamp(1.15rem,.7rem + 2.4vw,3.25rem);
}
*,*::before,*::after{box-sizing:border-box;}
body,h1,h2,h3,h4,p,ul,ol,li,figure,dl,dt,dd,table{margin:0;padding:0;}
body{
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  font-size:var(--s-0);line-height:1.65;font-weight:300;
  color:var(--bitumen);background:var(--kalk);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
ul,ol{list-style:none;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--pir-tief);outline-offset:3px;}
[id]{scroll-margin-top:4rem;}

.f-grotesk{font-family:'Archivo',system-ui,sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.025em;}
.f-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:400;}
.f-wrap{width:min(74rem,100%);margin-inline:auto;padding-inline:var(--edge);}
.f-marke{font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);letter-spacing:.2em;text-transform:uppercase;color:var(--pir-tief);}

/* ── Präsenzo-Leiste ── */
.pz{background:var(--bitumen);color:var(--kalk);font-size:var(--s--1);}
.pz__in{width:min(74rem,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;}
.pz__cta{color:var(--pir);font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}

/* ── Kopf ── */
.kopf{background:var(--weiss);border-bottom:1px solid rgba(21,24,27,.14);position:sticky;top:0;z-index:20;}
.kopf__in{width:min(74rem,100%);margin-inline:auto;padding:.85rem var(--edge);
  display:flex;align-items:center;gap:var(--space);flex-wrap:wrap;}
.haus{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;}
.haus b{font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--s-1);letter-spacing:-.02em;}
.haus span{font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);letter-spacing:.16em;text-transform:uppercase;color:var(--kies);}
.nav{margin-inline-start:auto;display:flex;gap:1.5rem;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);letter-spacing:.13em;text-transform:uppercase;}
.nav a{text-decoration:none;color:var(--kies);padding-bottom:.15rem;border-bottom:2px solid transparent;}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bitumen);border-bottom-color:var(--pir);}

/* ── Hero mit Schichtenschnitt ── */
.hero{background:var(--weiss);border-bottom:1px solid rgba(21,24,27,.14);
  padding-block:clamp(2.25rem,1.6rem + 3.2vw,4.25rem);}
.hero__gitter{display:grid;gap:clamp(2rem,1.4rem + 2.6vw,3.5rem);grid-template-columns:1fr;align-items:start;}
@media (min-width:60rem){.hero__gitter{grid-template-columns:minmax(0,1.05fr) minmax(21rem,.95fr);}}
.hero h1{font-size:var(--s-3);margin-top:.9rem;max-width:15ch;}
.hero h1 span{color:var(--pir-tief);}
.hero__lede{margin-top:1.25rem;max-width:44ch;font-size:var(--s-1);line-height:1.5;color:var(--epdm);}
.hero__reihe{margin-top:1.9rem;display:flex;flex-wrap:wrap;gap:.7rem;}
.hero__zahlen{margin-top:2.2rem;display:flex;flex-wrap:wrap;gap:1.6rem 2.5rem;
  padding-top:1.4rem;border-top:1px solid rgba(21,24,27,.14);}
.zahl b{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--s-2);line-height:1;letter-spacing:-.03em;}
.zahl span{display:block;margin-top:.35rem;font-family:'IBM Plex Mono',monospace;
  font-size:var(--s--2);letter-spacing:.12em;text-transform:uppercase;color:var(--kies);}

.k-voll{display:inline-block;background:var(--bitumen);color:var(--kalk);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;
  padding:.9rem 1.7rem;border:1px solid var(--bitumen);}
.k-voll:hover{background:var(--pir);border-color:var(--pir);color:var(--bitumen);}
.k-linie{display:inline-block;text-decoration:none;border:1px solid rgba(21,24,27,.42);
  font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);letter-spacing:.14em;text-transform:uppercase;padding:.9rem 1.7rem;}
.k-linie:hover{border-color:var(--bitumen);background:var(--kalk);}

/* ── Signatur: der Schichtenschnitt ── */
.schnitt{border:1px solid rgba(21,24,27,.2);background:var(--kalk);}
.schnitt__kopf{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:baseline;justify-content:space-between;
  padding:.9rem 1.1rem;border-bottom:1px solid rgba(21,24,27,.2);background:var(--weiss);}
.schnitt__kopf h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--s--1);letter-spacing:.02em;}
.schnitt__wahl{display:flex;gap:.35rem;}
.schnitt__wahl label{font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);letter-spacing:.1em;
  text-transform:uppercase;padding:.35rem .7rem;border:1px solid rgba(21,24,27,.28);cursor:pointer;color:var(--kies);}
.schnitt__wahl label:hover{color:var(--bitumen);}
.schnitt input{position:absolute;opacity:0;pointer-events:none;}
.schnitt input:focus-visible + label{outline:2px solid var(--pir-tief);outline-offset:2px;}
#auf-a:checked ~ .schnitt__kopf label[for="auf-a"],
#auf-b:checked ~ .schnitt__kopf label[for="auf-b"]{background:var(--bitumen);border-color:var(--bitumen);color:var(--kalk);}

.stapel{display:none;padding:1.1rem;}
#auf-a:checked ~ .stapel--a{display:block;}
#auf-b:checked ~ .stapel--b{display:block;}

.lage{display:grid;grid-template-columns:3.9rem 1fr;gap:.65rem;align-items:stretch;}
.lage + .lage{margin-top:.3rem;}
.lage__mm{font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);color:var(--kies);
  text-align:right;padding-top:.15rem;line-height:1.3;white-space:nowrap;}
.lage__band{border:1px solid rgba(21,24,27,.32);min-height:1.2rem;position:relative;
  display:flex;align-items:center;padding-inline:.6rem;overflow:hidden;}
.lage__band b{font-family:'IBM Plex Sans',sans-serif;font-weight:500;font-size:var(--s--2);
  letter-spacing:.01em;position:relative;z-index:1;background:rgba(251,251,249,.86);padding-inline:.3rem;}
.lage__band em{font-style:normal;font-size:var(--s--2);color:var(--epdm);margin-inline-start:.5rem;
  position:relative;z-index:1;background:rgba(251,251,249,.86);padding-inline:.3rem;}
@media (max-width:34rem){.lage__band em{display:none;}}

/* Materialmuster: jede Schicht sieht aus wie ihr Baustoff */
.m-kies{background:radial-gradient(circle at 20% 30%,var(--kies) 1.5px,transparent 1.6px) 0 0/9px 9px,
        radial-gradient(circle at 70% 75%,var(--kies) 1.9px,transparent 2px) 0 0/11px 11px,var(--weiss);}
.m-vlies{background:repeating-linear-gradient(90deg,rgba(21,24,27,.18) 0 1px,transparent 1px 5px),var(--weiss);}
.m-bitumen{background:var(--epdm);}
.m-bitumen b,.m-bitumen em{background:rgba(38,44,49,.9);color:var(--kalk);}
.m-daemmung{background:repeating-linear-gradient(45deg,var(--pir) 0 7px,#E8BC55 7px 14px);}
.m-eps{background:radial-gradient(circle at 50% 50%,#D8D8D2 2.4px,transparent 2.5px) 0 0/8px 8px,#EDEDE7;}
.m-alu{background:repeating-linear-gradient(120deg,var(--alu) 0 4px,#CBD1D5 4px 8px);}
.m-substrat{background:radial-gradient(circle at 30% 60%,#6D5B44 1.7px,transparent 1.8px) 0 0/10px 10px,
        radial-gradient(circle at 80% 25%,#7E6B51 1.4px,transparent 1.5px) 0 0/13px 13px,#8E7C60;}
.m-substrat b,.m-substrat em{background:rgba(142,124,96,.9);color:var(--kalk);}
.m-draenage{background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(21,24,27,.3) 6px 7px),
        repeating-linear-gradient(0deg,transparent 0 8px,rgba(21,24,27,.22) 8px 9px),#D6D9CE;}
.m-wurzel{background:#4E5F3F;}
.m-wurzel b,.m-wurzel em{background:rgba(78,95,63,.9);color:var(--kalk);}
.m-beton{background:radial-gradient(circle at 25% 40%,#A8A8A2 1.6px,transparent 1.7px) 0 0/12px 12px,#C4C4BE;}
.m-blech{background:repeating-linear-gradient(90deg,var(--alu) 0 10px,#8E979D 10px 12px,var(--alu) 12px 22px,#D6DBDE 22px 24px);}

.schnitt__fuss{padding:.85rem 1.1rem;border-top:1px solid rgba(21,24,27,.2);background:var(--weiss);
  font-size:var(--s--2);color:var(--kies);font-family:'IBM Plex Mono',monospace;line-height:1.5;}

/* ── Abschnitte ── */
.block{padding-block:clamp(3rem,2.2rem + 4vw,5.5rem);border-bottom:1px solid rgba(21,24,27,.14);}
.block--weiss{background:var(--weiss);}
.block--tief{background:var(--bitumen);color:var(--kalk);border-bottom-color:rgba(242,241,237,.16);}
.block--tief .f-marke{color:var(--pir);}
.block__kopf{max-width:50ch;}
.block__kopf h2{font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--s-2);
  letter-spacing:-.022em;line-height:1.08;margin-top:.75rem;}
.block__kopf p{margin-top:.9rem;color:var(--epdm);}
.block--tief .block__kopf p{color:rgba(242,241,237,.76);}

/* ── Bauteilkatalog ── */
.katalog{margin-top:clamp(2rem,1.5rem + 2vw,3rem);border-top:2px solid var(--bitumen);}
.block--tief .katalog{border-top-color:var(--pir);}
.posten{display:grid;gap:.4rem 1.5rem;grid-template-columns:1fr;
  padding-block:1.35rem;border-bottom:1px solid rgba(21,24,27,.16);}
.block--tief .posten{border-bottom-color:rgba(242,241,237,.16);}
@media (min-width:52rem){.posten{grid-template-columns:3.5rem minmax(11rem,.85fr) minmax(0,1.7fr) auto;align-items:baseline;}}
.posten__nr{font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);color:var(--kies);}
.posten__name{font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--s-1);letter-spacing:-.015em;}
.posten__text{font-size:var(--s--1);color:var(--epdm);}
.block--tief .posten__text{color:rgba(242,241,237,.76);}
.posten__wert{font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);color:var(--pir-tief);white-space:nowrap;}
.block--tief .posten__wert{color:var(--pir);}

/* ── Objektliste ── */
.objekte{margin-top:clamp(2rem,1.5rem + 2vw,3rem);width:100%;overflow-x:auto;}
.objekte table{width:100%;border-collapse:collapse;font-size:var(--s--1);min-width:34rem;}
.objekte th{text-align:left;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:var(--s--2);
  letter-spacing:.12em;text-transform:uppercase;color:var(--kies);
  padding:.6rem .8rem .6rem 0;border-bottom:1px solid rgba(242,241,237,.3);}
.objekte td{padding:.85rem .8rem .85rem 0;border-bottom:1px solid rgba(242,241,237,.14);vertical-align:top;}
.objekte td:first-child{font-weight:500;}
.objekte td:last-child,.objekte th:last-child{text-align:right;padding-right:0;
  font-family:'IBM Plex Mono',monospace;color:var(--pir);white-space:nowrap;}

/* ── Karten ── */
.karten{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.karten{grid-template-columns:1fr 1fr;}}
@media (min-width:66rem){.karten{grid-template-columns:repeat(3,1fr);}}
.karte{background:var(--kalk);border:1px solid rgba(21,24,27,.18);padding:1.4rem;}
.block--weiss .karte{background:var(--kalk);}
.block--tief .karte{background:var(--epdm);border-color:rgba(242,241,237,.16);}
.karte h3{font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--s-1);letter-spacing:-.015em;}
.karte p{margin-top:.6rem;font-size:var(--s--1);color:var(--epdm);}
.block--tief .karte p{color:rgba(242,241,237,.76);}
.karte__mark{display:block;font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);
  letter-spacing:.13em;text-transform:uppercase;color:var(--pir-tief);margin-bottom:.7rem;}
.block--tief .karte__mark{color:var(--pir);}

/* ── Bild ── */
.bild{margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
.bild img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(21,24,27,.18);}
.bild figcaption{margin-top:.7rem;font-family:'IBM Plex Mono',monospace;font-size:var(--s--2);
  letter-spacing:.1em;text-transform:uppercase;color:var(--kies);}

/* ── Kontakt ── */
.paare{display:grid;gap:var(--space);grid-template-columns:1fr;margin-top:clamp(2rem,1.5rem + 2vw,3rem);}
@media (min-width:44rem){.paare{grid-template-columns:1fr 1fr;}}
.paar h3{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:var(--s--2);
  letter-spacing:.16em;text-transform:uppercase;color:var(--pir-tief);margin-bottom:.9rem;}
.block--tief .paar h3{color:var(--pir);}
.paar__zeile{display:flex;justify-content:space-between;gap:1rem;padding-block:.55rem;
  border-bottom:1px solid rgba(21,24,27,.16);font-size:var(--s--1);}
.block--tief .paar__zeile{border-bottom-color:rgba(242,241,237,.16);}
.paar__zeile span:last-child{font-family:'IBM Plex Mono',monospace;text-align:right;}

/* ── Unterseiten ── */
.oben{background:var(--weiss);border-bottom:1px solid rgba(21,24,27,.14);
  padding-block:clamp(2.25rem,1.7rem + 3vw,4rem);}
.oben h1{font-family:'Archivo',sans-serif;font-weight:700;font-size:var(--s-2);
  letter-spacing:-.022em;line-height:1.08;margin-top:.8rem;max-width:20ch;}
.oben p{margin-top:1rem;max-width:50ch;color:var(--epdm);font-size:var(--s-1);line-height:1.5;}

.fuss{padding-block:2.5rem;font-size:var(--s--2);color:var(--kies);font-family:'IBM Plex Mono',monospace;line-height:1.7;}
.fuss a{color:var(--pir-tief);}
.fuss p + p{margin-top:.5rem;}

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