/* -----------------------------------
   RESET + BODY
----------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  background: #203d41;
  font-family: sans-serif;
  overflow-x: hidden;
}

/* -----------------------------------
   HERO / BACKGROUND
----------------------------------- */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero__bg {
  display: block;
  width: 100%;
  height: auto;
}

/* -----------------------------------
   PARACHUTE APE
----------------------------------- */
.hero__parachute {
  position: absolute;
  left: -0.99%;     /* –25px / 2538px */
  top: -0.68%;      /* –48px / 7027px */
  width: 41.90%;    /* 1063px / 2538px */
  height: auto;
  pointer-events: none;
}

/* -----------------------------------
   MONEY APE
----------------------------------- */
.hero__moneyape {
  position: absolute;
  left: 0%;
  top: 81.25%;
  width: 97.26%;
  height: auto;
  pointer-events: none;
}

/* -----------------------------------
   LOGO (Fade-In)
----------------------------------- */
.hero__logo {
  position: absolute;
  width: 32.60%;       /* 827px / 2538px */
  max-width: 827px;
  top: 6.28%;          /* 441px / 7027px */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  animation: fadeInExp 2s cubic-bezier(0.42,0,1,1) 0.7s forwards;
  pointer-events: none;
}

/* -----------------------------------
   INFO-RECTANGLE
----------------------------------- */
.hero__info {
  position: absolute;
  left: 28.57%;
  top: 22.67%;
  width: 42.40%;
  pointer-events: none;
}
.hero__info-bg {
  display: block;
  width: 100%;
  height: auto;
}

/* -----------------------------------
   DISCLAIMER
----------------------------------- */
.hero__disclaimer {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 40vw;
  max-width: 400px;
  pointer-events: none;
}

/* -----------------------------------
   SOCIAL BUTTONS
----------------------------------- */
.hero__social {
  position: absolute;
  opacity: 0.85;
  transition: transform .2s ease, opacity .2s ease;
}
.hero__social img {
  display: block;
  width: 100%;
}
.hero__social:hover,
.hero__social:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.hero__twitter { left: 28.22%; top: 43.55%; width: 17.23%; }
.hero__dex     { left: 48.92%; top: 42.29%; width: 13.12%; }
.hero__telegram{ left: 65.58%; top: 44.41%; width: 10.80%; }

/* -----------------------------------
   HOW TO BUY Header (ht.png)
----------------------------------- */
.hero__ht {
  position: absolute;
  left: 34.41%;    /* 873px / 2538px */
  top: 61.38%;     /* 4313px / 7027px */
  width: 32%;      /* 812px / 2538px */
  max-width: 812px;
  height: auto;
  pointer-events: none;
}

/* -----------------------------------
   SLIDER (zentriert)
----------------------------------- */
.slider {
  position: absolute;
  width: 34.08%;          /* 865px / 2538px */
  max-width: 865px;
  top: 63.73%;            /* 4479px / 7027px */
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
}
.slides-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.slide { display: none; max-width: 100%; max-height: 100%; }
.slide.active { display: block; }

/* -----------------------------------
   SLIDER-PFEILE (weit außerhalb)
----------------------------------- */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
  z-index: 10;
  transition: transform .2s ease, opacity .2s ease;
}
.slider-btn img {
  display: block;
  width: 32px;
  height: auto;
  transition: transform .2s ease, opacity .2s ease;
}
.slider-btn:hover,
.slider-btn:hover img {
  transform: scale(1.1);
  opacity: 1;
}
.slider-btn.prev { left: -25%; }
.slider-btn.next { right: -25%; }

/* -----------------------------------
   SCROLL-DOWN BUTTON (fixed)
----------------------------------- */
.scroll-down {
  position: fixed;
  bottom: 2vh;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  font-size: 2.5rem;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  animation: bounce 2s infinite;
  z-index: 999;
}
.scroll-down:hover { color: white; }
@keyframes bounce {
  0%,20%,50%,80%,100% { transform: translate(-50%, 0); }
  40%                { transform: translate(-50%, -10px); }
  60%                { transform: translate(-50%, -5px); }
}

/* -----------------------------------
   KEYFRAMES
----------------------------------- */
@keyframes fadeInExp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -----------------------------------
   OPTIONAL RESPONSIVE
----------------------------------- */
@media (max-width: 1024px) { .slider { width: 40vw; } }
@media (max-width: 768px)  { .slider { width: 60vw; } }

/* -----------------------------------
   SITE-WIDE NOISE OVERLAY
----------------------------------- */
body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../img/noise.png") repeat;
  opacity: 0.25;
  z-index: 9999;
  mix-blend-mode: overlay;
  animation: noiseAnim 0.02s steps(1) infinite;
}

@keyframes noiseAnim {
  0%   { background-position:   0   0; }
  10%  { background-position:  64px  32px; }
  20%  { background-position: -32px -16px; }
  30%  { background-position:  16px -48px; }
  40%  { background-position: -48px  48px; }
  50%  { background-position:  32px -32px; }
  60%  { background-position: -16px  16px; }
  70%  { background-position:  48px -64px; }
  80%  { background-position: -64px  64px; }
  90%  { background-position:  24px  -8px; }
  100% { background-position:   0    0; }
}

/* -----------------------------------
   LOGO + SUBTITLE CONTAINER
----------------------------------- */
.hero__logo-container {
  position: absolute;
  top: 14.28%;               /* wie dein hero__logo */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;     /* falls du Hover-Effekte für darunter liegende Elemente brauchst */
}

/* Subtitle direkt unter dem Logo */
.hero__subtitle {
  /* entfernt pointer-events:none; */
  pointer-events: auto;
  cursor: pointer;
  margin-top: 0.5rem;
  color: #302101;
  font-weight: 700;
  font-size: clamp(1rem, 4vw, 2rem);
  line-height: 1.2;
  white-space: nowrap;
  position: relative; /* für späteren Toast */
}

/* kleine Feedback‑Meldung */
.copy-feedback {
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.9);
  color: #000;
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: fade-in-out 1s forwards;
}

@keyframes fade-in-out {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}