.pf-sm{position:relative;width:100%;}
.pf-sm-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;width:100%;}
.pf-sm-sticky--top{align-items:flex-start;}
.pf-sm-sticky--middle{align-items:center;}
.pf-sm-sticky--bottom{align-items:flex-end;}
.pf-sm-sticky--off{position:relative;top:auto;height:auto;display:block;}
/* Auto-Höhe: Sticky-Container passt sich der gerenderten Bild-/Canvas-Höhe an.
   Die Sticky-Position (oben/mitte/unten) wird über CSS-Variablen aus JS gesetzt,
   weil wir dafür die tatsächliche Renderhöhe im Frontend benötigen. */
.pf-sm.pf-sm-auto-height .pf-sm-sticky{height:var(--pf-sm-img-h, auto);display:block;top:var(--pf-sm-sticky-top, 0px);}
.pf-sm-img{width:100%;height:100%;display:block;object-fit:var(--pf-sm-fit,cover);object-position:var(--pf-sm-align,center center);}
.pf-sm.pf-sm-auto-height .pf-sm-img{height:auto;}
.pf-sm-canvas{width:100%;height:100%;display:none;}
.pf-sm.pf-sm-is-canvas .pf-sm-img{display:none;}
.pf-sm.pf-sm-is-canvas .pf-sm-canvas{display:block;}
.pf-sm-spacer{width:100%;}
.pf-sm-error{padding:10px;border:1px solid #cc0000;background:#ffecec;color:#660000;font-size:14px;}
.pf-sm-warning{padding:10px;border:1px solid #d1a700;background:#fff7d6;color:#6b5200;font-size:14px;margin-bottom:10px;}

@media (max-width: 768px){
  .pf-sm.pf-sm-mobile-disable .pf-sm-sticky{position:relative;height:auto;}
  .pf-sm.pf-sm-mobile-disable .pf-sm-spacer{display:none;}
  .pf-sm.pf-sm-mobile-disable .pf-sm-img{height:auto;}
}