/* ------------------------------------------------------------- 18/01/2024 - *
   .secPanoImage
  <section class="secPanoImage | -maxwidth2500 | -marginauto | .-testr">        
    <picture class="-kenburns">
      <!-- background -->
      <style type="text/css">
                                   picture { background: url('//cdn.mdesign.at/set-wilma/-cdn-wilma/-testfiles/dummy-1024x269-1.webp') no-repeat 50% 50% / cover; }
      @media (min-width: 1024px) { picture { background: url('//cdn.mdesign.at/set-wilma/-cdn-wilma/-testfiles/dummy-1900x500-2.webp') no-repeat 50% 33% / cover; } }
      </style>

      <!-- img -->
      <!-- large --><source srcset="<?= $arrayImage['large']; ?>" media="(min-width: 1024px)">
      <!-- small --><img       src="<?= $arrayImage['small']; ?>" alt="">
    </picture>  

    <figcaption>
      <section style="font-size: calc(1.00rem + .5vw); max-width: 40ch;">
        <blockquote class="-quoted">LOREM <b class="-col-warn">IPSUM</b> <br>SUM <b>DOLORES</b> IGITUR</blockquote>
      </section>
    </figcaption>
  </section>
 * -------------------------------------------------------------------------- */
.secPanoImage {
//border: 1px solid Red;
  position: relative;  
  height: calc(100px + 30vh); /* default */
//height: calc(200px + 20vw);
  margin: auto;

  picture,
  video {
    display: block;
    height: 100%;
    width: 100%;    
  } /* picture */
  
  /* KenBurns Effekt */
           .-kenburns { animation: kenburns 15s ease infinite alternate; }
  @keyframes kenburns {
    backface-visibility: hidden;
    perspective: 1000;    
      0% { transform: scale3d(1.0, 1.0, 1.0) translate3d(0, 0, 0); transform-origin: top right; }
    100% { transform: scale3d(1.2, 1.2, 1.2) translate3d(0, 0, 0); }
  } /* @keyframe */
  
//picture { @extend .-kenburns; } /* Test */
} /* secPanoImage */



/* ---------------------------------- *
   .secPanoImage figcaption
 * ---------------------------------- */
.secPanoImage figcaption {
//border: 2px solid red;
  position: absolute;
  top: 0; /* 60px Platz für gmaps mapTypeControl LEFT_TOP */
  bottom: 0;
  right: 0;
      width:  100%;
  max-width:  800px;
  max-height: 100%;  
//max-height: calc(100% - 80px); /* für erreichbare controls video */  
  text-align: right;
  background: linear-gradient(to left, rgba(Black,.5) 0%, transparent 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  
  > * {
  //font-size: calc(1.00rem + .5vw); /* gib das inline an */
  //border: 1px dashed DeepPink;
    z-index: 10;
    position: absolute;
    right: .5em;  
    bottom: 10%;
    max-height: 90%;
    max-width: 80%;
    margin: calc(.5em + .5vw) 1em;
    color: White;
    text-shadow: 1px -1px 1px rgba(Black, .5);
    overflow: hidden;

    > * { margin: 0; }    

    a { 
      color: inherit;
      text-decoration: underline;      
    } /* a */

    p:last-child { margin-bottom: 0; }                  
  } /* Text */
} /* .secPanoImage figcaption */



/* ---------------------------------- *
   .secPanoImage .b-button-cliped
 * ---------------------------------- */
.secPanoImage .b-button-cliped {  
  z-index: 10;
  position: absolute;
  top: 0;
  right: 5%;
  padding: 1em 3em 1.5em 3em;
  text-align: center;
  line-height: 1.25;
  border-top: 4px solid rgba(Black,.8);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 10% 92%);

  &.-align-left { 
    right: auto;
    left: 5%; 
  }

  h2, h3, h4 { 
  //font-size: calc(12px + .25vw);
    margin: 0; 
    transition: .5s;

    u { 
      text-decoration: none; 
      &:after {
        display: block;
        content: ''; 
        width: 25%;
        margin: .25em auto;
        border-bottom: 4px solid;
      } /* b */      
    } /* u */
  } /* h3 */

  &:hover {
    a { text-decoration: none; }
    h3 { transform: scale(1.10); }
  }
} /* .secPanoImage .b-button-cliped */