/* danke-recap.css (responsive) */
:root{
  --recap-base-w: 680px;
  --recap-base-h: 420px;
  --recap-mid-scale: 0.7;            /* 1200px -> 900px: auf halbe Groesse */
  --frontal-mobile-scale: 0.55;       /* <900px: frontal.png auf 50% */
}

/* Absoluter Rahmen (Desktop) */
#danke{ position: relative; }
#danke .recap-wrap{
  position: absolute;
  z-index: 5;
  width: var(--recap-base-w);
  height: var(--recap-base-h);
  left: 24px; top: 32px; /* werden durch JS ueberschrieben */
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
}
#danke #recap-slideshow{ width:100%; height:100%; }
#danke #recap-slideshow .recap-img{
  width: 100%; height: 100%; display:block;
  object-fit: cover;
  opacity: 0; transition: opacity .5s ease;
}
#danke #recap-slideshow .recap-img.recap-fade-in{ opacity: 1; }

/* Mid-Range: 1200px bis 900px -> halbe Groesse */
@media (max-width: 1200px) and (min-width: 901px){
  #danke .recap-wrap{
    width: calc(var(--recap-base-w) * var(--recap-mid-scale));
    height: calc(var(--recap-base-h) * var(--recap-mid-scale));
  }
}

/* Mobile: <900px -> relative, zentriert; frontal.png skaliert */
@media (max-width: 900px){
  #danke .recap-wrap{
    position: relative;
    width: min(92vw, 560px);
    height: calc(min(92vw, 560px) * 0.62);
    left: auto; top: auto;
    margin: 30px auto 40px;
  }
  /* frontal.png halb so gross, von unten rechts skalieren */
  .thanks-figure img,
  img[src*="frontal"]{
    transform: scale(var(--frontal-mobile-scale));
    transform-origin: bottom right;
  }
}