/* ===== 1. FONT IMPORT ===== */
@font-face {
  font-family: 'Akira Expanded';
  src: url('Fonts/akira_super_bold-webfont.woff2') format('woff2'),
       url('Fonts/akira_super_bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ===== 2. GLOBAL STYLES ===== */
html, body {
  max-width: 100vw;
  min-height: 1000px; /* Mindesthöhe */
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: #FFFFFF;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 87%, #DEDEDE 100%);
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #FFFFFF 87%, #DEDEDE 100%);
  background: linear-gradient(to bottom, #FFFFFF 0%, #FFFFFF 87%, #DEDEDE 100%);

  font-family: "Arial", sans-serif;
  font-size: 5vw;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; /* oder contain */
  background-attachment: fixed;
  transition: none;
  padding: 0;
  /* border: 20px solid black; */
}

.no_select {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* alte IE/Edge */
}

/* ===== 3. TYPOGRAPHY & LAYOUT ===== */
.HomeLink {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.HomeLink:hover {
  color: rgb(220, 220, 220);
  transition: color 0.2s ease-in-out;
}


/*CONTAINER*/
.FlexContainerCtCt{
  display: flex;
}

.containerHeaderAll {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100vw;
  max-height: 200px;
  flex-direction: column;
  gap: 0em;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0 0.2em;
}

.containerHeader {
  display: block;
  margin-top: -0.2em;
  margin-bottom: -0.2em;
}

.containerFooter {
  min-height: 10vh;
  max-width: 80vw;
 background-color: inherit;
 display: flex;
 justify-content: flex-start;
 align-items: flex-end;
 gap: 0.2rem;
 padding: 0 0.2em;
}

header, footer {
  font-size: 4.45vw;
  font-family: "Akira Expanded", sans-serif;
  font-weight: 400;
  font-style: normal;
  word-spacing: 0.5vw;
  color: rgb(200, 200, 200);
}

h1 {
  font-weight: bold;
  letter-spacing: -0.06em;
  font-size: 1.5em;
  line-height: 0.95em;
}

p {
  font-family: "Arial", sans-serif;
  font-weight: bold;
  text-align: left;
  line-height: 0.98em;
  letter-spacing: -0.2vw;
  hyphens: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: rgb(220, 220, 220);
}

table {
  text-align: left;
  font-size: 0.8em;
  border-spacing: 2em;
}

td {
  vertical-align: top;
}

.intro {
  z-index: 1;
  margin-top: 40vh;
  margin-bottom: 60px;
  position: static;
  margin-left: 0;
  margin-right: 20px;
  padding-left: 0.2em;
}

/* ===== 4. POPUP ===== */
    .popup {
      z-index: 1000;
      position: fixed;
      top: 0px;
      width: 100vw;
      height: 100vh;
      display: none;
      overflow-y: scroll;
    }

        .popup p {
          color: rgb(0, 0, 0);
        }

    .announcementText {
      padding-left: 0.2em;
      padding-right: 0.2em;
    }

        .announcementText p {
          position: relative;
          overflow-y: auto;
          color: rgb(50, 50, 50);
          overflow: visible;
        }



    .pricetag p {
      text-align: right;
      bottom: 0vh;
      margin-right: 5px;
    }

/* ===== 5. ELEMENTS ===== */
   .closebtn {
    z-index: 1000;
    cursor: pointer;
  }

    .closebtn p{
      text-align: right;
      margin-right: 0.2em;
      transition: all 0.1s ease-in-out 0.1s;
    }

    .closebtn p:hover, .buybtn p:hover{
      color: rgb(100, 100, 100);
      transition: all 0.2s ease;
    }

    .closebtn p:active{
      color: white;
    }





  .buybtn {
    /*achtung auf media queries*/
    width: 100vw;
    display: block;
    position: fixed;
    bottom: 0;
    cursor: pointer;
    }

    

      /*
      .buybtn img {
        z-index: 1000;
        max-height: 30vh;
        max-width: 50vw;
        display: block;
        padding-right: 0.2em;
        
        cursor: pointer;
        margin-left: auto;
        margin-top: 1em;
        margin-bottom: 1em;
      }
      */
        .buybtn p{
          text-align: right;
          margin-right: 0.2em;
          margin-bottom: 0.1em;
          transition: all 0.1s ease-in-out 0.1s;
        }

        .buybtn p a{
          text-decoration: none;
          color: inherit;
        }

        /*.buybtn p:hover{
          color: rgb(0, 255, 0);
        }
        /*

        .buybtn p:active{
          color: white;
        }
    


      /*
      .buybtn1 {
          display: block;
          cursor: pointer;
          width: 25%;
          margin-left: 75vw; 
          height: 2em;
          border-radius: none;
          border: 0.1em solid black;
          font-size: 1em;
          color: black;
          text-align: center;
          background-color: white;
      }
      

          .buybtn1:hover {
            background-color: rgb(220, 220, 220);
            transition: all 0.1s;      
          }

          .buybtn1:active {
            background-color: black;
          }

      */

    


.paypal-button-container {
  width: 50vw;
  max-height: 10vh;
  margin: 0 auto;
  position: fixed;
}

.paypal-button-container form {
  width: 100%;
}

.paypal-button-container input[type="image"] {
  width: 100%;
  height: auto;
}

/* ===== 6. DISPLAYS ===== */
.slideshow {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  scrollbar-width: none;
  gap: 20px;
}

.slideshow img {
  display: block;
  max-width: 100vw;
  max-height: 40vh;
}


/* ===== 7. IMPRINT LINK ===== */
.imprint {
  display: flex;
  min-height: 100%;
  min-width: 100%;
  align-items: flex-end;
  justify-content: flex-end;
}

.imprint a {
  display: block;
  color: rgb(220, 220, 220);
  font-size: 2vw;
  text-align: right;
  cursor: pointer;
}

/* ===== 8. HEADLINE VISIBILITY ===== */
.headline.desktop {
  display: block;
}

.headline.mobile {
  display: none;
}

/* ===== 9. RESPONSIVE BREAKPOINTS ===== */
@media screen and (min-width: 1800px) {
}

@media screen and (max-width: 1800px) {
  header {
    font-size: 4.4vw;
  }

  p {
    font-size: 7vw;
    letter-spacing: -0.45vw;
  }
}

@media screen and (max-width: 1000px) {
  .headline.desktop {
    display: none;
  }

  .headline.mobile {
    display: block;
  }

  header {
    font-size: 5.8vw;
    word-spacing: 2vw;
  }

  p {
    font-size: 8vw;
    letter-spacing: -0.45vw;
  }

  .containerHeader {
  margin-top: -0.3em;
  margin-bottom: -0.3em;
  }

.buybtn1 {
  font-size: 1.5em;
  width: 40%;
  margin-left: 60%;
}

}




@media screen and (max-width: 700px) {
  .headline.desktop {
    display: none;
  }

  .headline.mobile {
    display: block;
  }

  header {
    font-size: 5.8vw;
  }

  p {
    font-size: 9vw;
    letter-spacing: -0.5vw;
  }

   .containerHeader {
  margin-top: -0.3em;
  margin-bottom: -0.3em;
  }
}