:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --line:#e6e6e6;
  --muted:#6b6b6b;
  --wrap:1000px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
a{color:inherit}

/* Reveal-on-scroll ------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Logo -------------------------------------------------------------- */
.logo{display:block;height:30px;width:auto}
.mark{display:block;width:auto}
.hero .mark{height:104px;margin-bottom:36px}

/* Header ------------------------------------------------------------ */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav__brand{text-decoration:none;display:inline-flex}
.nav__links a{
  text-decoration:none;font-size:.92rem;margin-left:30px;
  opacity:.65;transition:opacity .2s;
}
.nav__links a:hover{opacity:1}
@media(max-width:600px){.nav__links{display:none}}

/* Hero -------------------------------------------------------------- */
.hero{padding:96px 0 92px;border-bottom:1px solid var(--line)}
.hero__eyebrow{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:22px;
}
.hero__title{
  font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:1.03;
  letter-spacing:-.03em;font-weight:800;margin-bottom:26px;
}
.hero__lead{font-size:1.24rem;color:var(--muted);max-width:640px}
.hero__cta{margin-top:44px;display:flex;gap:14px;flex-wrap:wrap}

/* Buttons ----------------------------------------------------------- */
.btn{
  display:inline-block;text-decoration:none;font-size:.95rem;font-weight:600;
  padding:14px 28px;border:1.5px solid var(--ink);border-radius:2px;
  transition:background .18s,color .18s;
}
.btn--primary{background:var(--ink);color:var(--paper)}
.btn--primary:hover{background:var(--paper);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* Sections ---------------------------------------------------------- */
section{padding:92px 0;border-bottom:1px solid var(--line)}
.section-label{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:38px;
}
.section-title{font-size:1.9rem;letter-spacing:-.02em;font-weight:800;margin-bottom:22px}

/* Leistungen -------------------------------------------------------- */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);
}
@media(max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--paper);padding:34px 30px}
.card__no{font-size:.78rem;color:var(--muted);margin-bottom:22px;font-variant-numeric:tabular-nums}
.card__title{font-size:1.12rem;letter-spacing:-.01em;margin-bottom:12px;font-weight:700}
.card__text{color:var(--muted);font-size:.94rem}

/* Gegenstand -------------------------------------------------------- */
.prose{max-width:740px;color:var(--muted);font-size:1.02rem}

/* Kontakt ----------------------------------------------------------- */
.info{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:30px}
@media(max-width:560px){.info{grid-template-columns:1fr;gap:8px}}
.info dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.info dd{margin-bottom:24px;font-size:1rem}
.info a{text-decoration:none;border-bottom:1px solid var(--line)}
.info a:hover{border-bottom-color:var(--ink)}

/* Footer ------------------------------------------------------------ */
.site-footer{padding:44px 0;color:var(--muted);font-size:.85rem}
.site-footer__row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}