/* thanks-wave.css (v5) – mobile position knobs for frontal.png
   - Full-bleed wave
   - Plain PNG button (clickable)
   - Lifts for name/email and image
   - NEW: under 900px, shift frontal.png right/down via variables
*/

#danke{ position: relative; z-index:1; overflow:visible; }

:root{
  /* Wave + lifts (wie gehabt) */
  --danke-wave-height: 140px;
  --danke-figure-lift: calc(var(--danke-wave-height) - 50px);
  --danke-text-lift: 96px;

  /* Wave button */
  --wave-button-size: 60px;
  --wave-button-top: 20px;

  /* Wellen-Fuss ausduennen (Footer rutscht mit) */
  --wave-base-crop: 0px;
  --wave-shift: 0px;

  /* NEW: Mobile-Offsets fuer frontal.png */
  --frontal-mobile-right: -70px;  /* +wert => weiter nach rechts */
  --frontal-mobile-down:  20px;  /* +wert => weiter nach unten (Richtung Wellenkante) */
}

/* Wave container: full viewport width, anchored at section bottom */
.shape-divider.thanks-wave{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  bottom: 0;
  height: calc(var(--danke-wave-height) - var(--wave-base-crop));
  z-index: 30;
  pointer-events: auto;
  line-height: 0;
  overflow: hidden;
}
.shape-divider.thanks-wave svg{
  display:block; width:100%; height:100%;
  clip-path: inset(0 0 var(--wave-base-crop) 0);
  transform: translateY(calc(1px + var(--wave-shift)));
}
.shape-divider.thanks-wave path{ fill:#111111 !important; stroke:none !important; }

/* Footer flush to wave */
.shape-divider.thanks-wave + footer{ margin-top: 0 !important; border-top: 0 !important; }

/* Frontal image: anchored at bottom (desktop), behind wave, lifted */
.thanks-figure,
.thanks-figure img,
img[src*="frontal"]{
  position: absolute;
  right: 0;
  bottom: var(--danke-figure-lift);
  z-index: 10;
}

/* Name + email lifts */
.thanks-name,
.thanks-email{
  position: relative;
  transform: translateY(calc(-1 * var(--danke-text-lift)));
}
.thanks-inner{ padding-bottom: calc(var(--danke-wave-height) + 24px); }

/* Reveal animation for slideshow */
.reveal-up{ opacity:0; transform: translateY(24px); transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .6s ease; }
.reveal-up.is-inview{ opacity:1; transform: translateY(0); }

/* Center button (plain PNG), clickable */
.shape-divider.thanks-wave .wave-scrollup{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: var(--wave-button-top);
  width: var(--wave-button-size);
  height: var(--wave-button-size);
  display: block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 40;
  pointer-events: auto;
}
.shape-divider.thanks-wave .wave-scrollup img{
  width: 100%;
  height: 100%;
  display: block;
}

/* ===== Mobile overrides: reposition frontal.png under 900px ===== */
@media (max-width: 900px){
  .thanks-figure,
  .thanks-figure img,
  img[src*="frontal"]{
    right: var(--frontal-mobile-right);
    bottom: calc(var(--danke-figure-lift) - var(--frontal-mobile-down));
  }
}

:root{
  --thanks-text-right-mobile: 10px; /* Stellschraube */
}

@media (max-width: 900px){
  #danke .thanks-name,
  #danke .thanks-email{
    margin-left: var(--thanks-text-right-mobile);
  }
}