html, body  {
      width: 100%;
      margin: 0px;
      height: 100%;
    }



.hero{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    
}

.bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
}

.bg-back{
    background: url("../img/fluctoplasma_hintergrund_blau_quer.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

.bg-front{
    background: url("../img/fluctoplasma_hintergrund_rot_quer.jpg") no-repeat;
    background-size: cover;
    background-position: center;

    -webkit-mask-image: radial-gradient(
    circle 300px at var(--x) var(--y),
    transparent 0,
    transparent 45%,
    rgba(0,0,0,.2) 65%,
    black 100%
);

mask-image: radial-gradient(
    circle 300px at var(--x) var(--y),
    transparent 0,
    transparent 45%,
    rgba(0,0,0,.2) 65%,
    black 100%
);

}

.content{
    position:relative;
    z-index:10;
}

.footer {
  padding: 1rem;
  background-color: rgb(228 228 231);
}

.footer h3 {
  font-family: 'Swissnow Book';
  font-size: 24px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ffffff;
}

.partner {
  display: flex;
  align-items: center;
  gap: 30px;
  width: 70%;
}

.partner img {
  max-width: 200px;
  max-height: 200px;
}

.archiv {
  display: flex;
  justify-content: space-between;
}

.archiv a {
  text-decoration: none;
  color: #000000;
  font-family: 'Swissnow Book';
}

@font-face {
  font-family: 'Swissnow Book';
  src: url("../fonts/SwissNow-Book.woff2") format('woff2');
}

@font-face {
  font-family: 'Swissnow Thin';
  src: url("../fonts/SwissNow-Thin.woff2") format('woff2');
}

h1, .button a {
  font-family: 'Swissnow Book';
}

h2, h3, p {
  font-family: 'Swissnow Thin';
}

@keyframes floatYClaim {
  0%   { transform: translateX(-50%) translateY(0); }
  50%  { transform: translateX(-50%) translateY(-15px); }
  100% { transform: translateX(-50%) translateY(0); }
}

.claim {
  animation: floatYClaim 8s ease-in-out infinite;
}

@keyframes floatYOpener {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

.opener {
  animation: floatYOpener 6s ease-in-out infinite;
}

@keyframes floatYHeadline {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-15px); }
  100% { transform: translateY(0); }
}

.headline {
  animation: floatYOpener 6s ease-in-out infinite;
}


.content {
      margin: 0;
      min-height: 100vh;
      color: white;
      font-size: 2rem;
    }

.claim {
  text-align: center;
    max-width: 450px;
    transform: translateX(-50%);
    left: 50%;
    position: relative;
    top: 200px;
}

.claim h3 {
  margin: 0px;
    padding: 80px;
    font-size: 50px;
}

.headline {
  position: relative;
    left: 10vw;
    top: 0px;
}

.button {
  position: relative;
    left: 70%;
    width: 350px;
    top: -200px;
}

.button a {
  display: inline-block;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 40px;
  transform: scale(0.8);
  animation: pulse 3s ease-in-out infinite;
  padding: 80px;
  border: 2px solid #ffffff;
  border-radius: 200px;
}

a {
  color: #ffffff;
  text-decoration-color: #E84F1E;
}

@keyframes pulse {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1); }
  100% { transform: scale(0.8); }    
}

.headline h1 {
  font-size: 100px;
  line-height: 75px;
  color:  #ffffff;
  letter-spacing: -10px;
}

.headline h3 {
  color:  #ffffff;
  margin-left: 40px;
  margin-top: 0px;
  font-size: 45px;
}

.headline h1 span {
  display: inline-block;
  transition: transform .2s;
}

.headline h1 span:nth-child(1) { transform: translateY( 15px); }
.headline h1 span:nth-child(2) { transform: translateY( -1px); }
.headline h1 span:nth-child(3) { transform: translateY(-8px); }
.headline h1 span:nth-child(4) { transform: translateY( -15px); }
.headline h1 span:nth-child(5) { transform: translateY(-5px); }
.headline h1 span:nth-child(6) { transform: translateY( 0px); }
.headline h1 span:nth-child(7) { transform: translateY( 0px); margin-left: 40px; }
.headline h1 span:nth-child(8) { transform: translateY( 8px); }
.headline h1 span:nth-child(9) { transform: translateY( 0px); }
.headline h1 span:nth-child(10) { transform: translateY( 5px); }
.headline h1 span:nth-child(11) { transform: translateY( -2px); }
.headline h1 span:nth-child(12) { transform: translateY( 1px); }

.programm {
  text-align: center;
  position: relative;
  bottom: 100px;
  color: #FFFFFF;
  background-color: rgba(11, 34, 45, 0.3);
  padding: 8px;
  font-size: 24px;
}

.programm p {
  margin: 0px;
}

@media only screen and (max-width: 499px) {

   .content {
    background: url("../img/2025_fluctoplasma_hintergrund_web-mobil.svg") no-repeat;
    background-size: cover;
    min-height: 100vh;
  }
  
  .opener {
    position: relative;
    padding-right: 0px;
  }

  .claim {
    top: -200px;
  }

  .headline {
    top: -250px;
  }

  .button {
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
  }

  .programm {
    top: -150px;
  }
  
}

@media only screen (min-width: 500px) and (max-width: 1024px) {


  .content {
    background: url("../img/2025_fluctoplasma_hintergrund_web-mobil.svg") no-repeat;
    background-size: cover;
  }

  .opener {
    background-position: -50px -20px;

  }

  .opener h2 {
    font-size: 40px;
  }

  .programm {
    position: absolute;
    button: 20px;
  }

  .button {
    left: 60%;
    top: 100px;
  }

  .headline {
    left: 22vw;
    top: 200px;
  }

  .cliam {
    top: 250px;
  }

}