body {
    margin: 0;
    padding-top: 0;
    background: linear-gradient(135deg, rgba(255, 153, 0, 0.2), rgba(204, 102, 255, 0.2));
    background-size: 400% 400%;
    animation: backgroundAnimation 10s ease infinite;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    position: relative;
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 255, 255, 0.35);
    height: 50px;
    display: flex;
    justify-content: space-between; /* Elemente auf beiden Seiten verteilen */
    align-items: center; /* Vertikal zentrieren */
}


.download-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.download-button:hover {
  background-color: #0056b3;
}

.button-container {
  margin-top: 50px;
  text-align: center;
}

.footer .left-content,
.footer .right-content {
    padding: 0 10px; /* Abstand zu den Seiten hinzufügen */
}




@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.header {
    border-bottom: 1px solid #E2E8F0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
}
ul.nav-menu.active {
    background: #edd9db;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 2.5px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-item {
    margin-left: 5rem;
}

.nav-link {
    font-size: 1.6rem;
    font-weight: 400;
    color: #475569;
}

    .nav-link:hover {
        color: #482ff7;
    }

.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
}

@media only screen and (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 7rem;
        flex-direction: column;
        background-color: #fff;
        width: 100%;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    }

        .nav-menu.active {
            left: 0;
        }

    .nav-item {
        margin: 2.2rem 0;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }
}



@keyframes backgroundAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
  
 @keyframes colorAnimation {
    0% { background-color: #f8f8f8; }
    20% { background-color: #ff5f5f; }
    40% { background-color: #ffd55f; }
    60% { background-color: #5fff8c; }
    80% { background-color: #00a0e9; }
    100% { background-color: #f8f8f8; }
  }
  
 .navbar {
    height: 60px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: colorAnimation 10s linear infinite;
    animation-fill-mode: forwards;
 }
  
  
  .navbar-logo {
    width: 60px;
    height: 60px;
    margin: 0 15px;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    transition:width 0.5s, height 0.5s;
    transition:transform;
  }
  
  .navbar-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hovericon{
    width: 100%;
    height:100%;
    transition: transform 0.5s;
  }

  .navbar-logo:hover .hovericon{
    transform: scale(2.5);
  }
  
  .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  
  .navbar li {
    float: left;
  }
  
  .navbar li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 15px 20px;
    text-decoration: none;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    transition: background-color 0.3s, font-size 0.3s;
  }
  
  .navbar li a:hover {
    background-color: #00a0e9;
    color: #fff;
    transform: scale(1.1);
  }
  .container {
    text-align: center;
    max-width: 600px;
    padding: 100px;
    background-color: transparent;
  }
  
  h1 {
    font-size: 28px;
    margin-bottom: 10px;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  
  p {
    font-size: 18px;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  
.produktbeschreibung{
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}


  
  .container-producte {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    z-index: 1;
  }
  
  .product-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .product {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    border-radius: 10px; /* Hinzugefügt */
   
  }
  
  .product:hover {
    transform: scale(1.1);
  }
  
  .product:hover .product-details {
    font-size: 1.1em;
  }
  
  .product-details {
    flex: 1;
    transition: font-size 0.3s ease;
  }
  
  .page-title {
    font-size: 24px;
    margin-bottom: 20px;
    padding-top: 80px;
  }

  .product-imagedetail{
    width: 90px;
    margin: 10px;
    border-radius: 10px;
  }
  
  .LinkBox a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    animation: shake 0.8s infinite alternate; /* Animation anwenden */
}

@keyframes shake {
    0% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(5px);
    }
}




  .container-aboutme {
    display: flex;
    padding: 20px;
    position: relative;
  }
  
  .about-me {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px;
    padding: 20px;
    width: fit-content;
    animation: wobble 2s infinite;
    margin-right: 20px; /* Anpassung */
    margin-top: auto;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    border: 5px solid;
    animation: neon-animation 2s linear infinite;
  }


  @keyframes neon-animation{
    0% {
      border-color: #ff00ff;
      box-shadow: 0 0 5px #ff00ff;
    }
    50% {
      border-color: #00ffff;
      box-shadow: 0 0 10px #00ffff;
    }
    100% {
      border-color: #ff00ff;
      box-shadow: 0 0 5px #ff00ff;
    }
  }
  
  
  .about-me-content {
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }




  @keyframes wobble {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .imageOsssi-container {
    display: inline-block; /* Erlaubt Text neben dem Bild */
    border-radius: 10px; /* Runde Ecken */
    overflow: hidden; /* Verhindert Überlauf */
    transition: transform 0.3s; /* Fügt Transitions hinzu */
    position: relative; /* Positionierung für Z-Index */
   
  }
  
  .imageOsssi-container:hover {
    transform: scale(1.1); /* Vergrößert das Bild beim Überfahren */
  }
  
  .imageOsssi-container img {
    display: block; /* Entfernt Lücken unter dem Bild */
    width: 200px; /* Breite des Bildes */
    height: auto; /* Automatische Höhe */
  }


  /* Platzierung der Animation */
.postcar-animation {
  position: absolute;
  top: 50%; /* Anpassen je nach gewünschter Position */
  left: -100px; /* Startposition außerhalb des Bildschirms */
  width: 300px; /* Breite des Postautos */
  height: 250px; /* Höhe des Postautos */
  background-image: url('https://cdn-icons-png.flaticon.com/512/6551/6551438.png');
  background-size: cover;
  animation: drive 25s linear infinite; /* Animation für das Fahren */
  z-index: -1;
  
}


/* CSS-Animation für das Fahren */
@keyframes drive {
  0% { transform: translateX(-65%); } /* Startposition */
  30%{opacity: 1;}
  31% { transform:calc(15%); opacity: 0;} /*opacity fuer verstecken das Fahrzeug und prozente fuer den Punkt*/
  75% {transform: calc(65%); opacity: 0;}
  80%{opacity: 1;}
  100% { transform: translateX(calc(100vw - 100px)); 
  opacity: 1;} /* Endposition (rechts außerhalb des Bildschirms) */
}


.boxpp {/* box fuer Text auf seite ueber mich */
  background-color: #f0f0f0; /* Hintergrundfarbe der Box */
  border: 2px solid #ccc; /* Rand der Box */
  border-radius: 10px; /* Abrundung der Ecken */
  padding: 20px; /* Innenabstand der Box */
  max-width: 600px; /* Maximale Breite der Box */
  float: left; /* Box links ausrichten */
}

.boxpp h1 {
  font-size: 24px; /* Größe der Überschrift */
  margin-bottom: 20px; /* Abstand unter der Überschrift */
}

.boxpp p {
  font-size: 16px; /* Größe des Textes */
  line-height: 1.6; /* Zeilenhöhe des Textes */
}

.video-container {
  width: 10%; /* Breite des Videobereichs (25% - 2x Außenabstand der Box) */
  margin-left: 20px; /* Außenabstand des Videobereichs */
  float: right; /* Videobereich rechts ausrichten */
}

video {
  width: 100%; /* Video nimmt die gesamte Breite des Containers ein */
  max-width: 100%; /* Video wird nicht breiter als sein Elternelement */
  border: 2px solid #ccc; /* Rand um das Video */
  border-radius: 10px; /* Abrundung der Ecken */
  opacity: 1; /* Setze die Anfangsopazität auf 1 */
  transition: opacity 1s ease; /* Füge eine Transitionsanimation hinzu */
}

.video-hidden {
  opacity: 0; /* Setze die Opazität auf 0, um das Video zu verbergen */
}


.animated-number{
  display: inline-block; /* Damit die Animation wirken kann */
  position: relative;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% { font-size: 24px; }
  100% { font-size: 40px; }
}

.benefits-box {
  background-color: #f9f9f9;
  border: 3px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
}

/* Stile für die Benefits-Überschrift */
.benefits-box h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

/* Stile für die einzelnen Vorteile */
.benefits-box .benefit {
  margin-bottom: 20px;
}

.benefits-box .benefit h3 {
  font-size: 18px;
  color: #535353;
}

.benefits-box .benefit p {
  font-size: 16px;
  color: #757474;
}


.underlined {
  /*   background: red; */
    position: relative;
  }

  .underline-clip:after {
    content: '';
    position: absolute;
    top: 95%;
    width: 150%;
    aspect-ratio: 3 / 1;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 50%;
    border: 6px solid hsl(130 80% 50%);
    /* Use a clip-path to hide and show the bits you want */
    clip-path: polygon(0 0, 50% 50%, 100% 0);
  }

  .HIER{  /* Hier fuer Uber mich */
    color: inherit;
    text-decoration: none;
  }

  .HIER{ /* Hier fuer Uber mich */
    background:
      linear-gradient(
        to right,
        rgba(100, 200, 200, 1),
        rgba(100, 200, 200, 1)
      ),
      linear-gradient(
        to right,
        rgba(255, 0, 0, 1),
        rgba(255, 0, 180, 1),
        rgba(0, 100, 200, 1)
    );
    background-size: 100% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
  }
  /* Hier fuer Uber mich */
  .HIER:hover {
    background-size: 0 3px, 100% 3px;
  }
  /* Hier fuer Uber mich */

  /* Stile für den Sale-Text */
.sale-text {
    position: absolute;
    background-color: red;
    color: white;
    padding: 5px 10px;
    margin-right: 10px;
    font-size: 26px;
    animation: transform 3s linear infinite;
    z-index: 1;
}


/* Stile für den durchgestrichenen Preis */
.old-price {
   
    font-size: 18px;
    position: relative;
    margin-left: 30px;
     /* Hier wird der durchgestrichene Preis um 10 Pixel nach oben verschoben */
    opacity: 1; /* Standardmäßig sichtbar */

}

.old-price::after {
  content: ""; /* Fügt ein Pseudo-Element hinzu */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: absolute;
  top: 48%; /* Positioniert das Pseudo-Element etwas höher als zuvor */
  left: 0; /* Beginnt die Linie am linken Rand des Texts */
  width: 100%; /* Breite der Linie */
  border-bottom: 1px solid rgba(0, 0, 0, 0.5); /* Stil der Linie (Schwarz mit 20% Transparenz) */
}


/* Animation für den Sale-Text */
@keyframes sale-animation {
    0% { transform: translateX(0); animation-timing-function: ease-out; }
    45% {opacity: 1;}
    55% { transform: translateX(124px); animation-timing-function: ease-in;}
    80% { transform: translateX(127px); }
    85% { opacity: 1; }
    100% { transform: translateX(0); }
}


.sale-text {
    animation: sale-animation 10s infinite;
}


.new-price{
  opacity:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: rgba(4, 185, 4, 0.8);
  font-weight: bold;
  font-size: 20px;
  position: relative;
  animation: sale-animation 10s linear infinite; /* Anpassung der Animation */
}


/* Anpassung von kein Abo, keine versteckten kosten */
.deconstructed {
  position: relative;
  margin: auto;
  height:30px;
  color: transparent;
  font-family: 'Cambay', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 30px;
}

.deconstructed > div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #6467ff;
  pointer-events: none;
}

.deconstructed > div:nth-child(1) {
  -webkit-mask-image: linear-gradient(black 25%, transparent 25%);
  mask-image: linear-gradient(black 25%, transparent 25%);
  animation: deconstructed1 15s infinite;
}

.deconstructed > div:nth-child(2) {
  -webkit-mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  mask-image: linear-gradient(transparent 25%, black 25%, black 50%, transparent 50%);
  animation: deconstructed2 15s infinite;
}

.deconstructed > div:nth-child(3) {
   -webkit-mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  mask-image: linear-gradient(transparent 50%, black 50%, black 75%, transparent 75%);
  animation: deconstructed3 15s infinite;
}

.deconstructed > div:nth-child(4) {
   -webkit-mask-image: linear-gradient(transparent 75%, black 75%);
  mask-image: linear-gradient(transparent 75%, black 75%);
  animation: deconstructed4 15s infinite;
}

@keyframes deconstructed1 {
  0% {
    transform: translateX(100%);
  }
  26% {
    transform: translateX(0%);
  }
  83% {
    transform: translateX(-0.1%);
  }
  100% {
    transform: translateX(-235%);
  }
}

@keyframes deconstructed2 {
  0% {
    transform: translateX(100%);
  }
  24% {
    transform: translateX(0.5%);
  }
  82% {
    transform: translateX(-0.2%);
  }
  100% {
    transform: translateX(-240%);
  }
}

@keyframes deconstructed3 {
  0% {
    transform: translateX(100%);
  }
  22% {
    transform: translateX(0%);
  }
  81% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-245%);
  }
}

@keyframes deconstructed4 {
  0% {
    transform: translateX(100%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-250%);
  }
}

/* Ende vn:Anpassung von kein Abo, keine versteckten kosten */

.image-tiktokhome {
  transform: rotate(-5deg); /* Neigen des Bildes um 5 Grad nach links */
  position:absolute;
  bottom: -350px;
  left: 25% ;
  transform: translateX(-50%) rotate(-10deg);
  z-index: -1;
  transition: bottom 0.5s;
  margin-top: 300px;
}

.image {
  width: 250px; /* Breite des Bildes anpassen */
  height: auto; /* Automatische Anpassung der Höhe */
}


.logossm {
  position:absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: -150px;
  right: 30%;
}

.iconwapper2 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.iconwapper2 img {
  width: 50px; /* Anpassen je nach Größe der Icons */
  height: 50px; /* Anpassen je nach Größe der Icons */
  margin-right: 10px;
}

.sale-price {
  display: flex;
  justify-content: space-between; /* Zwischen den Elementen Platz lassen */
  align-items: center; /* Vertikal zentrieren */
}

.ReiseTT{
  font-size: 185%;
}


/*Kontaktformular*/


@media (max-width: 768px) {

/*Home*/

body {
  background-color: #f9f9f9;
  padding-top: 0;
  background-size: 100%;
  overflow-x: hidden; 
  overflow-y: auto; 
  min-height: 100vh;
  
}

.navbar {
    height: 75px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: index 999; ;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    animation: colorAnimation 10s linear infinite;
    animation-fill-mode: forwards;
 }

 .navbar-logo {
  width: 60px;
  height: 60px;
  float: left;
  border-radius: 50%;
  overflow: hidden;
  transition:width 0.5s, height 0.5s;
  transition:transform;
  margin-left: -3%;
}

.navbar li a {
  display: block;
  color: #333;
  text-align: center;
  padding: 1px 1px;
  text-decoration: none;
  font-weight: bold;
  font-family: "Helvetica Neue", Arial, sans-serif;
  transition: background-color 0.3s, font-size 0.3s;
}
.container {
  text-align: center;
  max-width: auto;
  padding: auto;
  background-color: transparent;
}

h1 {
  font-size: 28px;
  margin-bottom: 1px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/*Produktseite*/

.container-producte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  z-index: 1;
}

.product-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  align-items: center;

}

.product {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
  border-radius: 10px;
  
}
.produktbeschreibung{
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
}

.postcar-animation{
  display: none;
}
.product-details {
  flex: 1;
  transition: font-size 0.3s ease;
}

.page-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.product-imagedetail{
  width: 90px;
  margin: 10px;
  border-radius: 10px;
}

.LinkBox a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  animation: shake 0.8s infinite alternate; /* Animation anwenden */
}




.benefits-box {
  margin-top: -25%; /* Beispielwert für den oberen Abstand */
}

.ReiseTT{
  margin-top: 10%;
  margin-bottom: 0%;
  font-size: 200%;
}

.desktop-br {
  display: none; /* Verstecken des <br> tags auf mobilen Geräten */
}

.deconstructed {
  font-size: 16px; /* Neue Schriftgröße für Mobile */
}

.image-tiktokhome{
  text-align: center;
  transform:none;
  position: none;
  bottom: none;
  left :none;
  transition: none;
  align-items: center;
}

.image{
  align-items:center ;
  width: 250px;
  height: auto;
  margin
}

.image-tiktokhome {
  position: relative; /* Position relativ setzen */
  transform: none; /* Alle vorherigen Transformationen aufheben */
  bottom: auto; /* Alle vorherigen bottom-Eigenschaften aufheben */
  left: auto; /* Alle vorherigen left-Eigenschaften aufheben */
  right: auto; /* Alle vorherigen right-Eigenschaften aufheben */
  top: auto; /* Alle vorherigen top-Eigenschaften aufheben */
  margin-top: 20px; /* Abstand nach oben hinzufügen */
  text-align: center; /* Textausrichtung zentrieren */
  border-radius: 15px; /* Abgerundete Ecken hinzufügen */
  overflow: hidden; /* Überlauf verstecken, um sicherzustellen, dass die abgerundeten Ecken sichtbar sind */
}

.image {
  width: 250px; /* Breite des Bildes anpassen */
  height: auto; /* Automatische Anpassung der Höhe */
  border-radius: 15px; /* Abgerundete Ecken für das Bild hinzufügen */
}

#footer {
  background-color: #f2f2f2; /* Hintergrundfarbe für den Footer */
  padding: 6%; /* Innenabstand für den Footer */
  text-align: center; /* Zentriere den Text */
  position: absolute; /* Positionierung des Footers */
  bottom: -10%; /* Am unteren Rand der Seite positionieren */
  width: 100%; /* Vollständige Breite einnehmen */
  z-index: 999; /* Z-Index festlegen, um den Footer über anderen Inhalten zu platzieren */
}


.footer {
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: rgba(0, 255, 255, 0.35);
  width: 100%;
  height: 50px;
}


.footer .left-content{
  font-size: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.footer .right-content{
  font-size: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}


.container-producte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  z-index: 1;
  margin-top: 20px;
}


.download-button {
  width: calc(100% - 40px); /* Vollständige Breite des Bildschirms abzüglich des Margin */
  
}



@keyframes deconstructed1 {
  0% {
    transform: translateX(-100%);
  }
  26% {
    transform: translateX(0%);
  }
  83% {
    transform: translateX(-0.1%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes deconstructed2 {
  0% {
    transform: translateX(-100%);
  }
  24% {
    transform: translateX(0.5%);
  }
  82% {
    transform: translateX(-0.2%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes deconstructed3 {
  0% {
    transform: translateX(-100%);
  }
  22% {
    transform: translateX(0%);
  }
  81% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes deconstructed4 {
  0% {
    transform: translateX(-100%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}


}


@media (max-width:460px) {
    .container h1 {
        padding-bottom: 10px;
    }
    .container p {
        padding-bottom: 10px;
    }
    .page-title {
        padding-top:60px;
    }
    .about-me {
        margin-right:0px;
    }
    .product-wrapper {
        width: 85%;
    }
    .product {
        display: block;
        width: 100%;
    }
    .LinkBox {
        margin-top: 15px;
    }
    .product-details h2 {
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .boxpp {
        margin-top: 60px;
        margin-left: 20px;
    }

    body#struct {
        display: block;
    }
    .video-container {
        width: 100%;
        padding: 15px 15px 15px 20px;
    }
    .boxpp {
        margin-right: 15px;
        margin-top: 35%;
    }


    .image-tiktokhome {
        position: relative;
        bottom: 0;
        transform: translateX(-15%) rotate(0deg);
        left: 30%;
    }
    .logossm {
        position: relative;
        bottom: 0;
        right: 0%;
        top: 20px;
    }
    section.cta h2 {
        text-align: center;
    }
    .deconstructed {
        text-align: center;
        margin-bottom: 15px;
    }

    .about-me-content p {
      font-size: 17px; /* Schriftgröße des Textes anpassen */
    }

    .about-me-content .desktop-only {
      display: none; /* Standardmäßig für alle Bildschirmgrößen verstecken */
  }

  .boxpp p{
    font-size: 14px; /* Schriftgröße des Textes anpassen */
  }
  
  .headline {
    display: inline-block; /* Standardmäßig als Inline-Block anzeigen */
    
}

.benefits-box{
  margin: 3%;
}

  .number-container{
    width: 100px; /* Breite des Containers anpassen */
    height: 40px; /* Höhe des Containers anpassen */
    border: px solid black; /* Optional: Rahmen um den Container hinzufügen */
    overflow: hidden; /* Verhindert das Verschieben des Inhalts über den Rahmen hinaus */
    margin-left: 23%;
  
    }

 
  form {
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center; /* Vertikal zentrieren */
    flex-direction: column; /* Elemente vertikal anordnen */
}


/* Optional: Stile für den neuen Preis */
.new-price {
  margin-bottom: 5px; /* Abstand zwischen den Preisen */
  font-size: 210%;
  align-items: center;
}




/* Optional: Stile für den alten Preis */
.old-price {
  margin-left: 2%;
}

.prices{
  position:flex;
  display: block;
  flex-direction: column;

}

.sale-text{
  font-size: 310%;
  overflow-x: hidden;
 
}

@keyframes sale-animation {
  0% { transform: translateX(37%); animation-timing-function: ease-out; }
  45% {opacity: 1;}
  55% { transform: translateX(180px); animation-timing-function: ease-in;}
  80% { transform: translateX(45%); }
  85% { opacity: 1; }
  100% { transform: translateX(45%); }

}
.benefits-box {
  margin-top: -20%; /* Beispielwert für den oberen Abstand */
}

.ReiseTT{
  margin-top: 10%;
  margin-bottom: 0%;
  font-size: 200%;
}

.desktop-br {
  display: none; /* Verstecken des <br> tags auf mobilen Geräten */
}

.deconstructed {
  font-size: 16px; /* Neue Schriftgröße für Mobile */
  overflow-x: hidden;
}

.image-tiktokhome{
  text-align: center;
  transform:none;
  position: none;
  bottom: none;
  left :none;
  transition: none;
  align-items: center;
}

.image{
  align-items:center ;
  width: 250px;
  height: auto;
  margin
}

.image-tiktokhome {
  position: relative; /* Position relativ setzen */
  transform: none; /* Alle vorherigen Transformationen aufheben */
  bottom: auto; /* Alle vorherigen bottom-Eigenschaften aufheben */
  left: auto; /* Alle vorherigen left-Eigenschaften aufheben */
  right: auto; /* Alle vorherigen right-Eigenschaften aufheben */
  top: auto; /* Alle vorherigen top-Eigenschaften aufheben */
  margin-top: 20px; /* Abstand nach oben hinzufügen */
  text-align: center; /* Textausrichtung zentrieren */
  border-radius: 15px; /* Abgerundete Ecken hinzufügen */
  overflow: hidden; /* Überlauf verstecken, um sicherzustellen, dass die abgerundeten Ecken sichtbar sind */
}

.image {
  width: 250px; /* Breite des Bildes anpassen */
  height: auto; /* Automatische Anpassung der Höhe */
  border-radius: 15px; /* Abgerundete Ecken für das Bild hinzufügen */
}

#footer {
  background-color: #f2f2f2; /* Hintergrundfarbe für den Footer */
  padding: 6%; /* Innenabstand für den Footer */
  text-align: center; /* Zentriere den Text */
  position: absolute; /* Positionierung des Footers */
  bottom: -10%; /* Am unteren Rand der Seite positionieren */
  width: 100%; /* Vollständige Breite einnehmen */
  z-index: 999; /* Z-Index festlegen, um den Footer über anderen Inhalten zu platzieren */
}


.footer {
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-color: rgba(0, 255, 255, 0.35);
  width: 100%;
  height: 50px;
}


.footer .left-content{
  font-size: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.footer .right-content{
  font-size: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
}


.container-producte {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  z-index: 1;
  margin-top: 20px;
}


.download-button {
  width: calc(100% - 40px); /* Vollständige Breite des Bildschirms abzüglich des Margin */
  
}

.number-container{
  justify-content: center;
  align-items: center;
}

.animated-number{
  justify-content: center;
  align-items: center;

}

@media only screen and (max-width: 428px) and (min-height: 844px) {
  .number-container {
    margin: 0 auto; /* Zentrieren der Zahl */
    text-align: center; /* Zentrieren des Texts innerhalb des Containers */
    display: block; /* Ändern Sie das Display auf block, um die Margin: 0 auto; zu verwenden */
  }
}

}