:root{
  --bg:#000;
  --bg-soft:#070707;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.2);
  --text:#f4f4f4;
  --muted:rgba(255,255,255,.72);
  --muted-soft:rgba(255,255,255,.52);
  --max:1280px;
  --header-h:112px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:0 max(1rem, calc((100vw - var(--max)) / 2));
  background:#000;
  overflow:visible;
  transition:height .35s ease, background .35s ease;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:42px;
  background:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.82) 24%, rgba(0,0,0,.42) 58%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.site-header.scrolled{
  --header-h:84px;
}
.brand{
  position:absolute;
  left:max(1rem, calc((100vw - var(--max)) / 2));
  top:18px;
  z-index:2;
  transition:top .35s ease;
}
.brand img{
  width:min(360px,34vw);
  height:auto;
  transition:width .35s ease, opacity .35s ease;
}
.site-header.scrolled .brand{top:10px}
.site-header.scrolled .brand img{width:min(292px,29vw)}
.main-nav{
  display:flex;
  align-items:center;
  gap:1.5rem;
  margin-left:auto;
}
.main-nav a{
  font-size:.84rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s ease, opacity .2s ease;
}
.main-nav a:hover{color:#fff}

main{padding-top:var(--header-h)}
.section-shell{width:min(calc(100% - 2rem), var(--max));margin:0 auto}
.narrow{width:min(calc(100% - 2rem), 980px)}
.eyebrow{
  margin:0 0 1rem;
  font-size:.78rem;
  line-height:1.25;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-soft);
}
h1,h2,h3,p{margin:0}
h1{
  font-size:clamp(3.2rem,8vw,6.7rem);
  line-height:.94;
  letter-spacing:-.04em;
  font-weight:700;
}
h2{
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:600;
}
h3{
  font-size:clamp(1.4rem,2vw,1.6rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
p{color:var(--muted)}
.muted,.fineprint,.local-note{color:var(--muted-soft)}
.fineprint{font-size:.94rem;max-width:38ch}

.hero{
  position:relative;
  min-height:min(920px, calc(100svh - 2rem));
  display:flex;
  align-items:flex-end;
  padding:clamp(2.75rem,5vw,4.25rem) 0 clamp(7.5rem,12vw,10rem);
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:0;
  border-radius:0 0 34px 34px;
  overflow:hidden;
  background:#000;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 32%;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.74) 16%, rgba(0,0,0,.34) 38%, rgba(0,0,0,.12) 58%, rgba(0,0,0,.30) 80%, rgba(0,0,0,.76) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.03) 30%, rgba(0,0,0,.42) 100%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:180px;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.92) 68%, #000 100%);
}
.hero-copy{
  position:relative;
  z-index:1;
  width:min(46%, 600px);
  padding-left:clamp(.25rem,1vw,1rem);
}
.hero-copy .eyebrow{margin-bottom:1.1rem}
.hero-subline{
  margin-top:1.5rem;
  font-size:clamp(1rem,1.3vw,1.1rem);
  letter-spacing:.03em;
  color:rgba(255,255,255,.88);
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1.85rem;
  padding:.9rem 0;
  font-size:.93rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line-strong);
}
.text-link span{font-size:1.1rem}

.intro,.statement,.contact{padding:5.5rem 0 2rem}
.intro h2,.statement h2,.contact h2{margin-bottom:1.25rem;max-width:20ch}
.intro h2{max-width:none}
.intro p:last-child{max-width:none;font-size:1.06rem}
.statement p:last-child{max-width:78ch;font-size:1.06rem}

.section-heading{display:flex;flex-direction:column;gap:.6rem;margin-bottom:2.25rem}
.row-heading{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end}
.services{padding:6.5rem 0 2rem}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.35rem;
}
.service{
  position:relative;
  overflow:hidden;
  padding:1.6rem 1.4rem 1.45rem;
  border-top:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  min-height:260px;
}
.service > *{position:relative;z-index:1}
.service-no{display:block;margin-bottom:1rem;color:var(--muted-soft);font-size:.94rem}
.service h3{margin-bottom:.55rem}
.service-tags{font-size:.88rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-soft);margin-bottom:.9rem}
.service p:last-child{font-size:.98rem}

.service-operating::after,
.service-system::after,
.service-network::after,
.service-measurement::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:.42;
  pointer-events:none;
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0,0,0,.35) 30%, #000 56%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0,0,0,.35) 30%, #000 56%, #000 100%);
}
.service-operating::after{background-image:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('../images/service-operating.jpg');background-position:center center;}
.service-system::after{background-image:linear-gradient(90deg,rgba(0,0,0,.10),rgba(0,0,0,.02)),url('../images/service-system.jpg');background-position:35% center;}
.service-network::after{background-image:linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.02)),url('../images/service-dante.jpg');background-position:58% center;}
.service-measurement::after{background-image:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.02)),url('../images/service-sti.jpg');background-position:62% 54%;}

.split{
  padding:7rem 0 2rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px, 540px);
  gap:2rem;
  align-items:center;
}
.split.reverse{grid-template-columns:minmax(360px, 540px) minmax(0,1fr)}
.small-formats{padding-top:5.5rem}
.small-formats-media img{object-position:center 48%;}
.split-copy h2{margin-bottom:1.1rem;max-width:16ch}
.split-copy p + p{margin-top:1rem}
.media-rack,.portrait{
  min-height:420px;
  border-radius:24px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    linear-gradient(135deg, #0a0a0a, #141414 45%, #050505);
  border:none;
}
.media-rack{position:relative}
.media-rack img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.media-rack::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.96) 2.5%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.96) 97.5%, #000 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 3%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 86%, rgba(0,0,0,.96) 97%, #000 100%);
  pointer-events:none;
}
.portrait{min-height:460px;position:relative}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 24%;filter:grayscale(100%)}
.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,.96) 2.5%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.96) 97.5%, #000 100%),
    linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 3%, rgba(0,0,0,0) 12%, rgba(0,0,0,0) 86%, rgba(0,0,0,.96) 97%, #000 100%);
  pointer-events:none;
}

.work{padding:7rem 0 2rem}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.project{
  position:relative;
  min-height:320px;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
}
.project-image{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.76) 72%, rgba(0,0,0,.94) 100%),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.1), rgba(255,255,255,0) 48%),
    linear-gradient(135deg, #0b0b0b, #171717 50%, #080808);
}




.project-image-tennet{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.24) 42%, rgba(0,0,0,.84) 100%),
    linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.22) 100%),
    url('../images/ref-tennet.jpg') center center / cover no-repeat;
}
.project-image-thilo{
  background:
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 42%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.24) 100%),
    url('../images/ref-thilo.jpg') center center / cover no-repeat;
}


.project-image-sparkasse{
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.84) 100%),
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.20) 100%),
    url('../images/ref-sparkasse.jpg') center center / cover no-repeat;
}
.project-image-ideenexpo{
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.20) 100%),
    url('../images/ref-ideenexpo.jpg') center center / cover no-repeat;
}
.project-image-telekom{
  background:
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.84) 100%),
    linear-gradient(90deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 76%, rgba(0,0,0,.22) 100%),
    url('../images/ref-telekom.jpg') center center / cover no-repeat;
}
.project-image-hpe{
  background:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.24) 42%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.24) 100%),
    url('../images/ref-hpe.jpg') center center / cover no-repeat;
}
.project-copy{
  position:absolute;
  inset:auto 0 0;
  padding:1.3rem 1.25rem 1.15rem;
}
.project-copy p{margin:.45rem 0 .35rem;color:rgba(255,255,255,.88)}
.project-copy span{font-size:.93rem;color:var(--muted-soft)}

.about{padding:7rem 0 2rem}

.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:1.25rem;
  padding:1.6rem 0 0;
  border-top:1px solid var(--line-strong);
}
.contact-grid > div{display:flex;flex-direction:column;gap:.35rem}
.contact-grid strong{font-size:1.1rem}
.contact-grid a{color:#fff}
.local-note{margin-top:1rem;font-size:.95rem}

.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:2.4rem 0 3rem;
  color:var(--muted-soft);
  font-size:.92rem;
}
.footer-links a:hover{color:#fff}

.media-placeholder{position:relative}
.media-placeholder::before,
.portrait::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* Rechtliches – bewusst sachlicher und kompakter als die Portfolio-Seite */
.legal-page{padding-top:var(--header-h)}
.legal-intro{padding:3.5rem 0 1rem}
.legal-intro .eyebrow{margin-bottom:.7rem}
.legal-intro h1{font-size:clamp(2rem,3.5vw,3rem);line-height:1.05;letter-spacing:-.025em}
.legal-section{padding:3.25rem 0 1rem}
.legal-section > .eyebrow{margin-bottom:.65rem;font-size:.7rem;letter-spacing:.16em}
.legal-section h2{font-size:clamp(1.45rem,2.2vw,2rem);line-height:1.15;letter-spacing:-.015em;margin-bottom:1.5rem;max-width:none}
.legal-copy{max-width:860px}
.legal-copy h3{font-size:1.05rem;line-height:1.3;letter-spacing:0;margin:2rem 0 .55rem;font-weight:600}
.legal-copy p{font-size:.98rem;line-height:1.7;margin:0 0 1rem;color:var(--muted)}
.legal-copy ul{margin:0 0 1rem;padding-left:1.25rem;color:var(--muted)}
.legal-copy li{margin:.28rem 0;line-height:1.65}
.legal-copy strong{color:var(--text)}
.legal-copy a{color:var(--text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.32);text-underline-offset:.18em}
.legal-footer{margin-top:2rem}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 1080px){
  .main-nav{gap:1rem}
  .hero{min-height:760px}
  .hero-copy{width:min(58%, 640px)}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split.reverse{grid-template-columns:1fr}
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 760px){
  :root{--header-h:82px}
  body{line-height:1.6}
  .site-header{padding:0 1rem}
  .site-header.scrolled{--header-h:68px}
  .site-header::after{height:30px}
  .brand{left:1rem;top:12px}
  .site-header.scrolled .brand{top:7px}
  .brand img{width:min(232px,62vw)}
  .site-header.scrolled .brand img{width:min(198px,53vw)}
  .main-nav{display:none}
  main{padding-top:var(--header-h)}

  .section-shell,.narrow{width:calc(100% - 2rem)}
  .eyebrow{font-size:.7rem;letter-spacing:.15em;margin-bottom:.8rem}
  h1{font-size:clamp(3rem,15vw,4.35rem);line-height:.94}
  h2{font-size:clamp(2rem,9vw,2.65rem);line-height:1.05}

  .hero{
    min-height:calc(100svh - var(--header-h));
    padding:2rem 0 5rem;
    align-items:flex-end;
  }
  .hero-media{border-radius:0 0 22px 22px}
  .hero-media img{object-position:57% 30%}
  .hero-media::after{
    background:
      linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.08) 34%, rgba(0,0,0,.70) 80%, rgba(0,0,0,.92) 100%),
      linear-gradient(90deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.16) 45%, rgba(0,0,0,.10) 72%, rgba(0,0,0,.36) 100%);
  }
  .hero::after{height:110px}
  .hero-copy{width:100%;padding:0 .25rem}
  .hero-copy .eyebrow{margin-bottom:.9rem}
  .hero-subline{margin-top:1.15rem;font-size:.92rem;line-height:1.55;max-width:30rem}
  .text-link{margin-top:1.3rem;font-size:.82rem;padding:.7rem 0}

  .intro{padding:4.5rem 0 1rem}
  .intro h2{margin-bottom:1.45rem}
  .intro p:last-child{font-size:1rem;line-height:1.72}

  .services{padding:5.25rem 0 1rem}
  .section-heading{margin-bottom:1.8rem}
  .service-grid{grid-template-columns:1fr;gap:1rem}
  .service{min-height:290px;padding:1.45rem 1.35rem 1.55rem}
  .service-no{margin-bottom:.8rem}
  .service h3{font-size:1.55rem}
  .service-tags{font-size:.78rem;line-height:1.45;margin-bottom:.8rem}
  .service p:last-child{font-size:.95rem;line-height:1.6;max-width:90%}
  .service-operating::after,
  .service-system::after,
  .service-network::after,
  .service-measurement::after{
    opacity:.46;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.72) 48%, #000 72%, #000 100%);
    mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 18%, rgba(0,0,0,.72) 48%, #000 72%, #000 100%);
  }

  .split,.split.reverse{grid-template-columns:1fr;gap:2.35rem;padding:5.75rem 0 1rem}
  .split-copy h2{max-width:none;margin-bottom:1.2rem}
  .split-copy p{font-size:1rem;line-height:1.7}
  .media-rack,.portrait{min-height:0;aspect-ratio:4/3;border-radius:20px}
  .portrait{aspect-ratio:1/1}
  .media-rack img{object-position:center 50%}
  .small-formats-media img{object-position:center 42%}
  .portrait img{object-position:center 18%}

  .work{padding:5.75rem 0 1rem}
  .row-heading{grid-template-columns:1fr;gap:1rem}
  .fineprint{max-width:none;font-size:.88rem;line-height:1.55}
  .project-grid{grid-template-columns:1fr;gap:1rem}
  .project{min-height:300px;border-radius:16px}
  .project-copy{padding:1.2rem 1.15rem 1.05rem}

  .small-formats{padding-top:5.75rem}
  .about{padding-top:5.75rem}

  .contact{padding:5.75rem 0 1rem}
  .contact h2{margin-bottom:1.5rem}
  .contact-grid{grid-template-columns:1fr;gap:1.4rem;padding-top:1.3rem}
  .contact-grid > div{gap:.25rem}
  .local-note{margin-top:1.4rem;line-height:1.6}

  .site-footer{flex-direction:column;align-items:flex-start;gap:.65rem;padding:2.5rem 0 2.75rem;line-height:1.6}

  .legal-intro{padding-top:2.75rem}
  .legal-section{padding-top:2.5rem}
  .legal-copy p{font-size:.94rem}
}