/* Effektgruppe: images/blob; Reihenfolge in inc/assets.php. */
figure.blob {
    position: relative;
    display: block;
    overflow: visible !important;
    touch-action: pan-y;
    width: 100%;
  }
  
  figure.blob:active {
    cursor: grabbing;
  }
  
  /* Kadence-Wrapper auf echtes Quadrat ohne Padding-Hacks zwingen */
  figure.blob .kb-is-ratio-image {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; 
    height: auto !important;
    padding-bottom: 0 !important; 
    overflow: visible !important;
  }
  
  /* Original-Bild unsichtbar machen, aber im DOM lassen (damit Kadence das Layout hält) */
  figure.blob img,
  figure.blob .kb-is-ratio-image img {
    opacity: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Das SVG passgenau drüberlegen */
  figure.blob svg.dynamic-blob {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; 
    display: block !important;
    overflow: visible !important;
    z-index: 2;
  }
  
  /* Verhindert, dass Pfade oder das Image Maus-Events abfangen (Pointermove geht auf das Figure-Element) */
  figure.blob svg.dynamic-blob path,
  figure.blob svg.dynamic-blob image {
    pointer-events: none;
  }
  
  /* Die animierte Outline */
  .blob-outline {
    fill: none;
    stroke: #000000; /* Falls gewünscht, hier die Branding-Farbe (z.B. #529547) eintragen */
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke; /* Verhindert, dass die Linie beim Morphen dicker/dünner wird */
  }