body{
    margin:0;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#fff;
    background:#111;
  }


  /* ===== DESKTOP (default) ===== */
  .hero{
  position: relative;
  min-height: 100vh;
  background-image:
    linear-gradient(
      to right,
      rgba(0,0,0,0.75) 0%,
      rgba(0,0,0,0.60) 35%,
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.20) 100%
    ),
    url('background.jpg');
  background-size: cover;
  background-position: right center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 10vh 8vw 0;
}

 .headline{
  max-width: min(760px, 60vw);
  z-index: 2;
}

.after{
  max-width: 520px;
  margin-top: 28px;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

  h1{
    font-size: clamp(32px, 3.8vw, 54px);
    font-weight:600;
    line-height:1.15;
    margin:0 0 22px 0;
  }

  .subtext{
    font-size:16px;
    line-height:1.55;
    margin:0 0 28px 0;
    color:rgba(255,255,255,0.85);
  }

.cta-wrap{
  display: inline-block;        
}


.cta-question{
  font-size: 16px;     
  line-height: 1.55;             
  font-weight: 300; 
  color: #00c8d7;         
  margin-bottom: 28px; 
}

.cta-detail{
  max-width: 520px;   /* passend zu deinem .after */
  margin-top: 10px;
}
.cta-subline-white{
  margin: 0 0 36px 0;
  line-height: 1.55;
  color: #fff;
}

.cta-button{
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 20px;
  text-align: center;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  background: #fff;
  border-radius: 6px;
}
.cta-subline{
  display: inline-block;
  white-space: nowrap;
  margin-top: 8px;
  margin-bottom: 28px;
  font-size: 16px;              
  font-weight: 300;             
  color:#00c8d7;
}

.after a:not(.cta-button){
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.after a:not(.cta-button):visited{
  color: rgba(255,255,255,0.85);
}
.after a:not(.cta-button):hover{
  color: #00c8d7;
  text-decoration: underline;
}

  .contact{
    font-size:16px;
    line-height:1.55;
  }

  .contact a{
    color:#fff;
    text-decoration:none;
  }
  .contact a:hover{ text-decoration:underline; }

  .footer{
     position:absolute;
     left:8vw;
     bottom:20px;
     display:flex;
     gap:30px;
     font-size:14px;
     background:transparent;
  }
  .footer a{
     color:#fff;
     text-decoration:none;
  }
  .footer a:hover{ text-decoration:underline; }

/* ===== MOBILE (sauber) ===== */
@media (max-width: 768px){

  html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    background: #000;
  } 

  .hero{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height: auto;
    background: #000;
    background-image: none !important;
    padding: 0;
  }

  .headline,
  .after,
  .footer{
    padding-left: 8vw;
    padding-right: 8vw;
  } 
 
.headline{
  position: static;
  transform: none;
  max-width: none; 
  padding-top: 7vh; 
  padding-bottom: 0vh;
 }
  

  /* Portrait-Block */
  .hero-photo{
    display: block;
    width: 100%;
    height: 42vh;
    background: url('background_mobil.jpg') center 15% / cover no-repeat; 
    position: relative;
    overflow: hidden;
  } 

  .hero-photo::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.55) 18%,
      rgba(0,0,0,0.00) 45%,
      rgba(0,0,0,0.00) 55%,
      rgba(0,0,0,0.55) 82%,
      rgba(0,0,0,0.95) 100%
    );
    pointer-events:none;
  }

  .after{
    position: static;
    max-width: none;
    padding-top: 18px;
    padding-bottom: 18px;
    margin: 0; 
  }

  .footer{
    position: static;
    width: 100%;
    margin: 0;
    padding-top: 10px;
    padding-bottom: 22px;
    background: #000;
  }

  /* ===== MOBILE CTA ===== */
  .cta-wrap{
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }

  a.cta-button,
  a.cta-button:visited{
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    background: #fff;
    color: #111;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    margin: 8px 0 0 0;
  }

  .cta-subline{
    display: inline-block;
    margin-top: 8px;
    margin-bottom: 28px;
    color: #00c8d7;
    white-space: nowrap;
  }

  .cta-subline-white{
    margin-top: 2px;
    margin-bottom: 14px;
    line-height: 1.55;
    color: #fff;
  }

}

/* ===== PORTFOLIO-SEITEN (Beratung / Training / Impulse) ===== */

body.portfolio{
  background-image:
    linear-gradient(
      to right,
      rgba(0,0,0,0.70) 0%,
      rgba(0,0,0,0.55) 35%,
      rgba(0,0,0,0.35) 70%,
      rgba(0,0,0,0.25) 100%
    ),
    url('background_legal.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Container */
.page{
  max-width: 760px;
  padding: 8vh 8vw 90px; /* unten Platz für Footer */
}

/* Dezenter Link oben */
.toplink{
  font-size: 14px;
  margin: 0 0 22px 0;
}
.toplink a{
  color: rgba(255,255,255,0.70);
  text-decoration: none;
}
.toplink a:hover{
  color:#00c8d7;
  text-decoration: underline;
}

/* H1 weiß (überschreibt globales h1 nicht, weil spezifischer) */
.page h1{
  color:#fff;
}

/* Subline */
.subline{
  font-size:16px;
  line-height:1.55;
  margin: 0 0 28px 0;
  color:rgba(255,255,255,0.85);
}

/* H2 cyan */
.page h2{
  color:#00c8d7;
  font-size:18px;
  font-weight:600;
  margin: 26px 0 12px 0;
}

/* Bullets/Text */
.page ul{
  margin: 0 0 18px 18px;
  padding: 0;
}
.page li{
  margin: 0 0 10px 0;
  line-height:1.55;
  color:rgba(255,255,255,0.88);
}

/* Customizing-Block */
.customizing{
  margin-top: 34px;
  margin-bottom: 18px;
  max-width: 760px;
  line-height: 1.65;
  color: #00c8d7;
}

.customizing p{
  color: #00c8d7;
}

/* CTA-Link */
.cta-link{
  color:#00c8d7;
  text-decoration:none;
  font-weight:600;
}
.cta-link:hover{
  text-decoration: underline;
}

/* Portfolio-Footer: links Legal, rechts Logo */
.footer-portfolio{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  font-size: 14px;
}

.footer-portfolio a{
  color: rgba(255,255,255,0.85);
  text-decoration:none;
}
.footer-portfolio a:hover{
  color:#00c8d7;
  text-decoration: underline;
}

.footer-portfolio .logo-sign{
  height: 20px; /* klein, Signatur */
  width: auto;
  opacity: 0.9;
}

/* Mobile: Footer nicht fixed, damit nichts Inhalte verdeckt */
@media (max-width: 768px){
  body.portfolio{
    background-attachment: scroll;
  }
  .page{
    padding: 6vh 8vw 24px;
  }
  .footer-portfolio{
    position: static;
    padding: 16px 8vw 22px;
    background: transparent;
    backdrop-filter: none;
  }
}