* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family:Segoe UI, sans-serif;
  text-decoration: none;
  list-style: none;
color:#111111;





}


@font-face {
  font-family:'segoe ui';
  src: url('/../fonts/Segoe UI.ttf')format('truetype'); 
}



.text-smaller {font-size: clamp(0.878rem, 0.9055rem + -0.0879vw, 0.8rem);}
.text-bigger {font-size: clamp(1rem, 0.8018rem + 0.6344vw, 1.563rem);}
.intro-text{letter-spacing:10%;color:#888888;}


h1 {font-size: clamp(1.476rem, 0.4992rem + 3.1256vw, 4.25rem)}
h2 {font-size: clamp(1.383rem, 0.7953rem + 1.8806vw, 3.052rem)}
h3 {font-size: clamp(1.296rem, 0.8928rem + 1.2901vw, 2.441rem)}
h4 {font-size: clamp(1.215rem, 0.9551rem + 0.8315vw, 1.953rem)}
h5 {font-size: clamp(1.138rem, 0.9884rem + 0.4789vw, 1.563rem)}
h6 {font-size: clamp(1.067rem, 1.0026rem + 0.2062vw, 1.25rem)}


a{color:#FF69B4;}
a:hover{color:#8739fa;}

h1, h2, h3  {font-family:'Segoe UI.ttf',sans-serif;
letter-spacing: 10%;  font-weight: 300; color:#FF69B4;
}

h2 {padding-top:1rem;}

.half-color { background-color: rgb(255 255 255 /.2); border-radius:10%;
color:#8739fa;padding-left:0.3em;  padding-right:0.3em;}



.pfeil {display: flex;
  justify-content: center;
  align-items: center;

font-size:2rem; color:#FF69B4;}
a.pfeil:link{color:#FF69B4;}
a.pfeil:hover{color:#8739fa;}




.header {
  position: sticky;
  top: 0;
  width: 100%;

  box-shadow: 0 4px 20px hsla(207, 24%, 35%, 0.1);
  background-color: #ffffff;
  z-index: 10;
}


.banner-container {
  background-image: url('/mo/assets/image/media-table.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  width: 100%;

  padding-top: 50%; /* 2.5:1 aspect ratio */


  color:white;
 z-index: -1;

}

.banner-content h1 {color:#ffffff; font-size:2rem;}

@media (max-width: 768px) {
  .banner-content h1 {
    font-size: 1.5rem;

  }

  .banner-content button {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
}


.banner-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.banner-content {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  text-align: center;
}