:root{
  --paper:#ffffff;
  --ink:#141414;
  --grey:#8a8a8a;
  --line:#e7e7e7;
  --orange:#f79608;   /* bitsnap */
  --steel:#4e7c9e;    /* enono */
  --oxblood:#6e1e2b;  /* fahrzeuge / cars */
  --max:1200px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--orange);color:#fff}
.mono{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo img{height:34px;width:auto;display:block}
.head-right{display:flex;align-items:center;gap:28px}
nav.sections{display:flex;gap:24px;align-items:center}
nav.sections a{
  color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;
  display:flex;align-items:center;gap:8px;
}
nav.sections a .dot{width:8px;height:8px;border-radius:50%;transition:transform .2s ease}
nav.sections a:hover .dot{transform:scale(1.6)}
nav.sections a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
nav.lang{display:flex;gap:10px;align-items:center;border-left:1px solid var(--line);padding-left:20px}
nav.lang a{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--grey);text-decoration:none;text-transform:uppercase;
  padding-bottom:2px;border-bottom:2px solid transparent;
}
nav.lang a:hover{color:var(--ink)}
nav.lang a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--orange)}
nav.lang a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.d-orange{background:var(--orange)}
.d-steel{background:var(--steel)}
.d-oxblood{background:var(--oxblood)}
@media(max-width:760px){
  nav.sections a span.lbl{display:none}
  nav.sections{gap:16px}
  .head-right{gap:16px}
  nav.lang{padding-left:14px;gap:8px}
}

/* ---------- hero ---------- */
.hero{padding:clamp(70px,12vh,140px) 0 clamp(60px,10vh,120px)}
.hero .mono{margin-bottom:28px}
.hero h1{
  font-weight:800;
  font-stretch:72%;
  text-transform:lowercase;
  font-size:clamp(2.2rem,6.6vw,5.6rem);
  line-height:1.04;
  letter-spacing:-.015em;
}
.hero h1 a{color:inherit;text-decoration:none}
.hero h1 a:hover{color:var(--grey)}
.hero h1 a:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.hero h1 .p{display:inline-block;width:.18em;height:.18em;border-radius:50%;margin-left:.06em;transform:translateY(-.04em)}
.hero p.lede{max-width:600px;margin-top:36px;font-size:19px;color:#3a3a3a}
@media(prefers-reduced-motion:no-preference){
  .hero h1 .line{opacity:0;transform:translateY(14px);animation:rise .6s ease forwards;display:inline-block}
  .hero h1 .line:nth-of-type(2){animation-delay:.12s}
  .hero h1 .line:nth-of-type(3){animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------- sections ---------- */
section.div{border-top:1px solid var(--line);padding:clamp(56px,9vh,110px) 0}
.grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px)}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.div h2{
  font-weight:800;font-stretch:75%;text-transform:lowercase;
  font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.05;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:14px;
}
.div h2 .dot{width:.32em;height:.32em;border-radius:50%;flex:none;transform:translateY(-.02em)}
.div .mono{margin-bottom:14px}
.div p{margin-bottom:16px;color:#2c2c2c;max-width:58ch}
ul.spec{list-style:none;margin-top:8px}
ul.spec li{
  font-family:'IBM Plex Mono',monospace;font-size:13px;color:#555;
  padding:10px 0;border-bottom:1px solid var(--line);
  display:flex;gap:12px;align-items:baseline;
}
ul.spec li::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;transform:translateY(-1px)}
section.s-orange ul.spec li::before{background:var(--orange)}
section.s-steel ul.spec li::before{background:var(--steel)}
section.s-oxblood ul.spec li::before{background:var(--oxblood)}
.note{font-size:14px;color:var(--grey);margin-top:20px}

/* ---------- contact ---------- */
section.contact{border-top:1px solid var(--line);padding:clamp(56px,9vh,110px) 0}
section.contact h2{
  font-weight:800;font-stretch:75%;text-transform:lowercase;
  font-size:clamp(1.9rem,4.2vw,3.2rem);letter-spacing:-.01em;margin-bottom:22px;
}
section.contact h2 .p{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--orange);margin-left:.08em}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
a.mail{
  display:inline-block;font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:600;
  color:var(--ink);text-decoration:none;border-bottom:3px solid var(--orange);
  padding-bottom:2px;word-break:break-all;
}
a.mail:hover{color:var(--orange)}
a.mail:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
address{font-style:normal;margin-top:26px;color:#3a3a3a;line-height:1.7}
address .mono{display:block;margin-bottom:6px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:34px 0 44px}
.foot-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer .dots{display:flex;gap:10px}
footer .dots span{width:9px;height:9px;border-radius:50%}