*{box-sizing:border-box}
:root{
  --blue:#2d95ed;
  --green:#93ca26;
  --orange:#ff6500;
  --text:#1d1d1d;
  --bg:#ffffff;
  --card:#f7f9fc;
}
html,body{
  margin:0;
  min-height:100%;
  background:#fff;
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}
.desktop-view{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
.artboard{
  position:relative;
  width:min(100vw, calc(100vh * 1.7777778));
  max-width:2048px;
  aspect-ratio:16/9;
  margin:0 auto;
}
.artboard>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.hotspot{
  position:absolute;
  display:block;
  border-radius:4px;
  cursor:pointer;
}
.hotspot:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
.office{left:77.1%; top:81.8%; width:18.6%; height:3.4%;}
.mobile{left:76.0%; top:84.9%; width:19.8%; height:3.4%;}
.website{left:74.4%; top:88.0%; width:21.3%; height:3.4%;}
.email{left:72.9%; top:91.1%; width:22.8%; height:3.5%;}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.mobile-view{display:none}

@media (max-width:899px){
  .desktop-view{display:none}

  .mobile-view{
    display:block;
    max-width:760px;
    margin:0 auto;
    padding:24px 18px 44px;
    background:#fff;
  }

  .brand{
    text-align:center;
    color:var(--blue);
    margin-bottom:18px;
  }
  .brand h1{
    margin:0;
    font-weight:300;
    font-size:clamp(40px,10vw,68px);
    line-height:1;
  }
  .brand-line{
    height:4px;
    background:var(--blue);
    margin:10px auto 8px;
    width:min(92%, 420px);
  }
  .tagline{
    font-size:clamp(28px,8vw,46px);
    line-height:1.03;
  }
  .subline{
    margin-top:6px;
    font-size:17px;
  }

  .intro{
    font-size:18px;
    line-height:1.4;
    margin-bottom:10px;
  }
  .intro ul{
    margin:0;
    padding-left:24px;
  }
  .blue-bold{
    color:var(--blue);
    font-weight:700;
    font-size:20px;
    line-height:1.28;
    margin:10px 0 0;
  }

  .portrait{
    display:block;
    width:min(100%, 620px);
    margin:8px auto 26px;
    height:auto;
  }

  .mobile-b2b{
    text-align:center;
    margin:0 auto 30px;
  }
  .b2b-graphic{
    width:min(250px, 74vw);
    margin:0 auto 18px;
  }
  .b2b-graphic img{
    display:block;
    width:100%;
    height:auto;
  }

  .b2b-card{
    background:var(--card);
    border-radius:18px;
    padding:16px 16px 15px;
    margin:12px auto;
    font-size:17px;
    line-height:1.38;
    box-shadow:0 1px 0 rgba(0,0,0,0.04);
    position:relative;
    text-align:center;
  }
  .b2b-card::before{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    top:0;
    height:5px;
    border-radius:18px 18px 0 0;
  }
  .b2b-card.green::before{background:var(--green);}
  .b2b-card.orange::before{background:var(--orange);}
  .b2b-card.blue::before{background:var(--blue);}
  .b2b-card p{margin:0;}

  .values{
    display:grid;
    gap:16px;
    margin-top:6px;
  }
  .values article{
    background:#fff;
    border:1px solid #e7eef8;
    border-radius:18px;
    padding:16px 18px;
    text-align:center;
  }
  .values h2{
    margin:0 0 8px;
    color:var(--blue);
    font-size:20px;
  }
  .values p{
    margin:0;
    font-size:16px;
    line-height:1.42;
  }

  .contact{
    margin-top:28px;
    text-align:center;
    padding-top:8px;
  }
  .contact h2{
    color:var(--blue);
    font-size:23px;
    line-height:1.17;
    margin:0 0 16px;
  }
  .contact p{
    margin:0;
    font-size:20px;
    line-height:1.34;
  }
  .contact a{
    color:inherit;
    text-decoration:none;
  }
  .contact a:hover{
    text-decoration:underline;
  }
}


/* Footer */
.site-footer{
  max-width:1100px;
  margin:18px auto 28px;
  padding:0 20px;
  text-align:center;
  font-size:14px;
  line-height:1.6;
  color:#666;
}


/* Responsives Logo in der Mobilansicht */
.brand-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

.mobile-logo{
  display:block;
  width:clamp(280px, 88vw, 680px);
  max-width:100%;
  height:auto;
  margin:0 auto 8px;
}