*{box-sizing:border-box}html{font-family:"neue-haas-grotesk-display","neue-haas-grotesk-text",Arial,Helvetica,sans-serif;color:#161616}body{margin:0;background:#fff}a{color:inherit}a:hover{text-decoration:none}.page{position:relative;width:100%;margin:0;aspect-ratio:907.087 / 510.236;overflow:hidden;container-type:inline-size}.home{background:url('assets/hintergrund-web9.jpg') center center/100% 100% no-repeat}.brand{position:absolute;left:11.5%;top:5.7%;color:white;font-weight:600;font-size:3.55cqw;letter-spacing:-.025em;line-height:1.04}.tagline{position:absolute;left:11.5%;top:13.7%;color:white;font-weight:600;font-size:1.65cqw;letter-spacing:-.015em}.services{position:absolute;left:11.5%;top:29.0%;font-size:1.25cqw;line-height:1.32;font-weight:650;letter-spacing:-.01em}.intro{position:absolute;left:11.5%;top:48.1%;width:45.8%;font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-size:1.05cqw;line-height:1.39;letter-spacing:0;font-weight:300}.intro p{margin:0 0 1.55em}.logo{position:absolute;right:6.05%;top:28.7%;width:12.23%;height:auto;display:block}.contact{position:absolute;right:6.05%;top:70.0%;text-align:right;font-weight:650;font-size:1.22cqw;line-height:1.28;letter-spacing:-.01em}.about .story{position:absolute;left:6.2%;top:11.2%;width:44.0%;font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-size:.95cqw;line-height:1.42;letter-spacing:0;font-weight:300}.story p{margin:0 0 1.52em}.refs{position:absolute;top:11.2%;font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-size:.95cqw;line-height:1.38;letter-spacing:0;text-align:right;font-weight:300}.refs.left{right:24.7%;width:18%}.refs.right{right:6.25%;width:17%}.refs section{margin-bottom:1.45em}.refs h2{font-size:inherit;margin:0;font-weight:650}.refs p{margin:0}.nav{position:fixed;z-index:4;right:18px;bottom:15px;display:flex;gap:12px;font-size:12px;background:rgba(255,255,255,.92);padding:8px 11px;border:1px solid #ddd}.nav a{text-decoration:none}.nav a[aria-current=page]{font-weight:bold;text-decoration:underline}@media(max-width:700px){body{background:white}.page{aspect-ratio:auto;min-height:100vh;overflow:visible}.home{background:white}.home:before{content:'';position:absolute;top:0;left:0;right:0;height:185px;background:url('assets/hintergrund.jpg') center top/auto 480px no-repeat;z-index:0}.brand,.tagline,.services,.intro,.logo,.contact,.about .story,.refs{position:relative;top:auto;left:auto;right:auto;width:auto}.brand{padding:24px 6% 0;font-size:33px}.tagline{padding:2px 6% 0;font-size:17px}.services{margin:105px 6% 0;font-size:17px}.intro{margin:30px 6% 0;font-size:15px;line-height:1.45}.logo{width:160px;margin:36px 6% 0 auto}.contact{margin:20px 6% 110px 0;font-size:17px}.about{padding:30px 6% 100px}.about .story{font-size:15px;line-height:1.5}.refs{font-size:15px;text-align:left;margin-top:30px}.refs section{margin-bottom:24px}.nav{bottom:0;right:0;left:0;justify-content:center}}

/* WEB24: original dark WEB22 artwork; explicit desktop and mobile rules. */
.about {background:#fff}
.brand,.services {margin:0}
.visually-hidden {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (min-width:701px) {
  .home {
    min-height:100vh;
    background:#fff url('assets/raster-web22-oben.png') center top / 100% auto no-repeat;
  }
  .home::after {
    content:"";position:absolute;left:0;right:0;bottom:0;
    height:clamp(55px,7.57vw,160px);
    background:url('assets/raster-web22-unten.png') center bottom / 100% auto no-repeat;
    pointer-events:none;
  }
  .home .brand,.home .tagline {left:6.2%;color:#fff}
  .home .services,.home .intro {left:6.2%}
  .nav {
    position:fixed;top:20px;right:3.7%;bottom:auto;left:auto;z-index:20;
    display:flex;gap:20px;align-items:center;
    background:rgba(255,255,255,.9);border:0;padding:8px 10px;
    font-size:clamp(12px,1vw,15px);
  }
}
@media (max-width:700px) {
  html,body {width:100%;max-width:100%;overflow-x:hidden}
  .page {width:100%;aspect-ratio:auto;min-height:100svh;overflow:visible;container-type:normal}
  .home {display:flex;flex-direction:column;background:#fff;min-height:100svh}
  .home::before {
    content:"";position:absolute;top:0;left:0;right:0;height:165px;
    background:url('assets/raster-web22-oben.png') center top / max(100%,1050px) auto no-repeat;
    pointer-events:none;
  }
  .home::after {
    content:"";position:relative;display:block;flex-shrink:0;
    width:100%;height:79px;margin-top:auto;
    background:url('assets/raster-web22-unten.png') center bottom / max(100%,1050px) auto no-repeat;
    pointer-events:none;
  }
  .home header {position:relative;z-index:1}
  .home .brand,.home .tagline,.home .services,.home .intro,.home .logo,.home .contact {
    position:relative;left:auto;right:auto;top:auto
  }
  .home .brand {
    padding:55px 6% 0;font-size:clamp(27px,7.4vw,36px);
    line-height:1.07;letter-spacing:-.025em;color:#fff
  }
  .home .tagline {padding:3px 6% 0;font-size:clamp(15px,4.3vw,19px);color:#fff}
  .home .services {margin:93px 6% 0;font-size:clamp(15px,4vw,18px);line-height:1.35;overflow-wrap:break-word}
  .home .intro {width:auto;margin:36px 6% 0;font-size:16px;line-height:1.48}
  .home .logo {width:min(44%,190px);height:auto;margin:42px 6% 0 auto}
  .home .contact {margin:22px 6% 75px;font-size:17px;line-height:1.38;overflow-wrap:anywhere}
  .nav {
    position:fixed;top:0;bottom:auto;left:0;right:0;z-index:30;
    display:flex;justify-content:flex-end;flex-wrap:wrap;gap:14px;
    padding:9px 6%;font-size:12px;line-height:1.4;
    background:rgba(255,255,255,.96);border:0;border-bottom:1px solid #eee
  }
  .about {padding:82px 6% 65px;min-height:100svh}
  .about .story,.about .refs {
    position:static;width:100%;max-width:100%;font-size:16px;line-height:1.5;text-align:left
  }
  .about .refs {margin:34px 0 0}
  .about .refs.right {margin-top:0}
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse) {
  .home .brand {padding-top:52px}
}

/* WEB25: keep the heading and tagline together at all viewport ratios. */
@media (min-width:701px) {
  .home header {position:absolute;z-index:2;top:5.7%;left:6.2%;width:65%;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1.1vw,20px)}
  .home header .brand,.home header .tagline {position:static;top:auto;left:auto;padding:0;margin:0;line-height:1.08}
}
@media (max-width:700px) {
  .home header {position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:55px 6% 0;gap:3px}
  .home header .brand,.home header .tagline {position:static;top:auto;left:auto;margin:0;padding:0;line-height:1.1}
}