html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}
.page {
  position: relative;
  width: 100%;
  max-width: 1536px;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
}
.page img {
  display: block;
  width: 100%;
  height: auto;
}
.nav-hotspot, .cta-hotspot {
  position: absolute;
  display: block;
  z-index: 5;
  text-decoration: none;
  background: rgba(0,0,0,0);
}
.nav-hotspot:focus, .cta-hotspot:focus {
  outline: 2px solid #0a6cff;
  outline-offset: 2px;
}

.lang-hotspot {
    position: absolute;
    display: block;
    z-index: 5;
    text-decoration: none;
    background: rgba(0,0,0,0);
}

/* Desktop screenshot based navigation hotspots */
.page.home .nav-home      {left:29.3%; top:3.5%; width:5.3%; height:4.0%;}
.page.home .nav-about     {left:35.8%; top:3.5%; width:6.0%; height:4.0%;}
.page.home .nav-expertise {left:42.3%; top:3.5%; width:7.7%; height:4.0%;}
.page.home .nav-clients   {left:50.7%; top:3.5%; width:5.9%; height:4.0%;}
.page.home .nav-insights  {left:57.0%; top:3.5%; width:6.8%; height:4.0%;}
.page.home .nav-contact   {left:64.3%; top:3.5%; width:6.4%; height:4.0%;}
.page.home .lang-de       {left:92.8%; top:3.0%; width:2.5%; height:4.0%;}
.page.home .cta-talk      {left:4.4%; top:60.7%; width:14.4%; height:5.7%;}

.page.inner .nav-home      {left:45.0%; top:1.1%; width:5.2%; height:2.6%;}
.page.inner .nav-about     {left:50.4%; top:1.1%; width:5.8%; height:2.6%;}
.page.inner .nav-expertise {left:56.4%; top:1.1%; width:7.6%; height:2.6%;}
.page.inner .nav-clients   {left:64.2%; top:1.1%; width:5.8%; height:2.6%;}
.page.inner .nav-insights  {left:70.2%; top:1.1%; width:6.6%; height:2.6%;}
.page.inner .nav-contact   {left:77.0%; top:1.1%; width:6.4%; height:2.6%;}
.page.contact .lang-de-contact {left:92.8%; top:1.1%; width:2.5%; height:2.6%; z-index:20;}
.page.insights .lang-de-insights {position:absolute; left:92.8%; top:1.1%; width:3.0%; height:2.6%; z-index:20;}

/* Bottom “Let's talk” areas on long pages */
.page.inner .cta-talk {left:81.5%; bottom:7.5%; width:15.0%; height:3.2%;}
.page.expertise .cta-talk {left:5.0%; bottom:9.5%; width:15.0%; height:3.2%;}
.page.clients .cta-talk {left:5.0%; bottom:9.5%; width:15.0%; height:3.2%;}
.page.insights .cta-talk {left:5.0%; bottom:9.5%; width:15.0%; height:3.2%;}
.page.contact .cta-talk {left:5.0%; bottom:6.2%; width:14.0%; height:3.0%;}

/* Contact page clickable details */
.page.contact .mail-icloud {left:10.5%; top:43.3%; width:24%; height:2.0%;}
.page.contact .mail-ruppran {left:10.5%; top:45.0%; width:18%; height:2.0%;}
.page.contact .linkedin {left:10.5%; top:49.1%; width:24%; height:2.4%;}
.page.contact .phone {left:10.5%; top:40.8%; width:16%; height:2.0%;}

/* Real contact form */
.page.contact > img {
  pointer-events: none;
}

.real-contact-form {
  position: absolute;
  left: 56.3%;
  top: 30.9%;
  width: 38.4%;
  z-index: 50;
  pointer-events: auto;
}

.real-contact-form form {
  display: flex;
  flex-direction: column;
  gap: 0.10vw;
}

.real-contact-form input,
.real-contact-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75vw 1.0vw;
  border: 1px solid rgba (201,209,220,0,0.45);
  background: #ffffff;
  color: #18345f;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(12px,1.05vw,16px);
  position: relative;
  z-index: 51;
  pointer-events: auto;
}

.real-contact-form textarea {
  min-height: 12.4vw;
  resize: vertical;
}

.real-contact-form button {
  width: 20vw;
  height: 4vw;
  padding: 0;
  margin-left:  4vw; 
  border: 0;
  background: transparent !important;
  color: transparent !important;
  cursor: pointer;
  position: relative;
  transform: translateY(3.0vw);
  z-index: 100000  !important; 
  pointer-events: auto  !important;
}

main.page.inner.insights .cta-talk {
  left: 5.0% !important;
  right: auto !important;
  bottom: 9.5% !important;
  top: auto !important;
  width: 15.0% !important;
  height: 3.2% !important;
}

.legal-footer {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    text-align: center;
    font-size: 11px;
    line-height: 1.4;
    color: #064a9b;
    background: #ffffff;
    border-top: 1px solid #d9e3ef;
}

.page.insights .lang-de-insights {
    position: absolute !important;
    left: 92.8% !important;
    top: 1.1% !important;
    width: 3.0% !important;
    height: 2.6% !important;
    display: block !important;
    z-index: 100 !important;
    background: rgba(0,0,0,0) !important;
}

.insights-coming-soon {
  position: absolute;
  left: 51.5%;
  top: 73.5%;
  width: 44%;
  padding: 22px 30px 55px 30px;  box-sizing: border-box;
  background: #f3f8fd;
  color: #064a9b;
  font-family: Arial, sans-serif;
  font-size: 1.15vw;
  line-height: 1.45;
  z-index: 40;
}

.insights-coming-soon strong {
  font-size: 1.35vw;
  font-weight: 600;
}

/* ===== LEGAL PAGE ===== */

.legal-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 70px 60px;
    font-family: Arial, sans-serif;
    color: #064a9b;
    background: #ffffff;
    line-height: 1.6;
}

.legal-page h1 {
    font-size: 36px;
    margin-bottom: 35px;
    color: #064a9b;
}

.legal-page h2 {
    font-size: 20px;
    margin-top: 32px;
    margin-bottom: 10px;
    color: #064a9b;
}

.legal-page p {
    font-size: 15px;
    color: #333333;
    margin-bottom: 18px;
}

.legal-page a {
    color: #064a9b;
    text-decoration: none;
    font-weight: 600;
}

.legal-page a:hover {
    text-decoration: underline;
}

.legal-footer a {
    color: #064a9b;
    text-decoration: none;
}

.legal-footer a:hover {
    text-decoration: underline;
}

.activity-disclosure {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 12px;
    text-align: center;
    font-family: Arial, sans-serif;
    font-size: 9px;
    line-height: 1.4;
    color: #064a9b;
    background: #ffffff;
    border-top: 1px solid #d9e3ef;
}

.activity-disclosure strong {
    font-weight: 600;
}

/* danach beginnt Mobile */



@media (max-width: 768px) {
    .legal-footer {
        padding: 8px 12px;
        font-size: 8px;
        line-height: 1.35;
    }
}

@media (max-width: 768px) {
  .real-contact-form textarea {
    
    min-height: 9vw !important;
    height: 9vw !important
  }

 .real-contact-form button {
    transform: translateY(1.5vw) !important;
    background: #064a9b !important;
    color: white !important;
    border: none !important;

}

@media (max-width: 768px) {
  .insights-coming-soon {
    padding: 8px 10px 12px 10px !important;
    min-height: 0 !important;
  }

  .insights-coming-soon strong {
    font-size: 1.35vw;
  }
}

@media (max-width: 768px) {
    .legal-page {
        padding: 35px 25px;
    }

    .legal-page h1 {
        font-size: 28px;
    }

    .legal-page h2 {
        font-size: 18px;
    }

    .legal-page p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .page.contact .phone {
        top: 39.6%;
    }

    .page.contact .mail-icloud {
        top: 43.3%;
    }

    .page.contact .mail-ruppran {
        top: 45.0%;
    }

    .page.contact .linkedin {
        top: 49.1%;
    }
}