@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web';
    src: url('TitilliumWeb-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

 
  body {
    font-family: "Titillium Web", sans-serif;
    background-color: #000;
    color: #fff;
    line-height: 1.7;
    margin: 0;
    font-size: 1.2rem;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {font-weight: 700; color: #fff;}
  h2 {font-size: 2.4rem; margin-bottom: 25px;}
  h3 {font-size: 2.4rem; margin-bottom: 10px;}
  h4 {color: #ccc; font-weight: 600; font-size: 1.75rem; margin-bottom: 40px;}

  a {
    color: #fff;
    text-decoration: underline;
    transition: 0.3s;
  }

  section {padding: 80px 20px;}

  footer {
    background: #000;
    color: #fff;
    padding: 40px 0;
    text-align: center;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
  }

  .hero {
    position: relative;
    color: #fff;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(to right, rgba(0,0,0,1) 25%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0) 100%), url('bg.jpg') center center / cover no-repeat;
    background-attachment: fixed;
    overflow: hidden;
  }

  .hero .container {max-width: 1200px; margin-left: 6%;}
  .hero h1 {font-size: 2.8rem; margin-bottom: 20px;}
  .hero p {color: #ccc; font-weight: 600; margin-bottom: 30px;}
  .hero a {color: #fff;}

  .hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    z-index: 1;
  }

  .highlight {
    border-left: 5px solid #555;
    padding: 20px;
    margin-top: 30px;
    border-radius: 4px;
    font-weight: 500;
  }

  .service p {color: #fff; font-size: 1.2rem;}

  .parallax-container {
    position: relative;
    overflow: hidden;
  }

  .parallax-container img {
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(0);
    transition: transform 0.2s linear;
    filter: brightness(0.9);
  }

  .parallax-container::before,
  .parallax-container::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 160px;
    z-index: 1;
  }

  .parallax-container::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  }

  .parallax-container::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  }

  .hero.parallax-container::before {display: none;}
  .hero.parallax-container::after {
    background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	height: 100vh;
  }


@media (max-width: 991px) {
  .hero .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    text-align: center;
    padding: 0 20px;
  }

  .hero-text {
    width: 100%;
    text-align: center;
  }
}


/* Mobile Hochformat */
@media (max-width: 991px) and (orientation: portrait) {
  .hero {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%),
                url('bg_hoch.jpg') center top / cover no-repeat;
    background-attachment: scroll;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* Text nach unten schieben */
    padding: 0 20px 12vh;         /* Abstand zum unteren Rand */
    text-align: center;
  }

  .hero-text {
    z-index: 2;
    margin-top: auto;
  }

  .hero h1 {font-size: 1.9rem;}
  .hero p {font-size: 1.1rem;}
  .hero h2 {font-size: 1.8rem;}
}


@media (max-width: 991px) and (orientation: landscape) {
  .hero {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 90%),
                url('bg_quer_centered.jpg') center top / cover no-repeat;
    background-attachment: scroll;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 20px 10vh;
    text-align: center;
  }

  .hero-text {
    margin-top: auto;
  }

  .hero h1 {font-size: 1.6rem;}
  .hero p {font-size: 1rem;}
}